@@ -569,7 +569,7 @@
fa(t) and fb(t) with what we usually mean with them for parametric curves, things might be a lot more
obvious:
+
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 @@ -544,13 +544,13 @@ function". An illustration: Let's say we have a function that maps some value, let's call it x, to some other value, using some kind of number manipulation:
-
+
The notation f(x) is the standard way to show that it's a function (by convention called f if we're only listing one) and its output changes based on one variable (in this case, x). Change x, and the output for f(x) changes.
So far, so good. Now, let's look at parametric functions, and how they cheat. Let's take the following two functions:
-
+
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 a, we're not going to change the output value for f(b), since a isn't used in that
@@ -559,7 +559,7 @@
@@ -569,7 +569,7 @@
fa(t) and fb(t) with what we usually mean with them for parametric curves, things might be a lot more
obvious:
+
There we go. x/y coordinates, linked through some mystery value t.
So, parametric curves don't define a y coordinate in terms of an x coordinate, like normal functions do, but they instead
@@ -597,8 +597,8 @@
@@ -613,7 +613,7 @@
@@ -624,8 +624,8 @@
@@ -640,7 +640,7 @@
@@ -652,8 +652,8 @@
@@ -842,7 +842,7 @@ function Bezier(3,t,w[]):
@@ -850,8 +850,8 @@ function Bezier(3,t,w[]):
@@ -939,7 +939,7 @@ function RationalBezier(3,t,w[],r[]): 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:
-
+
The obvious start and end values here need to be a=1, b=0, so that the mixed value is 100% value 1, and 0% value 2, and
a=0, b=1, so that the mixed value is 0% value 1 and 100% value 2. Additionally, we don't want "a" and "b" to be independent:
@@ -948,7 +948,7 @@ function RationalBezier(3,t,w[],r[]):
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:
+
With this we can guarantee that we never sum above 100%. By restricting a 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.
@@ -1523,7 +1523,7 @@ function drawCurve(points[], t):
The general rule for raising an nth order curve to an (n+1)th 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):
+
However, this rule also has as direct consequence that you cannot generally safely lower a curve from nth order to (n-1)th order, because the control points cannot be "pulled apart" cleanly. We can @@ -1537,18 +1537,18 @@ function drawCurve(points[], t): 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!
We start by taking the standard Bézier function, and condensing it a little:
-
+
Then, we apply one of those silly (actually, super useful) calculus tricks: since our t value is always between zero and one
(inclusive), we know that (1-t) plus t always sums to 1. As such, we can express any value as a sum of
t and 1-t:
+
So, with that seemingly trivial observation, we rewrite that Bézier function by splitting it up into a sum of a (1-t) and
t component:
+
So far so good. Now, to see why we did this, let's write out the (1-t) and t parts, and see what that gives us.
I promise, it's about to make sense. We start with (1-t):
@@ -1556,8 +1556,8 @@ function drawCurve(points[], t):
@@ -1570,8 +1570,8 @@ function drawCurve(points[], t):
@@ -1586,7 +1586,7 @@ function drawCurve(points[], t):
@@ -1594,13 +1594,13 @@ function drawCurve(points[], t):
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:
+
where the matrix M is an n+1 by n matrix, and looks like:
@@ -1619,8 +1619,8 @@ function drawCurve(points[], t):
The steps taken here are:
@@ -1848,7 +1848,7 @@ function drawCurve(points[], t):
@@ -1859,15 +1859,15 @@ function drawCurve(points[], t):
@@ -1878,8 +1878,8 @@ function drawCurve(points[], t):
@@ -1903,7 +1903,7 @@ function drawCurve(points[], t):
@@ -2221,15 +2221,15 @@ function drawCurve(points[], t):
And then we turn this into our solution for t using basic arithmetics:
@@ -2247,8 +2247,8 @@ function drawCurve(points[], t):
@@ -2264,16 +2264,16 @@ function drawCurve(points[], t):
And then, using these v values, we can find out what our a, b, and c should be:
@@ -2284,7 +2284,7 @@ function drawCurve(points[], t): class="LaTeX SVG" src="./images/chapters/extremities/d9e66caeb45b6643112ce3d971b17e5b.svg" width="308px" - height="64px" + height="63px" loading="lazy" />
Easy-peasy. We can now almost trivially find the roots by plugging those values into the quadratic formula.
@@ -2306,8 +2306,8 @@ function drawCurve(points[], t):
@@ -2462,8 +2462,8 @@ function getCubicRoots(pa, pb, pc, pd) {
(The Wikipedia article has a decent animation for this process, so I will not add a graphic for that here)
@@ -2582,19 +2582,19 @@ function getCubicRoots(pa, pb, pc, pd) { 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 n-2 term function. For instance, if we have a cubic curve such as this: -
+
Then translating it so that the first coordinate lies on (0,0), moving all x coordinates by -120, and all y coordinates by -160, gives us:
-
+
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:
-
+
If we drop all the zero-terms, this gives us:
-
+
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: @@ -2673,7 +2673,7 @@ function getCubicRoots(pa, pb, pc, pd) { inflection, and we can find out where those happen relatively easily.
What we need to do is solve a simple equation:
-
+
What we're saying here is that given the curvature function C(t), we want to know for which values of t 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
@@ -2682,8 +2682,8 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2706,7 +2706,7 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2714,7 +2714,7 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2725,8 +2725,8 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2743,7 +2743,7 @@ function getCubicRoots(pa, pb, pc, pd) { class="LaTeX SVG" src="./images/chapters/inflections/1679090a942a43d27f886f236fc8d62b.svg" width="533px" - height="19px" + height="20px" loading="lazy" />
@@ -2753,7 +2753,7 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2761,8 +2761,8 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2834,8 +2834,8 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2847,8 +2847,8 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2857,7 +2857,7 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2914,12 +2914,12 @@ function getCubicRoots(pa, pb, pc, pd) {
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
z coordinate that is always 1, then we can suddenly add arbitrary values. For example:
+
Sweet! z 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:
-
+
Running all our coordinates through this transformation gives a new set of coordinates, let's call those U, 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 @@ -2927,12 +2927,12 @@ function getCubicRoots(pa, pb, pc, pd) { currently have. This is called shearing, and the typical x-shear matrix and its transformation looks like this:
-
+
So we want some shearing value that, when multiplied by y, yields -x, so our x coordinate becomes zero. That value is simply -x/y, because *-x/y * y = -x*. Done:
-
+
Now, running this on all our points generates a new set of coordinates, let's call those V, 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 @@ -2940,7 +2940,7 @@ function getCubicRoots(pa, pb, pc, pd) { 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/point3x, and y-scaling by point2y. This is really easy:
-
+
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 @@ -2949,13 +2949,13 @@ function getCubicRoots(pa, pb, pc, pd) { 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:
-
+
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:
-
+
Okay, well, that looks plain ridiculous, but: notice that every coordinate value is being offset by the initial translation, and also notice that a lot of terms in that expression are repeated. Even though the maths looks crazy as a single expression, we can just @@ -2965,13 +2965,13 @@ function getCubicRoots(pa, pb, pc, pd) { 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?
-
+
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:
-
+
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! @@ -3046,17 +3046,17 @@ function getCubicRoots(pa, pb, pc, pd) { cubic case either: because of the kind of curve we're starting with, we know there is only root, simplifying the code we need!
First, let's look at the function for x(t):
-
+
We can rewrite this to a plain polynomial form, by just fully writing out the expansion and then collecting the polynomial factors, as:
-
+
Nothing special here: that's a standard cubic polynomial in "power" form (i.e. all the terms are ordered by their power of
t). So, given that a, b, c, d, and x(t) are all
known constants, we can trivially rewrite this (by moving the x(t) across the equal sign) as:
+
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 @@ -3097,9 +3097,9 @@ y = curve.get(t).y fy(t), then the length of the curve, measured from start point to some point t = z, is computed using the following seemingly straight forward (if a bit overwhelming) formula:
-
+
or, more commonly written using Leibnitz notation as:
-
+
This formula says that the length of a parametric curve is in fact equal to the area 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, @@ -3125,7 +3125,7 @@ y = curve.get(t).y 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:
-
+
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
@@ -3188,8 +3188,8 @@ y = curve.get(t).y
@@ -3203,15 +3203,15 @@ y = curve.get(t).y values, for any n, so if we want to approximate our integral with only two terms (which is a bit low, really) then these tables would tell us that for n=2 we must use the following values:
-
+
Which means that in order for us to approximate the integral, we must plug these values into the approximate function, which gives us:
@@ -3349,12 +3349,12 @@ y = curve.get(t).y we can find a lot of insight.
So, what does the function look like? This:
-
+
Which is really just a "short form" that glosses over the fact that we're dealing with functions of t, so let's expand that a
tiny bit:
+
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: any) curve is a ratio between the first and second derivative cross product, and something that
@@ -3743,7 +3743,7 @@ lli = function(line1, line2):
So, how can we compute C? We start with our observation that C always lies somewhere between the start and ends
points, so logically C will have a function that interpolates between those two coordinates:
+
If we can figure out what the function u(t) looks like, we'll be done. Although we do need to remember that this
u(t) will have a different for depending on whether we're working with quadratic or cubic curves.
@@ -3752,9 +3752,9 @@ lli = function(line1, line2):
>
(with thanks to Boris Zbarsky) shows us the following two formulae:
+
And
-
+
So, if we know the start and end coordinates, and we know the t value, we know C, without having to calculate the
A or even B coordinates. In fact, we can do the same for the ratio function: as another function of
@@ -3762,18 +3762,18 @@ lli = function(line1, line2):
pure function of t, too.
We start by observing that, given A, B, and C, the following always holds:
+
Working out the maths for this, we see the following two formulae for quadratic and cubic curves:
-
+
And
-
+
Which now leaves us with some powerful tools: given thee points (start, end, and "some point on the curve"), as well as a
t value, we can contruct curves: we can compute C using the start and end points, and our
u(t) function, and once we have C, we can use our on-curve point (B) and the
ratio(t) function to find A:
+
With A found, finding e1 and e2 for quadratic curves is a matter of running the linear
interpolation with t between start and A to yield e1, and between A and end to yield
@@ -3781,9 +3781,9 @@ lli = function(line1, line2):
distance ratio between e1 to B and B to e2 is the Bézier ratio (1-t):t,
we can reverse engineer v1 and v2:
+
And then reverse engineer the curve's control control points:
-
+
So: if we have a curve's start and end point, then for any t value we implicitly know all the ABC values, which (combined
with an educated guess on appropriate e1 and e2 coordinates for cubic curves) gives us the necessary information
@@ -3809,8 +3809,8 @@ lli = function(line1, line2):
@@ -3855,8 +3855,8 @@ lli = function(line1, line2):
@@ -3870,8 +3870,8 @@ lli = function(line1, line2):
@@ -3882,8 +3882,8 @@ lli = function(line1, line2):
The result of this approach looks as follows:
@@ -4000,9 +4000,9 @@ for (coordinate, index) in LUT: initialB coordinate. We don't even need the latter: with our t value and "whever the cursor is" as target
B, we can compute the associated C:
- 
+
And then the associated A:
+
And we're done, because that's our new quadratic control point!
And then we (trivially) rearrange the terms across multiple lines:
@@ -4150,7 +4150,7 @@ for (coordinate, index) in LUT:
@@ -4158,7 +4158,7 @@ for (coordinate, index) in LUT:
@@ -4166,15 +4166,15 @@ for (coordinate, index) in LUT:
Which we can then decompose:
@@ -4182,7 +4182,7 @@ for (coordinate, index) in LUT:
@@ -4200,7 +4200,7 @@ for (coordinate, index) in LUT:
@@ -4228,7 +4228,7 @@ for (coordinate, index) in LUT:
@@ -4240,7 +4240,7 @@ for (coordinate, index) in LUT:
@@ -4256,7 +4256,7 @@ for (coordinate, index) in LUT:
@@ -4267,7 +4267,7 @@ for (coordinate, index) in LUT:
@@ -4280,16 +4280,16 @@ for (coordinate, index) in LUT:
In which we can replace the rather cumbersome "squaring" operation with a more conventional matrix equivalent:
@@ -4305,7 +4305,7 @@ for (coordinate, index) in LUT:
@@ -4313,7 +4313,7 @@ for (coordinate, index) in LUT:
@@ -4321,8 +4321,8 @@ for (coordinate, index) in LUT:
@@ -4333,8 +4333,8 @@ for (coordinate, index) in LUT:
@@ -4446,8 +4446,8 @@ for (coordinate, index) in LUT:
@@ -4505,7 +4505,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -4531,8 +4531,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -4544,16 +4544,16 @@ for p = 1 to points.length-3 (inclusive):
Thus:
@@ -4565,8 +4565,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -4576,7 +4576,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -4584,24 +4584,24 @@ for p = 1 to points.length-3 (inclusive):
and merge the matrices:
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:
So, if we want to express a Catmull-Rom curve using a Bézier curve, we'll need to turn this Catmull-Rom bit:
@@ -4609,39 +4609,39 @@ for p = 1 to points.length-3 (inclusive): class="LaTeX SVG" src="./images/chapters/catmullconv/b21386f86bef8894f108c5441dad10de.svg" width="227px" - height="76px" + height="84px" loading="lazy" />Into something that looks like this:
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:
Then we remove the coordinate vector from both sides without affecting the equality:
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:
@@ -4651,16 +4651,16 @@ for p = 1 to points.length-3 (inclusive):
And now we're basically done. We just multiply those two matrices and we know what V is:
We now have the final piece of our function puzzle. Let's run through each step.
@@ -4670,7 +4670,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -4680,8 +4680,8 @@ for p = 1 to points.length-3 (inclusive):
And we're done: we finally know how to convert these two curves!
@@ -4734,8 +4734,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -4745,16 +4745,16 @@ for p = 1 to points.length-3 (inclusive):
Or, if your API allows you to specify Catmull-Rom curves using plain coordinates:
@@ -4827,13 +4827,13 @@ for p = 1 to points.length-3 (inclusive):
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:
- 
+
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:
-
+
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...
@@ -4994,8 +4994,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -5007,8 +5007,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -5021,7 +5021,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -5033,8 +5033,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -5043,8 +5043,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -5237,33 +5237,33 @@ for p = 1 to points.length-3 (inclusive): 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 φ:
-
+
What we want to find is the intersection of the tangents, so we want a point C such that:
-
+
i.e. we want a point that lies on the vertical line through S (at some distance a from S) and also lies on the tangent line through E (at some distance b from E). Solving this gives us:
-
+
First we solve for b:
-
+
which yields:
-
+
which we can then substitute in the expression for a:
-
+
A quick check shows that plugging these values for a and b into the expressions for Cx and Cy give the same x/y coordinates for both "a away from A" and "b 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 t=0.5 (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:
-
+
We compute T, observing that if t=0.5, the polynomial values (1-t)², 2(1-t)t, and t² are 0.25, 0.5, and 0.25 respectively:
-
+
Which, worked out for the x and y components, gives:
-
+
And the distance between these two is the standard Euclidean distance:
-
+
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? @@ -5304,7 +5304,7 @@ for p = 1 to points.length-3 (inclusive): 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:
-
+
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,
@@ -5411,7 +5411,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -5423,7 +5423,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -5431,7 +5431,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -5468,8 +5468,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -5491,8 +5491,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -5502,15 +5502,15 @@ for p = 1 to points.length-3 (inclusive):
@@ -5520,8 +5520,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -5531,8 +5531,8 @@ for p = 1 to points.length-3 (inclusive):
And that's it, we have all four points now for an approximation of an arbitrary circular arc with angle φ.
@@ -5542,7 +5542,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -5550,7 +5550,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -5561,15 +5561,15 @@ for p = 1 to points.length-3 (inclusive):
Which, in decimal values, rounded to six significant digits, is:
@@ -5758,7 +5758,7 @@ for p = 1 to points.length-3 (inclusive):
>, we can compute a point on the curve for some value t 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:
- 
+
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 N(...) function, subscripted with an obvious parameter
@@ -5773,14 +5773,14 @@ for p = 1 to points.length-3 (inclusive):
k subscript to the N() function applies to.
Then the N() function itself. What does it look like?
-
+
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 i goes
up, and k 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 i/k values:
+
And this function finally has a straight up evaluation: if a t value lies within a knot-specific interval once we reach a
k=1 value, it "counts", otherwise it doesn't. We did cheat a little, though, because for all these values we need to scale
@@ -5797,12 +5797,12 @@ for p = 1 to points.length-3 (inclusive):
Carl de Boor — came to a mathematically pleasing solution: to compute a point
P(t), we can compute this point by evaluating d(t) on a curve section between knots i and i+1:
+
This is another recursive function, with k values decreasing from the curve order to 1, and the value α (alpha) defined by:
-
+
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 (1-alpha) because it's a trivial subtraction. Computing the d() function is thus mostly a
@@ -5810,7 +5810,7 @@ for p = 1 to points.length-3 (inclusive):
recursion might see computationally expensive, the total algorithm is cheap, as each step only involves very simple maths.
Of course, the recursion does need a stop condition:
-
+
So, we actually see two stopping conditions: either i becomes 0, in which case d() is zero, or
k becomes zero, in which case we get the same "either 1 or 0" that we saw in the N() function above.
@@ -5820,7 +5820,7 @@ for p = 1 to points.length-3 (inclusive):
Casteljau's algorithm. For instance, if we write out d() for i=3 and k=3, we get the following
recursion diagram:
+
That is, we compute d(3,3) as a mixture of d(2,3) and d(2,2), where those two are themselves a
mixture of d(1,3) and d(1,2), and d(1,2) and d(1,1), respectively, which are
diff --git a/docs/ja-JP/index.html b/docs/ja-JP/index.html
index 334fd61d..055ec05c 100644
--- a/docs/ja-JP/index.html
+++ b/docs/ja-JP/index.html
@@ -13,7 +13,7 @@
-
+
-
+
@@ -499,27 +499,27 @@
ベジエ曲線は「パラメトリック」関数の一種です。数学的に言えば、パラメトリック関数というのはインチキです。というのも、「関数」はきっちり定義された用語であり、いくつかの入力を1つの出力に対応させる写像を表すものだからです。いくつかの数値を入れると、1つの数値が出てきます。入れる数値が変わっても、出てくる数値はやはり1つだけです。パラメトリック関数はインチキです。基本的には「じゃあわかった、値を複数個出したいから、関数を複数個使うことにするよ」ということです。例として、ある値xに何らかの操作を行い、別の値へと写す関数があるとします。
-
+
f(x)という記法は、これが関数（1つしかない場合は慣習的にfと呼びます）であり、その出力が1つの変数（この場合はxです）に応じて変化する、ということを示す標準的な方法です。xを変化させると、f(x)の出力が変化します。
ここまでは順調です。では、パラメトリック関数について、これがどうインチキなのかを見てみましょう。以下の2つの関数を考えます。
-
+
注目すべき箇所は特に何もありません。ただの正弦関数と余弦関数です。ただし、入力が別々の名前になっていることに気づくでしょう。仮にaの値を変えたとしても、f(b)の出力の値は変わらないはずです。なぜなら、こちらの関数にはaは使われていないからです。パラメトリック関数は、これを変えてしまうのでインチキなのです。パラメトリック関数においては、どの関数も変数を共有しています。例えば、
複数の関数がありますが、変数は1つだけです。tの値を変えた場合、fa(t)とfb(t)の両方の出力が変わります。これがどのように役に立つのか、疑問に思うかもしれません。しかし、実際には答えは至ってシンプルです。fa(t)とfb(t)のラベルを、パラメトリック曲線の表示によく使われているもので置き換えてやれば、ぐっとはっきりするかと思います。
-
+
きました。x/y座標です。謎の値tを通して繫がっています。
というわけで、普通の関数ではy座標をx座標によって定義しますが、パラメトリック曲線ではそうではなく、座標の値を「制御」変数と結びつけます。tの値を変化させるたびに2つの値が変化するので、これをグラフ上の座標
@@ -541,8 +541,8 @@
@@ -750,7 +750,7 @@ function Bezier(3,t,w[]):
@@ -758,8 +758,8 @@ function Bezier(3,t,w[]):
@@ -1359,7 +1359,7 @@ function drawCurve(points[], t): The general rule for raising an nth order curve to an (n+1)th 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):
-
+
However, this rule also has as direct consequence that you cannot generally safely lower a curve from nth order to (n-1)th order, because the control points cannot be "pulled apart" cleanly. We can @@ -1373,18 +1373,18 @@ function drawCurve(points[], t): 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!
We start by taking the standard Bézier function, and condensing it a little:
-
+
Then, we apply one of those silly (actually, super useful) calculus tricks: since our t value is always between zero and one
(inclusive), we know that (1-t) plus t always sums to 1. As such, we can express any value as a sum of
t and 1-t:
+
So, with that seemingly trivial observation, we rewrite that Bézier function by splitting it up into a sum of a (1-t) and
t component:
+
So far so good. Now, to see why we did this, let's write out the (1-t) and t parts, and see what that gives us.
I promise, it's about to make sense. We start with (1-t):
@@ -1392,8 +1392,8 @@ function drawCurve(points[], t):
@@ -1406,8 +1406,8 @@ function drawCurve(points[], t):
@@ -1422,7 +1422,7 @@ function drawCurve(points[], t):
@@ -1430,13 +1430,13 @@ function drawCurve(points[], t):
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:
+
where the matrix M is an n+1 by n matrix, and looks like:
@@ -1455,8 +1455,8 @@ function drawCurve(points[], t):
The steps taken here are:
@@ -1684,7 +1684,7 @@ function drawCurve(points[], t):
@@ -1695,15 +1695,15 @@ function drawCurve(points[], t):
@@ -1714,8 +1714,8 @@ function drawCurve(points[], t):
@@ -1739,7 +1739,7 @@ function drawCurve(points[], t):
@@ -2057,15 +2057,15 @@ function drawCurve(points[], t):
And then we turn this into our solution for t using basic arithmetics:
@@ -2083,8 +2083,8 @@ function drawCurve(points[], t):
@@ -2100,16 +2100,16 @@ function drawCurve(points[], t):
And then, using these v values, we can find out what our a, b, and c should be:
@@ -2120,7 +2120,7 @@ function drawCurve(points[], t): class="LaTeX SVG" src="./images/chapters/extremities/d9e66caeb45b6643112ce3d971b17e5b.svg" width="308px" - height="64px" + height="63px" loading="lazy" />
Easy-peasy. We can now almost trivially find the roots by plugging those values into the quadratic formula.
@@ -2142,8 +2142,8 @@ function drawCurve(points[], t):
@@ -2298,8 +2298,8 @@ function getCubicRoots(pa, pb, pc, pd) {
(The Wikipedia article has a decent animation for this process, so I will not add a graphic for that here)
@@ -2418,19 +2418,19 @@ function getCubicRoots(pa, pb, pc, pd) { 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 n-2 term function. For instance, if we have a cubic curve such as this: -
+
Then translating it so that the first coordinate lies on (0,0), moving all x coordinates by -120, and all y coordinates by -160, gives us:
-
+
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:
-
+
If we drop all the zero-terms, this gives us:
-
+
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: @@ -2509,7 +2509,7 @@ function getCubicRoots(pa, pb, pc, pd) { inflection, and we can find out where those happen relatively easily.
What we need to do is solve a simple equation:
-
+
What we're saying here is that given the curvature function C(t), we want to know for which values of t 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
@@ -2518,8 +2518,8 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2542,7 +2542,7 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2550,7 +2550,7 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2561,8 +2561,8 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2579,7 +2579,7 @@ function getCubicRoots(pa, pb, pc, pd) { class="LaTeX SVG" src="./images/chapters/inflections/1679090a942a43d27f886f236fc8d62b.svg" width="533px" - height="19px" + height="20px" loading="lazy" />
@@ -2589,7 +2589,7 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2597,8 +2597,8 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2670,8 +2670,8 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2683,8 +2683,8 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2693,7 +2693,7 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2750,12 +2750,12 @@ function getCubicRoots(pa, pb, pc, pd) {
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
z coordinate that is always 1, then we can suddenly add arbitrary values. For example:
+
Sweet! z 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:
-
+
Running all our coordinates through this transformation gives a new set of coordinates, let's call those U, 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 @@ -2763,12 +2763,12 @@ function getCubicRoots(pa, pb, pc, pd) { currently have. This is called shearing, and the typical x-shear matrix and its transformation looks like this:
-
+
So we want some shearing value that, when multiplied by y, yields -x, so our x coordinate becomes zero. That value is simply -x/y, because *-x/y * y = -x*. Done:
-
+
Now, running this on all our points generates a new set of coordinates, let's call those V, 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 @@ -2776,7 +2776,7 @@ function getCubicRoots(pa, pb, pc, pd) { 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/point3x, and y-scaling by point2y. This is really easy:
-
+
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 @@ -2785,13 +2785,13 @@ function getCubicRoots(pa, pb, pc, pd) { 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:
-
+
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:
-
+
Okay, well, that looks plain ridiculous, but: notice that every coordinate value is being offset by the initial translation, and also notice that a lot of terms in that expression are repeated. Even though the maths looks crazy as a single expression, we can just @@ -2801,13 +2801,13 @@ function getCubicRoots(pa, pb, pc, pd) { 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?
-
+
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:
-
+
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! @@ -2882,17 +2882,17 @@ function getCubicRoots(pa, pb, pc, pd) { cubic case either: because of the kind of curve we're starting with, we know there is only root, simplifying the code we need!
First, let's look at the function for x(t):
-
+
We can rewrite this to a plain polynomial form, by just fully writing out the expansion and then collecting the polynomial factors, as:
-
+
Nothing special here: that's a standard cubic polynomial in "power" form (i.e. all the terms are ordered by their power of
t). So, given that a, b, c, d, and x(t) are all
known constants, we can trivially rewrite this (by moving the x(t) across the equal sign) as:
+
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 @@ -2933,9 +2933,9 @@ y = curve.get(t).y fy(t), then the length of the curve, measured from start point to some point t = z, is computed using the following seemingly straight forward (if a bit overwhelming) formula:
-
+
or, more commonly written using Leibnitz notation as:
-
+
This formula says that the length of a parametric curve is in fact equal to the area 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, @@ -2961,7 +2961,7 @@ y = curve.get(t).y 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:
-
+
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
@@ -3024,8 +3024,8 @@ y = curve.get(t).y
@@ -3039,15 +3039,15 @@ y = curve.get(t).y values, for any n, so if we want to approximate our integral with only two terms (which is a bit low, really) then these tables would tell us that for n=2 we must use the following values:
-
+
Which means that in order for us to approximate the integral, we must plug these values into the approximate function, which gives us:
@@ -3185,12 +3185,12 @@ y = curve.get(t).y we can find a lot of insight.
So, what does the function look like? This:
-
+
Which is really just a "short form" that glosses over the fact that we're dealing with functions of t, so let's expand that a
tiny bit:
+
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: any) curve is a ratio between the first and second derivative cross product, and something that
@@ -3579,7 +3579,7 @@ lli = function(line1, line2):
So, how can we compute C? We start with our observation that C always lies somewhere between the start and ends
points, so logically C will have a function that interpolates between those two coordinates:
+
If we can figure out what the function u(t) looks like, we'll be done. Although we do need to remember that this
u(t) will have a different for depending on whether we're working with quadratic or cubic curves.
@@ -3588,9 +3588,9 @@ lli = function(line1, line2):
>
(with thanks to Boris Zbarsky) shows us the following two formulae:
+
And
-
+
So, if we know the start and end coordinates, and we know the t value, we know C, without having to calculate the
A or even B coordinates. In fact, we can do the same for the ratio function: as another function of
@@ -3598,18 +3598,18 @@ lli = function(line1, line2):
pure function of t, too.
We start by observing that, given A, B, and C, the following always holds:
+
Working out the maths for this, we see the following two formulae for quadratic and cubic curves:
-
+
And
-
+
Which now leaves us with some powerful tools: given thee points (start, end, and "some point on the curve"), as well as a
t value, we can contruct curves: we can compute C using the start and end points, and our
u(t) function, and once we have C, we can use our on-curve point (B) and the
ratio(t) function to find A:
+
With A found, finding e1 and e2 for quadratic curves is a matter of running the linear
interpolation with t between start and A to yield e1, and between A and end to yield
@@ -3617,9 +3617,9 @@ lli = function(line1, line2):
distance ratio between e1 to B and B to e2 is the Bézier ratio (1-t):t,
we can reverse engineer v1 and v2:
+
And then reverse engineer the curve's control control points:
-
+
So: if we have a curve's start and end point, then for any t value we implicitly know all the ABC values, which (combined
with an educated guess on appropriate e1 and e2 coordinates for cubic curves) gives us the necessary information
@@ -3645,8 +3645,8 @@ lli = function(line1, line2):
@@ -3691,8 +3691,8 @@ lli = function(line1, line2):
@@ -3706,8 +3706,8 @@ lli = function(line1, line2):
@@ -3718,8 +3718,8 @@ lli = function(line1, line2):
The result of this approach looks as follows:
@@ -3836,9 +3836,9 @@ for (coordinate, index) in LUT: initialB coordinate. We don't even need the latter: with our t value and "whever the cursor is" as target
B, we can compute the associated C:
-
+
And then the associated A:
+
And we're done, because that's our new quadratic control point!
And then we (trivially) rearrange the terms across multiple lines:
@@ -3986,7 +3986,7 @@ for (coordinate, index) in LUT:
@@ -3994,7 +3994,7 @@ for (coordinate, index) in LUT:
@@ -4002,15 +4002,15 @@ for (coordinate, index) in LUT:
Which we can then decompose:
@@ -4018,7 +4018,7 @@ for (coordinate, index) in LUT:
@@ -4036,7 +4036,7 @@ for (coordinate, index) in LUT:
@@ -4064,7 +4064,7 @@ for (coordinate, index) in LUT:
@@ -4076,7 +4076,7 @@ for (coordinate, index) in LUT:
@@ -4092,7 +4092,7 @@ for (coordinate, index) in LUT:
@@ -4103,7 +4103,7 @@ for (coordinate, index) in LUT:
@@ -4116,16 +4116,16 @@ for (coordinate, index) in LUT:
In which we can replace the rather cumbersome "squaring" operation with a more conventional matrix equivalent:
@@ -4141,7 +4141,7 @@ for (coordinate, index) in LUT:
@@ -4149,7 +4149,7 @@ for (coordinate, index) in LUT:
@@ -4157,8 +4157,8 @@ for (coordinate, index) in LUT:
@@ -4169,8 +4169,8 @@ for (coordinate, index) in LUT:
@@ -4282,8 +4282,8 @@ for (coordinate, index) in LUT:
@@ -4341,7 +4341,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -4367,8 +4367,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -4380,16 +4380,16 @@ for p = 1 to points.length-3 (inclusive):
Thus:
@@ -4401,8 +4401,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -4412,7 +4412,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -4420,24 +4420,24 @@ for p = 1 to points.length-3 (inclusive):
and merge the matrices:
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:
So, if we want to express a Catmull-Rom curve using a Bézier curve, we'll need to turn this Catmull-Rom bit:
@@ -4445,39 +4445,39 @@ for p = 1 to points.length-3 (inclusive): class="LaTeX SVG" src="./images/chapters/catmullconv/b21386f86bef8894f108c5441dad10de.svg" width="227px" - height="76px" + height="84px" loading="lazy" />Into something that looks like this:
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:
Then we remove the coordinate vector from both sides without affecting the equality:
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:
@@ -4487,16 +4487,16 @@ for p = 1 to points.length-3 (inclusive):
And now we're basically done. We just multiply those two matrices and we know what V is:
We now have the final piece of our function puzzle. Let's run through each step.
@@ -4506,7 +4506,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -4516,8 +4516,8 @@ for p = 1 to points.length-3 (inclusive):
And we're done: we finally know how to convert these two curves!
@@ -4570,8 +4570,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -4581,16 +4581,16 @@ for p = 1 to points.length-3 (inclusive):
Or, if your API allows you to specify Catmull-Rom curves using plain coordinates:
@@ -4663,13 +4663,13 @@ for p = 1 to points.length-3 (inclusive):
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:
-
+
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:
-
+
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...
@@ -4830,8 +4830,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -4843,8 +4843,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -4857,7 +4857,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -4869,8 +4869,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -4879,8 +4879,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -5073,33 +5073,33 @@ for p = 1 to points.length-3 (inclusive): 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 φ:
-
+
What we want to find is the intersection of the tangents, so we want a point C such that:
-
+
i.e. we want a point that lies on the vertical line through S (at some distance a from S) and also lies on the tangent line through E (at some distance b from E). Solving this gives us:
-
+
First we solve for b:
-
+
which yields:
-
+
which we can then substitute in the expression for a:
-
+
A quick check shows that plugging these values for a and b into the expressions for Cx and Cy give the same x/y coordinates for both "a away from A" and "b 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 t=0.5 (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:
-
+
We compute T, observing that if t=0.5, the polynomial values (1-t)², 2(1-t)t, and t² are 0.25, 0.5, and 0.25 respectively:
-
+
Which, worked out for the x and y components, gives:
-
+
And the distance between these two is the standard Euclidean distance:
-
+
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? @@ -5140,7 +5140,7 @@ for p = 1 to points.length-3 (inclusive): 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:
-
+
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,
@@ -5247,7 +5247,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -5259,7 +5259,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -5267,7 +5267,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -5304,8 +5304,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -5327,8 +5327,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -5338,15 +5338,15 @@ for p = 1 to points.length-3 (inclusive):
@@ -5356,8 +5356,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -5367,8 +5367,8 @@ for p = 1 to points.length-3 (inclusive):
And that's it, we have all four points now for an approximation of an arbitrary circular arc with angle φ.
@@ -5378,7 +5378,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -5386,7 +5386,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -5397,15 +5397,15 @@ for p = 1 to points.length-3 (inclusive):
Which, in decimal values, rounded to six significant digits, is:
@@ -5594,7 +5594,7 @@ for p = 1 to points.length-3 (inclusive):
>, we can compute a point on the curve for some value t 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:
-
+
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 N(...) function, subscripted with an obvious parameter
@@ -5609,14 +5609,14 @@ for p = 1 to points.length-3 (inclusive):
k subscript to the N() function applies to.
Then the N() function itself. What does it look like?
-
+
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 i goes
up, and k 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 i/k values:
+
And this function finally has a straight up evaluation: if a t value lies within a knot-specific interval once we reach a
k=1 value, it "counts", otherwise it doesn't. We did cheat a little, though, because for all these values we need to scale
@@ -5633,12 +5633,12 @@ for p = 1 to points.length-3 (inclusive):
Carl de Boor — came to a mathematically pleasing solution: to compute a point
P(t), we can compute this point by evaluating d(t) on a curve section between knots i and i+1:
+
This is another recursive function, with k values decreasing from the curve order to 1, and the value α (alpha) defined by:
-
+
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 (1-alpha) because it's a trivial subtraction. Computing the d() function is thus mostly a
@@ -5646,7 +5646,7 @@ for p = 1 to points.length-3 (inclusive):
recursion might see computationally expensive, the total algorithm is cheap, as each step only involves very simple maths.
Of course, the recursion does need a stop condition:
-
+
So, we actually see two stopping conditions: either i becomes 0, in which case d() is zero, or
k becomes zero, in which case we get the same "either 1 or 0" that we saw in the N() function above.
@@ -5656,7 +5656,7 @@ for p = 1 to points.length-3 (inclusive):
Casteljau's algorithm. For instance, if we write out d() for i=3 and k=3, we get the following
recursion diagram:
+
That is, we compute d(3,3) as a mixture of d(2,3) and d(2,2), where those two are themselves a
mixture of d(1,3) and d(1,2), and d(1,2) and d(1,1), respectively, which are
diff --git a/docs/news/2020-09-20.html b/docs/news/2020-09-20.html
index b426d48a..24403606 100644
--- a/docs/news/2020-09-20.html
+++ b/docs/news/2020-09-20.html
@@ -13,7 +13,7 @@
-
+
@@ -27,7 +27,7 @@
-
+
diff --git a/docs/news/index.html b/docs/news/index.html
index 05adf036..16651be1 100644
--- a/docs/news/index.html
+++ b/docs/news/index.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/placeholder-style.css b/docs/style.css
similarity index 100%
rename from docs/placeholder-style.css
rename to docs/style.css
diff --git a/docs/zh-CN/index.html b/docs/zh-CN/index.html
index 17803e61..f5dba2fd 100644
--- a/docs/zh-CN/index.html
+++ b/docs/zh-CN/index.html
@@ -13,7 +13,7 @@
-
+
-
+
@@ -450,7 +450,7 @@
>的结果。这听起来很复杂，但你在很小的时候就做过线性插值：当你指向两个物体中的另外一个物体时，你就用到了线性插值。它就是很简单的“选出两点之间的一个点”。
如果我们知道两点之间的距离，并想找出离第一个点20%间距的一个新的点(也就是离第二个点80%的间距)，我们可以通过简单的计算来得到：
-
+
让我们来通过实际操作看一下：下面的图形都是可交互的，因此你可以通过上下键来增加或减少插值距离，来观察图形的变化。我们从三个点构成的两条线段开始。通过对各条线段进行线性插值得到两个点，对点之间的线段再进行线性插值，产生一个新的点。最终这些点——所有的点都可以通过选取不同的距离插值产生——构成了贝塞尔曲线 ： @@ -477,26 +477,26 @@
贝塞尔曲线是“参数”方程的一种形式。从数学上讲，参数方程作弊了：“方程”实际上是一个从输入到唯一输出的、良好定义的映射关系。几个输入进来，一个输出返回。改变输入变量，还是只有一个输出值。参数方程在这里作弊了。它们基本上干了这么件事，“好吧，我们想要更多的输出值，所以我们用了多个方程”。举个例子：假如我们有一个方程，通过一些计算，将假设为x的一些值映射到另外的值:
-
+
记号f(x)是表示函数的标准方式（为了方便起见，如果只有一个的话，我们称函数为f），函数的输出根据一个变量（本例中是x）变化。改变x，f(x)的输出值也会变。
到目前没什么问题。现在，让我们来看一下参数方程，以及它们是怎么作弊的。我们取以下两个方程：
-
+
这俩方程没什么让人印象深刻的，只不过是正弦函数和余弦函数，但正如你所见，输入变量有两个不同的名字。如果我们改变了a的值，f(b)的输出不会有变化，因为这个方程没有用到a。参数方程通过改变这点来作弊。在参数方程中，所有不同的方程共用一个变量，如下所示：
多个方程，但只有一个变量。如果我们改变了t的值，fa(t)和fb(t)的输出都会发生变化。你可能会好奇这有什么用，答案其实很简单：对于参数曲线，如果我们用常用的标记来替代fa(t)和fb(t)，看起来就有些明朗了：
-
+
好了，通过一些神秘的t值将x/y坐标系联系起来。
所以，参数曲线不像一般函数那样，通过x坐标来定义y坐标，而是用一个“控制”变量将它们连接起来。如果改变t的值，每次变化时我们都能得到两个值，这可以作为图形中的(x,y)坐标。比如上面的方程组，生成位于一个圆上的点：我们可以使t在正负极值间变化，得到的输出(x,y)都会位于一个以原点(0,0)为中心且半径为1的圆上。如果我们画出t从0到5时的值，将得到如下图像：
@@ -517,8 +517,8 @@
@@ -530,7 +530,7 @@
@@ -538,8 +538,8 @@
@@ -551,7 +551,7 @@
@@ -561,8 +561,8 @@
这就是贝塞尔曲线完整的描述。在这个函数中的Σ表示了这是一系列的加法（用Σ下面的变量，从...=<值>开始，直到Σ上面的数字结束）。
@@ -716,7 +716,7 @@ function Bezier(3,t,w[]):
@@ -724,8 +724,8 @@ function Bezier(3,t,w[]):
@@ -809,13 +809,13 @@ function RationalBezier(3,t,w[],r[]):
既然我们知道了贝塞尔曲线背后的数学原理，你可能会注意到一件奇怪的事：它们都是从t=0到t=1。为什么是这个特殊区间？
这一切都与我们如何从曲线的“起点”变化到曲线“终点”有关。如果有一个值是另外两个值的混合，一般方程如下：
-
+
很显然，起始值需要a=1, b=0，混合值就为100%的value 1和0%的value 2。终点值需要a=0, b=1，则混合值是0%的value
1和100%的value
2。另外，我们不想让“a”和“b”是互相独立的:如果它们是互相独立的话，我们可以任意选出自己喜欢的值，并得到混合值，比如说100%的value1和100%的value2。原则上这是可以的，但是对于贝塞尔曲线来说，我们通常想要的是起始值和终点值之间的混合值，所以要确保我们不会设置一些“a”和"b"而导致混合值超过100%。这很简单：
+
用这个式子我们可以保证相加的值永远不会超过100%。通过将a限制在区间[0，1],我们将会一直处于这两个值之间（包括这两个端点），并且相加为100%。
+
However, this rule also has as direct consequence that you cannot generally safely lower a curve from nth order to (n-1)th order, because the control points cannot be "pulled apart" cleanly. We can @@ -1345,18 +1345,18 @@ function drawCurve(points[], t): 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!
We start by taking the standard Bézier function, and condensing it a little:
-
+
Then, we apply one of those silly (actually, super useful) calculus tricks: since our t value is always between zero and one
(inclusive), we know that (1-t) plus t always sums to 1. As such, we can express any value as a sum of
t and 1-t:
+
So, with that seemingly trivial observation, we rewrite that Bézier function by splitting it up into a sum of a (1-t) and
t component:
+
So far so good. Now, to see why we did this, let's write out the (1-t) and t parts, and see what that gives us.
I promise, it's about to make sense. We start with (1-t):
@@ -1364,8 +1364,8 @@ function drawCurve(points[], t):
@@ -1378,8 +1378,8 @@ function drawCurve(points[], t):
@@ -1394,7 +1394,7 @@ function drawCurve(points[], t):
@@ -1402,13 +1402,13 @@ function drawCurve(points[], t):
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:
+
where the matrix M is an n+1 by n matrix, and looks like:
@@ -1427,8 +1427,8 @@ function drawCurve(points[], t):
The steps taken here are:
@@ -1656,7 +1656,7 @@ function drawCurve(points[], t):
@@ -1667,15 +1667,15 @@ function drawCurve(points[], t):
@@ -1686,8 +1686,8 @@ function drawCurve(points[], t):
@@ -1711,7 +1711,7 @@ function drawCurve(points[], t):
@@ -2029,15 +2029,15 @@ function drawCurve(points[], t):
And then we turn this into our solution for t using basic arithmetics:
@@ -2055,8 +2055,8 @@ function drawCurve(points[], t):
@@ -2072,16 +2072,16 @@ function drawCurve(points[], t):
And then, using these v values, we can find out what our a, b, and c should be:
@@ -2092,7 +2092,7 @@ function drawCurve(points[], t): class="LaTeX SVG" src="./images/chapters/extremities/d9e66caeb45b6643112ce3d971b17e5b.svg" width="308px" - height="64px" + height="63px" loading="lazy" />
Easy-peasy. We can now almost trivially find the roots by plugging those values into the quadratic formula.
@@ -2114,8 +2114,8 @@ function drawCurve(points[], t):
@@ -2270,8 +2270,8 @@ function getCubicRoots(pa, pb, pc, pd) {
(The Wikipedia article has a decent animation for this process, so I will not add a graphic for that here)
@@ -2390,19 +2390,19 @@ function getCubicRoots(pa, pb, pc, pd) { 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 n-2 term function. For instance, if we have a cubic curve such as this: -
+
Then translating it so that the first coordinate lies on (0,0), moving all x coordinates by -120, and all y coordinates by -160, gives us:
-
+
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:
-
+
If we drop all the zero-terms, this gives us:
-
+
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: @@ -2481,7 +2481,7 @@ function getCubicRoots(pa, pb, pc, pd) { inflection, and we can find out where those happen relatively easily.
What we need to do is solve a simple equation:
-
+
What we're saying here is that given the curvature function C(t), we want to know for which values of t 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
@@ -2490,8 +2490,8 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2514,7 +2514,7 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2522,7 +2522,7 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2533,8 +2533,8 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2551,7 +2551,7 @@ function getCubicRoots(pa, pb, pc, pd) { class="LaTeX SVG" src="./images/chapters/inflections/1679090a942a43d27f886f236fc8d62b.svg" width="533px" - height="19px" + height="20px" loading="lazy" />
@@ -2561,7 +2561,7 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2569,8 +2569,8 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2642,8 +2642,8 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2655,8 +2655,8 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2665,7 +2665,7 @@ function getCubicRoots(pa, pb, pc, pd) {
@@ -2722,12 +2722,12 @@ function getCubicRoots(pa, pb, pc, pd) {
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
z coordinate that is always 1, then we can suddenly add arbitrary values. For example:
+
Sweet! z 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:
-
+
Running all our coordinates through this transformation gives a new set of coordinates, let's call those U, 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 @@ -2735,12 +2735,12 @@ function getCubicRoots(pa, pb, pc, pd) { currently have. This is called shearing, and the typical x-shear matrix and its transformation looks like this:
-
+
So we want some shearing value that, when multiplied by y, yields -x, so our x coordinate becomes zero. That value is simply -x/y, because *-x/y * y = -x*. Done:
-
+
Now, running this on all our points generates a new set of coordinates, let's call those V, 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 @@ -2748,7 +2748,7 @@ function getCubicRoots(pa, pb, pc, pd) { 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/point3x, and y-scaling by point2y. This is really easy:
-
+
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 @@ -2757,13 +2757,13 @@ function getCubicRoots(pa, pb, pc, pd) { 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:
-
+
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:
-
+
Okay, well, that looks plain ridiculous, but: notice that every coordinate value is being offset by the initial translation, and also notice that a lot of terms in that expression are repeated. Even though the maths looks crazy as a single expression, we can just @@ -2773,13 +2773,13 @@ function getCubicRoots(pa, pb, pc, pd) { 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?
-
+
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:
-
+
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! @@ -2854,17 +2854,17 @@ function getCubicRoots(pa, pb, pc, pd) { cubic case either: because of the kind of curve we're starting with, we know there is only root, simplifying the code we need!
First, let's look at the function for x(t):
-
+
We can rewrite this to a plain polynomial form, by just fully writing out the expansion and then collecting the polynomial factors, as:
-
+
Nothing special here: that's a standard cubic polynomial in "power" form (i.e. all the terms are ordered by their power of
t). So, given that a, b, c, d, and x(t) are all
known constants, we can trivially rewrite this (by moving the x(t) across the equal sign) as:
+
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 @@ -2905,9 +2905,9 @@ y = curve.get(t).y fy(t), then the length of the curve, measured from start point to some point t = z, is computed using the following seemingly straight forward (if a bit overwhelming) formula:
-
+
or, more commonly written using Leibnitz notation as:
-
+
This formula says that the length of a parametric curve is in fact equal to the area 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, @@ -2933,7 +2933,7 @@ y = curve.get(t).y 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:
-
+
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
@@ -2996,8 +2996,8 @@ y = curve.get(t).y
@@ -3011,15 +3011,15 @@ y = curve.get(t).y values, for any n, so if we want to approximate our integral with only two terms (which is a bit low, really) then these tables would tell us that for n=2 we must use the following values:
-
+
Which means that in order for us to approximate the integral, we must plug these values into the approximate function, which gives us:
@@ -3157,12 +3157,12 @@ y = curve.get(t).y we can find a lot of insight.
So, what does the function look like? This:
-
+
Which is really just a "short form" that glosses over the fact that we're dealing with functions of t, so let's expand that a
tiny bit:
+
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: any) curve is a ratio between the first and second derivative cross product, and something that
@@ -3551,7 +3551,7 @@ lli = function(line1, line2):
So, how can we compute C? We start with our observation that C always lies somewhere between the start and ends
points, so logically C will have a function that interpolates between those two coordinates:
+
If we can figure out what the function u(t) looks like, we'll be done. Although we do need to remember that this
u(t) will have a different for depending on whether we're working with quadratic or cubic curves.
@@ -3560,9 +3560,9 @@ lli = function(line1, line2):
>
(with thanks to Boris Zbarsky) shows us the following two formulae:
+
And
-
+
So, if we know the start and end coordinates, and we know the t value, we know C, without having to calculate the
A or even B coordinates. In fact, we can do the same for the ratio function: as another function of
@@ -3570,18 +3570,18 @@ lli = function(line1, line2):
pure function of t, too.
We start by observing that, given A, B, and C, the following always holds:
+
Working out the maths for this, we see the following two formulae for quadratic and cubic curves:
-
+
And
-
+
Which now leaves us with some powerful tools: given thee points (start, end, and "some point on the curve"), as well as a
t value, we can contruct curves: we can compute C using the start and end points, and our
u(t) function, and once we have C, we can use our on-curve point (B) and the
ratio(t) function to find A:
+
With A found, finding e1 and e2 for quadratic curves is a matter of running the linear
interpolation with t between start and A to yield e1, and between A and end to yield
@@ -3589,9 +3589,9 @@ lli = function(line1, line2):
distance ratio between e1 to B and B to e2 is the Bézier ratio (1-t):t,
we can reverse engineer v1 and v2:
+
And then reverse engineer the curve's control control points:
-
+
So: if we have a curve's start and end point, then for any t value we implicitly know all the ABC values, which (combined
with an educated guess on appropriate e1 and e2 coordinates for cubic curves) gives us the necessary information
@@ -3617,8 +3617,8 @@ lli = function(line1, line2):
@@ -3663,8 +3663,8 @@ lli = function(line1, line2):
@@ -3678,8 +3678,8 @@ lli = function(line1, line2):
@@ -3690,8 +3690,8 @@ lli = function(line1, line2):
The result of this approach looks as follows:
@@ -3808,9 +3808,9 @@ for (coordinate, index) in LUT: initialB coordinate. We don't even need the latter: with our t value and "whever the cursor is" as target
B, we can compute the associated C:
-
+
And then the associated A:
+
And we're done, because that's our new quadratic control point!
And then we (trivially) rearrange the terms across multiple lines:
@@ -3958,7 +3958,7 @@ for (coordinate, index) in LUT:
@@ -3966,7 +3966,7 @@ for (coordinate, index) in LUT:
@@ -3974,15 +3974,15 @@ for (coordinate, index) in LUT:
Which we can then decompose:
@@ -3990,7 +3990,7 @@ for (coordinate, index) in LUT:
@@ -4008,7 +4008,7 @@ for (coordinate, index) in LUT:
@@ -4036,7 +4036,7 @@ for (coordinate, index) in LUT:
@@ -4048,7 +4048,7 @@ for (coordinate, index) in LUT:
@@ -4064,7 +4064,7 @@ for (coordinate, index) in LUT:
@@ -4075,7 +4075,7 @@ for (coordinate, index) in LUT:
@@ -4088,16 +4088,16 @@ for (coordinate, index) in LUT:
In which we can replace the rather cumbersome "squaring" operation with a more conventional matrix equivalent:
@@ -4113,7 +4113,7 @@ for (coordinate, index) in LUT:
@@ -4121,7 +4121,7 @@ for (coordinate, index) in LUT:
@@ -4129,8 +4129,8 @@ for (coordinate, index) in LUT:
@@ -4141,8 +4141,8 @@ for (coordinate, index) in LUT:
@@ -4254,8 +4254,8 @@ for (coordinate, index) in LUT:
@@ -4313,7 +4313,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -4339,8 +4339,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -4352,16 +4352,16 @@ for p = 1 to points.length-3 (inclusive):
Thus:
@@ -4373,8 +4373,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -4384,7 +4384,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -4392,24 +4392,24 @@ for p = 1 to points.length-3 (inclusive):
and merge the matrices:
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:
So, if we want to express a Catmull-Rom curve using a Bézier curve, we'll need to turn this Catmull-Rom bit:
@@ -4417,39 +4417,39 @@ for p = 1 to points.length-3 (inclusive): class="LaTeX SVG" src="./images/chapters/catmullconv/b21386f86bef8894f108c5441dad10de.svg" width="227px" - height="76px" + height="84px" loading="lazy" />Into something that looks like this:
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:
Then we remove the coordinate vector from both sides without affecting the equality:
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:
@@ -4459,16 +4459,16 @@ for p = 1 to points.length-3 (inclusive):
And now we're basically done. We just multiply those two matrices and we know what V is:
We now have the final piece of our function puzzle. Let's run through each step.
@@ -4478,7 +4478,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -4488,8 +4488,8 @@ for p = 1 to points.length-3 (inclusive):
And we're done: we finally know how to convert these two curves!
@@ -4542,8 +4542,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -4553,16 +4553,16 @@ for p = 1 to points.length-3 (inclusive):
Or, if your API allows you to specify Catmull-Rom curves using plain coordinates:
@@ -4635,13 +4635,13 @@ for p = 1 to points.length-3 (inclusive):
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:
-
+
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:
-
+
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...
@@ -4802,8 +4802,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -4815,8 +4815,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -4829,7 +4829,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -4841,8 +4841,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -4851,8 +4851,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -5045,33 +5045,33 @@ for p = 1 to points.length-3 (inclusive): 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 φ:
-
+
What we want to find is the intersection of the tangents, so we want a point C such that:
-
+
i.e. we want a point that lies on the vertical line through S (at some distance a from S) and also lies on the tangent line through E (at some distance b from E). Solving this gives us:
-
+
First we solve for b:
-
+
which yields:
-
+
which we can then substitute in the expression for a:
-
+
A quick check shows that plugging these values for a and b into the expressions for Cx and Cy give the same x/y coordinates for both "a away from A" and "b 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 t=0.5 (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:
-
+
We compute T, observing that if t=0.5, the polynomial values (1-t)², 2(1-t)t, and t² are 0.25, 0.5, and 0.25 respectively:
-
+
Which, worked out for the x and y components, gives:
-
+
And the distance between these two is the standard Euclidean distance:
-
+
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? @@ -5112,7 +5112,7 @@ for p = 1 to points.length-3 (inclusive): 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:
-
+
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,
@@ -5219,7 +5219,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -5231,7 +5231,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -5239,7 +5239,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -5276,8 +5276,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -5299,8 +5299,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -5310,15 +5310,15 @@ for p = 1 to points.length-3 (inclusive):
@@ -5328,8 +5328,8 @@ for p = 1 to points.length-3 (inclusive):
@@ -5339,8 +5339,8 @@ for p = 1 to points.length-3 (inclusive):
And that's it, we have all four points now for an approximation of an arbitrary circular arc with angle φ.
@@ -5350,7 +5350,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -5358,7 +5358,7 @@ for p = 1 to points.length-3 (inclusive):
@@ -5369,15 +5369,15 @@ for p = 1 to points.length-3 (inclusive):
Which, in decimal values, rounded to six significant digits, is:
@@ -5566,7 +5566,7 @@ for p = 1 to points.length-3 (inclusive):
>, we can compute a point on the curve for some value t 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:
-
+
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 N(...) function, subscripted with an obvious parameter
@@ -5581,14 +5581,14 @@ for p = 1 to points.length-3 (inclusive):
k subscript to the N() function applies to.
Then the N() function itself. What does it look like?
-
+
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 i goes
up, and k 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 i/k values:
+
And this function finally has a straight up evaluation: if a t value lies within a knot-specific interval once we reach a
k=1 value, it "counts", otherwise it doesn't. We did cheat a little, though, because for all these values we need to scale
@@ -5605,12 +5605,12 @@ for p = 1 to points.length-3 (inclusive):
Carl de Boor — came to a mathematically pleasing solution: to compute a point
P(t), we can compute this point by evaluating d(t) on a curve section between knots i and i+1:
+
This is another recursive function, with k values decreasing from the curve order to 1, and the value α (alpha) defined by:
-
+
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 (1-alpha) because it's a trivial subtraction. Computing the d() function is thus mostly a
@@ -5618,7 +5618,7 @@ for p = 1 to points.length-3 (inclusive):
recursion might see computationally expensive, the total algorithm is cheap, as each step only involves very simple maths.
Of course, the recursion does need a stop condition:
-
+
So, we actually see two stopping conditions: either i becomes 0, in which case d() is zero, or
k becomes zero, in which case we get the same "either 1 or 0" that we saw in the N() function above.
@@ -5628,7 +5628,7 @@ for p = 1 to points.length-3 (inclusive):
Casteljau's algorithm. For instance, if we write out d() for i=3 and k=3, we get the following
recursion diagram:
+
That is, we compute d(3,3) as a mixture of d(2,3) and d(2,2), where those two are themselves a
mixture of d(1,3) and d(1,2), and d(1,2) and d(1,1), respectively, which are
diff --git a/package.json b/package.json
index 20f3ee7e..2241a092 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"scripts": {
"start": "run-s clean:* time lint:* build time clean:temp",
"test": "run-s start && run-p watch server browser",
+ "deploy": "run-s regenerate copy",
"------": "--- note that due to github's naming policy, the public dir is called 'docs' rather than 'public' ---",
"browser": "open-cli http://localhost:8000",
"build": "node ./src/build.js",
@@ -23,6 +24,7 @@
"clean:news": "rm -f ./docs/news/*.html",
"polish": "run-s pretty link-checker",
"regenerate": "run-s start polish",
+ "copy": "mkdir _ && mv ../bezierinfo/.git _ && rm -rf ../bezierinfo && cp -r ./docs/. ../bezierinfo && mv _/.git ../bezierinfo && rm -rf _",
"lint:tools": "prettier \"./src/**/*.js\" --print-width 150 --write",
"lint:lib": "prettier \"./docs/js/**/*.js\" --print-width 150 --write",
"lint:css": "prettier \"./docs/**/*.css\" --print-width 150 --write",
diff --git a/src/html/index.template.html b/src/html/index.template.html
index 4875c659..eda26641 100644
--- a/src/html/index.template.html
+++ b/src/html/index.template.html
@@ -15,7 +15,7 @@
-
+
{% include "./fragments/meta.html" %}