Circle Collision
This is a port of the "Circle Collision" example from processing.org/examples
This example uses vectors for better visualization of physical Quantity
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
class Ball {
constructor(x, y, r) {
this.position = new p5.Vector(x, y);
this.velocity = p5.Vector.random2D();
this.velocity.mult(3);
this.r = r;
this.m = r * 0.1;
}
update() {
this.position.add(this.velocity);
}
checkBoundaryCollision() {
if (this.position.x > width - this.r) {
this.position.x = width - this.r;
this.velocity.x *= -1;
} else if (this.position.x < this.r) {
this.position.x = this.r;
this.velocity.x *= -1;
} else if (this.position.y > height - this.r) {
this.position.y = height - this.r;
this.velocity.y *= -1;
} else if (this.position.y < this.r) {
this.position.y = this.r;
this.velocity.y *= -1;
}
}
checkCollision(other) {
// Get distances between the balls components
let distanceVect = p5.Vector.sub(other.position, this.position);
// Calculate magnitude of the vector separating the balls
let distanceVectMag = distanceVect.mag();
// Minimum distance before they are touching
let minDistance = this.r + other.r;
if (distanceVectMag < minDistance) {
let distanceCorrection = (minDistance - distanceVectMag) / 2.0;
let d = distanceVect.copy();
let correctionVector = d.normalize().mult(distanceCorrection);
other.position.add(correctionVector);
this.position.sub(correctionVector);
// get angle of distanceVect
let theta = distanceVect.heading();
// precalculate trig values
let sine = sin(theta);
let cosine = cos(theta);
/* bTemp will hold rotated ball this.positions. You
just need to worry about bTemp[1] this.position*/
let bTemp = [new p5.Vector(), new p5.Vector()];
/* this ball's this.position is relative to the other
so you can use the vector between them (bVect) as the
reference point in the rotation expressions.
bTemp[0].this.position.x and bTemp[0].this.position.y will initialize
automatically to 0.0, which is what you want
since b[1] will rotate around b[0] */
bTemp[1].x = cosine * distanceVect.x + sine * distanceVect.y;
bTemp[1].y = cosine * distanceVect.y - sine * distanceVect.x;
// rotate Temporary velocities
let vTemp = [new p5.Vector(), new p5.Vector()];
vTemp[0].x = cosine * this.velocity.x + sine * this.velocity.y;
vTemp[0].y = cosine * this.velocity.y - sine * this.velocity.x;
vTemp[1].x = cosine * other.velocity.x + sine * other.velocity.y;
vTemp[1].y = cosine * other.velocity.y - sine * other.velocity.x;
/* Now that velocities are rotated, you can use 1D
conservation of momentum equations to calculate
the final this.velocity along the x-axis. */
let vFinal = [new p5.Vector(), new p5.Vector()];
// final rotated this.velocity for b[0]
vFinal[0].x =
((this.m - other.m) * vTemp[0].x + 2 * other.m * vTemp[1].x) /
(this.m + other.m);
vFinal[0].y = vTemp[0].y;
// final rotated this.velocity for b[0]
vFinal[1].x =
((other.m - this.m) * vTemp[1].x + 2 * this.m * vTemp[0].x) /
(this.m + other.m);
vFinal[1].y = vTemp[1].y;
// hack to avoid clumping
bTemp[0].x += vFinal[0].x;
bTemp[1].x += vFinal[1].x;
/* Rotate ball this.positions and velocities back
Reverse signs in trig expressions to rotate
in the opposite direction */
// rotate balls
let bFinal = [new p5.Vector(), new p5.Vector()];
bFinal[0].x = cosine * bTemp[0].x - sine * bTemp[0].y;
bFinal[0].y = cosine * bTemp[0].y + sine * bTemp[0].x;
bFinal[1].x = cosine * bTemp[1].x - sine * bTemp[1].y;
bFinal[1].y = cosine * bTemp[1].y + sine * bTemp[1].x;
// update balls to screen this.position
other.position.x = this.position.x + bFinal[1].x;
other.position.y = this.position.y + bFinal[1].y;
this.position.add(bFinal[0]);
// update velocities
this.velocity.x = cosine * vFinal[0].x - sine * vFinal[0].y;
this.velocity.y = cosine * vFinal[0].y + sine * vFinal[0].x;
other.velocity.x = cosine * vFinal[1].x - sine * vFinal[1].y;
other.velocity.y = cosine * vFinal[1].y + sine * vFinal[1].x;
}
}
display() {
noStroke();
fill(204);
ellipse(this.position.x, this.position.y, this.r * 2, this.r * 2);
}
}
let balls = [new Ball(100, 400, 20), new Ball(700, 400, 80)];
console.log(balls);
function setup() {
createCanvas(710, 400);
}
function draw() {
background(51);
for (let i = 0; i < balls.length; i++) {
let b = balls[i];
b.update();
b.display();
b.checkBoundaryCollision();
balls[0].checkCollision(balls[1]);
}
}
