A Primer on Bézier Curves (2013)
pomax.github.io
pomax.github.io
It does a nice work of explaining how a circle is drawn, but its explanation of how x and y are calculated for a Bézier curve doesn't make sense to me: "Bézier curves use the "binomial polynomial" for both x and y." If the same function on "t" is used for both x and y, they would always have the same value, and the "curve" is always a diagonal with 45 degrees. What am I missing? I can't infer it from the tutorial.
Also, it introduces the idea of a "control point" and starts using it, but never manages to define what it is, or how it is represented in the equation or graphically. It merely labels some curves as "P1", "P2"... in the graphs and telss that these somehow change the shape of the curves, and tells us that they have an associated linear "wi" weight; but again, the way in which the (x1, y1) pairs are connected to the binomial and polynomial term is never spelled out, and left as an exercise to the reader.
Things are further complicated by the mysterious "strength" parameter "S" in the graphs, which is also unexplained, never used again, and appears right when we're trying to understand the difficult concept of a control point to further confuse things. I had followed the tutorial quite well up to that point, but that section lost me completely.
So for the simplest example, a linear Bézier curve, the curve is a straight line from the first control point to the second.
https://github.com/dclowd9901/impactjsBezier
This is one of the sites that contributed to that work. So strange to see it appear out of context here.
Ideally I would prefer to have an option to draw paths with either quadratic or cubic Bezier segments, but edit paths normalised to cubic Bezier segments.
Of course, I say "complex" but and those aren't actually all that complex at all: you'll already need two quadratic curves just for a quarter circle (and by extension any quarter ellipse), for instance. While it sounds appealing, once you can actually draw quadratic curves you end up needing so many of them that refining your shapes (which takes up the majority of time for curve work if you're playing human data processor) becomes an incredibly hard job.
The most obvious example of a common technology that uses quadratics is OpenType fonts with TrueType outlines, which only uses straight lines and quadratic Bezier curves, although most tools I know of will give you cubics there, too, and simply save to a correct quadratic representation upon export/font generation.
Outside of those, you can use visual programming languages like Processing for your own purposes if you absolutely need them.
Another advantage of quadratic curves is that they can be converted to a parabolic function plus a rotation. That opens the door for all sorts of optimization that is much harder with cubic bezier curves, which are not guaranteed to be functions.
Most properties for the cubic curve as a whole come from evaluating each dimension independently, which still allows for a fair number of optimizations, and we can classify cubics in a few canonical forms that let us do even more optimizations ("a geometric characterization of parametric cubic curves" by Stone and DeRose is a good read on that)
So a cautionary note: finding the angle necessary to turn a quadratic curve into a parabola (for unbalanced curves) can cost as much as using an optimized canonical cubic, where the user's input only defines the linear transform that you throw at the graphics context to make sure the curve you then draw matches the curve the user expected.
Renault & Citroen feels like they were design powerhouses in this context, with numerical industrial design.
The curves were like compressed specifications, instead of being "make it look like this" with a sculpted model. That said, cars from the same era built by aerodynamics engineers also resulted in beautiful curves (like a Jaguar E Type).
I used them extensively for a computer program that cut sails for sailing vessels, the problems are roughly similar (only you can't really deform cloth all that much so you're going to end up cutting panels, the end result looks much the same as a 2 dimensionally deformed sheet of metal though).
How people designed curved surface thanks to material tension and knots.
I'm always a little geeked-out by unification like this. :D
Love this post btw -- extremely impressive / educational.