How to draw a curve along a curve

0 Flares Twitter 0 Facebook 0 Google+ 0 Email -- Filament.io 0 Flares ×

So we have a quadratic curve. With a source, a destination and a control point.
The control point determines the curvature of the curve.

Now, how to draw a curve starting at the destination point and growing along the main curve ?


In a few words and for the sole purpose of putting some text for the search engines to find this page when looking for "quadratic bezier curve" and because I know that you will just look at the code without even noticing the advertising on the right...

Thus, the only thing we need to care about here is the control point of the growing curve. It needs to be located so not only the destination point of the growing curve follows the curve but the entire curve.

We just need to calculate the length between a point that never moves (say the source point of the main curve) and the control point of this same main curve. Then we multiply it by the "time" (again it) of the destination (see final) point of the growing curve on the main curve (wich should be between 0 and 1) and we add to it the point that never moves (the source point of the main curve in our case)

In this case, this is just a relationship between a length and a "percentage" (time in this case), which is pretty easy.
The next move will be to make the source point (the point that never moves) move. And still try to keep this relationship intact. I guess in that case, the control point will have to rotate at some point in order to keep its "relation" with the source point compared to the destination point but this will be for later.

Ho and maybe you will have noticed, the destination point of the main curve rotates too.
For this, I simply get the point located at "time 1 - 0.01" on the main curve and calculate the angle between this point and the destination one.

If this seems unclear, just look at the code (comments are in french, sometimes in english)
All the classes are present as well as those from Singularity, everything is there:
quadratic_curve_v02

0 Flares Twitter 0 Facebook 0 Google+ 0 Email -- Filament.io 0 Flares ×

Leave a Comment