One unintuitive thing I noticed about these curves, at least from the demo on the page, is that they have both areas where their behavior quickly 'snaps' from one configuration to another, and areas where they saturate such that changes to the control handles no longer produce any movement. Standard Bezier curves don't have either of these; I wonder if that's essentially coupled to the higher expressivity they offer?
One big aspect that made Bezier popular was local support, i.e. moving control points resulted in expected changes in the same direction. It's interesting that this is the result of a search for 'a curve family better suited for interactive design than cubic Beziers.' I think it's better for achieving curve quality in the sense of curvature changes, but not so much in interactivity.
Trying the example from TFA, I think that it is easy to acquire a good intuition about how the curve moves when you pull a control point and the shapes of the curves that you can obtain are more beautiful and more interesting than what you obtain with cubic Beziers.
So I believe that if for you the "interactivity" does not seem better, that is more likely to be caused by being much more familiar about how cubic Beziers behave, from past experience, than because these hyperbezier curves were really less suited for interactivity. Also, the current implementation in JavaScript seems buggy.
For me, the poor approximation by cubic Beziers of some important curves, like conics and the Euler spiral, is an extremely serious defect, so I like these hyperbezier curves much more and I intend to investigate how efficient can they be, from a computational viewpoint.
There are two separate questions here. One is how much moving control points creates expected changes in the same direction. Béziers nail this, as the position of a point at t is a linear combination of the control points, with the Bernstein polynomials as weighting functions. So it always feels like direct control. With my mapping, you get this for a nice big chunk of the parameter range – small to moderate angles and control point distances. But this property does fall apart when pushing to extremes.
The other question is whether the control is local. As others have remarked, this has much more to do with the way the curve is embedded into a spline than the curve family itself. In particular, it is deeply affected by the continuity constraints. As payment for the local support, cubic Béziers only give G1 continuity. Euler spiral splines, by contrast, are G2 but changes do cause those ripples.
The pen tool prototype linked in the blog post suggests giving designers more choices. If you specify all control points, you get G1 just like a cubic Bézier. But it also gives the choice of specifying one control point on a smooth endpoint, and solving the other for G2 continuity. In my experience, it feels more like local control than Euler spiral-like splines. When you want smoother curves, you do that, and when you're willing to sacrifice continuity for local control, that's also possible.
Very cool demo, The curve does sort of go screwball when the control points are close together.
After playing with it some more. Not close together, but more side loaded. On reflection while many of these forms would be awkward to find in a drawing program, I think this is the source of the superior spiral the author likes.
I love bezier curves. In community-college, it was the first time I ever encountered a subject that made me want to go do more research on my own. One of my core memories is toiling away for multiple nights when the rest of the house was asleep on my 2015 Macbook Pro, writing janky p5.js code and pressing refresh on the browser page over and over until suddenly, I started see real, beautiful curves blossom from my control points.
I just went back to dig up some old sources[0], and I can't believe this post is almost a decade old now. This guy's explainers and animations were leagues beyond any other resource I could find through Google searc at the time.
This is fucking fantastic. I wish the whole of the internet was like this. People enthusiastically sharing their own enthusiasm about learning something cool, and other enthusiasts finding it and going down their own rabbitholes. The internet is multimedia. It should be nothing _but_ people sharing knowledge. Thanks for writing this up.
Playing with the example, the controls points don’t feel any more intuitive to work with than traditional cubic Béziers. They still exhibit annoying behaviors near the endpoints, though they don’t tend to “explode” like traditional cubics.
I find it curious that the author makes no attempt to compare his solution to other splines like B-splines or Catmull-Rom splines, given their popularity in computer graphics and CAD.
So Raph, how do you draw these things? I’m not sure exactly where I’d start given an equation of the curvature or tangent (I assume?) angle. The pen tool link talks about “auto points”, giving the impression that it’s a sort of Bezier subdivision with some constraints, is that accurate? And your article mentions you’ve since fixed some things in the math - so this is a bit different from the pen tool, not using auto points?
Playing with your demo, I see the curve lock shape in certain configurations and stop moving even when I’m dragging one of the control points around. Is this a temporary or numerical stability issue, or is this a property of hyperbezier curves? For example if I arrange the control points in a square with P0 bottom left, C1 bottom right, C2 top left, P3 top right, and then drag C1 to the right, the shape locks up quickly. Eyeballing, it’s maybe when the length of P0C1 is ~1.5 times the length of C2P3? Moving C1 further right and up/down, there’s a huge area where moving C1 doesn’t affect the shape of the curve.
I was slightly curious about the P/C naming as well - is this a Hermite-like idea where P[03] are points and C[12] are similar to tangent vectors? Why not use P[0123]?
Probably one really obvious thing worth mentioning - Beziers are indeed very versatile, but it has to be said that one of the reasons they’re so popular is because the math is so simple, right? Decomposable into linear steps, integer exponents, with a couple multiplies of only your parameter you can evaluate them with a matrix multiply. They’re trivial to draw. Add in the controllability and intuitiveness and simplicity of computing other properties of the curve (such as finding roots & inflections & bounding boxes, splitting curves, etc.), and it makes sense they’re very popular. Hyperbeziers look interesting, and I don’t have intuition on their uses yet, but I assume their rendering involves heavier math than Beziers - since the curvature & angle equations have a divide & square root? Can they be split or subdivided easily?
You’ve been in search of a better curve for a long time. I’m wondering how you think about and where you stand on subdividing curves like Bezier vs finding a more perfect interpolation. Obviously there are tradeoffs, but are you aiming at problems that can’t be solved in practice using subdivision/approximation? I’d also be curious to hear your thoughts on hyperbeziers vs NURBS.
These are an exciting new curve. I’d like to hear about how they will handle stroking. The inside and outside stroke of a Bézier curve can’t be represented with a Bézier curve. How do hyperbeziers fare?
Bezier curves were invented to design physical objects (cars), but they were an idealized and simplified solution to enable CAD at the time computer were much less powerful. Ideally, CAD should put elastica curves as the first choice - but they are difficult to compute as they can diverge drastically when control points get too close, and there is sometimes more than one solution for a set of constraints.
Spiro curves were supposed to solve it but I am surprised to read here that even spiro fails to approximate elastica. Have you mapped where the limitations are?
For information, I am drawing boat hulls, and elastica would model the natural bend of wood/plywood/metal much better than bezier... Amateur naval designers really lack good tools to bridge the gap between ideal hydrodynamic forms and ease of construction, and there are still a lot of tiny but annoying adjustments when one planks the first hull.
I have a wooden banana hanger that I designed using bezier curves, twenty years ago. Actually I made two; one of pine and another one of oak. I have the files somewhere, I hope; it was made using an abandonware vector graphics program called Dia.
It is made of two pieces: the base and the hook support. If you look at it from certain angles, you can perceive continuity between the curves of these two parts, because of the way the bezier curves project. I feel that this gives it elegance even when viewed from other angles.
21 comments
[ 3.2 ms ] story [ 46.0 ms ] threadI wrote down a bunch of posts on how I achieved the UI primarly to explain the process to my future self[0]
As a mobile developer it was so much fun to do something other than building a CRUD app.
[0]https://www.krtkush.com/computer-graphics-basics-with-compos...
So I believe that if for you the "interactivity" does not seem better, that is more likely to be caused by being much more familiar about how cubic Beziers behave, from past experience, than because these hyperbezier curves were really less suited for interactivity. Also, the current implementation in JavaScript seems buggy.
For me, the poor approximation by cubic Beziers of some important curves, like conics and the Euler spiral, is an extremely serious defect, so I like these hyperbezier curves much more and I intend to investigate how efficient can they be, from a computational viewpoint.
The other question is whether the control is local. As others have remarked, this has much more to do with the way the curve is embedded into a spline than the curve family itself. In particular, it is deeply affected by the continuity constraints. As payment for the local support, cubic Béziers only give G1 continuity. Euler spiral splines, by contrast, are G2 but changes do cause those ripples.
The pen tool prototype linked in the blog post suggests giving designers more choices. If you specify all control points, you get G1 just like a cubic Bézier. But it also gives the choice of specifying one control point on a smooth endpoint, and solving the other for G2 continuity. In my experience, it feels more like local control than Euler spiral-like splines. When you want smoother curves, you do that, and when you're willing to sacrifice continuity for local control, that's also possible.
After playing with it some more. Not close together, but more side loaded. On reflection while many of these forms would be awkward to find in a drawing program, I think this is the source of the superior spiral the author likes.
I just went back to dig up some old sources[0], and I can't believe this post is almost a decade old now. This guy's explainers and animations were leagues beyond any other resource I could find through Google searc at the time.
[0] https://jamie-wong.com/post/bezier-curves/
I find it curious that the author makes no attempt to compare his solution to other splines like B-splines or Catmull-Rom splines, given their popularity in computer graphics and CAD.
Playing with your demo, I see the curve lock shape in certain configurations and stop moving even when I’m dragging one of the control points around. Is this a temporary or numerical stability issue, or is this a property of hyperbezier curves? For example if I arrange the control points in a square with P0 bottom left, C1 bottom right, C2 top left, P3 top right, and then drag C1 to the right, the shape locks up quickly. Eyeballing, it’s maybe when the length of P0C1 is ~1.5 times the length of C2P3? Moving C1 further right and up/down, there’s a huge area where moving C1 doesn’t affect the shape of the curve.
I was slightly curious about the P/C naming as well - is this a Hermite-like idea where P[03] are points and C[12] are similar to tangent vectors? Why not use P[0123]?
Probably one really obvious thing worth mentioning - Beziers are indeed very versatile, but it has to be said that one of the reasons they’re so popular is because the math is so simple, right? Decomposable into linear steps, integer exponents, with a couple multiplies of only your parameter you can evaluate them with a matrix multiply. They’re trivial to draw. Add in the controllability and intuitiveness and simplicity of computing other properties of the curve (such as finding roots & inflections & bounding boxes, splitting curves, etc.), and it makes sense they’re very popular. Hyperbeziers look interesting, and I don’t have intuition on their uses yet, but I assume their rendering involves heavier math than Beziers - since the curvature & angle equations have a divide & square root? Can they be split or subdivided easily?
You’ve been in search of a better curve for a long time. I’m wondering how you think about and where you stand on subdividing curves like Bezier vs finding a more perfect interpolation. Obviously there are tradeoffs, but are you aiming at problems that can’t be solved in practice using subdivision/approximation? I’d also be curious to hear your thoughts on hyperbeziers vs NURBS.
Geometric topology makes my brain itch. I refuse to engage with it, I am certain it would drive me mad.
I do agree though, those elastica (elasticas? elastici??) are fine as hell
Hindsight is really something. Of course we usually write the denominator as |x'|^3 but once you see it, it makes sense.
Spiro curves were supposed to solve it but I am surprised to read here that even spiro fails to approximate elastica. Have you mapped where the limitations are?
For information, I am drawing boat hulls, and elastica would model the natural bend of wood/plywood/metal much better than bezier... Amateur naval designers really lack good tools to bridge the gap between ideal hydrodynamic forms and ease of construction, and there are still a lot of tiny but annoying adjustments when one planks the first hull.
Wasn’t your PhD thesis on attack-resistant trust metrics? At least I remember reading it.
It is made of two pieces: the base and the hook support. If you look at it from certain angles, you can perceive continuity between the curves of these two parts, because of the way the bezier curves project. I feel that this gives it elegance even when viewed from other angles.