motion-induced blindness
Submitted by f0 on
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>
<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.
| Attachment | Size |
|---|---|
 processing | 1.39 KB |
| supercollider | 1.57 KB |
