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
Post a Comment