Comment by Retr0spectrum

9 years ago

How do I link to a specific post?

This one by mxfh looks very cool:

    d=x.getImageData(0,0,w=c.width=256,h=144);for(i=0;i<h;i++)for(j=0;j<w;j++)d.data[(i*w+j)*4+3]=(i-j&j+i)*t%w;x.putImageData(d,0,0)

Does anyone know how it works?

3 comments

Retr0spectrum

Smerity 9 years ago

There's a share button on each of the "tweets" at least on my screen.

The direct link to the Sierpinski triangle inspired animation you're noting is below:

https://www.dwitter.net/d/676

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...