summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMatthew Kosarek <mattkae@protonmail.com>2021-06-24 15:57:05 -0400
committerMatthew Kosarek <mattkae@protonmail.com>2021-06-24 15:57:05 -0400
commit28d0d84638ba1ba45696f3fa86cb18e694f280a5 (patch)
tree6ae2b47a08548c2e7f87bdfd3a977b2a71b340d3
parent6fa7b10d244b226c7651747d88ffdfaa5c5814e2 (diff)
Prettifying images
-rw-r--r--2d/_collisions/polygon_polygon.html5
-rw-r--r--2d/_collisions/polygon_polygon.html.content5
-rw-r--r--index.css5
3 files changed, 15 insertions, 0 deletions
diff --git a/2d/_collisions/polygon_polygon.html b/2d/_collisions/polygon_polygon.html
index c1c3a2e..5d360af 100644
--- a/2d/_collisions/polygon_polygon.html
+++ b/2d/_collisions/polygon_polygon.html
@@ -83,6 +83,7 @@
Images two shapes <b>A</b> and <b>B</b> as shown below (they are triangles here, but they can be anything really).
<br/>
+ <br />
<div class='image'>
<img src="polygon_polygon/images/1.png" />
@@ -91,6 +92,7 @@
<br/>
We know inutitively that if we were able to draw a line between the two objects, that means that they're not intersecting. In this case, that line is a vertical-ish line:
<br/>
+ <br />
<div class='image'>
<img src='polygon_polygon/images/2.png' />
@@ -104,6 +106,7 @@
To do separating axis theorem, we iterate all of the edges of <b>both</b> shapes. For each edge, we get the normal at that edge (In two-dimensions, this amounts to getting the perpendicular of the line segment defined by the two points of the edge).
<br />
+ <br />
<div class='image'>
<img src='polygon_polygon/images/2a.png' />
@@ -122,6 +125,7 @@
At this point, you will see that I named the three vertices on each of the triangles. Triangle <b>A</b> is made of vertices <i>a1, a2, a3</i> and triangle <b>B</b> is made of vertices <i>b1, b2, b3</i>. At this point, we project the shape onto the axis. To do this, we project the vertices of each shape onto the axis to figure out which one <i>maximizes</i> the dot product and which one <i>minimizes</i> the dot product. The projection of the shape is then the range defined by this min and max value.
<br />
+ <br />
<div class='image'>
<img src='polygon_polygon/images/2e.png' />
@@ -132,6 +136,7 @@
Finally, we check if the two ranges overlap. If they don't overlap, then the shapes do <b>not</b> intersect. If they do overlap, we repeat the process for all of the other edges. If all of these ranges overlap, then the shape overlaps, and there is no separating line between them.
<br />
+ <br />
<div class='image'>
<img src='polygon_polygon/images/2f.png' />
diff --git a/2d/_collisions/polygon_polygon.html.content b/2d/_collisions/polygon_polygon.html.content
index a0da872..7f29ae0 100644
--- a/2d/_collisions/polygon_polygon.html.content
+++ b/2d/_collisions/polygon_polygon.html.content
@@ -31,6 +31,7 @@
Images two shapes <b>A</b> and <b>B</b> as shown below (they are triangles here, but they can be anything really).
<br/>
+ <br />
<div class='image'>
<img src="polygon_polygon/images/1.png" />
@@ -39,6 +40,7 @@
<br/>
We know inutitively that if we were able to draw a line between the two objects, that means that they're not intersecting. In this case, that line is a vertical-ish line:
<br/>
+ <br />
<div class='image'>
<img src='polygon_polygon/images/2.png' />
@@ -52,6 +54,7 @@
To do separating axis theorem, we iterate all of the edges of <b>both</b> shapes. For each edge, we get the normal at that edge (In two-dimensions, this amounts to getting the perpendicular of the line segment defined by the two points of the edge).
<br />
+ <br />
<div class='image'>
<img src='polygon_polygon/images/2a.png' />
@@ -70,6 +73,7 @@
At this point, you will see that I named the three vertices on each of the triangles. Triangle <b>A</b> is made of vertices <i>a1, a2, a3</i> and triangle <b>B</b> is made of vertices <i>b1, b2, b3</i>. At this point, we project the shape onto the axis. To do this, we project the vertices of each shape onto the axis to figure out which one <i>maximizes</i> the dot product and which one <i>minimizes</i> the dot product. The projection of the shape is then the range defined by this min and max value.
<br />
+ <br />
<div class='image'>
<img src='polygon_polygon/images/2e.png' />
@@ -80,6 +84,7 @@
Finally, we check if the two ranges overlap. If they don't overlap, then the shapes do <b>not</b> intersect. If they do overlap, we repeat the process for all of the other edges. If all of these ranges overlap, then the shape overlaps, and there is no separating line between them.
<br />
+ <br />
<div class='image'>
<img src='polygon_polygon/images/2f.png' />
diff --git a/index.css b/index.css
index 8047e7f..83f2e0c 100644
--- a/index.css
+++ b/index.css
@@ -138,6 +138,11 @@ nav a:hover {
text-align: center;
}
+.image img {
+ border-radius: 3px;
+ border: 1px solid #D0D0D0;
+}
+
/***********************************
Content styling
************************************/