jay/havox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add projects and tutorials

Browse Source
This commit is contained in:
John Gatward
2026-03-16 18:03:17 +00:00
parent fc54c3bd4e
commit 4e94902f01
132 changed files with 19170 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
tutorials/convex_hull/index.html Normal file
View File

@@ -0,0 +1,95 @@
<DOCTYPE! html>
<html>
<title>Convex Hull</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js"
integrity="sha512-b/htz6gIyFi3dwSoZ0Uv3cuv3Ony7EeKkacgrcVg8CMzu90n777qveu0PBcbZUA7TzyENGtU+qZRuFAkfqgyoQ=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=AM_CHTML"></script>
<button id="backButton" onclick="window.location.href='/#tutorials'">Back</button>
<head>
<h1>Convex Hull - Jarvis' Marsh</h1>
<p>A convex hull is where a convex polygon is constructed to bound a set of points on a 2D plane. So, given all
points in the set P, what is the smallest convex polygon we can construct that bounds all points in P.</p>
<br>
<p>Pseudo code:</p>
<div class="psudoCode">
<ul>
<li>Randomly place n points on a 2D plane.</li>
<li>Find the leftmost point/the point with the smallest x value. Called `gamma`.</li>
<li>Find the vector which is the <i>most left</i> which connects `gamma` to point q in set P.</li>
<li>Store `gamma` and q in a list and repeat until q = `gamma`.</li>
</div>
<br>
</head>
<body>
<p>This canvas starts off by generating a set amount of points, placing them at random locations around the
screen and adding them to an array. It then finds the index of the point in the array - `vertices[]` - with
the lowest x value. It then loops through the array finding all vector's originating from `gamma`,
<a>`vec(gammaP(i))`</a>.
</p>
<p>We then examine each vertex and evaluate which one is the <i>leftmost</i> from the perspective of point
`gamma`. Say in this case `P(q)` is the leftmost vector so we push q onto the stack.</p><br>
<p>Stack: `((q), (gamma))`</p><br>
<p>We then repeat until we reach our starting point, which in this case means our starting point is the same as
the next point (`q=gamma`)</p>
<img class="examples" src="stepByStep.png">
<p>Now the question of how to calculate the <i>leftness</i> of a vector compared to another. We can use the
<a>cross product</a> in 2D.
</p>
<p><a>`vecu times vecv = u`<sub>`x`</sub>`*v`<sub>`y`</sub>` - u`<sub>`y`</sub>`*v`<sub>`x`</sub></a> If the
cross product is greater than 0, the vector is to the left. If it is equal to 0 then the vectors are
colinear</p>
<p><b>Note:</b> to convert coordinates to a vector, find the difference between your origin point and your
target point</p>
<div class="psudoCode">
<a>for (var i = 0; i < vertices.length; i++){</a><br>
<a>&nbsp;if (i != originPoint){</a><br>
<a>&nbsp;&nbsp;x1 = vertices[recordLeftVector].x - vertices[originPoint].x;</a><br>
<a>&nbsp;&nbsp;y1 = vertices[recordLeftVector].y - vertices[originPoint].y;</a><br><br>
<a>&nbsp;&nbsp;x2 = vertices[i].x - vertices[originPoint].x;</a><br>
<a>&nbsp;&nbsp;y2 = vertices[i].y - vertices[originPoint].y;</a><br><br>
<a>&nbsp;&nbsp;if ((y2 * x1) - (y1 * x2) <= 0){</a><br>
<a>&nbsp;&nbsp;&nbsp;recordLeftVector = i;</a><br>
<a>&nbsp;&nbsp;}</a><br>
<a>&nbsp;}</a><br>
<a>}</a><br>
</div>
<p>Now we just have to add in a little piece of code at the bottom of this function to: increment the iteration
number so we don't recurse until eternity, add our leftmost vector to the route stack and call the function
again with the next point as a parameter.</p>
<div class="psudoCode">
<a>if (originPoint != recordLeftVector && iterations < 75){</a><br>
<a>&nbsp;&nbsp;route[iterations] = recordLeftVector;</a><br>
<a>&nbsp;&nbsp;iterations += 1;</a><br>
<a>&nbsp;&nbsp;findLeftLine(recordLeftVector);</a><br>
<a>}</a><br>
</div><br><br>
</body>
<script src="sketch.js"></script>
<script src="dot.js"></script>
<!--https://www.youtube.com/watch?v=Vu84lmMzP2o<br>
http://jeffe.cs.illinois.edu/teaching/compgeom/notes/01-convexhull.pdf</p>-->
</html>