(can you find the configuration that yields the maximum number of intersections between two cubic curves? Nine intersections!)
+ 
Scripts are disabled. Showing fallback image.
p, and then repeat step 1 with the points before and after the closest point we just found.This makes the interval we check smaller and smaller at each iteration, and we can keep running the three steps until the interval becomes so small as to lead to distances that are, for all intents and purposes, the same for all points.
-So, let's see that in action: in this case, I'm going to arbitrarily say that if we're going to run the loop until the interval is smaller than 0.001, and show you what that means for projecting your mouse cursor or finger tip onto a rather complex Bezier curve (which, of course, you can reshape as you like). Also shown are the original three points that our coarse check finds.
+So, let's see that in action: in this case, I'm going to arbitrarily say that if we're going to run the loop until the interval is smaller than 0.001, and show you what that means for projecting your mouse cursor or finger tip onto a rather complex Bézier curve (which, of course, you can reshape as you like). Also shown are the original three points that our coarse check finds.
@@ -1630,23 +1630,43 @@ for (coordinate, index) in LUT:
Manipulating a curve
Armed with knowledge of the "ABC" relation, we can now update a curve interactively, by letting people click anywhere on the curve, find the t-value matching that coordinate, and then letting them drag that point around. With every drag update we'll have a new point "B", which we can combine with the fixed point "C" to find our new point A. Once we have those, we can reconstruct the de Casteljau skeleton and thus construct a new curve with the same start/end points as the original curve, passing through the user-selected point B, with correct new control points.
-
+ 
Scripts are disabled. Showing fallback image.
Click-dragging the curve itself shows what we're using to compute the new coordinates: while dragging you will see the original point B and its corresponding t-value, the original point C for that t-value, as well as the new point B' based on the mouse cursor. Since we know the t-value for this configuration, we can compute the ABC ratio for this configuration, and we know that our new point A' should like at a distance:
-
-For quadratic curves, this means we're done, since the new point A' is equivalent to the new quadratic control point. For cubic curves, we need to do a little more work:
-Click-dragging a point on the curve shows what we're using to compute the new coordinates: while dragging you will see the original point B and its corresponding t-value, and the original points A and C for that t-value, in light coloring, as well as the new A', B', and C' (although of course the C coordinates are the same ones, because that's the defining feature of point C) based on where you're dragging point B to, in purple.
Since we know the new point B', and the "new" point C' as well as the t value, we know our new point A' has to be:
+For quadratic curves, this means we're done, since the new point A' is equivalent to the new quadratic control point.
For cubic curves, we need to do a little more work, because while computing a new A' is exactly the same as before, we're not quite done once we've done so. For cubic curves, B has not just an associated t value, but also two associated "side" values. Let's revisit the graphic from the chapter on de Casteljau's algorithm, to see what we mean:
+ Scripts are disabled. Showing fallback image.
+ In addition to the A, B, and C values, we also see the points e1 and e2, without which constructing our de Casteljau "strut lines" becomes very difficult indeed; as well as the points v1 and v2, which we can construct when we know our ABC values enriched with e1 and e2:
+After which computing the new control points is straight-forward:
+
+So let's put that into practice:
+
+ Scripts are disabled. Showing fallback image.
+ So that looks pretty good, but you may not like having e1 and e2 stay the same distances away from B' while moving the point around. An alternative is to scale the distances of e1 and e2 to B' to match the scaling that A--C undergoes as A'--C' - whether this looks better or not depends somewhat on your intention as programmer or user, of course, so the following graphic applies this scaling, but it's up to you to decide whether or not that looks better (or, more appropriately, under which circumstances you might want to apply this scaling vs. when you might not):
+ Scripts are disabled. Showing fallback image.
+ To help understand what's going on, the cubic graphic shows the full de Casteljau construction "hull" when repositioning point B. We compute A' in exactly the same way as before, but we also record the final strut line that forms B in the original curve. Given A', B', and the endpoints e1 and e2 of the strut line relative to B', we can now compute where the new control points should be. Remember that B' lies on line e1--e2 at a distance t, because that's how Bézier curves work. In the same manner, we know the distance A--e1 is only line-interval [0,t] of the full segment, and A--e2 is only line-interval [t,1], so constructing the new control points is fairly easy.
-First, we construct the one-level-of-de-Casteljau-up points:
-
-And then we can compute the new control points:
-
-And that's cubic curve manipulation.
(can you find the configuration that yields the maximum number of intersections between two cubic curves? Nine intersections!)
+
Scripts are disabled. Showing fallback image.
p, and then repeat step 1 with the points before and after the closest point we just found.This makes the interval we check smaller and smaller at each iteration, and we can keep running the three steps until the interval becomes so small as to lead to distances that are, for all intents and purposes, the same for all points.
-So, let's see that in action: in this case, I'm going to arbitrarily say that if we're going to run the loop until the interval is smaller than 0.001, and show you what that means for projecting your mouse cursor or finger tip onto a rather complex Bezier curve (which, of course, you can reshape as you like). Also shown are the original three points that our coarse check finds.
+So, let's see that in action: in this case, I'm going to arbitrarily say that if we're going to run the loop until the interval is smaller than 0.001, and show you what that means for projecting your mouse cursor or finger tip onto a rather complex Bézier curve (which, of course, you can reshape as you like). Also shown are the original three points that our coarse check finds.
@@ -1627,23 +1627,43 @@ for (coordinate, index) in LUT:
Manipulating a curve
Armed with knowledge of the "ABC" relation, we can now update a curve interactively, by letting people click anywhere on the curve, find the t-value matching that coordinate, and then letting them drag that point around. With every drag update we'll have a new point "B", which we can combine with the fixed point "C" to find our new point A. Once we have those, we can reconstruct the de Casteljau skeleton and thus construct a new curve with the same start/end points as the original curve, passing through the user-selected point B, with correct new control points.
-
+
Scripts are disabled. Showing fallback image.
Click-dragging the curve itself shows what we're using to compute the new coordinates: while dragging you will see the original point B and its corresponding t-value, the original point C for that t-value, as well as the new point B' based on the mouse cursor. Since we know the t-value for this configuration, we can compute the ABC ratio for this configuration, and we know that our new point A' should like at a distance:
-
-For quadratic curves, this means we're done, since the new point A' is equivalent to the new quadratic control point. For cubic curves, we need to do a little more work:
-Click-dragging a point on the curve shows what we're using to compute the new coordinates: while dragging you will see the original point B and its corresponding t-value, and the original points A and C for that t-value, in light coloring, as well as the new A', B', and C' (although of course the C coordinates are the same ones, because that's the defining feature of point C) based on where you're dragging point B to, in purple.
Since we know the new point B', and the "new" point C' as well as the t value, we know our new point A' has to be:
+For quadratic curves, this means we're done, since the new point A' is equivalent to the new quadratic control point.
For cubic curves, we need to do a little more work, because while computing a new A' is exactly the same as before, we're not quite done once we've done so. For cubic curves, B has not just an associated t value, but also two associated "side" values. Let's revisit the graphic from the chapter on de Casteljau's algorithm, to see what we mean:
+ Scripts are disabled. Showing fallback image.
+ In addition to the A, B, and C values, we also see the points e1 and e2, without which constructing our de Casteljau "strut lines" becomes very difficult indeed; as well as the points v1 and v2, which we can construct when we know our ABC values enriched with e1 and e2:
+After which computing the new control points is straight-forward:
+
+So let's put that into practice:
+
+ Scripts are disabled. Showing fallback image.
+ So that looks pretty good, but you may not like having e1 and e2 stay the same distances away from B' while moving the point around. An alternative is to scale the distances of e1 and e2 to B' to match the scaling that A--C undergoes as A'--C' - whether this looks better or not depends somewhat on your intention as programmer or user, of course, so the following graphic applies this scaling, but it's up to you to decide whether or not that looks better (or, more appropriately, under which circumstances you might want to apply this scaling vs. when you might not):
+ Scripts are disabled. Showing fallback image.
+ To help understand what's going on, the cubic graphic shows the full de Casteljau construction "hull" when repositioning point B. We compute A' in exactly the same way as before, but we also record the final strut line that forms B in the original curve. Given A', B', and the endpoints e1 and e2 of the strut line relative to B', we can now compute where the new control points should be. Remember that B' lies on line e1--e2 at a distance t, because that's how Bézier curves work. In the same manner, we know the distance A--e1 is only line-interval [0,t] of the full segment, and A--e2 is only line-interval [t,1], so constructing the new control points is fairly easy.
-First, we construct the one-level-of-de-Casteljau-up points:
-
-And then we can compute the new control points:
-
-And that's cubic curve manipulation.
(can you find the configuration that yields the maximum number of intersections between two cubic curves? Nine intersections!)
+
Scripts are disabled. Showing fallback image.
p, and then repeat step 1 with the points before and after the closest point we just found.This makes the interval we check smaller and smaller at each iteration, and we can keep running the three steps until the interval becomes so small as to lead to distances that are, for all intents and purposes, the same for all points.
-So, let's see that in action: in this case, I'm going to arbitrarily say that if we're going to run the loop until the interval is smaller than 0.001, and show you what that means for projecting your mouse cursor or finger tip onto a rather complex Bezier curve (which, of course, you can reshape as you like). Also shown are the original three points that our coarse check finds.
+So, let's see that in action: in this case, I'm going to arbitrarily say that if we're going to run the loop until the interval is smaller than 0.001, and show you what that means for projecting your mouse cursor or finger tip onto a rather complex Bézier curve (which, of course, you can reshape as you like). Also shown are the original three points that our coarse check finds.
@@ -1621,23 +1621,43 @@ for (coordinate, index) in LUT:
Manipulating a curve
Armed with knowledge of the "ABC" relation, we can now update a curve interactively, by letting people click anywhere on the curve, find the t-value matching that coordinate, and then letting them drag that point around. With every drag update we'll have a new point "B", which we can combine with the fixed point "C" to find our new point A. Once we have those, we can reconstruct the de Casteljau skeleton and thus construct a new curve with the same start/end points as the original curve, passing through the user-selected point B, with correct new control points.
-
+
Scripts are disabled. Showing fallback image.
Click-dragging the curve itself shows what we're using to compute the new coordinates: while dragging you will see the original point B and its corresponding t-value, the original point C for that t-value, as well as the new point B' based on the mouse cursor. Since we know the t-value for this configuration, we can compute the ABC ratio for this configuration, and we know that our new point A' should like at a distance:
-
-For quadratic curves, this means we're done, since the new point A' is equivalent to the new quadratic control point. For cubic curves, we need to do a little more work:
-Click-dragging a point on the curve shows what we're using to compute the new coordinates: while dragging you will see the original point B and its corresponding t-value, and the original points A and C for that t-value, in light coloring, as well as the new A', B', and C' (although of course the C coordinates are the same ones, because that's the defining feature of point C) based on where you're dragging point B to, in purple.
Since we know the new point B', and the "new" point C' as well as the t value, we know our new point A' has to be:
+For quadratic curves, this means we're done, since the new point A' is equivalent to the new quadratic control point.
For cubic curves, we need to do a little more work, because while computing a new A' is exactly the same as before, we're not quite done once we've done so. For cubic curves, B has not just an associated t value, but also two associated "side" values. Let's revisit the graphic from the chapter on de Casteljau's algorithm, to see what we mean:
+ Scripts are disabled. Showing fallback image.
+ In addition to the A, B, and C values, we also see the points e1 and e2, without which constructing our de Casteljau "strut lines" becomes very difficult indeed; as well as the points v1 and v2, which we can construct when we know our ABC values enriched with e1 and e2:
+After which computing the new control points is straight-forward:
+
+So let's put that into practice:
+
+ Scripts are disabled. Showing fallback image.
+ So that looks pretty good, but you may not like having e1 and e2 stay the same distances away from B' while moving the point around. An alternative is to scale the distances of e1 and e2 to B' to match the scaling that A--C undergoes as A'--C' - whether this looks better or not depends somewhat on your intention as programmer or user, of course, so the following graphic applies this scaling, but it's up to you to decide whether or not that looks better (or, more appropriately, under which circumstances you might want to apply this scaling vs. when you might not):
+ Scripts are disabled. Showing fallback image.
+ To help understand what's going on, the cubic graphic shows the full de Casteljau construction "hull" when repositioning point B. We compute A' in exactly the same way as before, but we also record the final strut line that forms B in the original curve. Given A', B', and the endpoints e1 and e2 of the strut line relative to B', we can now compute where the new control points should be. Remember that B' lies on line e1--e2 at a distance t, because that's how Bézier curves work. In the same manner, we know the distance A--e1 is only line-interval [0,t] of the full segment, and A--e2 is only line-interval [t,1], so constructing the new control points is fairly easy.
-First, we construct the one-level-of-de-Casteljau-up points:
-
-And then we can compute the new control points:
-
-And that's cubic curve manipulation.