Motion Binding Illusion

An example of the Motion Binding Illusion.

The below animation looks like it is four lines moving but is actually one square moving in a circle! You can see for yourself by hovering over the animation and holding down your left mouse button

And here is the code:


    
let x = 200;
let y = 200;
let t = 0
  
function setup() {
  createCanvas(400, 400);
  rectMode(CENTER);
}

function draw() {
    background(255);
    strokeWeight(10);
    stroke('blue');
    
    x = 200 + 10 * cos(t);
    y = 200 + 10 * sin(t);
  
    rect(x,y,100,100);
  	if(!mouseIsPressed){
    noStroke();
    fill(255);
    rect(150,150, 50,50);
    rect(250,150, 50, 50);
    rect(150,250, 50, 50);
    rect(250, 250, 50, 50);
    }
    

Comments

Popular posts from this blog

A Trip to Glastonbury

A Winter's Sunset on Aberdyfi Beach

A 1970s Retro Computer Graphics Effect