Bounce
When the shape hits the edge of the window, it reverses its direction.
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
let rad = 60; // Width of the shape
let xpos, ypos; // Starting position of shape
let xspeed = 2.8; // Speed of the shape
let yspeed = 2.2; // Speed of the shape
let xdirection = 1; // Left or Right
let ydirection = 1; // Top to Bottom
function setup() {
createCanvas(720, 400);
noStroke();
frameRate(30);
ellipseMode(RADIUS);
// Set the starting position of the shape
xpos = width / 2;
ypos = height / 2;
}
function draw() {
background(102);
// Update the position of the shape
xpos = xpos + xspeed * xdirection;
ypos = ypos + yspeed * ydirection;
// Test to see if the shape exceeds the boundaries of the screen
// If it does, reverse its direction by multiplying by -1
if (xpos > width - rad || xpos < rad) {
xdirection *= -1;
}
if (ypos > height - rad || ypos < rad) {
ydirection *= -1;
}
// Draw the shape
ellipse(xpos, ypos, rad, rad);
}
