// HACKER NEWS — CYBERSECURITY
The mathematical beauty of hyperbezier curves
I have for many decades been fascinated by the prospect of a curve family better suited for interactive design than cubic Béziers.
In that search, I have come to a new-found respect for those Béziers.
In particular, though other curves like Euler spirals are better at representing smooth curves, they fall short at representing regions large curvature variation, where cubic Béziers excel.
The great strength of Béziers is their versatility.
So, to find a strictly better curve family, one requirement is clear: the family should contain both smooth curvature variation and higher-tension regions where curvature peaks.
Polynomial spirals, or Spiro curves, the subject of my PhD thesis, fail to achieve this goal.
After considerable search and rejecting a number of candidates, I now bring a proposal for a curve family which I think is a very strong candidate for supplanting cubic Béziers in 2D vector graphic design.
Without further ado, the curve family is represented by the Cesàro equation, specifying curvature as a function of arc length:
This curve behaves surprisingly similarly to a cubic Bézier, especially at smaller angles, but when pushed has very different behavior.
Overall it has smoother curvature variation and is more likely to have monotonic curvature.
It contains within it a few valuable analytic curves, and is also good at approximating a wide range of others.
The remainder of this blog post is devoted to showing its behavior in a wide range of contexts.
The hyperbezier closely approximates cubic Béziers at low deflection angles at the endpoints.
I will show rather than try to present mathematic reasoning.
Below is an interactive tester that maps cubic Bézier control points to a corresponding hyperbezier.
The Bézier is shown in gray for comparison.
At larger angles, and also when the "arm lengths" of the control handles get larger, the fit with the cubic Bézier is not particularly close, but the control scheme is still a useful way of setting the parameters for the hyperbezier curve (setting the polynomial coefficients directly is not at all intuitive).
Note that this parameter mapping is a first usable draft, and may not be the final version.
That said, in an interactive editing context, a perfect mapping is not required, as it's always possible to tweak the control points to reach any desired curve shape.
The details of the mapping can be found in the JavaScript source for this page, but the basic principle is that the arm lengths set the denominator, then the numerator is solved to make the endpoint tangents match.
The most obvious analytical curve contained in the family is the Euler spiral, which is clearly attained when $c == d == 0$.
The Euler spiral has smooth curvature variation (it is a solution to the Minimum Variation Curve problem) and monotonic curvature.
An exact circular arc is also within the parameter space, simply when $a == 0$ as well.
Cubic Béziers, by comparison, only approximate circular arcs.