Skip to content

Commit

Permalink
removed redundant file
Browse files Browse the repository at this point in the history
  • Loading branch information
@BurntWaffleCake
BurntWaffleCake committed Dec 30, 2023
1 parent a263c89 commit edccfff
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 28 deletions.
93 changes: 68 additions & 25 deletions projects/Physics/BallCollision/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../../../styles/articlestylesheet.css" />
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script
id="MathJax-script"
async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
></script>
</head>

<style>
.image-holder {
max-width: 100%;

}

.image-holder img {
Expand All @@ -37,7 +40,10 @@
</style>

<body>
<object id="global-nav-object" data="../../../articleTemplateObjects/articleGlobalNavObject.html"></object>
<object
id="global-nav-object"
data="../../../articleTemplateObjects/articleGlobalNavObject.html"
></object>

<div id="article-body">
<object data="../../../articleTemplateObjects/physicsEngineArticleNavObject.html"></object>
Expand All @@ -49,18 +55,26 @@ <h1>Ball Collision</h1>

<h2>What is Ball Collision?</h2>
<p>
Ball Collision (or in this case circle collision as we are going to mostly be in 2d), is a way of detecting the overlap or collision of two ball objects. This can very simply be done using
certain properties that each ball holds along with relational data between said balls.
Ball Collision (or in this case circle collision as we are going to mostly be in 2d), is a
way of detecting the overlap or collision of two ball objects. This can very simply be
done using certain properties that each ball holds along with relational data between said
balls.
</p>

<h3>Point In Circle Algorithm</h3>
<p>
From this point forward we will reference balls as circles however the mathematics can be applied to higher dimensions such as with spheres. We can define a circle as an enclosed geometry
which has an infinite number of definable points each a distance of its radius from its center. As such, we can know that a point lies inside of a circle if its distance from the center of
said circle is less than the radius and on the surface of the circle if the distance is equal to the circle's radius.
From this point forward we will reference balls as circles however the mathematics can be
applied to higher dimensions such as with spheres. We can define a circle as an enclosed
geometry which has an infinite number of definable points each a distance of its radius
from its center. As such, we can know that a point lies inside of a circle if its distance
from the center of said circle is less than the radius and on the surface of the circle if
the distance is equal to the circle's radius.
</p>

<p class="equation">\( \vec{d} = \begin{vmatrix} x_{circle} - x_{point} \\ y_{circle} - y_{point} \end{vmatrix} \) <br /></p>
<p class="equation">
\( \vec{d} = \begin{vmatrix} x_{circle} - x_{point} \\ y_{circle} - y_{point}
\end{vmatrix} \) <br />
</p>
<p class="equation">\( |\vec{d}| = \sqrt{ {\vec{d}_x}^2 + {\vec{d}_y}^2 } \) <br /></p>
<p class="equation">\( l_{distance} = |\vec{d}| \)</p>
<p class="equation">Point is in circle when: \( l_{distance} < r_{radius}\)</p>
Expand All @@ -71,9 +85,13 @@ <h3>Point In Circle Algorithm</h3>

<h3>Circle To Circle Collision Detection Algorithm</h3>
<p>
We now know that a point is in a circle if the distance between the point and the center of the circle is less than the circle's radius. Using this relationship and the fact that all points
on a circle is exactly the distance of the circle's radius from its center, we can deduce that the if the distance between the two circles is less than sum of two circle's radii, they are
colliding. We can in turn calculate the overlap or "depth" of the collision by subtracting the distance from the sum of radii giving us the overlap magnitude.
We now know that a point is in a circle if the distance between the point and the center
of the circle is less than the circle's radius. Using this relationship and the fact that
all points on a circle is exactly the distance of the circle's radius from its center, we
can deduce that the if the distance between the two circles is less than sum of two
circle's radii, they are colliding. We can in turn calculate the overlap or "depth" of the
collision by subtracting the distance from the sum of radii giving us the overlap
magnitude.
</p>
<p>Where \(a\) and \(b\) are circles:</p>
<p class="equation">\( r_{sum} = r_a + r_b\)</p>
Expand All @@ -87,10 +105,14 @@ <h3>Circle To Circle Collision Detection Algorithm</h3>

<h3>Collision Response</h3>
<p>
A collision response occurs after a collision is detected and is used to change certain attributes regarding each of the circles. For example, we could make the circles bounce off of one
another when the collision occurs. In this article, we will only consider a simplified collision response meaning momentum will not be accurately represented. To properly position each of
the circles, we can use the depth that we found previously scaled along the position delta vector to offset each of the circles equally. Each circle is offset with a magnitude half of the
depth as we want to move each circle and equal distance apart.
A collision response occurs after a collision is detected and is used to change certain
attributes regarding each of the circles. For example, we could make the circles bounce
off of one another when the collision occurs. In this article, we will only consider a
simplified collision response meaning momentum will not be accurately represented. To
properly position each of the circles, we can use the depth that we found previously
scaled along the position delta vector to offset each of the circles equally. Each circle
is offset with a magnitude half of the depth as we want to move each circle and equal
distance apart.
</p>
<p class="equation">\( \vec{d} = \vec{b_{pos}} - \vec{a_{pos}} \)</p>
<p class="equation">\( \hat{d} = \frac{\vec{d}}{|\vec{d}|} \)</p>
Expand All @@ -104,13 +126,20 @@ <h3>Collision Response</h3>
<code style="text-align: center">Placeholder Diagram</code>

<p>
Notice the fact that the offset / delta vector we used to move the circles are perpendicular to the tangent line of the point the offset vector's axis intersects. The unit vector of this
offset is the same as the "normal" vector that faces towards the opposing circle thus defining a "normal" vector as one that lays perpendicular to a face. Also notice that there are two
vectors that are similar to our offset vector: the one we just defined and one that lays on the opposite side of the collision (just with a inverse or opposing direction). This property of
offsetting by the normals and parallel normals and faces will be used later on during collision detection between polygons.
Notice the fact that the offset / delta vector we used to move the circles are
perpendicular to the tangent line of the point the offset vector's axis intersects. The
unit vector of this offset is the same as the "normal" vector that faces towards the
opposing circle thus defining a "normal" vector as one that lays perpendicular to a face.
Also notice that there are two vectors that are similar to our offset vector: the one we
just defined and one that lays on the opposite side of the collision (just with a inverse
or opposing direction). This property of offsetting by the normals and parallel normals
and faces will be used later on during collision detection between polygons.
</p>
<h2>Simulation</h2>
<p>Using the math previously described, we can make a physics simulation to describe collision detection and response.</p>
<p>
Using the math previously described, we can make a physics simulation to describe
collision detection and response.
</p>
<br />
<p>Click to spawn in balls</p>
<p
Expand All @@ -119,15 +148,29 @@ <h2>Simulation</h2>
data-default-tab="html,result"
data-slug-hash="wvNPYGK"
data-user="WaffleCake-the-decoder"
style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em"
style="
height: 300px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid;
margin: 1em 0;
padding: 1em;
"
>
<span
>See the Pen <a href="https://codepen.io/WaffleCake-the-decoder/pen/wvNPYGK"> Untitled</a> by WaffleCake (<a href="https://codepen.io/WaffleCake-the-decoder">@WaffleCake-the-decoder</a>)
on <a href="https://codepen.io">CodePen</a>.</span
>See the Pen
<a href="https://codepen.io/WaffleCake-the-decoder/pen/wvNPYGK"> Untitled</a> by
WaffleCake (<a href="https://codepen.io/WaffleCake-the-decoder"
>@WaffleCake-the-decoder</a
>) on <a href="https://codepen.io">CodePen</a>.</span
>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<a href="./vectorBall/index.html" target="_blank" style="color: white">Click to open in new tab</a>
<a href="./vectorBall/index.html" target="_blank" style="color: white"
>Click to open in new tab</a
>
</article>

<div class="vertical-divider"></div>
Expand Down
2 changes: 0 additions & 2 deletions projects/Physics/BallCollisionOptimization/article.txt
View file

This file was deleted.

1 change: 0 additions & 1 deletion projects/Physics/BoxCollision/AABBCollision
Submodule AABBCollision deleted from 4c8a4f

0 comments on commit edccfff

Please sign in to comment.