Replace sine/cosine math with visualizations.

content/blog/modulo_patterns/index.md

@@ -469,46 +469,34 @@ we suggested. Here's a circle with the turn angles labeled:
 We never quite do the exact _opposite_ of any one of our movements. So then, will we come back to the
 origin anyway? Well, let's start simple. Suppose we always turn by exactly one 120-degree increment
 (we might end up turning more or less, just like we may end up turning left, right, or back in the
-90 degree case). Now,
+90 degree case). Each time you face a particular direciton, after performing a cycle, you will have
+moved some distance away from when you started, and turned 120 degrees. If you then repeat the
+cycle, you will once again move by the same offset as before, but this time the offset will
+be rotated 120 degrees, and you will have rotated a total of 240 degrees. Finally, performing
+the cycle a third time, you'll have moved by the same offset (rotated 240 degrees).
 
-1. Suppose that having performed one complete cycle, we end up away from the center
+If you overaly each offset such that their starting points overlap, they will look very similar
-by \\(dx\\) on the \\(x\\)-axis, and \\(dy\\) on the \\(y\\)-axis (we do this without loss
+to that circle above. And now, here's the beauty: you can arrange these rotated offsets into
-of generality).
+a triangle:
-2. We are now turned around by 120 degrees, so once we perform the cycle again, we end up offset
-by \\(dx(\\cos 120)-dy(\\sin 120)\\) on the \\(x\\)-axis, and \\(dx(\\sin 120)+dy(\\cos 120)\\) on
-the \\(y\\)-axis (I got this from the [rotation matrx](https://en.wikipedia.org/wiki/Rotation_matrix)
-page on Wikipedia).
-3. After one more step, we end up with having rotated a total of 240 degrees. As we perform the cycle
-again, we end up having moved by an additional \\(dx(\\cos 240)-dy(\\sin 240)\\) and \\(dx(\\sin 240)+dy(\\cos 240)\\).
 
-Summing up all of these changes, we get:
+{{< figure src="turn_3_anim.gif" caption="Triangle formed by three 120-degree turns." class="small" alt="Triangle formed by three 120-degree turns." >}}
 
-{{< latex >}}
+As long as you rotate by the same amount each time (and you will, since the cycle length determines
-    dx(\cos0+\cos120+\cos240) + dy(\sin0+\sin120+\sin240)
+how many times you turn, and the cycle length never changes), you can do so for any number
-{{< /latex >}}
+of directions. For instance, here's a similar visualization for a five-turn system, where
+each turn is 72 degrees:
 
-Why don't we start trying to write this in terms of variables already? For some number of turns
+{{< figure src="turn_5_anim.gif" caption="Pentagon formed by five 72-degree turns." class="small" alt="Pentagon formed by five 72-degree turns." >}}
-\\(c\\), a single turn is \\(360/c\\) degrees. We start having turned 0 degrees, then progress
-to having turned \\(360/c\\) degrees, then \\(2\times360/c\\), and so on until \\((c-1)360/c\\).
-We can write this using _summation notation_ (and radians instead of degrees) as follows:
 
-{{< latex >}}
+Each of these polygon shapes forms a loop. If you walk along its sides, you will eventually end up exactly
-    \begin{aligned}
+where you started. This confirms that if you end up making one turn at the end of each cycle, you
-        x &= dx\left[\sum_{i=0}^{c-1} \cos\left(i\frac{2\pi}{c}\right)\right] -
+will eventually end up right where you started.
-        dy\left[\sum_{i=0}^{c-1} \sin\left(i\frac{2\pi}{c}\right)\right] \\
-        y &= dx\left[\sum_{i=0}^{c-1} \sin\left(i\frac{2\pi}{c}\right)\right] +
-        dy\left[\sum_{i=0}^{c-1} \cos\left(i\frac{2\pi}{c}\right)\right] \\
-    \end{aligned}
-{{< /latex >}}
 
-For reasons beyond the scope of this article, sums like those between the square brackets
+Things aren't always as simple as making a single turn, though. Let's go back to the version
-in the above equations _always_ equal zero. This means that after all the turns have been made,
+of the problem in which we have 3 possible directions, and think about what would happen if we turned by 240 degrees at a time: 2 turns
-we get \\(x=0\\) and \\(y=0\\) -- back at the origin, where we started!
+instead of 1?
 
-{{< todo >}}Maybe we can prove the sin/cos thing? {{< /todo >}}
+Even though we first turn a whole 240 degrees, the second time we turn we "overshoot" our initial bearing, and end up at 120 degrees
-
-What if we turn by 240 degrees at a time: 2 turns instead of 1? Even though we first turn
-a whole 240 degrees, the second time we turn we "overshoot" our initial bearing, and end up at 120 degrees
 compared to it. As soon as we turn 240 more degrees (turning the third time), we end up back at 0.
 In short, even though we "visited" each bearing in a different order, we visited them all.