-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (132 loc) · 5.45 KB
/
index.html
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
<html>
<head>
<title>Ball bounce physics</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<link rel="stylesheet" href="style.scss" />
</head>
<body>
<div id="article" class="article">
<h1>Ball bounce physics</h1>
<p>
In this article I am discussing a possible aproach on how to implement a
collision detection and bounce beaviour of a 2D circular moving object
on other static objects.<br /><br />
You will also find interactive examples and a link to the source code.
</p>
<div class="interactive-example" id="result"></div>
<span> Fig. 1 </span>
<h2>The problem</h2>
<p>
Imagine you are writing a simulation or a game that involves some kind
of ball physics, like Pinball or Pachinko. <br />
<br />
I'm assuming that the simulation involves a cycle of update of the ball
position depending on velocity and position of the previous state (like
a
<a
href="https://en.wikipedia.org/wiki/Verlet_integration#Algorithmic_representation"
target="blank"
>Verlet integration</a
>).
<br />
<br />
So you have a ball object that on a certain moment t_n is located in A
and on t_(n+1) is in B. <br />
<br />
</p>
<div class="interactive-example" id="movingBall"></div>
<span> Fig. 2 </span>
<p>
What may happen is that at a certain point the next state of the ball is
going to collide with another object (like a peg for example). <br />
<br />
In this case we will consider a collision with a static ball (i.e. that
won't move) centered in C.
</p>
<div class="interactive-example" id="circleLineIntersection"></div>
<span> Fig. 3 </span>
<p>
At this point we might want to find a new not colliding state for our
moving ball by detecting the collision and calculating a bounce
behaviour.
<br />
<br />
This means we want to find the new position for the ball and new
direction away from the object that caused the collision. <br /><br />
So how do we do it?
</p>
<div class="interactive-example" id="theProblem"></div>
<span> Fig. 4 </span>
<h2>The simplified problem</h2>
<p>
First of all. How do we find out if the next state is colliding? <br />
<br />
That's pretty simple. We can just see of the distance between the center
of our ball in the next state is colliding with the static object.
<br />
<br />
If the distance is less than the sum of the radii then it's colliding,
otherwise it is not.
</p>
<div class="interactive-example" id="collisionDetection"></div>
<span> Fig. 5 </span>
<p>
Now that we have discovered a collision how do we implement a bounce
effect? <br />
<br />
That might sound complicated having two circular objects. You may say
that the moving ball should stop at the point it touches the other ball,
then bounce back. But how do we find where it should stop? Let's try a
simpler aproach. <br />
<br />
We might notice that the collision detection is the same that we would
obtain by calculating the moving effect of a single point colliding with
a ball of radius equal to the sum of the radii of the two balls.
</p>
<div class="interactive-example" id="collisionDetectionSingleBall"></div>
<span> Fig. 6 </span>
<p class="note">
<b>NOTE</b> <br />
By using this collision detection algorythm we will not detect a
collision in case the line segment AB (trajectory of our ball)
intersects the the colliding object and B is not in a colliding
position. We are just going to ignore this case, but you might use a
different aproach if you want to avoid this problem by calculating the
interseciton point between the segment and the ball (that might be more
demanding in terms of total computations).
</p>
<p>
Likely the point of collision is where the segment AB intersects the
ball cenetered in C with radius equal to the sum of the radii.
</p>
<div class="interactive-example" id="pointOfIntersection"></div>
<h2>Concolusion</h2>
<p>
At this point we just need to calculate the reflection of the segment
P1B on the tangent line of the ball on P1. <br /><br />
That means that we need to find the symmetric point of B on the tangent
line.
</p>
<div class="interactive-example" id="pointOfCollision"></div>
<span> Fig. 7 </span>
<p>
And so we found B1. <br />
<br />
We can also calculate the new direction for the ball. That is B1 - P1.
</p>
<h2>Source code and more</h2>
<p>
Source code of the examples can be found here 👉
<a href="https://github.com/crcarlo/ball-bounce-physics"
>github.com/crcarlo/ball-bounce-physics</a
>. <br /><br />
For any questions or suggestions you can open an issue here 👉
<a href="https://github.com/crcarlo/ball-bounce-physics/issues"
>github.com/crcarlo/ball-bounce-physics/issues</a
>
</p>
</div>
<script src="src/index.ts"></script>
</body>
</html>