1

Given two points and a control point, one can easily draw a bezier path between the two points. What I would like to do use a bezier curve to draw a path that with changing width, by a assigning a "weight" to a the points of the curve which will determine its width. For example, if I give weight=0 to the first point of the curve and weight = 1 to the second point of the curve then something like the following path should be generated (the curve in the picture is cubic, but I am working with quadratic bezier curves): enter image description here

In order to do this I would need to find the control points of the "edge" curves that determine the shape and then fill the shape that is found between the two new curves. However, I am quite unsure on how this can be done. One thing I thought about was to determine the starting and ending points of the new curves by simple drawing perpendicular segments to the line connecting the original control point and the original end points, but this still doesn't solve the problem of finding the new control points for the new curves.

reckless
  • 741
  • 12
  • 53

2 Answers2

1

I would use cubics instead of quadratics.

Yes you offset the control points perpendicularly by your weight but not the control points of BEZIER but control points of interpolation cubic (or catmull-rom) and then just convert that into Bezier control points. See related QAs:

However much easier would be to directly render curve using Shaders and (perpendicular) distance. See:

That way you would not need to offset anything just interpolate the width of your curve ...

Spektre
  • 49,595
  • 11
  • 110
  • 380
  • When you say "offset the control points of interpolation cubic perpendicularly", perpendicularly to what? – reckless Jun 15 '20 at 10:13
  • @daljit97 Perpendicular to the curve tangent but still in the same plane as your curve. To obtain such direction in 2D you just take tangent `(tx,ty)` and swap the `x,y` and negate one of them so `(-ty,tx)` and `(ty,-tx)` will be both the offsetting directions – Spektre Jun 15 '20 at 12:55
1

Maybe this could help, also there is an example on variable offseting

https://microbians.com/mathcode

enter image description here

microbians
  • 455
  • 5
  • 11
  • I’ve read your paper on offsetting quadratic curves, but couldn’t find any info on how to find the control points of the curves for graduated offsets like in your example. Do you have an example with code for that. – reckless Oct 21 '21 at 20:47
  • 1
    Take a look at my code pen and GitHub, I had some code example there. I recreated my old flash code to JavaScript. – microbians Oct 29 '21 at 05:45