← Back to context

Comment by mxfh

9 years ago

I don't know either, was more of an accident and I ran for it. But I'll try:

Manipulating the canvas Imagedata TypedArray is usually faster than draw calls like fillRect; yet the getImagadata-setImagedata and 2D-Y-X-iteration (here ij) fluff doesn't leave much bytes for actual per pixel operations.

    (i*w+j)*4+3 // is the alpha channel (offset of 3) index of the pixel in the Imagedata

The actual payload:

    (i-j&j+i)*t%w

Translates to

    (y - x & x + y) * time % 256

With 255 resulting in Black rgba(0,0,0,1) to transparent black rgba(0,0,0,0), which is then effectively viewed as background color, in this case white.

see https://www.dwitter.net/d/661 for an earlier full RGBA example

Before WebGL this was the fastest way to get stuff done in the canvas: https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipu...