I’ve been building a vector editor that by default draws shapes with smooth curvature and shows the comb. [1] In addition to the four point types mentioned in the article, you get a new “curve” point type. I’ve also been making a font editor with the same drawing capability. [2]
Both are free static web apps that use local storage and have import/export capability for SVG files (and OTF files for the font editor).
Well that’s wild because I had a disagreement with beziers recently and did a similar thing! [1] albeit with more madness and less polish. Driven by the a/s/d/f keys with find edges snap to reference images and curve fitting to construction geometry.
Feel I should also call out Freyr’s videos for anyone who has missed them - continuity of splines [2] and the beauty of Bézier curves [3]
I remember watching the splines video for entertainment, thinking "Surely it can't be this hard for the common case: where we're not too picky, our points are far apart, and we don't need to minimize the segment count. This has to be a solved problem right?" After a bunch of fiddling with a project I had to come crawling back. It's so easy to get kinks, and derivative discontinuities are very noticeable. In the end I switched to a force-based navigation method instead a fixed path iirc.
As someone who has spent a lot of my life editing bezier curves, this is really fantastic.
The one sticking point is instability in the middle of s curves which seems difficult. We're getting better control for every fully convex or non-convex path in exchange for chaos at the boundary between the two. I wonder if incorporating some other error term of the curvature in those regions might help, perhaps guaranteeing that the curvature derivatives are close to continuous whenever the curvatures themselves get too small?
One other thought is that you could use a saturating function of the tangent circle radius so that 0 curvature points don't have to have their control points go to infinity, perhaps making the saturation point a function of the distance to the nearby nodes to keep the scale reasonable.
I find bezier curbs sexy, well-rounded, smart, and attractive. They are awesome and this is, by extension, all of those things, too! We need more bezier curbs in this world.
>"The linear interpolations (aka lerps) can be summarized into a single compact formula, e.g. for 4 control points (A,B,C,D):
γ(t)=A⋅(1−t)^3+B⋅3(1−t)^2⋅t+C⋅3(1−t)t^2+D⋅t^3
The rule is simple: descending powers of (1−t), ascending powers of t, with coefficients taken from the n'th row of Pascal's triangle.
I've never seen the connection between the equation for Bezier Curves (more specifically the linear equations of curves with N control points aka "binding points" / "points of stability" / "fixed points" / "immovable points", etc.) and Pascal's Triangle before!
As another comment mentioned, Raph Levien has a few words to say on the topic of improving Bezier curves.
Simplifying Bézier paths (2023) https://raphlinus.github.io/curves/2023/04/18/bezpath-simpli...
Parallel curves of cubic Béziers (2022) https://raphlinus.github.io/curves/2022/09/09/parallel-bezie...
Fitting cubic Bézier curves (2021) https://raphlinus.github.io/curves/2021/03/11/bezier-fitting...
And also an amazing page on Béziers https://pomax.github.io/bezierinfo/
What an amazing resource.
I’ve been building a vector editor that by default draws shapes with smooth curvature and shows the comb. [1] In addition to the four point types mentioned in the article, you get a new “curve” point type. I’ve also been making a font editor with the same drawing capability. [2]
Both are free static web apps that use local storage and have import/export capability for SVG files (and OTF files for the font editor).
[1] https://svg.a10z.co/editor
[2] https://svg.a10z.co/font
Well that’s wild because I had a disagreement with beziers recently and did a similar thing! [1] albeit with more madness and less polish. Driven by the a/s/d/f keys with find edges snap to reference images and curve fitting to construction geometry.
Feel I should also call out Freyr’s videos for anyone who has missed them - continuity of splines [2] and the beauty of Bézier curves [3]
[1] https://gadgetoid.github.io/asdf
[2] https://youtu.be/jvPPXbo87ds
[3] https://youtu.be/aVwxzDHniEw
I remember watching the splines video for entertainment, thinking "Surely it can't be this hard for the common case: where we're not too picky, our points are far apart, and we don't need to minimize the segment count. This has to be a solved problem right?" After a bunch of fiddling with a project I had to come crawling back. It's so easy to get kinks, and derivative discontinuities are very noticeable. In the end I switched to a force-based navigation method instead a fixed path iirc.
I shouldn’t tell you this, cause I’m also working on a font editor, but I’d consider looking into Raph Levien’s Hyperbezier work
As someone who has spent a lot of my life editing bezier curves, this is really fantastic.
The one sticking point is instability in the middle of s curves which seems difficult. We're getting better control for every fully convex or non-convex path in exchange for chaos at the boundary between the two. I wonder if incorporating some other error term of the curvature in those regions might help, perhaps guaranteeing that the curvature derivatives are close to continuous whenever the curvatures themselves get too small?
One other thought is that you could use a saturating function of the tangent circle radius so that 0 curvature points don't have to have their control points go to infinity, perhaps making the saturation point a function of the distance to the nearby nodes to keep the scale reasonable.
The thing is, the problematic curves often violate the rules put forward as best practices:
- place nodes at extrema (top/bottom, left/right)
- place nodes at points of inflection (middle of an _S_ curve)
- where possible/appropriate observe the "rule of 30" and place off-curve nodes not quote one-third of the way towards the other on-curve node
If one expected (or enforced) those rules, does the problem/math become easier?
I find bezier curbs sexy, well-rounded, smart, and attractive. They are awesome and this is, by extension, all of those things, too! We need more bezier curbs in this world.
>"The linear interpolations (aka lerps) can be summarized into a single compact formula, e.g. for 4 control points (A,B,C,D):
γ(t)=A⋅(1−t)^3+B⋅3(1−t)^2⋅t+C⋅3(1−t)t^2+D⋅t^3
The rule is simple: descending powers of (1−t), ascending powers of t, with coefficients taken from the n'th row of Pascal's triangle.
I've never seen the connection between the equation for Bezier Curves (more specifically the linear equations of curves with N control points aka "binding points" / "points of stability" / "fixed points" / "immovable points", etc.) and Pascal's Triangle before!
Brilliant!
Great article, too!
Illustrations in the article are indeed precious teaching material