Hyperbezier curves: a new family that could replace cubic Béziers
The mathematical beauty of hyperbezier curves
Raph Levien, creator of Spiro curves, proposes a new curve family for 2D vector graphics that he believes can surpass cubic Béziers. The hyperbezier, defined by a Cesàro equation, offers smoother curvature variation, contains exact Euler spirals and circular arcs, and handles sharp corners and hyperbolas with ease. It approximates cubic Béziers well at low angles and shows promise for interactive design, though it can't represent curves with two inflection points. Levien shares the math, interactive demos, and future plans for spline integration and curve fitting.
The great strength of Béziers is their versatility.
- momojo
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.
- Arodex
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.
- dahart
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 par […]
- krtkush
Related: Last year I had the pleasure to work with Bezier curves to make a very specific UI for an app I was working on.
I 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...
- joshmarinacci
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?