
Drawing better-looking Bézier curves - dhotson
https://beta.observablehq.com/@dhotson/drawing-better-looking-curves
======
dhotson
Hello :) I'm the author of this notebook if you have any questions.

I'm also currently working on a plugin for Adobe Illustrator based on this.
Screenshot:
[https://i.imgur.com/tIPTjLsr.png](https://i.imgur.com/tIPTjLsr.png)

~~~
berendk
Nice Article!

May I ask how you made the notebook interactive? Is this based on a jupyter
notebook?

~~~
ericrav
It's a new project from Mike Bostock and others that was on the front page a
couple weeks ago:
[https://news.ycombinator.com/item?id=16274686](https://news.ycombinator.com/item?id=16274686)

------
ttd
If you're looking for more in-depth information on Bezier curves, I've found
this document invaluable on more than one occasion, both for math and
implementation suggestions:
[https://pomax.github.io/bezierinfo/](https://pomax.github.io/bezierinfo/)

~~~
aidos
I've found this animated page to be the most useful in terms of understanding
how they work at a glance:

[https://www.jasondavies.com/animated-
bezier/](https://www.jasondavies.com/animated-bezier/)

------
mark-r
One trick I learned from a graphics editor: if you have two Bezier segments
and want to make a smooth transition between them, put the two control points
on either side of the center equidistant from the center and on a straight
line. The curve will be tangent to that straight line at the center point, and
will have the same curvature where they meet.

------
amelius
I'm wondering how well one could define curves by using the physical model of
a strip of material, and allowing one to change the properties (stiffness) of
the material at different points along the curve, or to insert more material
at a given point. Of course, there should be the usual constraints that the
strip should pass through a bunch of given (x,y) coordinates, and there could
be constraint that "pins" the strip to a given (x,y) coordinate.

In a drawing program, the stiffness could be depicted by using grayscale
values.

~~~
dhotson
It's really interesting if you look at how CAD handles this stuff. It lets you
set the degree of curvature-continuity/smoothness you want—and it kind of
takes care of filling in the curve for you. You have to give up some direct
control over the curve if you need it to meet these constraints.

Here's what different degrees of curvature continuity look like:
[http://help.autodesk.com/cloudhelp/2017/ENU/Alias-
Tutorials/...](http://help.autodesk.com/cloudhelp/2017/ENU/Alias-
Tutorials/images/GUID-7843C231-CA5F-4E4F-A1D6-8CAE29BDE03B.png)

.. or in 2d: [http://help.autodesk.com/cloudhelp/2017/ENU/Alias-
Tutorials/...](http://help.autodesk.com/cloudhelp/2017/ENU/Alias-
Tutorials/images/GUID-6F0F3D4F-31A0-4D92-AD1F-836B6BCB5DC6.png)

To make smooth surfaces you just need the tangents to line up. This is called
G1.

But if you also want surface reflections to look smooth you need a higher
degree of curvature continuity. G2 or higher.

[http://help.autodesk.com/cloudhelp/2017/ENU/Alias-
Tutorials/...](http://help.autodesk.com/cloudhelp/2017/ENU/Alias-
Tutorials/images/GUID-A46C1946-0928-4669-B6B5-77B6AED39200.png)

~~~
perl4ever
I wonder whether for curvy automobile sheet metal these days they sculpt and
then digitize or start out directly creating virtual shapes.

------
speps
Spiro Curves are a nice alternative:
[http://www.levien.com/spiro/](http://www.levien.com/spiro/)

~~~
jacobolus
Raph Levien's thesis is great,
[http://www.levien.com/phd/phd.html](http://www.levien.com/phd/phd.html)

~~~
smnscu
I just realised this is the guy behind xi-editor and the Inconsolata font. My
mind is blown.
[https://en.wikipedia.org/wiki/Raph_Levien](https://en.wikipedia.org/wiki/Raph_Levien)

------
ghusbands
Note for Chrome users: If you've enabled Strict Site Isolation in your
chrome://flags (as mitigation for Spectre), it makes all of the sliders in
these observablehq notebooks not work.

------
jordigh
xfig has x-splines (cross splines), and I've always wondered why they never
got more popular elsewhere. Basically, they have an extra parameter at each
endpoint that allows you to smoothly pick between approximation, smooth
interpolation, or sharp interpolation, as odd as that may sound:

[http://wiki.povray.org/uploaded/5/5e/LeForgeronXSplines-10.1...](http://wiki.povray.org/uploaded/5/5e/LeForgeronXSplines-10.1.1.44.5770.pdf)

Confusingly, there seem to be other splines called "X-splines" that appear to
be completely unrelated, where the X seems to refer to the varying degree of
the spline instead of just cubic.

------
egypturnash
So for what it’s worth here’s the three rules of thumb I’ve followed for about
fifteen years in Illustrator:

1\. Pull curve handles out to about 1/3 of the curve segment they control. 2\.
Don’t turn more than 90° between two control points. 3\. Avoid S-curves
between two control points.

Following these generally results in nice-looking curves that are easy to edit

A lot of “designers” these days like to present a rule of “only put your
control points at 0/90/180/270° and keep your curve handles axis aligned”,
which makes _some_ degree of sense in the arena of making fonts, but results
in incredibly hard to manage curves as you get further away from circles.

~~~
hbosch
One great way to handle editing of complex shapes that use 90° extrema is to
lean into Tunni lines[0] as a manipulation tool. Unfortunately these aren't
present in Illustrator either, as far as I know, and is yet another reason why
Illustrator's dominance as a bezier drawing software is less than warranted.
Most font design software is better for drawing almost anything in bezier.

0\. [http://help.fontlab.com/fontlab-vi/Tunni-
Lines/](http://help.fontlab.com/fontlab-vi/Tunni-Lines/)

~~~
egypturnash
I’m gonna have to disagree with your last sentence. I’m pretty sure there
isn’t any font design software out there that would let me draw an entire
full-color comic page. (Which I mostly do with AI’s pencil tool - but when I
need to get my hands dirty with the raw paths, I use the rules of thumbs
mentioned above.)

------
Cenk
I found Yanone’s SpeedPunk
([https://yanone.de/software/speedpunk/](https://yanone.de/software/speedpunk/))
super useful in doing this kind of curvature work while designing typefaces.

------
pasta
Maybe the side is down? Only white content on mobile.

~~~
jashkenas
The site is up, but is brand new and still in beta — what mobile OS/Browser
combo are you using? We'd love to try and debug your white screen...

~~~
a_e_k
Not the parent poster, but I use NoScript on desktop Firefox. Beyond
whitelisting observablehq.com and observableusercontent.com I found that the
content was completely missing until I also unblocked objects from
fonts.gstatic.com. Could be a clue.

~~~
pasta
Ah, this could be the case. I block external fonts but never had a problem
because of this.

------
virtualritz
I thought this article would explain how to do curvature based tessellation of
higher order curves.

That way you can draw better looking curves when approximating them with (a
limited number) of (straight) segments.

~~~
jacobolus
You're using 'tessellation' in a weird way. Anyway, if you want to calculate
optimal knot positions to approximate a curve using some fixed number of
straight (or polynomial) spline segments, there are a bunch of papers about
that, or I think there's a relevant chapter in De Boor's book.

------
bagospanners
For more tasty Bézier fun:
[https://pomax.github.io/bezierinfo/](https://pomax.github.io/bezierinfo/)

------
Kiro
Are the sliders working for you?

~~~
ghusbands
If you've enabled Strict Site Isolation in your Chrome flags (as mitigation
for Spectre), it makes all of these observablehq notebook sliders not work.
That's probably what's affecting you.

~~~
Kiro
Yeah, that's definitely it. Thank you! Very interesting.

------
joehan
Neat! Can someone tell me why the notebook style presentation like this is
gaining popularity? (e.g., jupyter notebook)

