Updating roadmap, and getting started on SAT collisions

12 files changed, 110 insertions, 30 deletions

diff --git a/2d/_collisions/polygon_polygon.html b/2d/_collisions/polygon_polygon.html
index 23658ce..ce26f62 100644
--- a/2d/_collisions/polygon_polygon.html
+++ b/2d/_collisions/polygon_polygon.html
@@ -26,7 +26,7 @@
 					<li><label>Collisions</label></li>
 					<li><a title="/2d/_collisions/rectangle_line.html" href="/2d/_collisions/rectangle_line.html">Rectangle-Line</a></li>
 					<li><a title="/2d/_collisions/rectangle_rectangle.html" href="/2d/_collisions/rectangle_rectangle.html">Rectangle-Rectangle</a></li>
-					<li><a title="/2d/_collisions/polygon_polygon.html" href="/2d/_collisions/polygon_polygon.html">Polygon-Polygon</a></li>
+					<li><a title="/2d/_collisions/polygon_polygon.html" href="/2d/_collisions/polygon_polygon.html">Separating Axis Theorem</a></li>
 				</ul>
 			</li>
 			<li>
@@ -67,8 +67,40 @@
   
 </script>
 <article>
-  <h1>Polygon Intersections</h1>
+  <h1>Separating Axis Theorem</h1>
   <section>
+    <p>
+      The Separating Axis Theorem (SAT) provides a way to find the intersection between any <i>n</i>-sided <a href='https://ianqvist.blogspot.com/2009/09/convex-polygon-based-collision.html'>convex</a> polygon or circle. In this tutorial, I will explain how this theorem works, and how you can use it to both detect and resolve collisions in your simulation.
+    </p>
+  </section>
+  <section>
+    <h2>Explanation of Separating Axis Theorem</h2>
+    <p>
+      SAT makes use of vector projection to figure out whether or not two concave polygons are intersecting. The way to think about it is this:
+      
+      <br/>
+      <br/>
+
+      Given two shapes <b>A</b> and <b>B</b>.
+
+      Imagine we could isolate a single edge of A and shine a light on it.
+
+      
+    </p>
+  </section>
+  <section>
+    <h2>Algorithm for Finding the Intersection</h2>
+    <p>
+      Given two polygons <b>A</b> and <b>B</b>:
+      <ol>
+        <li>For each edge on A, get the normal <i>n</i> of that edge.</li>
+        <li>Project each vertex <i>v</i> of <b>A</b> onto <i>n</i>. Return the minimum and maximum projection of all vertices.</li>
+        <li>Repeat Step 2 for polygon <b>B</b>.</li>
+        <li>If the min and max projections found in Steps 2 and 3 do <b>NOT</b> overlap, the polygons are not intersecting. Return false.</li>
+        <li>If the projections overlap for each edge of both shapes, the shapes are intersecting. Return true.</li>
+      </ol>
+    </p>
+    
   </section>
   <section>
 	<h2>
@@ -83,12 +115,13 @@
         Stop
       </button>
     </div>
-    <footer id="references">
-      <h2>References</h2>
-      <ul>
-      </ul>
-    </footer>
   </section>
+  <footer id="references">
+    <h2>References</h2>
+    <ul>
+      <li><a href="https://en.wikipedia.org/wiki/Vector_projection">Vector Projection Wikapedia</a></li>
+    </ul>
+  </footer>
 </article>
 		</main>
 	</body>
diff --git a/2d/_collisions/polygon_polygon.html.content b/2d/_collisions/polygon_polygon.html.content
index 820fcbc..2d6f6b7 100644
--- a/2d/_collisions/polygon_polygon.html.content
+++ b/2d/_collisions/polygon_polygon.html.content
@@ -15,8 +15,40 @@
   
 </script>
 <article>
-  <h1>Polygon Intersections</h1>
+  <h1>Separating Axis Theorem</h1>
   <section>
+    <p>
+      The Separating Axis Theorem (SAT) provides a way to find the intersection between any <i>n</i>-sided <a href='https://ianqvist.blogspot.com/2009/09/convex-polygon-based-collision.html'>convex</a> polygon or circle. In this tutorial, I will explain how this theorem works, and how you can use it to both detect and resolve collisions in your simulation.
+    </p>
+  </section>
+  <section>
+    <h2>Explanation of Separating Axis Theorem</h2>
+    <p>
+      SAT makes use of vector projection to figure out whether or not two concave polygons are intersecting. The way to think about it is this:
+      
+      <br/>
+      <br/>
+
+      Given two shapes <b>A</b> and <b>B</b>.
+
+      Imagine we could isolate a single edge of A and shine a light on it.
+
+      
+    </p>
+  </section>
+  <section>
+    <h2>Algorithm for Finding the Intersection</h2>
+    <p>
+      Given two polygons <b>A</b> and <b>B</b>:
+      <ol>
+        <li>For each edge on A, get the normal <i>n</i> of that edge.</li>
+        <li>Project each vertex <i>v</i> of <b>A</b> onto <i>n</i>. Return the minimum and maximum projection of all vertices.</li>
+        <li>Repeat Step 2 for polygon <b>B</b>.</li>
+        <li>If the min and max projections found in Steps 2 and 3 do <b>NOT</b> overlap, the polygons are not intersecting. Return false.</li>
+        <li>If the projections overlap for each edge of both shapes, the shapes are intersecting. Return true.</li>
+      </ol>
+    </p>
+    
   </section>
   <section>
 	<h2>
@@ -31,10 +63,11 @@
         Stop
       </button>
     </div>
-    <footer id="references">
-      <h2>References</h2>
-      <ul>
-      </ul>
-    </footer>
   </section>
+  <footer id="references">
+    <h2>References</h2>
+    <ul>
+      <li><a href="https://en.wikipedia.org/wiki/Vector_projection">Vector Projection Wikapedia</a></li>
+    </ul>
+  </footer>
 </article>
diff --git a/2d/_collisions/rectangle_line.html b/2d/_collisions/rectangle_line.html
index e36df62..dbaac7c 100644
--- a/2d/_collisions/rectangle_line.html
+++ b/2d/_collisions/rectangle_line.html
@@ -26,7 +26,7 @@
 					<li><label>Collisions</label></li>
 					<li><a title="/2d/_collisions/rectangle_line.html" href="/2d/_collisions/rectangle_line.html">Rectangle-Line</a></li>
 					<li><a title="/2d/_collisions/rectangle_rectangle.html" href="/2d/_collisions/rectangle_rectangle.html">Rectangle-Rectangle</a></li>
-					<li><a title="/2d/_collisions/polygon_polygon.html" href="/2d/_collisions/polygon_polygon.html">Polygon-Polygon</a></li>
+					<li><a title="/2d/_collisions/polygon_polygon.html" href="/2d/_collisions/polygon_polygon.html">Separating Axis Theorem</a></li>
 				</ul>
 			</li>
 			<li>
diff --git a/2d/_collisions/rectangle_rectangle.html b/2d/_collisions/rectangle_rectangle.html
index 89310ef..fb741fc 100644
--- a/2d/_collisions/rectangle_rectangle.html
+++ b/2d/_collisions/rectangle_rectangle.html
@@ -26,7 +26,7 @@
 					<li><label>Collisions</label></li>
 					<li><a title="/2d/_collisions/rectangle_line.html" href="/2d/_collisions/rectangle_line.html">Rectangle-Line</a></li>
 					<li><a title="/2d/_collisions/rectangle_rectangle.html" href="/2d/_collisions/rectangle_rectangle.html">Rectangle-Rectangle</a></li>
-					<li><a title="/2d/_collisions/polygon_polygon.html" href="/2d/_collisions/polygon_polygon.html">Polygon-Polygon</a></li>
+					<li><a title="/2d/_collisions/polygon_polygon.html" href="/2d/_collisions/polygon_polygon.html">Separating Axis Theorem</a></li>
 				</ul>
 			</li>
 			<li>
diff --git a/2d/rigidbody/rigidbody_1.html b/2d/rigidbody/rigidbody_1.html
index b02d2ef..00ea74a 100644
--- a/2d/rigidbody/rigidbody_1.html
+++ b/2d/rigidbody/rigidbody_1.html
@@ -26,7 +26,7 @@
 					<li><label>Collisions</label></li>
 					<li><a title="/2d/_collisions/rectangle_line.html" href="/2d/_collisions/rectangle_line.html">Rectangle-Line</a></li>
 					<li><a title="/2d/_collisions/rectangle_rectangle.html" href="/2d/_collisions/rectangle_rectangle.html">Rectangle-Rectangle</a></li>
-					<li><a title="/2d/_collisions/polygon_polygon.html" href="/2d/_collisions/polygon_polygon.html">Polygon-Polygon</a></li>
+					<li><a title="/2d/_collisions/polygon_polygon.html" href="/2d/_collisions/polygon_polygon.html">Separating Axis Theorem</a></li>
 				</ul>
 			</li>
 			<li>
diff --git a/2d/rigidbody/rigidbody_2.html b/2d/rigidbody/rigidbody_2.html
index e716374..4d85e50 100644
--- a/2d/rigidbody/rigidbody_2.html
+++ b/2d/rigidbody/rigidbody_2.html
@@ -26,7 +26,7 @@
 					<li><label>Collisions</label></li>
 					<li><a title="/2d/_collisions/rectangle_line.html" href="/2d/_collisions/rectangle_line.html">Rectangle-Line</a></li>
 					<li><a title="/2d/_collisions/rectangle_rectangle.html" href="/2d/_collisions/rectangle_rectangle.html">Rectangle-Rectangle</a></li>
-					<li><a title="/2d/_collisions/polygon_polygon.html" href="/2d/_collisions/polygon_polygon.html">Polygon-Polygon</a></li>
+					<li><a title="/2d/_collisions/polygon_polygon.html" href="/2d/_collisions/polygon_polygon.html">Separating Axis Theorem</a></li>
 				</ul>
 			</li>
 			<li>
diff --git a/2d/rigidbody/rigidbody_3.html b/2d/rigidbody/rigidbody_3.html
index c2c78ff..9cb1041 100644
--- a/2d/rigidbody/rigidbody_3.html
+++ b/2d/rigidbody/rigidbody_3.html
@@ -26,7 +26,7 @@
 					<li><label>Collisions</label></li>
 					<li><a title="/2d/_collisions/rectangle_line.html" href="/2d/_collisions/rectangle_line.html">Rectangle-Line</a></li>
 					<li><a title="/2d/_collisions/rectangle_rectangle.html" href="/2d/_collisions/rectangle_rectangle.html">Rectangle-Rectangle</a></li>
-					<li><a title="/2d/_collisions/polygon_polygon.html" href="/2d/_collisions/polygon_polygon.html">Polygon-Polygon</a></li>
+					<li><a title="/2d/_collisions/polygon_polygon.html" href="/2d/_collisions/polygon_polygon.html">Separating Axis Theorem</a></li>
 				</ul>
 			</li>
 			<li>
diff --git a/3d/rigidbody.html b/3d/rigidbody.html
index 7921b24..38dc4c7 100644
--- a/3d/rigidbody.html
+++ b/3d/rigidbody.html
@@ -26,7 +26,7 @@
 					<li><label>Collisions</label></li>
 					<li><a title="/2d/_collisions/rectangle_line.html" href="/2d/_collisions/rectangle_line.html">Rectangle-Line</a></li>
 					<li><a title="/2d/_collisions/rectangle_rectangle.html" href="/2d/_collisions/rectangle_rectangle.html">Rectangle-Rectangle</a></li>
-					<li><a title="/2d/_collisions/polygon_polygon.html" href="/2d/_collisions/polygon_polygon.html">Polygon-Polygon</a></li>
+					<li><a title="/2d/_collisions/polygon_polygon.html" href="/2d/_collisions/polygon_polygon.html">Separating Axis Theorem</a></li>
 				</ul>
 			</li>
 			<li>
diff --git a/index.html b/index.html
index 616c2f9..21cc8d3 100644
--- a/index.html
+++ b/index.html
@@ -26,7 +26,7 @@
 					<li><label>Collisions</label></li>
 					<li><a title="/2d/_collisions/rectangle_line.html" href="/2d/_collisions/rectangle_line.html">Rectangle-Line</a></li>
 					<li><a title="/2d/_collisions/rectangle_rectangle.html" href="/2d/_collisions/rectangle_rectangle.html">Rectangle-Rectangle</a></li>
-					<li><a title="/2d/_collisions/polygon_polygon.html" href="/2d/_collisions/polygon_polygon.html">Polygon-Polygon</a></li>
+					<li><a title="/2d/_collisions/polygon_polygon.html" href="/2d/_collisions/polygon_polygon.html">Separating Axis Theorem</a></li>
 				</ul>
 			</li>
 			<li>
diff --git a/roadmap.html b/roadmap.html
index 931d893..8d7f3e3 100644
--- a/roadmap.html
+++ b/roadmap.html
@@ -26,7 +26,7 @@
 					<li><label>Collisions</label></li>
 					<li><a title="/2d/_collisions/rectangle_line.html" href="/2d/_collisions/rectangle_line.html">Rectangle-Line</a></li>
 					<li><a title="/2d/_collisions/rectangle_rectangle.html" href="/2d/_collisions/rectangle_rectangle.html">Rectangle-Rectangle</a></li>
-					<li><a title="/2d/_collisions/polygon_polygon.html" href="/2d/_collisions/polygon_polygon.html">Polygon-Polygon</a></li>
+					<li><a title="/2d/_collisions/polygon_polygon.html" href="/2d/_collisions/polygon_polygon.html">Separating Axis Theorem</a></li>
 				</ul>
 			</li>
 			<li>
@@ -87,6 +87,10 @@
       color: red;
   }
 
+  .abandoned {
+      color: grey;
+  }
+
   section ul li.done:before {
 	  content: '✓'
   }
@@ -104,12 +108,11 @@
     <h1>May/June 2021: More Collisions</h1>
     <ul>
       <li class="halfway">SAT Collisions for Convex Polygons with Explanation</li>
-	  <li class="halfway">Rigidbody Demos</li>
-      <li>Pill Collisions</li>
+      <li class="halfway">2D rigidbody physics demos + explanations</li>
       <li class="done">Remove (or hide) ellipse collision pages for now</li>
       <li class="done">3D scene setup</li>
-      <li>3D scene basic physics with spheres bouncing around a scene</li>
-      <li class="halfway">Redo of all 2d rigidbody physics</li>
+      <li class="abandoned">3D scene basic physics with spheres bouncing around a scene</li>
+      <li class="abandoned">Pill Collisions</li>
     </ul>
     <p style="font-size: 18px;">
 	  Obviously, the month of April did not go as planned. I got caught up with a number of tasks that I couldn't handle,
@@ -130,6 +133,10 @@
       simulation up and running with simple objects (spheres, cubes, etc.). From there, I want to begin exploring more complex
       physics simulation topics like oct-trees, multiple collision resolution, etc. We will see what happens, but I am optimistic,
       so long as I stay the course.
+      <br/><br/>
+      <i>Edit:</i> I am going to focus on SAT collision and AABB collision detection going forward for this month. In addition,
+      I am going to finish the descriptions/demos for regular rigidbody collision. Afterwards, if I have time, I will move onto
+      3D collisions.
 	</p>
   </section>
   <hr/>
diff --git a/roadmap.html.content b/roadmap.html.content
index c20a0ef..ee60886 100644
--- a/roadmap.html.content
+++ b/roadmap.html.content
@@ -35,6 +35,10 @@
       color: red;
   }
 
+  .abandoned {
+      color: grey;
+  }
+
   section ul li.done:before {
 	  content: '✓'
   }
@@ -52,12 +56,11 @@
     <h1>May/June 2021: More Collisions</h1>
     <ul>
       <li class="halfway">SAT Collisions for Convex Polygons with Explanation</li>
-	  <li class="halfway">Rigidbody Demos</li>
-      <li>Pill Collisions</li>
+      <li class="halfway">2D rigidbody physics demos + explanations</li>
       <li class="done">Remove (or hide) ellipse collision pages for now</li>
       <li class="done">3D scene setup</li>
-      <li>3D scene basic physics with spheres bouncing around a scene</li>
-      <li class="halfway">Redo of all 2d rigidbody physics</li>
+      <li class="abandoned">3D scene basic physics with spheres bouncing around a scene</li>
+      <li class="abandoned">Pill Collisions</li>
     </ul>
     <p style="font-size: 18px;">
 	  Obviously, the month of April did not go as planned. I got caught up with a number of tasks that I couldn't handle,
@@ -78,6 +81,10 @@
       simulation up and running with simple objects (spheres, cubes, etc.). From there, I want to begin exploring more complex
       physics simulation topics like oct-trees, multiple collision resolution, etc. We will see what happens, but I am optimistic,
       so long as I stay the course.
+      <br/><br/>
+      <i>Edit:</i> I am going to focus on SAT collision and AABB collision detection going forward for this month. In addition,
+      I am going to finish the descriptions/demos for regular rigidbody collision. Afterwards, if I have time, I will move onto
+      3D collisions.
 	</p>
   </section>
   <hr/>
diff --git a/transpiler/pages.txt b/transpiler/pages.txt
index 369ad07..cea23dd 100644
--- a/transpiler/pages.txt
+++ b/transpiler/pages.txt
@@ -6,7 +6,7 @@
 >"Collisions"
 >>/2d/_collisions/rectangle_line.html "Rectangle-Line"
 >>/2d/_collisions/rectangle_rectangle.html "Rectangle-Rectangle"
->>/2d/_collisions/polygon_polygon.html "Polygon-Polygon"
+>>/2d/_collisions/polygon_polygon.html "Separating Axis Theorem"
 &#127776; "3D"
 >"Rigidbody"
 >>/3d/rigidbody.html "Rigidbody in 3D"