Stepping Feet Illusion
Stepping feet illusion is a very famous psychological experiment Both the bricks will appear to move at different speed even though they are moving at the same speed. Click the mouse inside Canvas to confirm that they are moving at the same speed. Contributed by Sagar Arora.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
// this class describes the structure
// and movements of the brick
class Brick{
constructor(bc, y){
this.brickColor = bc;
this.yPos = y;
this.xPos = 0;
}
// this function creates the brick
createBrick(){
fill(this.brickColor);
rect(this.xPos, this.yPos, 100, 50);
}
// this function sets the speed
// of movement of the brick to 1
setSpeed(){
this.xSpeed = 1;
}
// this function sets the bricks in motion
moveBrick(){
this.xPos+=this.xSpeed;
if(this.xPos+100 >= width || this.xPos <= 0){
this.xSpeed*=-1;
}
}
}
function setup() {
createCanvas(720, 400);
createP("Keep the mouse clicked").style('color','#ffffff');
createP("to check whether the bricks").style('color','#ffffff');
createP("are moving at same speed or not").style('color','#ffffff');
}
// creating two bricks of
// colors white and black
let brick1 = new Brick("white",100);
let brick2 = new Brick("black",250);
// This function sets speed of
// brick 1 and brick2 to 1.
brick1.setSpeed();
brick2.setSpeed();
function draw () {
background(0);
if(mouseIsPressed){
background(50);
}
brick1.createBrick();
brick1.moveBrick();
if(!mouseIsPressed){
createBars();
}
brick2.createBrick();
brick2.moveBrick();
}
// this function creates the black and
// white bars across the screen
function createBars() {
let len = 12;
for(let i = 0;i<width/len;i++){
fill("white");
if(i%2 === 0)
rect(i*len,height,len,-height);
}
}
