image regeneration

docs/index.html

@@ -285,7 +285,7 @@
 <p>Playing with the points for curves may have given you a feel for how Bézier curves behave, but what <em>are</em> Bézier curves, really? There are two ways to explain what a Bézier curve is, and they turn out to be the entirely equivalent, but one of them uses complicated maths, and the other uses really simple maths. So... let's start with the simple explanation:</p>
 <p>Bézier curves are the result of <a href="https://en.wikipedia.org/wiki/Linear_interpolation">linear interpolations</a>. That sounds complicated but you've been doing linear interpolation since you were very young: any time you had to point at something between two other things, you've been applying linear interpolation. It's simply "picking a point between two points".</p>
 <p>If we know the distance between those two points, and we want a new point that is, say, 20% the distance away from the first point (and thus 80% the distance away from the second point) then we can compute that really easily:</p>
-<img class="LaTeX SVG" src="./images/chapters/whatis/b5aa26284ba3df74970a95cb047a841d.svg" width="501px" height="103px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/whatis/b5aa26284ba3df74970a95cb047a841d.svg" width="555px" height="101px" loading="lazy">
 <p>So let's look at that in action: the following graphic is interactive in that you can use your up and down arrow keys to increase or decrease the interpolation ratio, to see what happens. We start with three points, which gives us two lines. Linear interpolation over those lines gives us two points, between which we can again perform linear interpolation, yielding a single point. And that point —and all points we can form in this way for all ratios taken together— form our Bézier curve:</p>
 <graphics-element title="Linear Interpolation leading to Bézier curves" width="825" height="275" src="./chapters/whatis/interpolation.js" >
         <fallback-image>
@@ -305,14 +305,14 @@
           <h1><div class="nav"><a href="#whatis">previous</a><a href="#control">next</a></div><a href="#explanation">The mathematics of Bézier curves</a></h1>
 <p>Bézier curves are a form of "parametric" function. Mathematically speaking, parametric functions are cheats: a "function" is actually a well defined term representing a mapping from any number of inputs to a <strong>single</strong> output. Numbers go in, a single number comes out. Change the numbers that go in, and the number that comes out is still a single number.</p>
 <p>Parametric functions cheat. They basically say "alright, well, we want multiple values coming out, so we'll just use more than one function". An illustration: Let's say we have a function that maps some value, let's call it <i>x</i>, to some other value, using some kind of number manipulation:</p>
-<img class="LaTeX SVG" src="./images/chapters/explanation/1caef9931f954e32eae5067b732c1018.svg" width="96px" height="17px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/explanation/1caef9931f954e32eae5067b732c1018.svg" width="93px" height="17px" loading="lazy">
 <p>The notation <i>f(x)</i> is the standard way to show that it's a function (by convention called <i>f</i> if we're only listing one) and its output changes based on one variable (in this case, <i>x</i>). Change <i>x</i>, and the output for <i>f(x)</i> changes.</p>
 <p>So far, so good. Now, let's look at parametric functions, and how they cheat. Let's take the following two functions:</p>
-<img class="LaTeX SVG" src="./images/chapters/explanation/0f5cffd58e864fec6739a57664eb8cbd.svg" width="93px" height="36px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/explanation/0f5cffd58e864fec6739a57664eb8cbd.svg" width="92px" height="37px" loading="lazy">
 <p>There's nothing really remarkable about them, they're just a sine and cosine function, but you'll notice the inputs have different names. If we change the value for <i>a</i>, we're not going to change the output value for <i>f(b)</i>, since <i>a</i> isn't used in that function. Parametric functions cheat by changing that. In a parametric function all the different functions share a variable, like this:</p>
-<img class="LaTeX SVG" src="./images/chapters/explanation/066a910ae6aba69c40a338320759cdd1.svg" width="100px" height="40px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/explanation/066a910ae6aba69c40a338320759cdd1.svg" width="104px" height="40px" loading="lazy">
 <p>Multiple functions, but only one variable. If we change the value for <i>t</i>, we change the outcome of both <i>f<sub>a</sub>(t)</i> and <i>f<sub>b</sub>(t)</i>. You might wonder how that's useful, and the answer is actually pretty simple: if we change the labels <i>f<sub>a</sub>(t)</i> and <i>f<sub>b</sub>(t)</i> with what we usually mean with them for parametric curves, things might be a lot more obvious:</p>
-<img class="LaTeX SVG" src="./images/chapters/explanation/4cf6fb369841e2c5d36e5567a8db4306.svg" width="77px" height="40px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/explanation/4cf6fb369841e2c5d36e5567a8db4306.svg" width="79px" height="40px" loading="lazy">
 <p>There we go. <i>x</i>/<i>y</i> coordinates, linked through some mystery value <i>t</i>.</p>
 <p>So, parametric curves don't define a <i>y</i> coordinate in terms of an <i>x</i> coordinate, like normal functions do, but they instead link the values to a "control" variable. If we vary the value of <i>t</i>, then with every change we get <strong>two</strong> values, which we can use as (<i>x</i>,<i>y</i>) coordinates in a graph. The above set of functions, for instance, generates points on a circle: We can range <i>t</i> from negative to positive infinity, and the resulting (<i>x</i>,<i>y</i>) coordinates will always lie on a circle with radius 1 around the origin (0,0). If we plot it for <i>t</i> from 0 to 5, we get this:</p>
 <graphics-element title="A (partial) circle: x=sin(t), y=cos(t)" width="275" height="275" src="./chapters/explanation/circle.js" >
@@ -326,17 +326,17 @@
 
 <p>Bézier curves are just one out of the many classes of parametric functions, and are characterised by using the same base function for all of the output values. In the example we saw above, the <i>x</i> and <i>y</i> values were generated by different functions (one uses a sine, the other a cosine); but Bézier curves use the "binomial polynomial" for both the <i>x</i> and <i>y</i> outputs. So what are binomial polynomials?</p>
 <p>You may remember polynomials from high school. They're those sums that look like this:</p>
-<img class="LaTeX SVG" src="./images/chapters/explanation/bb06cb82d372f822a7b35e661502bd72.svg" width="213px" height="20px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/explanation/bb06cb82d372f822a7b35e661502bd72.svg" width="219px" height="19px" loading="lazy">
 <p>If the highest order term they have is <i>x³</i>, they're called "cubic" polynomials; if it's <i>x²</i>, it's a "square" polynomial; if it's just <i>x</i>, it's a line (and if there aren't even any terms with <i>x</i> it's not a polynomial!)</p>
 <p>Bézier curves are polynomials of <i>t</i>, rather than <i>x</i>, with the value for <i>t</i> being fixed between 0 and 1, with coefficients <i>a</i>, <i>b</i> etc. taking the "binomial" form, which sounds fancy but is actually a pretty simple description for mixing values:</p>
-<img class="LaTeX SVG" src="./images/chapters/explanation/2adc12d0cff01d40d9e1702014a7dc19.svg" width="367px" height="64px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/explanation/2adc12d0cff01d40d9e1702014a7dc19.svg" width="371px" height="64px" loading="lazy">
 <p>I know what you're thinking: that doesn't look too simple! But if we remove <i>t</i> and add in "times one", things suddenly look pretty easy. Check out these binomial terms:</p>
-<img class="LaTeX SVG" src="./images/chapters/explanation/9c18f76e76cf684ecd217ad8facc2e93.svg" width="184px" height="87px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/explanation/9c18f76e76cf684ecd217ad8facc2e93.svg" width="189px" height="85px" loading="lazy">
 <p>Notice that 2 is the same as 1+1, and 3 is 2+1 and 1+2, and 6 is 3+3... As you can see, each time we go up a dimension, we simply start and end with 1, and everything in between is just "the two numbers above it, added together", giving us a simple number sequence known as <a href="https://en.wikipedia.org/wiki/Pascal%27s_triangle">Pascal's triangle</a>. Now <i>that's</i> easy to remember.</p>
 <p>There's an equally simple way to figure out how the polynomial terms work: if we rename <i>(1-t)</i> to <i>a</i> and <i>t</i> to <i>b</i>, and remove the weights for a moment, we get this:</p>
-<img class="LaTeX SVG" src="./images/chapters/explanation/e107caca1577e44293cd207388ac939c.svg" width="301px" height="60px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/explanation/e107caca1577e44293cd207388ac939c.svg" width="312px" height="60px" loading="lazy">
 <p>It's basically just a sum of "every combination of <i>a</i> and <i>b</i>", progressively replacing <i>a</i>'s with <i>b</i>'s after every + sign. So that's actually pretty simple too. So now you know binomial polynomials, and just for completeness I'm going to show you the generic function for this:</p>
-<img class="LaTeX SVG" src="./images/chapters/explanation/9a6d17c362980775f1425d0d2ad9a36a.svg" width="300px" height="55px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/explanation/9a6d17c362980775f1425d0d2ad9a36a.svg" width="323px" height="56px" loading="lazy">
 <p>And that's the full description for Bézier curves. Σ in this function indicates that this is a series of additions (using the variable listed below the Σ, starting at ...=&lt;value&gt; and ending at the value listed on top of the Σ).</p>
 <div class="howtocode">
 
@@ -471,9 +471,9 @@ function Bezier(3,t,w[]):
           <h1><div class="nav"><a href="#control">previous</a><a href="#extended">next</a></div><a href="#weightcontrol">Controlling Bézier curvatures, part 2: Rational Béziers</a></h1>
 <p>We can further control Bézier curves by "rationalising" them: that is, adding a "ratio" value in addition to the weight value discussed in the previous section, thereby gaining control over "how strongly" each coordinate influences the curve.</p>
 <p>Adding these ratio values to the regular Bézier curve function is fairly easy. Where the regular function is the following:</p>
-<img class="LaTeX SVG" src="./images/chapters/weightcontrol/02457b19087540dfb144978419524a85.svg" width="276px" height="41px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/weightcontrol/02457b19087540dfb144978419524a85.svg" width="285px" height="41px" loading="lazy">
 <p>The function for rational Bézier curves has two more terms:</p>
-<img class="LaTeX SVG" src="./images/chapters/weightcontrol/3fd61ab3fe88f694e70f61e4f8ea056b.svg" width="407px" height="48px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/weightcontrol/3fd61ab3fe88f694e70f61e4f8ea056b.svg" width="436px" height="47px" loading="lazy">
 <p>In this, the first new term represents an additional weight for each coordinate. For example, if our ratio values are [1, 0.5, 0.5, 1] then <code>ratio<sub>0</sub> = 1</code>, <code>ratio<sub>1</sub> = 0.5</code>, and so on, and is effectively identical as if we were just using different weight. So far, nothing too special.</p>
 <p>However, the second new term is what makes the difference: every point on the curve isn't just a "double weighted" point, it is a <em>fraction</em> of the "doubly weighted" value we compute by introducing that ratio. When computing points on the curve, we compute the "normal" Bézier value and then <em>divide</em> that by the Bézier value for the curve that only uses ratios, not weights.</p>
 <p>This does something unexpected: it turns our polynomial into something that <em>isn't</em> a polynomial anymore. It is now a kind of curve that is a super class of the polynomials, and can do some really cool things that Bézier curves can't do "on their own", such as perfectly describing circles (which we'll see in a later section is literally impossible using standard Bézier curves).</p>
@@ -529,9 +529,9 @@ function RationalBezier(3,t,w[],r[]):
           <h1><div class="nav"><a href="#weightcontrol">previous</a><a href="#matrix">next</a></div><a href="#extended">The Bézier interval [0,1]</a></h1>
 <p>Now that we know the mathematics behind Bézier curves, there's one curious thing that you may have noticed: they always run from <code>t=0</code> to <code>t=1</code>. Why that particular interval?</p>
 <p>It all has to do with how we run from "the start" of our curve to "the end" of our curve. If we have a value that is a mixture of two other values, then the general formula for this is:</p>
-<img class="LaTeX SVG" src="./images/chapters/extended/b80a1cac1f9ec476d6f6646ce0e154e7.svg" width="215px" height="16px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/extended/b80a1cac1f9ec476d6f6646ce0e154e7.svg" width="227px" height="17px" loading="lazy">
 <p>The obvious start and end values here need to be <code>a=1, b=0</code>, so that the mixed value is 100% value 1, and 0% value 2, and <code>a=0, b=1</code>, so that the mixed value is 0% value 1 and 100% value 2. Additionally, we don't want "a" and "b" to be independent: if they are, then we could just pick whatever values we like, and end up with a mixed value that is, for example, 100% value 1 <strong>and</strong> 100% value 2. In principle that's fine, but for Bézier curves we always want mixed values <em>between</em> the start and end point, so we need to make sure we can never set "a" and "b" to some values that lead to a mix value that sums to more than 100%. And that's easy:</p>
-<img class="LaTeX SVG" src="./images/chapters/extended/d930dea961b40f4810708bd6746221a2.svg" width="215px" height="16px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/extended/d930dea961b40f4810708bd6746221a2.svg" width="223px" height="17px" loading="lazy">
 <p>With this we can guarantee that we never sum above 100%. By restricting <code>a</code> to values in the interval [0,1], we will always be somewhere between our two values (inclusively), and we will always sum to a 100% mix.</p>
 <p>But... what if we use this form, which is based on the assumption that we will only ever use values between 0 and 1, and instead use values outside of that interval? Do things go horribly wrong? Well... not really, but we get to "see more".</p>
 <p>In the case of Bézier curves, extending the interval simply makes our curve "keep going". Bézier curves are simply segments of some polynomial curve, so if we pick a wider interval we simply get to see more of the curve. So what do they look like?</p>
@@ -775,30 +775,30 @@ function drawCurve(points[], t):
 <p>One interesting property of Bézier curves is that an <em>n<sup>th</sup></em> order curve can always be perfectly represented by an <em>(n+1)<sup>th</sup></em> order curve, by giving the higher-order curve specific control points.</p>
 <p>If we have a curve with three points, then we can create a curve with four points that exactly reproduces the original curve. First, we give it the same start and end points, and for its two control points we pick "1/3<sup>rd</sup> start + 2/3<sup>rd</sup> control" and "2/3<sup>rd</sup> control + 1/3<sup>rd</sup> end". Now we have exactly the same curve as before, except represented as a cubic curve rather than a quadratic curve.</p>
 <p>The general rule for raising an <em>n<sup>th</sup></em> order curve to an <em>(n+1)<sup>th</sup></em> order curve is as follows (observing that the start and end weights are the same as the start and end weights for the old curve):</p>
-<img class="LaTeX SVG" src="./images/chapters/reordering/faf29599c9307f930ec28065c96fde2a.svg" width="768px" height="61px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/reordering/faf29599c9307f930ec28065c96fde2a.svg" width="805px" height="61px" loading="lazy">
 <p>However, this rule also has as direct consequence that you <strong>cannot</strong> generally safely lower a curve from <em>n<sup>th</sup></em> order to <em>(n-1)<sup>th</sup></em> order, because the control points cannot be "pulled apart" cleanly. We can try to, but the resulting curve will not be identical to the original, and may in fact look completely different.</p>
 <p>However, there is a surprisingly good way to ensure that a lower order curve looks "as close as reasonably possible" to the original curve: we can optimise the "least-squares distance" between the original curve and the lower order curve, in a single operation (also explained over on <a href="https://www.sirver.net/blog/2011/08/23/degree-reduction-of-bezier-curves/">Sirver's Castle</a>). However, to use it, we'll need to do some calculus work and then switch over to linear algebra. As mentioned in the section on matrix representations, some things can be done much more easily with matrices than with calculus functions, and this is one of those things. So... let's go!</p>
 <p>We start by taking the standard Bézier function, and condensing it a little:</p>
-<img class="LaTeX SVG" src="./images/chapters/reordering/1244a85c1f9044b6f77cb709c682159c.svg" width="408px" height="41px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/reordering/1244a85c1f9044b6f77cb709c682159c.svg" width="429px" height="41px" loading="lazy">
 <p>Then, we apply one of those silly (actually, super useful) calculus tricks: since our <code>t</code> value is always between zero and one (inclusive), we know that <code>(1-t)</code> plus <code>t</code> always sums to 1. As such, we can express any value as a sum of <code>t</code> and <code>1-t</code>:</p>
-<img class="LaTeX SVG" src="./images/chapters/reordering/b2fda1dcce5bb13317aa42ebf5e7ea6c.svg" width="379px" height="16px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/reordering/b2fda1dcce5bb13317aa42ebf5e7ea6c.svg" width="384px" height="17px" loading="lazy">
 <p>So, with that seemingly trivial observation, we rewrite that Bézier function by splitting it up into a sum of a <code>(1-t)</code> and <code>t</code> component:</p>
-<img class="LaTeX SVG" src="./images/chapters/reordering/41e184228d85023abdadd6ce2acb54c7.svg" width="316px" height="67px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/reordering/41e184228d85023abdadd6ce2acb54c7.svg" width="332px" height="68px" loading="lazy">
 <p>So far so good. Now, to see why we did this, let's write out the <code>(1-t)</code> and <code>t</code> parts, and see what that gives us. I promise, it's about to make sense. We start with <code>(1-t)</code>:</p>
-<img class="LaTeX SVG" src="./images/chapters/reordering/4debbed5922d2bd84fd322c616872d20.svg" width="387px" height="160px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/reordering/4debbed5922d2bd84fd322c616872d20.svg" width="400px" height="163px" loading="lazy">
 <p>So by using this seemingly silly trick, we can suddenly express part of our n<sup>th</sup> order Bézier function in terms of an (n+1)<sup>th</sup> order Bézier function. And that sounds a lot like raising the curve order! Of course we need to be able to repeat that trick for the <code>t</code> part, but that's not a problem:</p>
-<img class="LaTeX SVG" src="./images/chapters/reordering/483c89c8726f7fd0dca0b7de339b04bd.svg" width="471px" height="159px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/reordering/483c89c8726f7fd0dca0b7de339b04bd.svg" width="479px" height="161px" loading="lazy">
 <p>So, with both of those changed from an order <code>n</code> expression to an order <code>(n+1)</code> expression, we can put them back together again. Now, where the order <code>n</code> function had a summation from 0 to <code>n</code>, the order <code>n+1</code> function uses a summation from 0 to <code>n+1</code>, but this shouldn't be a problem as long as we can add some new terms that "contribute nothing". In the next section on derivatives, there is a discussion about why "higher terms than there is a binomial for" and "lower than zero terms" both "contribute nothing". So as long as we can add terms that have the same form as the terms we need, we can just include them in the summation, they'll sit there and do nothing, and the resulting function stays identical to the lower order curve.</p>
 <p>Let's do this:</p>
-<img class="LaTeX SVG" src="./images/chapters/reordering/dd8d8d98f66ce9f51b95cbf48225e97b.svg" width="465px" height="257px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/reordering/dd8d8d98f66ce9f51b95cbf48225e97b.svg" width="481px" height="257px" loading="lazy">
 <p>And this is where we switch over from calculus to linear algebra, and matrices: we can now express this relation between Bézier(n,t) and Bézier(n+1,t) as a very simple matrix multiplication:</p>
-<img class="LaTeX SVG" src="./images/chapters/reordering/773fdc86b686647c823b4f499aca3a35.svg" width="71px" height="16px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/reordering/773fdc86b686647c823b4f499aca3a35.svg" width="77px" height="17px" loading="lazy">
 <p>where the matrix <strong>M</strong> is an <code>n+1</code> by <code>n</code> matrix, and looks like:</p>
-<img class="LaTeX SVG" src="./images/chapters/reordering/7a9120997e4a4855ecda435553a7bbdf.svg" width="336px" height="187px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/reordering/7a9120997e4a4855ecda435553a7bbdf.svg" width="340px" height="172px" loading="lazy">
 <p>That might look unwieldy, but it's really just a mostly-zeroes matrix, with a very simply fraction on the diagonal, and an even simpler fraction to the left of it. Multiplying a list of coordinates with this matrix means we can plug the resulting transformed coordinates into the one-order-higher function and get an identical looking curve.</p>
 <p>Not too bad!</p>
 <p>Equally interesting, though, is that with this matrix operation established, we can now use an incredibly powerful and ridiculously simple way to find out a "best fit" way to reverse the operation, called <a href="https://mathworld.wolfram.com/NormalEquation.html">the normal equation</a>. What it does is minimize the sum of the square differences between one set of values and another set of values. Specifically, if we can express that as some function <strong>A x = b</strong>, we can use it. And as it so happens, that's exactly what we're dealing with, so:</p>
-<img class="LaTeX SVG" src="./images/chapters/reordering/d52f60b331c1b8d6733eb5217adfbc4d.svg" width="272px" height="116px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/reordering/d52f60b331c1b8d6733eb5217adfbc4d.svg" width="288px" height="109px" loading="lazy">
 <p>The steps taken here are:</p>
 <ol>
 <li>We have a function in a form that the normal equation can be used with, so</li>
@@ -863,20 +863,20 @@ function drawCurve(points[], t):
 <section id="pointvectors">
           <h1><div class="nav"><a href="#derivatives">previous</a><a href="#pointvectors3d">next</a></div><a href="#pointvectors">Tangents and normals</a></h1>
 <p>If you want to move objects along a curve, or "away from" a curve, the two vectors you're most interested in are the tangent vector and normal vector for curve points. These are actually really easy to find. For moving and orienting along a curve, we use the tangent, which indicates the direction of travel at specific points, and is literally just the first derivative of our curve:</p>
-<img class="LaTeX SVG" src="./images/chapters/pointvectors/d236b7b2ad46c8ced1b43bb2a496379a.svg" width="141px" height="40px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/pointvectors/d236b7b2ad46c8ced1b43bb2a496379a.svg" width="151px" height="40px" loading="lazy">
 <p>This gives us the directional vector we want. We can normalize it to give us uniform directional vectors (having a length of 1.0) at each point, and then do whatever it is we want to do based on those directions:</p>
-<img class="LaTeX SVG" src="./images/chapters/pointvectors/6101b2f8b69ebabba4a2c88456a32aa0.svg" width="251px" height="25px" loading="lazy">
-<img class="LaTeX SVG" src="./images/chapters/pointvectors/009715fce01e46e7c07f87a8192a8c62.svg" width="289px" height="57px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/pointvectors/6101b2f8b69ebabba4a2c88456a32aa0.svg" width="268px" height="29px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/pointvectors/009715fce01e46e7c07f87a8192a8c62.svg" width="308px" height="53px" loading="lazy">
 <p>The tangent is very useful for moving along a line, but what if we want to move away from the curve instead, perpendicular to the curve at some point <i>t</i>? In that case we want the <em>normal</em> vector. This vector runs at a right angle to the direction of the curve, and is typically of length 1.0, so all we have to do is rotate the normalized directional vector and we're done:</p>
-<img class="LaTeX SVG" src="./images/chapters/pointvectors/2dd2f89d1c762991a86526490a3deef6.svg" width="339px" height="60px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/pointvectors/2dd2f89d1c762991a86526490a3deef6.svg" width="341px" height="57px" loading="lazy">
 <div class="note">
 
 <p>Rotating coordinates is actually very easy, if you know the rule for it. You might find it explained as "applying a <a href="https://en.wikipedia.org/wiki/Rotation_matrix">rotation matrix</a>, which is what we'll look at here, too. Essentially, the idea is to take the circles over which we can rotate, and simply "sliding the coordinates" over these circles by the desired
 angle. If we want a quarter circle turn, we take the coordinate, slide it along the cirle by a quarter turn, and done.</p>
 <p>To turn any point <i>(x,y)</i> into a rotated point <i>(x',y')</i> (over 0,0) by some angle φ, we apply this nice and easy computation:</p>
-<img class="LaTeX SVG" src="./images/chapters/pointvectors/deec095950fcd1f9c980be76a7093fe6.svg" width="183px" height="37px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/pointvectors/deec095950fcd1f9c980be76a7093fe6.svg" width="179px" height="37px" loading="lazy">
 <p>Which is the "long" version of the following matrix transformation:</p>
-<img class="LaTeX SVG" src="./images/chapters/pointvectors/2a55cb2d23c25408aa10cfd8db13278b.svg" width="211px" height="40px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/pointvectors/2a55cb2d23c25408aa10cfd8db13278b.svg" width="205px" height="40px" loading="lazy">
 <p>And that's all we need to rotate any coordinate. Note that for quarter, half, and three-quarter turns these functions become even easier, since <em>sin</em> and <em>cos</em> for these angles are, respectively: 0 and 1, -1 and 0, and 0 and -1.</p>
 <p>But <strong><em>why</em></strong> does this work? Why this matrix multiplication? <a href="https://en.wikipedia.org/wiki/Rotation_matrix#Decomposition_into_shears">Wikipedia</a> (technically, Thomas Herter and Klaus Lott) tells us that a rotation matrix can be
 treated as a sequence of three (elementary) shear operations. When we combine this into a single matrix operation (because all matrix multiplications can be collapsed), we get the matrix that you see above. <a href="https://datagenetics.com/blog/august32013/index.html">DataGenetics</a> have an excellent article about this very thing: it's really quite cool, and I strongly recommend taking a quick break from this primer to read that article.</p>
@@ -1034,27 +1034,27 @@ treated as a sequence of three (elementary) shear operations. When we combine th
 <p>Now that we understand (well, superficially anyway) the component functions, we can find the extremities of our Bézier curve by finding maxima and minima on the component functions, by solving the equation B'(t) = 0. We've already seen that the derivative of a Bézier curve is a simpler Bézier curve, but how do we solve the equality? Fairly easily, actually, until our derivatives are 4th order or higher... then things get really hard. But let's start simple:</p>
 <h3>Quadratic curves: linear derivatives.</h3>
 <p>The derivative of a quadratic Bézier curve is a linear Bézier curve, interpolating between just two terms, which means finding the solution for "where is this line 0" is effectively trivial by rewriting it to a function of <code>t</code> and solving. First we turn our cubic Bézier function into a quadratic one, by following the rule mentioned at the end of the <a href="#derivatives">derivatives section</a>:</p>
-<img class="LaTeX SVG" src="./images/chapters/extremities/6db78123d4b676ffdf85d53670c77468.svg" width="187px" height="63px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/extremities/6db78123d4b676ffdf85d53670c77468.svg" width="189px" height="64px" loading="lazy">
 <p>And then we turn this into our solution for <code>t</code> using basic arithmetics:</p>
-<img class="LaTeX SVG" src="./images/chapters/extremities/1c0367fad2a0d6946db1f55a8520793a.svg" width="135px" height="77px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/extremities/1c0367fad2a0d6946db1f55a8520793a.svg" width="139px" height="77px" loading="lazy">
 <p>Done.</p>
 <p>Although with the <a href="https://en.wikipedia.org/wiki/Caveat_emptor#Caveat_lector">caveat</a> that if <code>b-a</code> is zero, there is no solution and we probably shouldn't try to perform that division.</p>
 <h3>Cubic curves: the quadratic formula.</h3>
 <p>The derivative of a cubic Bézier curve is a quadratic Bézier curve, and finding the roots for a quadratic polynomial means we can apply the <a href="https://en.wikipedia.org/wiki/Quadratic_formula">Quadratic formula</a>. If you've seen it before, you'll remember it, and if you haven't, it looks like this:</p>
-<img class="LaTeX SVG" src="./images/chapters/extremities/0ec5cc72a428d75defb480530b50d720.svg" width="411px" height="40px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/extremities/0ec5cc72a428d75defb480530b50d720.svg" width="433px" height="37px" loading="lazy">
 <p>So, if we can rewrite the Bézier component function as a plain polynomial, we're done: we just plug in the values into the quadratic formula, check if that square root is negative or not (if it is, there are no roots) and then just compute the two values that come out (because of that plus/minus sign we get two). Any value between 0 and 1 is a root that matters for Bézier curves, anything below or above that is irrelevant (because Bézier curves are only defined over the interval [0,1]). So, how do we convert?</p>
 <p>First we turn our cubic Bézier function into a quadratic one, by following the rule mentioned at the end of the <a href="#derivatives">derivatives section</a>:</p>
-<img class="LaTeX SVG" src="./images/chapters/extremities/e06ec558d99b53e559d24524f4201951.svg" width="537px" height="36px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/extremities/e06ec558d99b53e559d24524f4201951.svg" width="553px" height="37px" loading="lazy">
 <p>And then, using these <em>v</em> values, we can find out what our <em>a</em>, <em>b</em>, and <em>c</em> should be:</p>
-<img class="LaTeX SVG" src="./images/chapters/extremities/ddc6f99a543afad25c55cf16b9deeed9.svg" width="315px" height="119px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/extremities/ddc6f99a543afad25c55cf16b9deeed9.svg" width="317px" height="112px" loading="lazy">
 <p>This gives us three coefficients {a, b, c} that are expressed in terms of <code>v</code> values, where the <code>v</code> values are expressions of our original coordinate values, so we can do some substitution to get:</p>
-<img class="LaTeX SVG" src="./images/chapters/extremities/d9e66caeb45b6643112ce3d971b17e5b.svg" width="308px" height="63px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/extremities/d9e66caeb45b6643112ce3d971b17e5b.svg" width="308px" height="64px" loading="lazy">
 <p>Easy-peasy. We can now almost trivially find the roots by plugging those values into the quadratic formula.</p>
 <p>And as a cubic curve, there is also a meaningful second derivative, which we can compute by simple taking the derivative of the derivative.</p>
 <h3>Quartic curves: Cardano's algorithm.</h3>
 <p>We haven't really looked at them before now, but the next step up would be a Quartic curve, a fourth degree Bézier curve. As expected, these have a derivative that is a cubic function, and now things get much harder. Cubic functions don't have a "simple" rule to find their roots, like the quadratic formula, and instead require quite a bit of rewriting to a form that we can even start to try to solve.</p>
 <p>Back in the 16<sup>th</sup> century, before Bézier curves were a thing, and even before <em>calculus itself</em> was a thing, <a href="https://en.wikipedia.org/wiki/Gerolamo_Cardano">Gerolamo Cardano</a> figured out that even if the general cubic function is really hard to solve, it can be rewritten to a form for which finding the roots is "easier" (even if not "easy"):</p>
-<img class="LaTeX SVG" src="./images/chapters/extremities/997a8cc704c0ab0e364cb8b532df90b0.svg" width="253px" height="44px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/extremities/997a8cc704c0ab0e364cb8b532df90b0.svg" width="264px" height="41px" loading="lazy">
 <p>We can see that the easier formula only has two constants, rather than four, and only two expressions involving <code>t</code>, rather than three: this makes things considerably easier to solve because it lets us use <a href="https://www.wolframalpha.com/input/?i=t%5E3+%2B+pt+%2B+q">regular calculus</a> to find the values that satisfy the equasion.</p>
 <p>Now, there is one small hitch: as a cubic function, the solutions may be <a href="https://en.wikipedia.org/wiki/Complex_number">complex numbers</a> rather than plain numbers... And Cardona realised this, centuries befor complex numbers were a well-understood and established part of number theory. His interpretation of them was "these numbers are impossible but that's okay because they disappear again in later steps", allowing him to not think about them too much, but we have it even easier: as we're trying to find the roots for display purposes, we don't even <em>care</em> about complex numbers: we're going to simplify Cardano's approach just that tiny bit further by throwing away any solution that's not a plain number.</p>
 <p>So, how do we rewrite the hard formula into the easier formula? This is explained in detail over at <a href="https://trans4mind.com/personal_development/mathematics/polynomials/cubicAlgebra.htm">Ken J. Ward's page</a> for solving the cubic equation, so instead of showing the maths, I'm simply going to show the programming code for solving the cubic equation, with the complex roots getting totally ignored, but if you're interested you should definitely head over to Ken's page and give the procedure a read-through.</p>
@@ -1152,7 +1152,7 @@ function getCubicRoots(pa, pb, pc, pd) {
 <p>That's a fancy term for saying "rather than trying to find exact answers by manipulating symbols, find approximate answers by describing the underlying process as a combination of steps, each of which <em>can</em> be assigned a number via symbolic manipulation". For example, trying to mathematically compute how much water fits in a completely crazy three dimensional shape is very hard, even if it got you the perfect, precise answer. A much easier approach, which would be less perfect but still entirely useful, would be to just grab a buck and start filling the shape until it was full: just count the number of buckets of water you used. And if we want a more precise answer, we can use smaller buckets.</p>
 <p>So that's what we're going to do here, too: we're going to treat the problem as a sequence of steps, and the smaller we can make each step, the closer we'll get to that "perfect, precise" answer. And as it turns out, there is a really nice numerical root-finding algorithm, called the <a href="https://en.wikipedia.org/wiki/Newton-Raphson">Newton-Raphson</a> root finding method (yes, after <em><a href="https://en.wikipedia.org/wiki/Isaac_Newton">that</a></em> Newton), which we can make use of. The Newton-Raphson approach consists of taking our impossible-to-solve function <code>f(x)</code>, picking some intial value <code>x</code> (literally any value will do), and calculating <code>f(x)</code>. We can think of that value as the "height" of the function at <code>x</code>. If that height is zero, we're done, we have found a root. If it isn't, we calculate the tangent line at <code>f(x)</code> and calculate at which <code>x</code> value <em>its</em> height is zero (which we've already seen is very easy). That will give us a new <code>x</code> and we repeat the process until we find a root.</p>
 <p>Mathematically, this means that for some <code>x</code>, at step <code>n=1</code>, we perform the following calculation until <code>f<sub>y</sub>(x)</code> is zero, so that the next <code>t</code> is the same as the one we already have:</p>
-<img class="LaTeX SVG" src="./images/chapters/extremities/c621cc41f6f22ee1beedbcb510fa5b6b.svg" width="132px" height="45px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/extremities/c621cc41f6f22ee1beedbcb510fa5b6b.svg" width="139px" height="43px" loading="lazy">
 <p>(The Wikipedia article has a decent animation for this process, so I will not add a graphic for that here)</p>
 <p>Now, this works well only if we can pick good starting points, and our curve is <a href="https://en.wikipedia.org/wiki/Continuous_function">continuously differentiable</a> and doesn't have <a href="https://en.wikipedia.org/wiki/Oscillation_(mathematics)">oscillations</a>. Glossing over the exact meaning of those terms, the curves we're dealing with conform to those constraints, so as long as we pick good starting points, this will work. So the question is: which starting points do we pick?</p>
 <p>As it turns out, Newton-Raphson is so blindingly fast that we could get away with just not picking: we simply run the algorithm from <em>t=0</em> to <em>t=1</em> at small steps (say, 1/200<sup>th</sup>) and the result will be all the roots we want. Of course, this may pose problems for high order Bézier curves: 200 steps for a 200<sup>th</sup> order Bézier curve is going to go wrong, but that's okay: there is no reason (at least, none that I know of) to <em>ever</em> use Bézier curves of crazy high orders. You might use a fifth order curve to get the "nicest still remotely workable" approximation of a full circle with a single Bézier curve, but that's pretty much as high as you'll ever need to go.</p>
@@ -1206,13 +1206,13 @@ function getCubicRoots(pa, pb, pc, pd) {
           <h1><div class="nav"><a href="#boundingbox">previous</a><a href="#tightbounds">next</a></div><a href="#aligning">Aligning curves</a></h1>
 <p>While there are an incredible number of curves we can define by varying the x- and y-coordinates for the control points, not all curves are actually distinct. For instance, if we define a curve, and then rotate it 90 degrees, it's still the same curve, and we'll find its extremities in the same spots, just at different draw coordinates. As such, one way to make sure we're working with a "unique" curve is to "axis-align" it.</p>
 <p>Aligning also simplifies a curve's functions. We can translate (move) the curve so that the first point lies on (0,0), which turns our <em>n</em> term polynomial functions into <em>n-1</em> term functions. The order stays the same, but we have less terms. Then, we can rotate the curves so that the last point always lies on the x-axis, too, making its coordinate (...,0). This further simplifies the function for the y-component to an <em>n-2</em> term function. For instance, if we have a cubic curve such as this:</p>
-<img class="LaTeX SVG" src="./images/chapters/aligning/d480a9aa41917e5230d432cdbd6899b1.svg" width="476px" height="40px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/aligning/d480a9aa41917e5230d432cdbd6899b1.svg" width="487px" height="40px" loading="lazy">
 <p>Then translating it so that the first coordinate lies on (0,0), moving all <em>x</em> coordinates by -120, and all <em>y</em> coordinates by -160, gives us:</p>
-<img class="LaTeX SVG" src="./images/chapters/aligning/50679d61424222d7b6b97eb3aa663582.svg" width="460px" height="40px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/aligning/50679d61424222d7b6b97eb3aa663582.svg" width="471px" height="40px" loading="lazy">
 <p>If we then rotate the curve so that its end point lies on the x-axis, the coordinates (integer-rounded for illustrative purposes here) become:</p>
-<img class="LaTeX SVG" src="./images/chapters/aligning/a9af1c06a00bb3c4af816a138fb0a66d.svg" width="452px" height="40px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/aligning/a9af1c06a00bb3c4af816a138fb0a66d.svg" width="463px" height="40px" loading="lazy">
 <p>If we drop all the zero-terms, this gives us:</p>
-<img class="LaTeX SVG" src="./images/chapters/aligning/c78b203ff33e5c1606728b552505d61c.svg" width="387px" height="40px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/aligning/c78b203ff33e5c1606728b552505d61c.svg" width="397px" height="40px" loading="lazy">
 <p>We can see that our original curve definition has been simplified considerably. The following graphics illustrate the result of aligning our example curves to the x-axis, with the cubic case using the coordinates that were just used in the example formulae:</p>
 <div class="figure">
 <graphics-element title="Aligning a quadratic curve" width="550" height="275" src="./chapters/aligning/aligning.js" data-type="quadratic">
@@ -1257,29 +1257,29 @@ function getCubicRoots(pa, pb, pc, pd) {
 <p>Now that we know how to align a curve, there's one more thing we can calculate: inflection points. Imagine we have a variable size circle that we can slide up against our curve. We place it against the curve and adjust its radius so that where it touches the curve, the curvatures of the curve and the circle are the same, and then we start to slide the circle along the curve - for quadratic curves, we can always do this without the circle behaving oddly: we might have to change the radius of the circle as we slide it along, but it'll always sit against the same side of the curve.</p>
 <p>But what happens with cubic curves? Imagine we have an S curve and we place our circle at the start of the curve, and start sliding it along. For a while we can simply adjust the radius and things will be fine, but once we get to the midpoint of that S, something odd happens: the circle "flips" from one side of the curve to the other side, in order for the curvatures to keep matching. This is called an inflection, and we can find out where those happen relatively easily.</p>
 <p>What we need to do is solve a simple equation:</p>
-<img class="LaTeX SVG" src="./images/chapters/inflections/bafdb6583323bda71d9a15c02d1fdec2.svg" width="59px" height="16px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/inflections/bafdb6583323bda71d9a15c02d1fdec2.svg" width="59px" height="17px" loading="lazy">
 <p>What we're saying here is that given the curvature function <em>C(t)</em>, we want to know for which values of <em>t</em> this function is zero, meaning there is no "curvature", which will be exactly at the point between our circle being on one side of the curve, and our circle being on the other side of the curve. So what does <em>C(t)</em> look like? Actually something that seems not too hard:</p>
-<img class="LaTeX SVG" src="./images/chapters/inflections/2029bca9f4fa15739553636af99b70a8.svg" width="385px" height="21px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/inflections/2029bca9f4fa15739553636af99b70a8.svg" width="399px" height="19px" loading="lazy">
 <p>The function <em>C(t)</em> is the cross product between the first and second derivative functions for the parametric dimensions of our curve. And, as already shown, derivatives of Bézier curves are just simpler Bézier curves, with very easy to compute new coefficients, so this should be pretty easy.</p>
 <p>However as we've seen in the section on aligning, aligning lets us simplify things <em>a lot</em>, by completely removing the contributions of the first coordinate from most mathematical evaluations, and removing the last <em>y</em> coordinate as well by virtue of the last point lying on the x-axis. So, while we can evaluate <em>C(t) = 0</em> for our curve, it'll be much easier to first axis-align the curve and <em>then</em> evaluating the curvature function.</p>
 <div class="note">
 
 <h3>Let's derive the full formula anyway</h3>
 <p>Of course, before we do our aligned check, let's see what happens if we compute the curvature function without axis-aligning. We start with the first and second derivatives, given our basis functions:</p>
-<img class="LaTeX SVG" src="./images/chapters/inflections/4d78ebcf8626f777725d67d3672fa480.svg" width="601px" height="71px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/inflections/4d78ebcf8626f777725d67d3672fa480.svg" width="613px" height="71px" loading="lazy">
 <p>And of course the same functions for <em>y</em>:</p>
-<img class="LaTeX SVG" src="./images/chapters/inflections/97b34ad5920612574d1b2a1a9d22d571.svg" width="399px" height="69px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/inflections/97b34ad5920612574d1b2a1a9d22d571.svg" width="397px" height="69px" loading="lazy">
 <p>Asking a computer to now compose the <em>C(t)</em> function for us (and to expand it to a readable form of simple terms) gives us this rather overly complicated set of arithmetic expressions:</p>
-<img class="LaTeX SVG" src="./images/chapters/inflections/b2433959e1f451fa3bf238fc37e04527.svg" width="552px" height="97px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/inflections/b2433959e1f451fa3bf238fc37e04527.svg" width="557px" height="96px" loading="lazy">
 <p>That is... unwieldy. So, we note that there are a lot of terms that involve multiplications involving x1, y1, and y4, which would all disappear if we axis-align our curve, which is why aligning is a great idea.</p>
 </div>
 
 <p>Aligning our curve so that three of the eight coefficients become zero, and observing that scale does not affect finding <code>t</code> values, we end up with the following simple term function for <em>C(t)</em>:</p>
-<img class="LaTeX SVG" src="./images/chapters/inflections/1679090a942a43d27f886f236fc8d62b.svg" width="533px" height="20px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/inflections/1679090a942a43d27f886f236fc8d62b.svg" width="533px" height="19px" loading="lazy">
 <p>That's a lot easier to work with: we see a fair number of terms that we can compute and then cache, giving us the following simplification:</p>
-<img class="LaTeX SVG" src="./images/chapters/inflections/4b5c7d0bf0fcd769db007dd98d4a024d.svg" width="467px" height="73px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/inflections/4b5c7d0bf0fcd769db007dd98d4a024d.svg" width="480px" height="73px" loading="lazy">
 <p>This is a plain quadratic curve, and we know how to solve <em>C(t) = 0</em>; we use the quadratic formula:</p>
-<img class="LaTeX SVG" src="./images/chapters/inflections/7c9762c0e04693eb743905cdc0487f8b.svg" width="405px" height="55px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/inflections/7c9762c0e04693eb743905cdc0487f8b.svg" width="428px" height="53px" loading="lazy">
 <p>We can easily compute this value <em>if</em> the discriminator isn't a negative number (because we only want real roots, not complex roots), and <em>if</em> <em>x</em> is not zero, because divisions by zero are rather useless.</p>
 <p>Taking that into account, we compute <em>t</em>, we disregard any <em>t</em> value that isn't in the Bézier interval [0,1], and we now know at which <em>t</em> value(s) our curve will inflect.</p>
 <graphics-element title="Finding cubic Bézier curve inflections" width="275" height="275" src="./chapters/inflections/inflection.js" >
@@ -1308,13 +1308,13 @@ function getCubicRoots(pa, pb, pc, pd) {
 <li><p>...anywhere inside the red zone, but not on its boundaries, the curve will either be self-intersecting (yielding a loop). We won't know <em>where</em> it self-intersects (in terms of <em>t</em> values), but we are guaranteed that it does.</p>
 </li>
 <li><p>...on the left (red) edge of the red zone, the curve will have a cusp. We again don't know <em>where</em>, but we know there is one. This edge is described by the function:</p>
-<img class="LaTeX SVG" src="./images/chapters/canonical/63ccae0ebe0ca70dc2afb507ab32e4bd.svg" width="180px" height="37px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/canonical/63ccae0ebe0ca70dc2afb507ab32e4bd.svg" width="187px" height="36px" loading="lazy">
 </li>
 <li><p>...on the almost circular, lower right (pink) edge, the curve's end point touches the curve, forming a loop. This edge is described by the function:</p>
-<img class="LaTeX SVG" src="./images/chapters/canonical/add5f7fb210a306fe9ff933113f6fb91.svg" width="231px" height="39px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/canonical/add5f7fb210a306fe9ff933113f6fb91.svg" width="241px" height="37px" loading="lazy">
 </li>
 <li><p>...on the top (blue) edge, the curve's start point touches the curve, forming a loop. This edge is described by the function:</p>
-<img class="LaTeX SVG" src="./images/chapters/canonical/4230e959138d8400e04abf316360009a.svg" width="153px" height="37px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/canonical/4230e959138d8400e04abf316360009a.svg" width="159px" height="37px" loading="lazy">
 </li>
 <li><p>...inside the lower (green) zone, past <code>y=1</code>, the curve will have a single inflection (switching concave/convex once).</p>
 </li>
@@ -1335,24 +1335,24 @@ function getCubicRoots(pa, pb, pc, pd) {
 <p>So now the question becomes: how do we manipulate our curve so that it fits this canonical form, with three fixed points, and one "free" point? Enter linear algebra. Don't worry, I'll be doing all the math for you, as well as show you what the effect is on our curves, but basically we're going to be using linear algebra, rather than calculus, because "it's way easier". Sometimes a calculus approach is very hard to work with, when the equivalent geometrical solution is super obvious.</p>
 <p>The approach is going to start with a curve that doesn't have all-colinear points (so we need to make sure the points don't all fall on a straight line), and then applying three graphics operations that you will probably have heard of: translation (moving all points by some fixed x- and y-distance), scaling (multiplying all points by some x and y scale factor), and shearing (an operation that turns rectangles into parallelograms).</p>
 <p>Step 1: we translate any curve by -p1.x and -p1.y, so that the curve starts at (0,0). We're going to make use of an interesting trick here, by pretending our 2D coordinates are 3D, with the <em>z</em> coordinate simply always being 1. This is an old trick in graphics to overcome the limitations of 2D transformations: without it, we can only turn (x,y) coordinates into new coordinates of the form (ax + by, cx + dy), which means we can't do translation, since that requires we end up with some kind of (x + a, y + b). If we add a bogus <em>z</em> coordinate that is always 1, then we can suddenly add arbitrary values. For example:</p>
-<img class="LaTeX SVG" src="./images/chapters/canonical/2a411f175dcc987cdcc12e7df49ca272.svg" width="464px" height="55px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/canonical/2a411f175dcc987cdcc12e7df49ca272.svg" width="491px" height="55px" loading="lazy">
 <p>Sweet! <em>z</em> stays 1, so we can effectively ignore it entirely, but we added some plain values to our x and y coordinates. So, if we want to subtract p1.x and p1.y, we use:</p>
-<img class="LaTeX SVG" src="./images/chapters/canonical/ba5f418452c3657f3c4dd4b319e59070.svg" width="447px" height="57px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/canonical/ba5f418452c3657f3c4dd4b319e59070.svg" width="469px" height="57px" loading="lazy">
 <p>Running all our coordinates through this transformation gives a new set of coordinates, let's call those <strong>U</strong>, where the first coordinate lies on (0,0), and the rest is still somewhat free. Our next job is to make sure point 2 ends up lying on the <em>x=0</em> line, so what we want is a transformation matrix that, when we run it, subtracts <em>x</em> from whatever <em>x</em> we currently have. This is called <a href="https://en.wikipedia.org/wiki/Shear_matrix">shearing</a>, and the typical x-shear matrix and its transformation looks like this:</p>
-<img class="LaTeX SVG" src="./images/chapters/canonical/10025fdab2b3fd20f5d389cbe7e3e3ce.svg" width="195px" height="53px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/canonical/10025fdab2b3fd20f5d389cbe7e3e3ce.svg" width="208px" height="53px" loading="lazy">
 <p>So we want some shearing value that, when multiplied by <em>y</em>, yields <em>-x</em>, so our x coordinate becomes zero. That value is simply <em>-x/y</em>, because *-x/y * y = -x*. Done:</p>
-<img class="LaTeX SVG" src="./images/chapters/canonical/20684d22b3ddc52fd6abde8ce56608a9.svg" width="133px" height="67px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/canonical/20684d22b3ddc52fd6abde8ce56608a9.svg" width="135px" height="65px" loading="lazy">
 <p>Now, running this on all our points generates a new set of coordinates, let's call those <strong>V</strong>, which now have point 1 on (0,0) and point 2 on (0, some-value), and we wanted it at (0,1), so we need to <a href="https://en.wikipedia.org/wiki/Scaling_%28geometry%29">do some scaling</a> to make sure it ends up at (0,1). Additionally, we want point 3 to end up on (1,1), so we can also scale x to make sure its x-coordinate will be 1 after we run the transform. That means we'll be x-scaling by 1/point3<sub>x</sub>, and y-scaling by point2<sub>y</sub>. This is really easy:</p>
-<img class="LaTeX SVG" src="./images/chapters/canonical/8cbef24b8c3b26f9daf2f89d27d36e95.svg" width="137px" height="71px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/canonical/8cbef24b8c3b26f9daf2f89d27d36e95.svg" width="136px" height="67px" loading="lazy">
 <p>Then, finally, this generates a new set of coordinates, let's call those W, of which point 1 lies on (0,0), point 2 lies on (0,1), and point three lies on (1, ...) so all that's left is to make sure point 3 ends up at (1,1) - but we can't scale! Point 2 is already in the right place, and y-scaling would move it out of (0,1) again, so our only option is to y-shear point three, just like how we x-sheared point 2 earlier. In this case, we do the same trick, but with <code>y/x</code> rather than <code>x/y</code> because we're not x-shearing but y-shearing. Additionally, we don't actually want to end up at zero (which is what we did before) so we need to shear towards an offset, in this case 1:</p>
-<img class="LaTeX SVG" src="./images/chapters/canonical/0430e8c7f7d4ec80e6527f96f3d56e5c.svg" width="140px" height="65px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/canonical/0430e8c7f7d4ec80e6527f96f3d56e5c.svg" width="140px" height="63px" loading="lazy">
 <p>And this generates our final set of four coordinates. Of these, we already know that points 1 through 3 are (0,0), (0,1) and (1,1), and only the last coordinate is "free". In fact, given any four starting coordinates, the resulting "transformation mapped" coordinate will be:</p>
-<img class="LaTeX SVG" src="./images/chapters/canonical/f039b4e7cf0203df9fac48dad820b2b7.svg" width="455px" height="91px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/canonical/f039b4e7cf0203df9fac48dad820b2b7.svg" width="460px" height="79px" loading="lazy">
 <p>Okay, well, that looks plain ridiculous, but: notice that every coordinate value is being offset by the initial translation, and also notice that <em>a lot</em> of terms in that expression are repeated. Even though the maths looks crazy as a single expression, we can just pull this apart a little and end up with an easy-to-calculate bit of code!</p>
 <p>First, let's just do that translation step as a "preprocessing" operation so we don't have to subtract the values all the time. What does that leave?</p>
-<img class="LaTeX SVG" src="./images/chapters/canonical/13c09950363c33627fd3a20343f2f6ce.svg" width="775px" height="67px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/canonical/13c09950363c33627fd3a20343f2f6ce.svg" width="800px" height="65px" loading="lazy">
 <p>Suddenly things look a lot simpler: the mapped x is fairly straight forward to compute, and we see that the mapped y actually contains the mapped x in its entirety, so we'll have that part already available when we need to evaluate it. In fact, let's pull out all those common factors to see just how simple this is:</p>
-<img class="LaTeX SVG" src="./images/chapters/canonical/ddee51855ef3a9ee7660c395b0a041c7.svg" width="563px" height="55px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/canonical/ddee51855ef3a9ee7660c395b0a041c7.svg" width="581px" height="55px" loading="lazy">
 <p>That's kind of super-simple to write out in code, I think you'll agree. Coding math tends to be easier than the formulae initially make it look!</p>
 <div class="note">
 
@@ -1385,11 +1385,11 @@ function getCubicRoots(pa, pb, pc, pd) {
 
 <p>Now, if you look more closely at that right graphic, you'll notice something interesting: if we treat the red line as "the x axis", then the point where the function crosses our line is really just a root for the cubic function x(t) through a shifted "x-axis"... and <a href="#extremities">we've already seen</a> how to calculate roots, so let's just run cubuc root finding - and not even the complicated cubic case either: because of the kind of curve we're starting with, we <em>know</em> there is only root, simplifying the code we need!</p>
 <p>First, let's look at the function for x(t):</p>
-<img class="LaTeX SVG" src="./images/chapters/yforx/9df91c28af38c1ba2e2d38d2714c9446.svg" width="335px" height="19px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/yforx/9df91c28af38c1ba2e2d38d2714c9446.svg" width="336px" height="19px" loading="lazy">
 <p>We can rewrite this to a plain polynomial form, by just fully writing out the expansion and then collecting the polynomial factors, as:</p>
-<img class="LaTeX SVG" src="./images/chapters/yforx/9ab2b830fe7fb73350c19bde04e9441b.svg" width="445px" height="19px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/yforx/9ab2b830fe7fb73350c19bde04e9441b.svg" width="451px" height="19px" loading="lazy">
 <p>Nothing special here: that's a standard cubic polynomial in "power" form (i.e. all the terms are ordered by their power of <code>t</code>). So, given that <code>a</code>, <code>b</code>, <code>c</code>, <code>d</code>, <em>and</em> <code>x(t)</code> are all known constants, we can trivially rewrite this (by moving the <code>x(t)</code> across the equal sign) as:</p>
-<img class="LaTeX SVG" src="./images/chapters/yforx/61e43d68f6eb677d0fccd473c121e782.svg" width="465px" height="19px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/yforx/61e43d68f6eb677d0fccd473c121e782.svg" width="472px" height="19px" loading="lazy">
 <p>You might be wondering "where did all the other 'minus x' for all the other values a, b, c, and d go?" and the answer there is that they all cancel out, so the only one we actually need to subtract is the one at the end. Handy! So now we just solve this equation using Cardano's algorithm, and we're left with some rather short code:</p>
 <pre><code>// prepare our values for root finding:
 x = a value we already know
@@ -1416,13 +1416,13 @@ y = curve.get(t).y</code></pre>
 <section id="arclength">
           <h1><div class="nav"><a href="#yforx">previous</a><a href="#arclengthapprox">next</a></div><a href="#arclength">Arc length</a></h1>
 <p>How long is a Bézier curve? As it turns out, that's not actually an easy question, because the answer requires maths that —much like root finding— cannot generally be solved the traditional way. If we have a parametric curve with <em>f<sub>x</sub>(t)</em> and <em>f<sub>y</sub>(t)</em>, then the length of the curve, measured from start point to some point <em>t = z</em>, is computed using the following seemingly straight forward (if a bit overwhelming) formula:</p>
-<img class="LaTeX SVG" src="./images/chapters/arclength/cb24cda7f7f4bbf3be7104c460e0ec9f.svg" width="140px" height="33px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/arclength/cb24cda7f7f4bbf3be7104c460e0ec9f.svg" width="156px" height="41px" loading="lazy">
 <p>or, more commonly written using Leibnitz notation as:</p>
-<img class="LaTeX SVG" src="./images/chapters/arclength/d3003177813309f88f58a1f515f5df9f.svg" width="245px" height="35px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/arclength/d3003177813309f88f58a1f515f5df9f.svg" width="259px" height="41px" loading="lazy">
 <p>This formula says that the length of a parametric curve is in fact equal to the <strong>area</strong> underneath a function that looks a remarkable amount like Pythagoras' rule for computing the diagonal of a straight angled triangle. This sounds pretty simple, right? Sadly, it's far from simple... cutting straight to after the chase is over: for quadratic curves, this formula generates an <a href="https://www.wolframalpha.com/input/?i=antiderivative+for+sqrt((2*(1-t)*t*B+%2B+t%5E2*C)%27%5E2+%2B+(2*(1-t)*t*E)%27%5E2)&incParTime=true">unwieldy computation</a>, and we're simply not going to implement things that way. For cubic Bézier curves, things get even more fun, because there is no "closed form" solution, meaning that due to the way calculus works, there is no generic formula that allows you to calculate the arc length. Let me just repeat this, because it's fairly crucial: <strong><em>for cubic and higher Bézier curves, there is no way to solve this function if you want to use it "for all possible coordinates"</em></strong>.</p>
 <p>Seriously: <a href="https://en.wikipedia.org/wiki/Abel%E2%80%93Ruffini_theorem">It cannot be done</a>.</p>
 <p>So we turn to numerical approaches again. The method we'll look at here is the <a href="https://www.youtube.com/watch?v=unWguclP-Ds&feature=BFa&list=PLC8FC40C714F5E60F&index=1">Gauss quadrature</a>. This approximation is a really neat trick, because for any <em>n<sup>th</sup></em> degree polynomial it finds approximated values for an integral really efficiently. Explaining this procedure in length is way beyond the scope of this page, so if you're interested in finding out why it works, I can recommend the University of South Florida video lecture on the procedure, linked in this very paragraph. The general solution we're looking for is the following:</p>
-<img class="LaTeX SVG" src="./images/chapters/arclength/e168758d35b8f6781617eda5a32b20bf.svg" width="636px" height="71px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/arclength/e168758d35b8f6781617eda5a32b20bf.svg" width="667px" height="71px" loading="lazy">
 <p>In plain text: an integral function can always be treated as the sum of an (infinite) number of (infinitely thin) rectangular strips sitting "under" the function's plotted graph. To illustrate this idea, the following graph shows the integral for a sinusoid function. The more strips we use (and of course the more we use, the thinner they get) the closer we get to the true area under the curve, and thus the better the approximation:</p>
 <div class="figure">
   <graphics-element title="A function's approximated integral" width="275" height="275" src="./chapters/arclength/draw-slices.js" data-steps="10">
@@ -1451,12 +1451,12 @@ y = curve.get(t).y</code></pre>
 <div class="note">
 
 <p>Note that one requirement for the approach we'll use is that the integral must run from -1 to 1. That's no good, because we're dealing with Bézier curves, and the length of a section of curve applies to values which run from 0 to "some value smaller than or equal to 1" (let's call that value <em>z</em>). Thankfully, we can quite easily transform any integral interval to any other integral interval, by shifting and scaling the inputs. Doing so, we get the following:</p>
-<img class="LaTeX SVG" src="./images/chapters/arclength/5509919419288129322cfbd4c60d0a4f.svg" width="341px" height="72px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/arclength/5509919419288129322cfbd4c60d0a4f.svg" width="343px" height="69px" loading="lazy">
 <p>That may look a bit more complicated, but the fraction involving <em>z</em> is a fixed number, so the summation, and the evaluation of the <em>f(t)</em> values are still pretty simple.</p>
 <p>So, what do we need to perform this calculation? For one, we'll need an explicit formula for <em>f(t)</em>, because that derivative notation is handy on paper, but not when we have to implement it. We'll also need to know what these <em>C<sub>i</sub></em> and <em>t<sub>i</sub></em> values should be. Luckily, that's less work because there are actually many tables available that give these values, for any <em>n</em>, so if we want to approximate our integral with only two terms (which is a bit low, really) then <a href="./legendre-gauss.html">these tables</a> would tell us that for <em>n=2</em> we must use the following values:</p>
-<img class="LaTeX SVG" src="./images/chapters/arclength/d0d93f1cc26b560309dade1f1aa012f2.svg" width="63px" height="93px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/arclength/d0d93f1cc26b560309dade1f1aa012f2.svg" width="65px" height="81px" loading="lazy">
 <p>Which means that in order for us to approximate the integral, we must plug these values into the approximate function, which gives us:</p>
-<img class="LaTeX SVG" src="./images/chapters/arclength/e96dd431f6ef9433ccf25909dddd5bca.svg" width="476px" height="44px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/arclength/e96dd431f6ef9433ccf25909dddd5bca.svg" width="496px" height="41px" loading="lazy">
 <p>We can program that pretty easily, provided we have that <em>f(t)</em> available, which we do, as we know the full description for the Bézier curve functions B<sub>x</sub>(t) and B<sub>y</sub>(t).</p>
 </div>
 
@@ -1518,9 +1518,9 @@ y = curve.get(t).y</code></pre>
 <p><em>That's crazy!</em></p>
 <p>But that's also one of the things that  makes maths so powerful: even if your initial ideas are off the mark, you might be much closer than you thought you were, and the journey from "thinking we're completely wrong" to "actually being remarkably close to being right" is where we can find a lot of insight.</p>
 <p>So, what does the function look like? This:</p>
-<img class="LaTeX SVG" src="./images/chapters/curvature/d9c893051586eb8d9de51c0ae1ef8fae.svg" width="113px" height="47px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/curvature/d9c893051586eb8d9de51c0ae1ef8fae.svg" width="115px" height="41px" loading="lazy">
 <p>Which is really just a "short form" that glosses over the fact that we're dealing with functions of <code>t</code>, so let's expand that a tiny bit:</p>
-<img class="LaTeX SVG" src="./images/chapters/curvature/828333034b4fed8e248683760d6bc6f4.svg" width="239px" height="55px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/curvature/828333034b4fed8e248683760d6bc6f4.svg" width="248px" height="48px" loading="lazy">
 <p>And while that's a litte more verbose, it's still just as simple to work with as the first function: the curvature at some point on any (and this cannot be overstated: <em>any</em>) curve is a ratio between the first and second derivative cross product, and something that looks oddly similar to the standard Euclidean distance function. And nothing in these functions is hard to calculate either: for Bézier curves, simply knowing our curve coordinates means <a href="#derivatives">we know what the first and second derivatives are</a>, and so evaluating this function for any <strong>t</strong> value is just a matter of basic arithematics.</p>
 <p>In fact, let's just implement it right now:</p>
 <pre><code>function kappa(t, B):
@@ -1704,24 +1704,24 @@ lli = function(line1, line2):
 </ol>
 <p>These three values A, B, and C allow us to derive an important identity formula for quadratic and cubic Bézier curves: for any point on the curve with some <code>t</code> value, the ratio of distances from A to B and B to C is fixed: if some <code>t</code> value sets up a C that is 20% away from the start and 80% away from the end, then <em>it doesn't matter where the start, end, or control points are</em>; for that <code>t</code> value, <code>C</code> will <em>always</em> lie at 20% from the start and 80% from the end point. Go ahead, pick an on-curve point in either graphic and then move all the other points around: if you only move the control points, start and end won't move, and so neither will C, and if you move either start or end point, C will move but its relative position will not change.</p>
 <p>So, how can we compute <code>C</code>? We start with our observation that <code>C</code> always lies somewhere between the start and ends points, so logically <code>C</code> will have a function that interpolates between those two coordinates:</p>
-<img class="LaTeX SVG" src="./images/chapters/abc/cd2e47cdc2e23ec86cd1ca1cb4286645.svg" width="236px" height="16px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/abc/cd2e47cdc2e23ec86cd1ca1cb4286645.svg" width="241px" height="17px" loading="lazy">
 <p>If we can figure out what the function <code>u(t)</code> looks like, we'll be done. Although we do need to remember that this <code>u(t)</code> will have a different for depending on whether we're working with quadratic or cubic curves. <a href="https://mathoverflow.net/questions/122257/finding-the-formula-for-bezier-curve-ratios-hull-point-point-baseline">Running through the maths</a> (with thanks to Boris Zbarsky) shows us the following two formulae:</p>
-<img class="LaTeX SVG" src="./images/chapters/abc/5484dc53e408a4259891a65212ef8636.svg" width="188px" height="41px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/abc/5484dc53e408a4259891a65212ef8636.svg" width="192px" height="40px" loading="lazy">
 <p>And</p>
-<img class="LaTeX SVG" src="./images/chapters/abc/63fbe4e666a7dad985ec4110e17c249f.svg" width="167px" height="41px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/abc/63fbe4e666a7dad985ec4110e17c249f.svg" width="167px" height="40px" loading="lazy">
 <p>So, if we know the start and end coordinates, and we know the <em>t</em> value, we know C, without having to calculate the <code>A</code> or even <code>B</code> coordinates. In fact, we can do the same for the ratio function: as another function of <code>t</code>, we technically don't need to know what <code>A</code> or <code>B</code> or <code>C</code> are, we can express it was a pure function of <code>t</code>, too.</p>
 <p>We start by observing that, given <code>A</code>, <code>B</code>, and <code>C</code>, the following always holds:</p>
-<img class="LaTeX SVG" src="./images/chapters/abc/385d1fd4aecbd2066e6e284a84408be6.svg" width="251px" height="39px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/abc/385d1fd4aecbd2066e6e284a84408be6.svg" width="272px" height="39px" loading="lazy">
 <p>Working out the maths for this, we see the following two formulae for quadratic and cubic curves:</p>
-<img class="LaTeX SVG" src="./images/chapters/abc/059000c5c8a37dcc8d7fa04154a05df3.svg" width="245px" height="41px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/abc/059000c5c8a37dcc8d7fa04154a05df3.svg" width="255px" height="41px" loading="lazy">
 <p>And</p>
-<img class="LaTeX SVG" src="./images/chapters/abc/b4987e9b77b0df604238b88596c5f7c3.svg" width="223px" height="41px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/abc/b4987e9b77b0df604238b88596c5f7c3.svg" width="228px" height="41px" loading="lazy">
 <p>Which now leaves us with some powerful tools: given thee points (start, end, and "some point on the curve"), as well as a <code>t</code> value, we can <em>contruct</em> curves: we can compute <code>C</code> using the start and end points, and our <code>u(t)</code> function, and once we have <code>C</code>, we can use our on-curve point (<code>B</code>) and the <code>ratio(t)</code> function to find <code>A</code>:</p>
-<img class="LaTeX SVG" src="./images/chapters/abc/12aaf0d7fd20b3c551a0ec76b18bd7d2.svg" width="217px" height="37px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/abc/12aaf0d7fd20b3c551a0ec76b18bd7d2.svg" width="231px" height="39px" loading="lazy">
 <p>With <code>A</code> found, finding <code>e1</code> and <code>e2</code> for quadratic curves is a matter of running the linear interpolation with <code>t</code> between start and <code>A</code> to yield <code>e1</code>, and between <code>A</code> and end to yield <code>e2</code>. For cubic curves, there is no single pair of points that can act as <code>e1</code> and <code>e2</code>: as long as the distance ratio between  <code>e1</code> to <code>B</code> and <code>B</code> to <code>e2</code> is the Bézier ratio <code>(1-t):t</code>, we can reverse engineer <code>v1</code> and <code>v2</code>:</p>
-<img class="LaTeX SVG" src="./images/chapters/abc/bc245327e0b011712168bad1c48dfec4.svg" width="132px" height="75px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/abc/bc245327e0b011712168bad1c48dfec4.svg" width="139px" height="75px" loading="lazy">
 <p>And then reverse engineer the curve's control control points:</p>
-<img class="LaTeX SVG" src="./images/chapters/abc/3c696e0364d61b1391695342707d6ccc.svg" width="164px" height="73px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/abc/3c696e0364d61b1391695342707d6ccc.svg" width="177px" height="72px" loading="lazy">
 <p>So: if we have a curve's start and end point, then for any <code>t</code> value we implicitly know all the ABC values, which  (combined with an educated guess on appropriate <code>e1</code> and <code>e2</code> coordinates for cubic curves) gives us the necessary information to reconstruct a curve's "de Casteljau skeleton". Which means that we can now do several things: we can "fit" curves using only three points, which means we can also "mold" curves by moving an on-curve point but leaving its start and end point, and then reconstructing the curve based on where we moved the on-curve point to. These are very useful things, and we'll look at both in the next few sections.</p>
 
           </section>
@@ -1729,7 +1729,7 @@ lli = function(line1, line2):
           <h1><div class="nav"><a href="#abc">previous</a><a href="#projections">next</a></div><a href="#pointcurves">Creating a curve from three points</a></h1>
 <p>Given the preceding section, you might be wondering if we can use that knowledge to just "create" curves by placing some points and having the computer do the rest, to which the answer is: that's exactly what we can now do!</p>
 <p>For quadratic curves, things are pretty easy. Technically, we'll need a <code>t</code> value in order to compute the ratio function used in computing the ABC coordinates, but we can just as easily approximate one by treating the distance between the start and <code>B</code> point, and <code>B</code> and end point as a ratio, using</p>
-<img class="LaTeX SVG" src="./images/chapters/pointcurves/3c7516c16a5dea95df741f4263cecd1c.svg" width="119px" height="84px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/pointcurves/3c7516c16a5dea95df741f4263cecd1c.svg" width="132px" height="85px" loading="lazy">
 <p>With this code in place, creating a quadratic curve from three points is literally just computing the ABC values, and using <code>A</code> as our curve's control point:</p>
 <graphics-element title="Fitting a quadratic Bézier curve" width="275" height="275" src="./chapters/pointcurves/quadratic.js" >
         <fallback-image>
@@ -1748,11 +1748,11 @@ lli = function(line1, line2):
         </fallback-image></graphics-element>
 
 <p>With that covered, we now also know the tangent line to our point <code>B</code>, because the tangent to any point on the circle is a line through that point, perpendicular to the line from that point to the center. That just leaves marking appropriate points <code>e1</code> and <code>e2</code> on that tangent, so that we can construct a new cubic curve hull. We use the approach as we did for quadratic curves to automatically determine a reasonable <code>t</code> value, and then our <code>e1</code> and <code>e2</code> coordinates must obey the standard de Casteljau rule for linear interpolation:</p>
-<img class="LaTeX SVG" src="./images/chapters/pointcurves/55d4f7ed095dfea8f9772208abc83b51.svg" width="139px" height="40px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/pointcurves/55d4f7ed095dfea8f9772208abc83b51.svg" width="147px" height="49px" loading="lazy">
 <p>Where <code>d</code> is the total length of the line segment from <code>e1</code> to <code>e2</code>. So how long do we make that? There are again all kinds of approaches we can take, and a simple-but-effective one is to set the length of that segment to "one third the length of the baseline". This forces <code>e1</code> and <code>e2</code> to always be the "linear curve" distance apart, which means if we place our three points on a line, it will actually <em>look</em> like a line. Nice! The last thing we'll need to do is make sure to flip the sign of <code>d</code> depending on which side of the baseline our <code>B</code> is located, so we don't up creating a funky curve with a loop in it. To do this, we can use the <a href="https://en.wikipedia.org/wiki/Atan2">atan2</a> function:</p>
-<img class="LaTeX SVG" src="./images/chapters/pointcurves/9203537b7dca98ebb2d7017c76100fde.svg" width="488px" height="24px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/pointcurves/9203537b7dca98ebb2d7017c76100fde.svg" width="507px" height="21px" loading="lazy">
 <p>This angle φ will be between 0 and π if <code>B</code> is "above" the baseline (rotating all three points so that the start is on the left and the end is the right), so we can use a relatively straight forward check to make sure we're using the correct sign for our value <code>d</code>:</p>
-<img class="LaTeX SVG" src="./images/chapters/pointcurves/6f0e2b6494d7dae2ea79a46a499d7ed4.svg" width="177px" height="40px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/pointcurves/6f0e2b6494d7dae2ea79a46a499d7ed4.svg" width="183px" height="49px" loading="lazy">
 <p>The result of this approach looks as follows:</p>
 <graphics-element title="Finding the cubic e₁ and e₂ given three points " width="275" height="275" src="./chapters/pointcurves/circle.js" data-show-curve="true">
         <fallback-image>
@@ -1804,9 +1804,9 @@ for (coordinate, index) in LUT:
           <h1><div class="nav"><a href="#projections">previous</a><a href="#curvefitting">next</a></div><a href="#molding">Molding a curve</a></h1>
 <p>Armed with knowledge of the "ABC" relation, point-on-curve projection, and guestimating reasonable looking helper values for cubic curve construction, we can finally cover curve molding: updating a curve's shape interactively, by dragging points on the curve around.</p>
 <p>For quadratic curve, this is a really simple trick: we project our cursor onto the curve, which gives us a <code>t</code> value and initial <code>B</code> coordinate. We don't even need the latter: with our <code>t</code> value and "whever the cursor is" as target <code>B</code>, we can compute the associated <code>C</code>:</p>
-<img class="LaTeX SVG" src="./images/chapters/molding/079d318ad693b6b17413a91f5de06be8.svg" width="248px" height="24px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/molding/079d318ad693b6b17413a91f5de06be8.svg" width="256px" height="21px" loading="lazy">
 <p>And then the associated <code>A</code>:</p>
-<img class="LaTeX SVG" src="./images/chapters/molding/82a99caec5f84fb26dce28277377c041.svg" width="231px" height="41px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/molding/82a99caec5f84fb26dce28277377c041.svg" width="244px" height="40px" loading="lazy">
 <p>And we're done, because that's our new quadratic control point!</p>
 <graphics-element title="Molding a quadratic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="quadratic">
         <fallback-image>
@@ -1851,25 +1851,25 @@ for (coordinate, index) in LUT:
 
 <h2>Revisiting the matrix representation</h2>
 <p>Rewriting Bézier functions to matrix form is fairly easy, if you first expand the function, and then arrange them into a multiple line form, where each line corresponds to a power of t, and each column is for a specific coefficient. First, we expand the function:</p>
-<img class="LaTeX SVG" src="./images/chapters/curvefitting/bd8e8e294eec10d2bf6ef857c7c0c2c2.svg" width="295px" height="43px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/curvefitting/bd8e8e294eec10d2bf6ef857c7c0c2c2.svg" width="307px" height="41px" loading="lazy">
 <p>And then we (trivially) rearrange the terms across multiple lines:</p>
-<img class="LaTeX SVG" src="./images/chapters/curvefitting/2b8334727d3b004c6e87263fec6b32b7.svg" width="216px" height="64px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/curvefitting/2b8334727d3b004c6e87263fec6b32b7.svg" width="225px" height="61px" loading="lazy">
 <p>This rearrangement has "factors of t" at each row (the first row is t⁰, i.e. "1", the second row is t¹, i.e. "t", the third row is t²) and "coefficient" at each column (the first column is all terms involving "a", the second all terms involving "b", the third all terms involving "c").</p>
 <p>With that arrangement, we can easily decompose this as a matrix multiplication:</p>
-<img class="LaTeX SVG" src="./images/chapters/curvefitting/94acb5850778dcb16c2ba3cfa676f537.svg" width="572px" height="53px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/curvefitting/94acb5850778dcb16c2ba3cfa676f537.svg" width="592px" height="53px" loading="lazy">
 <p>We can do the same for the cubic curve, of course. We know the base function for cubics:</p>
-<img class="LaTeX SVG" src="./images/chapters/curvefitting/7eada6f12045423de24d9a2ab8e293b1.svg" width="355px" height="19px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/curvefitting/7eada6f12045423de24d9a2ab8e293b1.svg" width="360px" height="19px" loading="lazy">
 <p>So we write out the expansion and rearrange:</p>
-<img class="LaTeX SVG" src="./images/chapters/curvefitting/875ca8eea72e727ccb881b4c0b6a3224.svg" width="248px" height="87px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/curvefitting/875ca8eea72e727ccb881b4c0b6a3224.svg" width="255px" height="84px" loading="lazy">
 <p>Which we can then decompose:</p>
-<img class="LaTeX SVG" src="./images/chapters/curvefitting/03ec73258d5c95eed39a2ea8665e0b07.svg" width="404px" height="72px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/curvefitting/03ec73258d5c95eed39a2ea8665e0b07.svg" width="417px" height="72px" loading="lazy">
 <p>And, of course, we can do this for quartic curves too (skipping the expansion step):</p>
-<img class="LaTeX SVG" src="./images/chapters/curvefitting/9151c0fdf9689ee598a2d029ab2ffe34.svg" width="491px" height="92px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/curvefitting/9151c0fdf9689ee598a2d029ab2ffe34.svg" width="505px" height="92px" loading="lazy">
 <p>And so and on so on. Now, let's see how to use these <strong>T</strong>, <strong>M</strong>, and <strong>C</strong>, to do some curve fitting.</p>
 </div>
 
 <p>Let's get started: we're going to assume we picked the right order curve: for <code>n</code> points we're fitting an <code>n-1</code><sup>th</sup> order curve, so we "start" with a vector <strong>P</strong> that represents the coordinates we already know, and for which we want to do curve fitting:</p>
-<img class="LaTeX SVG" src="./images/chapters/curvefitting/2bef3da3828d63d690460ce9947dbde2.svg" width="63px" height="73px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/curvefitting/2bef3da3828d63d690460ce9947dbde2.svg" width="67px" height="73px" loading="lazy">
 <p>Next, we need to figure out appropriate <code>t</code> values for each point in the curve, because we need something that lets us tie "the actual coordinate" to "some point on the curve". There's a fair number of different ways to do this (and a large part of optimizing "the perfect fit" is about picking appropriate <code>t</code> values), but in this case let's look at two "obvious" choices:</p>
 <ol>
 <li>equally spaced <code>t</code> values, and</li>
@@ -1878,27 +1878,27 @@ for (coordinate, index) in LUT:
 <p>The first one is really simple: if we have <code>n</code> points, then we'll just assign each point <code>i</code> a <code>t</code> value of <code>(i-1)/(n-1)</code>. So if we have four points, the first point will have <code>t=(1-1)/(4-1)=0/3</code>, the second point will have <code>t=(2-1)/(4-1)=1/3</code>, the third point will have <code>t=2/3</code>, and the last point will be <code>t=1</code>. We're just straight up spacing the <code>t</code> values to match the number of points we have.</p>
 <p>The second one is a little more interesting: since we're doing polynomial regression, we might as well exploit the fact that our base coordinates just constitute a collection of line segments. At the first point, we're fixing t=0, and the last point, we want t=1, and anywhere in between we're simply going to say that <code>t</code> is equal to the distance along the polygon, scaled to the [0,1] domain.</p>
 <p>To get these values, we first compute the general "distance along the polygon" matrix:</p>
-<img class="LaTeX SVG" src="./images/chapters/curvefitting/78b8ba1aba2e4c9ad3f7890299c90152.svg" width="395px" height="40px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/curvefitting/78b8ba1aba2e4c9ad3f7890299c90152.svg" width="403px" height="40px" loading="lazy">
 <p>Where  <code>length()</code> is literally just that: the length of the line segment between the point we're looking at, and the previous point. This isn't quite enough, of course: we still need to make sure that all the values between <code>i=1</code> and <code>i=n</code> fall in the [0,1] interval, so we need to scale all values down by whatever the total length of the polygon is:</p>
-<img class="LaTeX SVG" src="./images/chapters/curvefitting/08f4beaebf83dca594ad125bdca7e436.svg" width="272px" height="55px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/curvefitting/08f4beaebf83dca594ad125bdca7e436.svg" width="289px" height="55px" loading="lazy">
 <p>And now we can move on to the actual "curve fitting" part: what we want is a function that lets us compute "ideal" control point values such that if we build a Bézier curve with them, that curve passes through all our original points. Or, failing that, have an overall error distance that is as close to zero as we can get it. So, let's write out what the error distance looks like.</p>
 <p>As mentioned before, this function is really just "the distance between the actual coordinate, and the coordinate that the curve evaluates to for the associated <code>t</code> value", which we'll square to get rid of any pesky negative signs:</p>
-<img class="LaTeX SVG" src="./images/chapters/curvefitting/7e5d59272621baf942bc722208ce70c2.svg" width="177px" height="23px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/curvefitting/7e5d59272621baf942bc722208ce70c2.svg" width="184px" height="23px" loading="lazy">
 <p>Since this function only deals with individual coordinates, we'll need to sum over all coordinates in order to get the full error function. So, we literally just do that; the total error function is simply the sum of all these individual errors:</p>
-<img class="LaTeX SVG" src="./images/chapters/curvefitting/ab334858d3fa309cc1a5ba535a2ca168.svg" width="195px" height="41px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/curvefitting/ab334858d3fa309cc1a5ba535a2ca168.svg" width="204px" height="41px" loading="lazy">
 <p>And here's the trick that justifies using matrices: while we can work with individual values using calculus, with matrices we can compute as many values as we make our matrices big, all at the "same time", We can replace the individual terms p<sub>i</sub> with the full <strong>P</strong> coordinate matrix, and we can replace Bézier(s<sub>i</sub>) with the matrix representation <strong>T x M x C</strong> we talked about before, which gives us:</p>
-<img class="LaTeX SVG" src="./images/chapters/curvefitting/2d42758fba3370f52191306752c2705c.svg" width="141px" height="21px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/curvefitting/2d42758fba3370f52191306752c2705c.svg" width="151px" height="23px" loading="lazy">
 <p>In which we can replace the rather cumbersome "squaring" operation with a more conventional matrix equivalent:</p>
-<img class="LaTeX SVG" src="./images/chapters/curvefitting/5f7fcb86ae1c19612b9fe02e23229e31.svg" width="225px" height="21px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/curvefitting/5f7fcb86ae1c19612b9fe02e23229e31.svg" width="241px" height="23px" loading="lazy">
 <p>Here, the letter <code>T</code> is used instead of the number 2, to represent the <a href="https://en.wikipedia.org/wiki/Transpose">matrix transpose</a>; each row in the original matrix becomes a column in the transposed matrix instead (row one becomes column one, row two becomes column two, and so on).</p>
 <p>This leaves one problem: <strong>T</strong> isn't actually the matrix we want: we don't want symbolic <code>t</code> values, we want the actual numerical values that we computed for <strong>S</strong>, so we need to form a new matrix, which we'll call 𝕋, that makes use of those, and then use that 𝕋 instead of <strong>T</strong> in our error function:</p>
-<img class="LaTeX SVG" src="./images/chapters/curvefitting/6202d7bd150c852b432d807c40fb1647.svg" width="201px" height="96px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/curvefitting/6202d7bd150c852b432d807c40fb1647.svg" width="208px" height="96px" loading="lazy">
 <p>Which, because of the first and last values in <strong>S</strong>, means:</p>
-<img class="LaTeX SVG" src="./images/chapters/curvefitting/4ffad56e281ee79d0688e93033429f0a.svg" width="212px" height="92px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/curvefitting/4ffad56e281ee79d0688e93033429f0a.svg" width="216px" height="92px" loading="lazy">
 <p>Now we can properly write out the error function as matrix operations:</p>
-<img class="LaTeX SVG" src="./images/chapters/curvefitting/8d09f2be2c6db79ee966f170ffc25815.svg" width="231px" height="21px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/curvefitting/8d09f2be2c6db79ee966f170ffc25815.svg" width="239px" height="23px" loading="lazy">
 <p>So, we have our error function: we now need to figure out the expression for where that function has minimal value, e.g. where the error between the true coordinates and the coordinates generated by the curve fitting is smallest. Like in standard calculus, this requires taking the derivative, and determining where that derivative is zero:</p>
-<img class="LaTeX SVG" src="./images/chapters/curvefitting/283bc9e8fe59a78d3c74860f62a66ecb.svg" width="197px" height="36px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/curvefitting/283bc9e8fe59a78d3c74860f62a66ecb.svg" width="200px" height="35px" loading="lazy">
 <div class="note">
 
 <h2>Where did this derivative come from?</h2>
@@ -1908,7 +1908,7 @@ for (coordinate, index) in LUT:
 </div>
 
 <p>Now, given the above derivative, we can rearrange the terms (following the rules of matrix algebra) so that we end up with an expression for <strong>C</strong>:</p>
-<img class="LaTeX SVG" src="./images/chapters/curvefitting/d84d1c71a3ce1918f53eaf8f9fe98ac4.svg" width="168px" height="27px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/curvefitting/d84d1c71a3ce1918f53eaf8f9fe98ac4.svg" width="163px" height="24px" loading="lazy">
 <p>Here, the "to the power negative one" is the notation for the <a href="https://en.wikipedia.org/wiki/Invertible_matrix">matrix inverse</a>. But that's all we have to do: we're done. Starting with <strong>P</strong> and inventing some <code>t</code> values based on the polygon the coordinates in <strong>P</strong> define, we can compute the corresponding Bézier coordinates <strong>C</strong> that specify a curve that goes through our points. Or, if it can't go through them exactly, as near as possible.</p>
 <p>So before we try that out, how much code is involved in implementing this? Honestly, that answer depends on how much you're going to be writing yourself. If you already have a matrix maths library available, then really not that much code at all. On the other hand, if you are writing this from scratch, you're going to have to write some utility functions for doing your matrix work for you, so it's really anywhere from 50 lines of code to maybe 200 lines of code. Not a bad price to pay for being able to fit curves to prespecified coordinates.</p>
 <p>So let's try it out! The following graphic lets you place points, and will start computing exact-fit curves once you've placed at least three. You can click for more points, and the code will simply try to compute an exact fit using a Bézier curve of the appropriate order. Four points? Cubic Bézier. Five points? Quartic. And so on. Of course, this does break down at some point: depending on where you place your points, it might become mighty hard for the fitter to find an exact fit, and things might actually start looking horribly off once there's enough points for compound <a href="https://en.wikipedia.org/wiki/Round-off_error#Floating-point_number_system">floating point rounding errors</a> to start making a difference (which is around 10~11 points).</p>
@@ -1939,7 +1939,7 @@ for (coordinate, index) in LUT:
 </graphics-element>
 
 <p>Now, it may look like Catmull-Rom curves are very different from Bézier curves, because these curves can get very long indeed, but what looks like a single Catmull-Rom curve is actually a <a href="https://en.wikipedia.org/wiki/Spline_(mathematics)">spline</a>: a single curve built up of lots of identically-computed pieces, similar to if you just took a whole bunch of Bézier curves, placed them end to end, and lined up their control points so that things look like a single curve. For a Catmull-Rom curve, each "piece" between two points is defined by the point's coordinates, and the tangent for those points, the latter of which <a href="https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Catmull%E2%80%93Rom_spline">can trivially be derived</a> from knowing the previous and next point:</p>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/2844a4f4d222374a25b5f673c94679d9.svg" width="287px" height="88px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/2844a4f4d222374a25b5f673c94679d9.svg" width="297px" height="84px" loading="lazy">
 <p>One downside of this is that—as you may have noticed from the graphic—the first and last point of the overall curve don't actually join up with the rest of the curve: they don't have a previous/next point respectively, and so there is no way to calculate what their tangent should be. Which also makes it rather tricky to fit a Camull-Rom curve to three points like we were able to do for Bézier curves. More on that in <a href="#catmullfitting">the next section</a>.</p>
 <p>In fact, before we move on, let's look at how to actually draw the basic form of these curves (I say basic, because there are a number of variations that make things <a href="https://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline#Definition">considerable</a> more <a href="https://en.wikipedia.org/wiki/Kochanek%E2%80%93Bartels_spline">complex</a>):</p>
 <pre><code>tension = some value greater than 0, defaulting to 1
@@ -1968,77 +1968,77 @@ for p = 1 to points.length-3 (inclusive):
 <li>A Catmull-Rom curve is defined by a start point, a tangent that for that starting point, an end point, and a tangent for that end point, plus a characteristic matrix that we can multiple by the point vector to get on-curve coordinates.</li>
 </ul>
 <p>Those are <em>very</em> similar, so let's see exactly <em>how</em> similar they are. We've already see the matrix form for Bézier curves, so how different is the matrix form for Catmull-Rom curves?:</p>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/9215d05705c8e8a7ebd718ae6f690371.svg" width="409px" height="75px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/9215d05705c8e8a7ebd718ae6f690371.svg" width="423px" height="75px" loading="lazy">
 <p>That's pretty dang similar. So the question is: how can we convert that expression with Catmull-Rom matrix and vector into an expression of the Bézier matrix and vector? The short answer is of course "by using linear algebra", but the longer answer is the rest of this section, and involves some maths that you may not even care for: if you just want to know the (incredibly simple) conversions between the two curve forms, feel free to skip to the end of the following explanation, but if you want to <em>how</em> we can get one from the other... let's get mathing!</p>
 <div class="note">
 
 <h2>Deriving the conversion formulae</h2>
 <p>In order to convert between Catmull-Rom curves and Bézier curves, we need to know two things. Firstly, how to express the Catmull-Rom curve using a "set of four coordinates", rather than a mix of coordinates and tangents, and secondly, how to convert those Catmull-Rom coordinates to and from Bézier form.</p>
 <p>We start with the first part, to figure out how we can go from Catmull-Rom <strong>V</strong> coordinates to Bézier <strong>P</strong> coordinates, by applying "some matrix <strong>T</strong>". We don't know what that <strong>T</strong> is yet, but we'll get to that:</p>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/1811b59c5ab9233f08590396e5d03303.svg" width="187px" height="83px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/1811b59c5ab9233f08590396e5d03303.svg" width="196px" height="79px" loading="lazy">
 <p>So, this mapping says that in order to map a Catmull-Rom "point + tangent" vector to something based on an "all coordinates" vector, we need to determine the mapping matrix such that applying <em>T</em> yields P2 as start point, P3 as end point, and two tangents based on the lines between P1 and P3, and P2 nd P4, respectively.</p>
 <p>Computing <em>T</em> is really more "arranging the numbers":</p>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/4d524810417b4caffedd13af23135f5b.svg" width="591px" height="83px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/4d524810417b4caffedd13af23135f5b.svg" width="621px" height="79px" loading="lazy">
 <p>Thus:</p>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/f41487aff3e34fafd5d4ee5979f133f1.svg" width="143px" height="81px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/f41487aff3e34fafd5d4ee5979f133f1.svg" width="145px" height="76px" loading="lazy">
 <p>However, we're not <em>quite</em> done, because Catmull-Rom curves have that "tension" parameter, written as τ (a lowercase"tau"), which is a scaling factor for the tangent vectors: the bigger the tension, the smaller the tangents, and the smaller the tension, the bigger the tangents. As such, the tension factor goes in the denominator for the tangents, and before we continue, let's add that tension factor into both our coordinate vector representation, and mapping matrix <em>T</em>:</p>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/06ae1e3fdc660e59d618e0760e8e9ab5.svg" width="285px" height="84px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/06ae1e3fdc660e59d618e0760e8e9ab5.svg" width="291px" height="79px" loading="lazy">
 <p>With the mapping matrix properly done, let's rewrite the "point + tangent" Catmull-Rom matrix form to a matrix form in terms of four coordinates, and see what we end up with:</p>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/cc1e2ff43350c32f0ae9ba9a7652b8fb.svg" width="409px" height="75px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/cc1e2ff43350c32f0ae9ba9a7652b8fb.svg" width="423px" height="75px" loading="lazy">
 <p>Replace point/tangent vector with the expression for all-coordinates:</p>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/f08e34395ce2812276fd70548f805041.svg" width="549px" height="81px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/f08e34395ce2812276fd70548f805041.svg" width="564px" height="76px" loading="lazy">
 <p>and merge the matrices:</p>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/f2b2a16a41d134ce0dfd544ab77ff25e.svg" width="455px" height="84px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/f2b2a16a41d134ce0dfd544ab77ff25e.svg" width="465px" height="76px" loading="lazy">
 <p>This looks a lot like the Bézier matrix form, which as we saw in the chapter on Bézier curves, should look like this:</p>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/8f56909fcb62b8eef18b9b9559575c13.svg" width="353px" height="73px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/8f56909fcb62b8eef18b9b9559575c13.svg" width="359px" height="75px" loading="lazy">
 <p>So, if we want to express a Catmull-Rom curve using a Bézier curve, we'll need to turn this Catmull-Rom bit:</p>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/b21386f86bef8894f108c5441dad10de.svg" width="227px" height="84px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/b21386f86bef8894f108c5441dad10de.svg" width="227px" height="76px" loading="lazy">
 <p>Into something that looks like this:</p>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/78ac9df086ec19147414359369b563fc.svg" width="167px" height="73px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/78ac9df086ec19147414359369b563fc.svg" width="171px" height="75px" loading="lazy">
 <p>And the way we do that is with a fairly straight forward bit of matrix rewriting. We start with the equality we need to ensure:</p>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/a47b072a325812ac4f0ff52c22792588.svg" width="440px" height="84px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/a47b072a325812ac4f0ff52c22792588.svg" width="452px" height="76px" loading="lazy">
 <p>Then we remove the coordinate vector from both sides without affecting the equality:</p>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/841fb6a2a035c9bcf5a2d46f2a67709b.svg" width="353px" height="84px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/841fb6a2a035c9bcf5a2d46f2a67709b.svg" width="356px" height="76px" loading="lazy">
 <p>Then we can "get rid of" the Bézier matrix on the right by left-multiply both with the inverse of the Bézier matrix:</p>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/cbdd46d5e2e1a6202ef46fb03711ebe4.svg" width="657px" height="88px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/cbdd46d5e2e1a6202ef46fb03711ebe4.svg" width="672px" height="84px" loading="lazy">
 <p>A matrix times its inverse is the matrix equivalent of 1, and because "something times 1" is the same as "something", so we can just outright remove any matrix/inverse pair:</p>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/3ea54fe939d076f8db605c5b480e7db0.svg" width="369px" height="88px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/3ea54fe939d076f8db605c5b480e7db0.svg" width="372px" height="84px" loading="lazy">
 <p>And now we're <em>basically</em> done. We just multiply those two matrices and we know what <em>V</em> is:</p>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/169fd85a95e4d16fe289a75583017a11.svg" width="161px" height="77px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/169fd85a95e4d16fe289a75583017a11.svg" width="160px" height="73px" loading="lazy">
 <p>We now have the final piece of our function puzzle. Let's run through each step.</p>
 <ol>
 <li>Start with the Catmull-Rom function:</li>
 </ol>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/cc1e2ff43350c32f0ae9ba9a7652b8fb.svg" width="409px" height="75px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/cc1e2ff43350c32f0ae9ba9a7652b8fb.svg" width="423px" height="75px" loading="lazy">
 <ol start="2">
 <li>rewrite to pure coordinate form:</li>
 </ol>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/f814bb8d627f9c8f33b347c1cf13d4c7.svg" width="324px" height="84px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/f814bb8d627f9c8f33b347c1cf13d4c7.svg" width="329px" height="79px" loading="lazy">
 <ol start="3">
 <li>rewrite for "normal" coordinate vector:</li>
 </ol>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/5f2750de827497375d9a915f96686885.svg" width="441px" height="81px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/5f2750de827497375d9a915f96686885.svg" width="448px" height="76px" loading="lazy">
 <ol start="4">
 <li>merge the inner matrices:</li>
 </ol>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/79e333cd0c569657eea033b04fb5e61b.svg" width="348px" height="84px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/79e333cd0c569657eea033b04fb5e61b.svg" width="348px" height="76px" loading="lazy">
 <ol start="5">
 <li>rewrite for Bézier matrix form:</li>
 </ol>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/1b8a782f7540503d38067317e4cd00b0.svg" width="431px" height="77px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/1b8a782f7540503d38067317e4cd00b0.svg" width="436px" height="75px" loading="lazy">
 <ol start="6">
 <li>and transform the coordinates so we have a "pure" Bézier expression:</li>
 </ol>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/e3d30ab368dcead1411532ce3814d3f3.svg" width="348px" height="81px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/e3d30ab368dcead1411532ce3814d3f3.svg" width="353px" height="77px" loading="lazy">
 <p>And we're done: we finally know how to convert these two curves!</p>
 </div>
 
 <p>If we have a Catmull-Rom curve defined by four coordinates P<sub>1</sub> through P<sub>4</sub>, then we can draw that curve using a Bézier curve that has the vector:</p>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/ba31c32eba62f1e3b15066cd5ddda597.svg" width="249px" height="85px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/ba31c32eba62f1e3b15066cd5ddda597.svg" width="268px" height="81px" loading="lazy">
 <p>Similarly, if we have a Bézier curve defined by four coordinates P<sub>1</sub> through P<sub>4</sub>, we can draw that using a standard tension Catmull-Rom curve with the following coordinate values:</p>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/26363fc09f8cf2d41ea5b4256656bb6d.svg" width="284px" height="77px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/26363fc09f8cf2d41ea5b4256656bb6d.svg" width="300px" height="79px" loading="lazy">
 <p>Or, if your API allows you to specify Catmull-Rom curves using plain coordinates:</p>
-<img class="LaTeX SVG" src="./images/chapters/catmullconv/eae7f01976e511ee38b08b6edc8765d2.svg" width="284px" height="77px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/catmullconv/eae7f01976e511ee38b08b6edc8765d2.svg" width="300px" height="80px" loading="lazy">
 
           </section>
 <section id="catmullfitting">
@@ -2071,9 +2071,9 @@ for p = 1 to points.length-3 (inclusive):
         </fallback-image></graphics-element>
 
 <p>Dragging the control points around only affects the curve segments that the control point belongs to, and moving an on-curve point leaves the control points where they are, which is not the most useful for practical modelling purposes. So, let's add in the logic we need to make things a little better. We'll start by linking up control points by ensuring that the "incoming" derivative at an on-curve point is the same as it's "outgoing" derivative:</p>
-<img class="LaTeX SVG" src="./images/chapters/polybezier/408dd95905a5f001179c4da6051e49c5.svg" width="124px" height="17px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/polybezier/408dd95905a5f001179c4da6051e49c5.svg" width="129px" height="17px" loading="lazy">
 <p>We can effect this quite easily, because we know that the vector from a curve's last control point to its last on-curve point is equal to the derivative vector. If we want to ensure that the first control point of the next curve matches that, all we have to do is mirror that last control point through the last on-curve point. And mirroring any point A through any point B is really simple:</p>
-<img class="LaTeX SVG" src="./images/chapters/polybezier/8c1b570b3efdfbbc39ddedb4adcaaff6.svg" width="304px" height="40px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/polybezier/8c1b570b3efdfbbc39ddedb4adcaaff6.svg" width="320px" height="40px" loading="lazy">
 <p>So let's implement that and see what it gets us. The following two graphics show a quadratic and a cubic poly-Bézier curve again, but this time moving the control points around moves others, too. However, you might see something unexpected going on for quadratic curves...</p>
 <graphics-element title="Connected quadratic poly-Bézier" width="275" height="275" src="./chapters/polybezier/poly.js" data-type="quadratic" data-link="derivative">
         <fallback-image>
@@ -2133,16 +2133,16 @@ for p = 1 to points.length-3 (inclusive):
 <h3>"What do you mean, you can't? Prove it."</h3>
 <p>First off, when I say "you can't," what I really mean is "you can't offset a Bézier curve with another Bézier curve", not even by using a really high order curve. You can find the function that describes the offset curve, but it won't be a polynomial, and as such it cannot be represented as a Bézier curve, which <strong>has</strong> to be a polynomial. Let's look at why this is:</p>
 <p>From a mathematical point of view, an offset curve <code>O(t)</code> is a curve such that, given our original curve <code>B(t)</code>, any point on <code>O(t)</code> is a fixed distance <code>d</code> away from coordinate <code>B(t)</code>. So let's math that:</p>
-<img class="LaTeX SVG" src="./images/chapters/offsetting/1d4be24e5896dce3c16c8e71f9cc8881.svg" width="108px" height="16px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/offsetting/1d4be24e5896dce3c16c8e71f9cc8881.svg" width="111px" height="17px" loading="lazy">
 <p>However, we're working in 2D, and <code>d</code> is a single value, so we want to turn it into a vector. If we want a point distance <code>d</code> "away" from the curve <code>B(t)</code> then what we really mean is that we want a point at <code>d</code> times the "normal vector" from point <code>B(t)</code>, where the "normal" is a vector that runs perpendicular ("at a right angle") to the tangent at <code>B(t)</code>. Easy enough:</p>
-<img class="LaTeX SVG" src="./images/chapters/offsetting/5bfee4f2ae27304475673d0596e42f9a.svg" width="151px" height="16px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/offsetting/5bfee4f2ae27304475673d0596e42f9a.svg" width="153px" height="17px" loading="lazy">
 <p>Now this still isn't very useful unless we know what the formula for <code>N(t)</code> is, so let's find out. <code>N(t)</code> runs perpendicular to the original curve tangent, and we know that the tangent is simply <code>B'(t)</code>, so we could just rotate that 90 degrees and be done with it. However, we need to ensure that <code>N(t)</code> has the same magnitude for every <code>t</code>, or the offset curve won't be at a uniform distance, thus not being an offset curve at all. The easiest way to guarantee this is to make sure <code>N(t)</code> always has length 1, which we can achieve by dividing <code>B'(t)</code> by its magnitude:</p>
-<img class="LaTeX SVG" src="./images/chapters/offsetting/fa6c243de2aa78b7451e0086848dfdfc.svg" width="120px" height="40px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/offsetting/fa6c243de2aa78b7451e0086848dfdfc.svg" width="128px" height="40px" loading="lazy">
 <p>Determining the length requires computing an arc length, and this is where things get Tricky with a capital T. First off, to compute arc length from some start <code>a</code> to end <code>b</code>, we must use the formula we saw earlier. Noting that "length" is usually denoted with double vertical bars:</p>
-<img class="LaTeX SVG" src="./images/chapters/offsetting/b262e50c085815421d94e120fc17f1c8.svg" width="169px" height="36px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/offsetting/b262e50c085815421d94e120fc17f1c8.svg" width="189px" height="44px" loading="lazy">
 <p>So if we want the length of the tangent, we plug in <code>B'(t)</code>, with <code>t = 0</code> as start and
 <code>t = 1</code> as end:</p>
-<img class="LaTeX SVG" src="./images/chapters/offsetting/1d586b939b44ff9bdb42562a12ac2779.svg" width="209px" height="36px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/offsetting/1d586b939b44ff9bdb42562a12ac2779.svg" width="229px" height="44px" loading="lazy">
 <p>And that's where things go wrong. It doesn't even really matter what the second derivative for <code>B(t)</code> is, that square root is screwing everything up, because it turns our nice polynomials into things that are no longer polynomials.</p>
 <p>There is a small class of polynomials where the square root is also a polynomial, but they're utterly useless to us: any polynomial with unweighted binomial coefficients has a square root that is also a polynomial. Now, you might think that Bézier curves are just fine because they do, but they don't; remember that only the <strong>base</strong> function has binomial coefficients. That's before we factor in our coordinates, which turn it into a non-binomial polygon. The only way to make sure the functions stay binomial is to make all our coordinates have the same value. And that's not a curve, that's a point. We can already create offset curves for points, we call them circles, and they have much simpler functions than Bézier curves.</p>
 <p>So, since the tangent length isn't a polynomial, the normalised tangent won't be a polynomial either, which means <code>N(t)</code> won't be a polynomial, which means that <code>d</code> times <code>N(t)</code> won't be a polynomial, which means that, ultimately, <code>O(t)</code> won't be a polynomial, which means that even if we can determine the function for <code>O(t)</code> just fine (and that's far from trivial!), it simply cannot be represented as a Bézier curve.</p>
@@ -2222,25 +2222,25 @@ for p = 1 to points.length-3 (inclusive):
 
 <p>As you can see, things go horribly wrong quite quickly; even trying to approximate a quarter circle using a quadratic curve is a bad idea. An eighth of a turns might look okay, but how okay is okay? Let's apply some maths and find out. What we're interested in is how far off our on-curve coordinates are with respect to a circular arc, given a specific start and end angle. We'll be looking at how much space there is between the circular arc, and the quadratic curve's midpoint.</p>
 <p>We start out with our start and end point, and for convenience we will place them on a unit circle (a circle around 0,0 with radius 1), at some angle <em>φ</em>:</p>
-<img class="LaTeX SVG" src="./images/chapters/circles/8374c4190d6213b0ac0621481afaa754.svg" width="175px" height="40px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/circles/8374c4190d6213b0ac0621481afaa754.svg" width="189px" height="40px" loading="lazy">
 <p>What we want to find is the intersection of the tangents, so we want a point C such that:</p>
-<img class="LaTeX SVG" src="./images/chapters/circles/a127f926eced2751a09c54bf7c361b4a.svg" width="284px" height="40px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/circles/a127f926eced2751a09c54bf7c361b4a.svg" width="304px" height="40px" loading="lazy">
 <p>i.e. we want a point that lies on the vertical line through S (at some distance <em>a</em> from S) and also lies on the tangent line through E (at some distance <em>b</em> from E). Solving this gives us:</p>
-<img class="LaTeX SVG" src="./images/chapters/circles/b5d864e9ed0c44c56d454fbaa4218d5e.svg" width="219px" height="40px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/circles/b5d864e9ed0c44c56d454fbaa4218d5e.svg" width="228px" height="40px" loading="lazy">
 <p>First we solve for <em>b</em>:</p>
-<img class="LaTeX SVG" src="./images/chapters/circles/9e4d886c372f916f6511c41245ceee39.svg" width="560px" height="17px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/circles/9e4d886c372f916f6511c41245ceee39.svg" width="581px" height="16px" loading="lazy">
 <p>which yields:</p>
-<img class="LaTeX SVG" src="./images/chapters/circles/c22f6d343ee0cce7bff6a617c946ca17.svg" width="101px" height="39px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/circles/c22f6d343ee0cce7bff6a617c946ca17.svg" width="103px" height="39px" loading="lazy">
 <p>which we can then substitute in the expression for <em>a</em>:</p>
-<img class="LaTeX SVG" src="./images/chapters/circles/ef3ab62bb896019c6157c85aae5d1ed3.svg" width="231px" height="195px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/circles/ef3ab62bb896019c6157c85aae5d1ed3.svg" width="240px" height="193px" loading="lazy">
 <p>A quick check shows that plugging these values for <em>a</em> and <em>b</em> into the expressions for C<sub>x</sub> and C<sub>y</sub> give the same x/y coordinates for both "<em>a</em> away from A" and "<em>b</em> away from B", so let's continue: now that we know the coordinate values for C, we know where our on-curve point T for <em>t=0.5</em> (or angle φ/2) is, because we can just evaluate the Bézier polynomial, and we know where the circle arc's actual point P is for angle φ/2:</p>
-<img class="LaTeX SVG" src="./images/chapters/circles/fe32474b4616ee9478e1308308f1b6bf.svg" width="188px" height="32px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/circles/fe32474b4616ee9478e1308308f1b6bf.svg" width="197px" height="31px" loading="lazy">
 <p>We compute T, observing that if <em>t=0.5</em>, the polynomial values (1-t)², 2(1-t)t, and t² are 0.25, 0.5, and 0.25 respectively:</p>
-<img class="LaTeX SVG" src="./images/chapters/circles/e1059e611aa1e51db41f9ce0b4ebb95a.svg" width="252px" height="35px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/circles/e1059e611aa1e51db41f9ce0b4ebb95a.svg" width="268px" height="33px" loading="lazy">
 <p>Which, worked out for the x and y components, gives:</p>
-<img class="LaTeX SVG" src="./images/chapters/circles/7754bc3c96ae3c90162fec3bd46bedff.svg" width="408px" height="77px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/circles/7754bc3c96ae3c90162fec3bd46bedff.svg" width="421px" height="76px" loading="lazy">
 <p>And the distance between these two is the standard Euclidean distance:</p>
-<img class="LaTeX SVG" src="./images/chapters/circles/adbd056f4b8fcd05b1d4f2fce27d7657.svg" width="399px" height="153px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/circles/adbd056f4b8fcd05b1d4f2fce27d7657.svg" width="407px" height="149px" loading="lazy">
 <p>So, what does this distance function look like when we plot it for a number of ranges for the angle φ, such as a half circle, quarter circle and eighth circle?</p>
 <table><tbody><tr><td>
   <img src="images/arc-q-pi.gif" height="190"/>
@@ -2257,7 +2257,7 @@ for p = 1 to points.length-3 (inclusive):
 
 <p>We now see why the eighth circle arc looks decent, but the quarter circle arc doesn't: an error of roughly 0.06 at <em>t=0.5</em> means we're 6% off the mark... we will already be off by one pixel on a circle with pixel radius 17. Any decent sized quarter circle arc, say with radius 100px, will be way off if approximated by a quadratic curve! For the eighth circle arc, however, the error is only roughly 0.003, or 0.3%, which explains why it looks so close to the actual eighth circle arc. In fact, if we want a truly tiny error, like 0.001, we'll have to contend with an angle of (rounded) 0.593667, which equates to roughly 34 degrees. We'd need 11 quadratic curves to form a full circle with that precision! (technically, 10 and ten seventeenth, but we can't do partial curves, so we have to round up). That's a whole lot of curves just to get a shape that can be drawn using a simple function!</p>
 <p>In fact, let's flip the function around, so that if we plug in the precision error, labelled ε, we get back the maximum angle for that precision:</p>
-<img class="LaTeX SVG" src="./images/chapters/circles/df87674db0f31fc3944aaeb6b890e196.svg" width="247px" height="53px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/circles/df87674db0f31fc3944aaeb6b890e196.svg" width="268px" height="60px" loading="lazy">
 <p>And frankly, things are starting to look a bit ridiculous at this point, we're doing way more maths than we've ever done, but thankfully this is as far as we need the maths to take us: If we plug in the precisions 0.1, 0.01, 0.001 and 0.0001 we get the radians values 1.748, 1.038, 0.594 and 0.3356; in degrees, that means we can cover roughly 100 degrees (requiring four curves), 59.5 degrees (requiring six curves), 34 degrees (requiring 11 curves), and 19.2 degrees (requiring a whopping nineteen curves).</p>
 <p>The bottom line? <strong>Quadratic curves are kind of lousy</strong> if you want circular (or elliptical, which are circles that have been squashed in one dimension) curves. We can do better, even if it's just by raising the order of our curve once. So let's try the same thing for cubic curves.</p>
 
@@ -2311,7 +2311,7 @@ for p = 1 to points.length-3 (inclusive):
 <p>The distance from our guessed point to the start point is exactly the same as the projection distance we looked at earlier. Using <i>t=0.5</i> as our point "B" in the "A,B,C" projection, then we know the length of the line segment {C,A}, since it's d<sub>1</sub> = {A,B} + d<sub>2</sub> = {B,C}:</p>
 <img class="LaTeX SVG" src="./images/chapters/circles_cubic/3189cac1ddac07c1487e1e51740ecc88.svg" width="408px" height="36px" loading="lazy">
 <p>So that just leaves us to find the distance from <i>t=0.5</i> to the baseline for an arbitrary angle φ, which is the distance from the centre of the circle to our <i>t=0.5</i> point, minus the distance from the centre to the line that runs from start point to end point. The first is the same as the point P we found for the quadratic curve:</p>
-<img class="LaTeX SVG" src="./images/chapters/circles_cubic/fe32474b4616ee9478e1308308f1b6bf.svg" width="197px" height="31px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/circles_cubic/fe32474b4616ee9478e1308308f1b6bf.svg" width="188px" height="32px" loading="lazy">
 <p>And the distance from the origin to the line start/end is another application of angles, since the triangle {origin,start,C} has known angles, and two known sides. We can find the length of the line {origin,C}, which lets us trivially compute the coordinate for C:</p>
 <img class="LaTeX SVG" src="./images/chapters/circles_cubic/0364731626a530c8a9b30f424ada53c5.svg" width="267px" height="59px" loading="lazy">
 <p>With the coordinate C, and knowledge of coordinate B, we can determine coordinate A, and get a vector that is identical to the vector {start,guess}:</p>
@@ -2427,27 +2427,27 @@ for p = 1 to points.length-3 (inclusive):
 <p>In order to make this interpolation of curves work, the maths is necessarily more complex than the maths for Bézier curves, so let's have a look at how things work.</p>
 <h2>How to compute a B-Spline curve: some maths</h2>
 <p>Given a B-Spline of degree <code>d</code> and thus order <code>k=d+1</code> (so a quadratic B-Spline is degree 2 and order 3, a cubic B-Spline is degree 3 and order 4, etc) and <code>n</code> control points <code>P<sub>0</sub></code> through <code>P<sub>n-1</sub></code>, we can compute a point on the curve for some value <code>t</code> in the interval [0,1] (where 0 is the start of the curve, and 1 the end, just like for Bézier curves), by evaluating the following function:</p>
-<img class="LaTeX SVG" src="./images/chapters/bsplines/0f3451c711c0fe5d0b018aa4aa77d855.svg" width="169px" height="41px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/bsplines/0f3451c711c0fe5d0b018aa4aa77d855.svg" width="180px" height="41px" loading="lazy">
 <p>Which, honestly, doesn't tell us all that much. All we can see is that a point on a B-Spline curve is defined as "a mix of all the control points, weighted somehow", where the weighting is achieved through the <em>N(...)</em> function, subscripted with an obvious parameter <code>i</code>, which comes from our summation, and some magical parameter <code>k</code>. So we need to know two things: 1. what does N(t) do, and 2. what is that <code>k</code>? Let's cover both, in reverse order.</p>
 <p>The parameter <code>k</code> represents the "knot interval" over which a section of curve is defined. As we learned earlier, a B-Spline curve is itself an interpoliation of curves, and we can treat each transition where a control point starts or stops influencing the total curvature as a "knot on the curve".
 Doing so for a degree <code>d</code> B-Spline with <code>n</code> control point gives us <code>d + n + 1</code> knots, defining <code>d + n</code> intervals along the curve, and it is these intervals that the above <code>k</code> subscript to the N() function applies to.</p>
 <p>Then the N() function itself. What does it look like?</p>
-<img class="LaTeX SVG" src="./images/chapters/bsplines/cf45d1ea00d4866abc8a058b130299b4.svg" width="559px" height="43px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/bsplines/cf45d1ea00d4866abc8a058b130299b4.svg" width="584px" height="49px" loading="lazy">
 <p>So this is where we see the interpolation: N(t) for an (i,k) pair (that is, for a step in the above summation, on a specific knot interval) is a mix between N(t) for (i,k-1) and N(t) for (i+1,k-1), so we see that this is a recursive iteration where <code>i</code> goes up, and <code>k</code> goes down, so it seem reasonable to expect that this recursion has to stop at some point; obviously, it does, and specifically it does so for the following <code>i</code>/<code>k</code> values:</p>
-<img class="LaTeX SVG" src="./images/chapters/bsplines/adac18ea69cc58e01c8d5e15498e4aa6.svg" width="240px" height="40px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/bsplines/adac18ea69cc58e01c8d5e15498e4aa6.svg" width="245px" height="40px" loading="lazy">
 <p>And this function finally has a straight up evaluation: if a <code>t</code> value lies within a knot-specific interval once we reach a <code>k=1</code> value, it "counts", otherwise it doesn't. We did cheat a little, though, because for all these values we need to scale our <code>t</code> value first, so that it lies in the interval bounded by <code>knots[d]</code> and <code>knots[n]</code>, which are the start point and end point where curvature is controlled by exactly <code>order</code> control points. For instance, for degree 3 (=order 4) and 7 control points, with knot vector [1,2,3,4,5,6,7,8,9,10,11], we map <code>t</code> from [the interval 0,1] to the interval [4,8], and then use that value in the functions above, instead.</p>
 <h2>Can we simplify that?</h2>
 <p>We can, yes.</p>
 <p>People far smarter than us have looked at this work, and two in particular — <a href="https://www.npl.co.uk/people/maurice-cox">Maurice Cox</a> and <a href="https://en.wikipedia.org/wiki/Carl_R._de_Boor">Carl de Boor</a> — came to a mathematically pleasing solution: to compute a point P(t), we can compute this point by evaluating <em>d(t)</em> on a curve section between knots <em>i</em> and <em>i+1</em>:</p>
-<img class="LaTeX SVG" src="./images/chapters/bsplines/763838ea6f9e6c6aa63ea5f9c6d9542f.svg" width="281px" height="21px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/bsplines/763838ea6f9e6c6aa63ea5f9c6d9542f.svg" width="287px" height="21px" loading="lazy">
 <p>This is another recursive function, with <em>k</em> values decreasing from the curve order to 1, and the value <em>α</em> (alpha) defined by:</p>
-<img class="LaTeX SVG" src="./images/chapters/bsplines/892209dad8fd1f839470dd061e870913.svg" width="255px" height="39px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/bsplines/892209dad8fd1f839470dd061e870913.svg" width="261px" height="39px" loading="lazy">
 <p>That looks complicated, but it's not. Computing alpha is just a fraction involving known, plain numbers. And, once we have our alpha value, we also have <code>(1-alpha)</code> because it's a trivial subtraction. Computing the <code>d()</code> function is thus mostly a matter of computing pretty simple arithmetical statements, with some caching of results so we can refer to them as we recurve. While the recursion might see computationally expensive, the total algorithm is cheap, as each step only involves very simple maths.</p>
 <p>Of course, the recursion does need a stop condition:</p>
-<img class="LaTeX SVG" src="./images/chapters/bsplines/4c8f9814c50c708757eeb5a68afabb7f.svg" width="368px" height="40px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/bsplines/4c8f9814c50c708757eeb5a68afabb7f.svg" width="376px" height="40px" loading="lazy">
 <p>So, we actually see two stopping conditions: either <code>i</code> becomes 0, in which case <code>d()</code> is zero, or <code>k</code> becomes zero, in which case we get the same "either 1 or 0" that we saw in the N() function above.</p>
 <p>Thanks to Cox and de Boor, we can compute points on a B-Spline pretty easily using the same kind of linear interpolation we saw in de Casteljau's algorithm. For instance, if we write out <code>d()</code> for <code>i=3</code> and <code>k=3</code>, we get the following recursion diagram:</p>
-<img class="LaTeX SVG" src="./images/chapters/bsplines/bd187c361b285ef878d0bc17af8a3900.svg" width="641px" height="336px" loading="lazy">
+<img class="LaTeX SVG" src="./images/chapters/bsplines/bd187c361b285ef878d0bc17af8a3900.svg" width="688px" height="328px" loading="lazy">
 <p>That is, we compute <code>d(3,3)</code> as a mixture of <code>d(2,3)</code> and <code>d(2,2)</code>, where those two are themselves a mixture of <code>d(1,3)</code> and <code>d(1,2)</code>, and <code>d(1,2)</code> and <code>d(1,1)</code>, respectively, which are themselves a mixture of etc. etc. We simply keep expanding our terms until we reach the stop conditions, and then sum everything back up. It's really quite elegant.</p>
 <p>One thing we need to keep in mind is that we're working with a spline that is constrained by its control points, so even though the <code>d(..., k)</code> values are zero or one at the lowest level, they are really "zero or one, times their respective control point", so in the next section you'll see the algorithm for running through the computation in a way that starts with a copy of the control point vector and then works its way up to that single point, rather than first starting "on the left", working our way "to the right" and then summing back up "to the left". We can just start on the right and work our way left immediately.</p>
 <h2>Running the computation</h2>