motion-induced blindness

a fascinating illusion. stare at the green dot for a bit.
more info here https://en.wikipedia.org/wiki/Motion-induced_blindness

this is just a remake of the wikipedia gif animation, but with the javascript code and its variables/settings it is open for experimentation.

<div style="background-color:black;">
<canvas id="can" width="600" height="600"></canvas>
<script>
//motion-induced blindness after https://en.wikipedia.org/wiki/Motion-induced_blindness
var rotationRate= 0.1;  //rps
var blinkRate= 2.5;  //Hz
var numCrosses= 7;
var numDots= 3;
var dotRadius= 5;
var crossWidth= 0.1;  //percent
var crossWeight= 3;
var colorBackground= '#000';
var colorCrosses= '#00F';
var colorCenter= '#0F0';
var colorDots= '#FF0';
var can, ctx;
(function() {
    can= document.getElementById('can');
    ctx= can.getContext('2d');
    window.requestAnimationFrame(draw);
})();
function draw() {
    var w2= can.width*0.5;
    var h2= can.height*0.5;
    var uw= can.width/3;

    ctx.fillStyle= colorBackground;
    ctx.fillRect(0, 0, can.width, can.height);

    //--crosses
    ctx.save();
    ctx.translate(w2, h2);
    ctx.lineWidth= crossWeight;
    ctx.strokeStyle= colorCrosses;
    ctx.rotate(Date.now()/1000*Math.PI*2*rotationRate%(Math.PI*2));
    ctx.beginPath();
    for(var i= 0; i<numCrosses; i++) {
        var y= i*(uw*2)/(numCrosses-1)-uw;
        for(var j= 0; j<numCrosses; j++) {
            var x= j*(uw*2)/(numCrosses-1)-uw;
            ctx.moveTo(x-(crossWidth*uw), y);
            ctx.lineTo(x+(crossWidth*uw), y);
            ctx.moveTo(x, y-(crossWidth*uw));
            ctx.lineTo(x, y+(crossWidth*uw));
        }
    }
    ctx.stroke();
    ctx.restore();

    //--center
    if ((Date.now()/1000*blinkRate)%1>0.5) {
        ctx.beginPath();
        ctx.fillStyle= colorCenter;
        ctx.ellipse(w2, h2, dotRadius, dotRadius, 0, 0, Math.PI*2);
        ctx.fill();
    }

    //--dots
    ctx.save();
    ctx.translate(w2, h2);
    ctx.fillStyle= colorDots;
    ctx.rotate(0.5*Math.PI);
    for (var i= 0; i<numDots; i++) {
        ctx.beginPath();
        ctx.ellipse(can.width/4, 0, dotRadius, dotRadius, 0, 0, Math.PI*2);
        ctx.fill();
        ctx.rotate(Math.PI*2/numDots);
    }
    ctx.restore();

    window.requestAnimationFrame(draw);
}
</script>
</div>

also attached is the same code ported to processing and supercollider.

AttachmentSize
Binary Data processing1.39 KB
Binary Data supercollider1.57 KB