超贝塞尔曲线的数学之美
The mathematical beauty of hyperbezier curves

原始链接: https://linebender.org/blog/hyperbezier/

Raph Levien 介绍了“超贝塞尔曲线”(hyperbezier),这是一种旨在取代二维矢量设计中三次贝塞尔曲线的新型曲线族。尽管三次贝塞尔曲线用途广泛,但它们缺乏像欧拉螺旋线那样的平滑曲率变化。Levien 提出了一种由切萨罗方程(以弧长为自变量的曲率函数)定义的曲线,它在平滑曲率与处理高张力峰值之间实现了更优的平衡。 超贝塞尔曲线在交互式编辑中的表现与三次贝塞尔曲线相似,但在后者难以胜任的领域表现出色,例如拟合双曲线、逼近圆弧以及表示尖锐的超椭圆。从数学上讲,该曲线族包含了欧拉螺旋线和对数审美曲线,且其弧长参数化避免了标准参数曲线所涉及的复杂反问题。 虽然目前这还只是一个数学提案,但 Levien 计划将超贝塞尔曲线开发为实用工具,这可能实现比三次贝塞尔曲线更易于拟合和优化的 G2 连续样条曲线。通过弥合物理“弹性”曲线与计算机辅助设计之间的差距,超贝塞尔曲线为专业矢量图形提供了一种更具潜力且更自然的选择。

Hacker News 最新 | 过往 | 评论 | 提问 | 展示 | 招聘 | 提交 登录 Hyperbezier 曲线的数学之美 (linebender.org) 10 点,由 raphlinus 于 2 小时前发布 | 隐藏 | 过往 | 收藏 | 讨论 | 帮助 指南 | 常见问题 | 列表 | API | 安全 | 法律 | 申请 YC | 联系 搜索:
相关文章

原文

Raph Levien, August 8, 2026

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:

$$\kappa(s) = \frac{as+b}{(cs^2+ds+1)^{1.5}}$$

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.

Approximation of cubic Béziers

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.

Exact analytical curves

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.

There a few other log-aesthetic curves lurking in the parameter space, meaning curvature is simply the arclength raised to a particular power. Reachable exponents include -3, -2, -1.5, and -0.5 (alternatively, using the convention from the log-aesthetic papers, α can be 1/3, 1/2, 2/3, and 2). The last of these is the circle involute, which is interesting because it is its own parallel curve, among other things. And the first of these is the evolute of the Euler spiral.

The parameter mapping described above is designed so that when the control points lie on the "double parabola" in my Euler spiral parallel curve blog post, then the result is an exact Euler spiral.

Superellipses and squircles

A cubic Bézier can do superellipses up to a certain point, but does not approach a sharp corner; somewhere before then it starts developing additional inflection points, while a true superellipse or squircle is of course convex.

The hyperbezier can go all the way to a sharp corner, and visually looks pretty close to the superellipse. It's not incredibly accurate (for moderate exponents like 5, the best cubic Bézier fit is slightly better, in fact), but visually does the right thing. It's probably best to say that the hyperbezier is a subtly different squircle than the superellipse, neither better nor worse.

Hyperbola

Another fundamental curve is the hyperbola. It is round at the turn, but curvature tails off and the curve reaches a linear asymptote on both sides. Cubic Béziers do not fit this curve well, and do not exhibit that asymptotic behavior. But the hyperbezier fits it naturally and with very high accuracy.

We can also appreciate the relationship mathematically. In both, the curvature tails off as $\kappa \approx s^{-3}$ asymptotically. In addition, using the small angle approximation $\sin \theta \approx \theta, \cos \theta \approx 1$, integrating the Whewell equation (see below) of the even-symmetric hyperbezier yields the hyperbola exactly. This close relationship is one of the inspirations of the name; it is something of a fusion between a hyperbola and a Bézier. Another inspiration, incidentally, is that the log-aesthetic solutions, including the Euler spiral, are represented by hypergeometric functions.

Elastica

An important curve family to consider is the elastica, an idealized thin flexible strip. The math behind the elastica has hundreds of years of history, but more to the point it is both a smooth curve (it can be characterized as the exact solution to the Minimum Energy Curve problem) and can exhibit large curvature variation when placed under tension. To my eyes, it's a more pleasing and natural curve, as it's based in physical reality in a way that cubic Béziers aren't. Ideally we'd be able to approximate it well, and the fact that Spiro curves can't is a strong case against them. Fortunately, our hyperbezier does reasonably well. As in the case of the superellipse, it's a fairly decent visual match, though again not a precise approximation.

Some mathematical properties

This section is a grab-bag of some mathematical properties of the hyperbezier curve.

An appealing property is that the Cesàro equation is easily integrated, yielding a Whewell equation:

$$\theta(s) = \frac{a's+b'}{\sqrt{(cs^2+ds+1)}}$$

Here, the parameters in the numerator aren't the same as the Cesàro equation (though they are readily derived), but the quadratic polynomial in the denominator is the same. Another round of integration (which I believe will be especially useful for curve fitting) also yields simple analytical equations, revealing that a close relation to trig functions.

The derivation of parameters for the Whewell equation follows fairly straightforwardly from the following integral, which has a pleasing symmetry:

$$\int \frac{as+b}{(cs^2 + 1)^{1.5}} ds = \frac{bs-a/c}{\sqrt{cs^2 + 1}} + C$$

Going in the opposite direction, the derivative is also straightforward, yielding a quadratic over the same polynomial in the denominator, this time with an exponent of 2.5. To compute roots, identifying the curvature extrema, involves merely solving the quadratic.

Because the denominator is positive, there is at most one inflection point, at $s = -b/a$, when it is in range [0, 1]. That clearly signals that it can't accurately approximate all cubic Béziers, as those can have two inflection points. In my experience, instances of cubic Béziers with two inflection points are rarely used in designs (it might be interesting to look at a corpus of vector graphics to quantify this).

I have experimented with other values for the exponent than 1.5. A value of 1 would be appealingly simple, as it would resemble Padé approximation, but I found it cannot represent high-tension curves in a numerically stable way. I also considered an exponent of 2, but the integrals don't come out as cleanly and overall it didn't match cubic Béziers as closely. Perhaps this is not surprising, as the exponent of 1.5 resembles the equation for curvature of a parametric curve $\mathbf{x}(t)$:

$$\kappa = \frac{\mathbf{x}' \times \mathbf{x}''}{(\mathbf{x}' \cdot \mathbf{x}')^{1.5}}$$

In general, arc length parametrized curves are in many ways more pleasant to work with than general parametric curves; there's a nontrivial calculation to solve the inverse arc problem for Béziers.

Future work

In this post, I present the curve family to the world. I welcome and encourage experimentation. Of course, there is lots to be done to make the mathematical idea into a practical tool. For one, it should be wired up into a spline. I expect to follow the ideas in The hyperbezier pen tool by Colin Rofls, which was based on an earlier draft of the hyperbezier math. This earlier draft had some of the desired behavior of the current proposal, but also some flaws, including not being able to approximate sharp superellipses, and also not being closed under subdivision. On the other hand, it had a straightforward solution to the problem of mapping Bézier-like control points to the parameters.

One idea from the above spline that I think is worth preserving is making splines G2 continuous by construction. Such approaches don't work well with cubic Béziers because there are multiple local minima, creating saddle points in the optimization terrain.

Another promising direction is working out curve fitting. While I haven't gotten deep into it yet, I expect curve fitting to be fairly straightforward, especially compared with cubic Béziers. I'm especially interested in fitting touch or pen data. As usual for this problem, a central part of the challenge is finding good subdivision points.

I hope to land better implementations in the spline repository, but make no guarantees how fast that will go.

Acknowledgements

I've been working on this for years, and have benefited from discussions with many people, including Colin Rofls, Alex Ionuț, Jacob Rus, and Trevor David Black (apologies if I've missed someone; just let me know). Special credit goes to Muhammad Ragib Hasin, who improved many of the numerical and solving techniques for parameter mapping. AI assistance was used to refine the current version of parameter mapping and to prepare the visuals for this post.

联系我们 contact @ memedata.com