Shake Ball Bounce
Create a Ball class, instantiate multiple objects, move it around the screen, and bounce when touch the edge of the canvas. Detect shake event based on total change in accelerationX and accelerationY and speed up or slow down objects based on detection.
Open this page on a mobile device to display the sketch.
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
let balls = [];
let threshold = 30;
let accChangeX = 0;
let accChangeY = 0;
let accChangeT = 0;
function setup() {
createCanvas(displayWidth, displayHeight);
for (let i = 0; i < 20; i++) {
balls.push(new Ball());
}
}
function draw() {
background(0);
for (let i = 0; i < balls.length; i++) {
balls[i].move();
balls[i].display();
}
checkForShake();
}
function checkForShake() {
// Calculate total change in accelerationX and accelerationY
accChangeX = abs(accelerationX - pAccelerationX);
accChangeY = abs(accelerationY - pAccelerationY);
accChangeT = accChangeX + accChangeY;
// If shake
if (accChangeT >= threshold) {
for (let i = 0; i < balls.length; i++) {
balls[i].shake();
balls[i].turn();
}
}
// If not shake
else {
for (let i = 0; i < balls.length; i++) {
balls[i].stopShake();
balls[i].turn();
balls[i].move();
}
}
}
// Ball class
class Ball {
constructor() {
this.x = random(width);
this.y = random(height);
this.diameter = random(10, 30);
this.xspeed = random(-2, 2);
this.yspeed = random(-2, 2);
this.oxspeed = this.xspeed;
this.oyspeed = this.yspeed;
this.direction = 0.7;
}
move() {
this.x += this.xspeed * this.direction;
this.y += this.yspeed * this.direction;
}
// Bounce when touch the edge of the canvas
turn() {
if (this.x < 0) {
this.x = 0;
this.direction = -this.direction;
} else if (this.y < 0) {
this.y = 0;
this.direction = -this.direction;
} else if (this.x > width - 20) {
this.x = width - 20;
this.direction = -this.direction;
} else if (this.y > height - 20) {
this.y = height - 20;
this.direction = -this.direction;
}
}
// Add to xspeed and yspeed based on
// the change in accelerationX value
shake() {
this.xspeed += random(5, accChangeX / 3);
this.yspeed += random(5, accChangeX / 3);
}
// Gradually slows down
stopShake() {
if (this.xspeed > this.oxspeed) {
this.xspeed -= 0.6;
} else {
this.xspeed = this.oxspeed;
}
if (this.yspeed > this.oyspeed) {
this.yspeed -= 0.6;
} else {
this.yspeed = this.oyspeed;
}
}
display() {
ellipse(this.x, this.y, this.diameter, this.diameter);
}
}
