[kroltan]

A plea to anyone who wants to do that, I would highly recommend running that kind of thing on the GPU! Looping through all those pixels every frame is ought to hog a lot of UI thread time otherwise, especially with big resolutions!

[zokier]

very basic shadertoy shader in the spirit of the article:

    void mainImage( out vec4 fragColor, in vec2 fragCoord )
    {
        vec2 center = iMouse.xy/iResolution.xy;
        float aspect = iResolution.x/iResolution.y;
        vec2 uv = fragCoord/iResolution.xy;
        uv.x *= aspect;
        center.x *= aspect;
        float r = distance(uv, center);
        float h = (sin((r*50.0)-(iTime*2.0))+1.0)/2.0;
        h *= 1.0 - min(1.0, r);
        fragColor = vec4(h,h,h,1.0);
    }

[tomxor]

It's also not necessary to do such high resolutions to get smooth result with this animation due to the nature of the image. Interpolation is much faster based on a low res version, especially the hardware accelerated smooth interpolation built into the browser for canvas. My example in this thread is only 64x64 pixels but you can zoom in as much as you like and it remains fast and smooth.

[geuis]

Good follow up article would be an intro to shaders, where you take the work from pixel looping and move it to shaders.