8 ms·

Drawing better-looking Bézier curves

257 points by dhotson 9y ago

Kiro 9y ago
Are the sliders working for you?
- ghusbands 9y ago
  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 9y ago
    Yeah, that's definitely it. Thank you! Very interesting.
bagospanners 9y ago
For more tasty Bézier fun: https://pomax.github.io/bezierinfo/ https://pomax.github.io/bezierinfo/
speps 9y ago
Spiro Curves are a nice alternative: http://www.levien.com/spiro/ http://www.levien.com/spiro/
- jacobolus 9y ago
  Raph Levien's thesis is great, http://www.levien.com/phd/phd.html http://www.levien.com/phd/phd.html
  - smnscu 9y ago
    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
- wiso 9y ago
  I have made demo drawing app using libspiro https://www.youtube.com/watch?v=wZK9MPR_UeE https://www.youtube.com/watch?v=wZK9MPR_UeE very cool library.
pasta 9y ago
Maybe the side is down? Only white content on mobile.
- ldjb 9y ago
  It seems the page is loaded dynamically, which may cause issues. There are some interactive widgets, but if you can forgo those, here is a screenshot of that page: https://screenshots.firefox.com/CoUJDgqyX5NtfC6v/beta.observablehq.com https://screenshots.firefox.com/CoUJDgqyX5NtfC6v/beta.observ...
- jashkenas 9y ago
  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 9y ago
    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 9y ago
      Ah, this could be the case. I block external fonts but never had a problem because of this.
virtualritz 9y ago
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 9y ago
  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.
dhotson 9y ago
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
- agumonkey 9y ago
  Great work. How hard was it to integrate it as an Illustrator plugin ?
  - dhotson 9y ago
    Thanks! Actually it wasn't too difficult. It's all in C++ but the Adobe Illustrator SDK came with some examples that were pretty close to what I wanted already. Once I'd figured out the maths I had a prototype working in about a day. The one thing left that I can't figure out is how to have the curvature comb update live as you drag the Bezier control points. Currently it only updates when you mouse up.
    - amelius 9y ago
      Does it run on multiple platforms, or only OSX?
      - dhotson 9y ago
        It should run fine on Windows as well, but I haven't had a chance to test.
- deleted 9y ago
  [deleted]
- berendk 9y ago
  Nice Article! May I ask how you made the notebook interactive? Is this based on a jupyter notebook?
  - 9y ago
amelius 9y ago
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.
- Tomte 9y ago
  Isn't that the MetaFont model that Knuth used?
- dhotson 9y ago
  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/images/GUID-7843C231-CA5F-4E4F-A1D6-8CAE29BDE03B.png http://help.autodesk.com/cloudhelp/2017/ENU/Alias-Tutorials/... .. or in 2d: http://help.autodesk.com/cloudhelp/2017/ENU/Alias-Tutorials/images/GUID-6F0F3D4F-31A0-4D92-AD1F-836B6BCB5DC6.png http://help.autodesk.com/cloudhelp/2017/ENU/Alias-Tutorials/... 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/images/GUID-A46C1946-0928-4669-B6B5-77B6AED39200.png http://help.autodesk.com/cloudhelp/2017/ENU/Alias-Tutorials/...
  - perl4ever 9y ago
    I wonder whether for curvy automobile sheet metal these days they sculpt and then digitize or start out directly creating virtual shapes.
  - deleted 9y ago
    [deleted]
ttd 9y ago
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/
- paulddraper 9y ago
  An amazing guide that does not disappoint in either accessibility or depth.
- laythea 9y ago
  Awesome link. Thanks.
- aidos 9y ago
  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/
jordigh 9y ago
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.1.44.5770.pdf http://wiki.povray.org/uploaded/5/5e/LeForgeronXSplines-10.1... 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.
Cenk 9y ago
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.
ghusbands 9y ago
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.
egypturnash 9y ago
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 9y ago
  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 9y ago
    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.)
joehan 9y ago
Neat! Can someone tell me why the notebook style presentation like this is gaining popularity? (e.g., jupyter notebook)
mark-r 9y ago
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.

257 points by dhotson 9y ago

Kiro 9y ago

Are the sliders working for you?

ghusbands 9y ago
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 9y ago
  Yeah, that's definitely it. Thank you! Very interesting.

bagospanners 9y ago

For more tasty Bézier fun: https://pomax.github.io/bezierinfo/ https://pomax.github.io/bezierinfo/

speps 9y ago

Spiro Curves are a nice alternative: http://www.levien.com/spiro/ http://www.levien.com/spiro/

jacobolus 9y ago
Raph Levien's thesis is great, http://www.levien.com/phd/phd.html http://www.levien.com/phd/phd.html
- smnscu 9y ago
  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
wiso 9y ago
I have made demo drawing app using libspiro https://www.youtube.com/watch?v=wZK9MPR_UeE https://www.youtube.com/watch?v=wZK9MPR_UeE very cool library.

pasta 9y ago

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

ldjb 9y ago
It seems the page is loaded dynamically, which may cause issues. There are some interactive widgets, but if you can forgo those, here is a screenshot of that page: https://screenshots.firefox.com/CoUJDgqyX5NtfC6v/beta.observablehq.com https://screenshots.firefox.com/CoUJDgqyX5NtfC6v/beta.observ...
jashkenas 9y ago
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 9y ago
  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 9y ago
    Ah, this could be the case. I block external fonts but never had a problem because of this.

virtualritz 9y ago

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 9y ago
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.

dhotson 9y ago

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

agumonkey 9y ago
Great work. How hard was it to integrate it as an Illustrator plugin ?
- dhotson 9y ago
  Thanks! Actually it wasn't too difficult. It's all in C++ but the Adobe Illustrator SDK came with some examples that were pretty close to what I wanted already. Once I'd figured out the maths I had a prototype working in about a day. The one thing left that I can't figure out is how to have the curvature comb update live as you drag the Bezier control points. Currently it only updates when you mouse up.
  - amelius 9y ago
    Does it run on multiple platforms, or only OSX?
    - dhotson 9y ago
      It should run fine on Windows as well, but I haven't had a chance to test.
deleted 9y ago
[deleted]
berendk 9y ago
Nice Article! May I ask how you made the notebook interactive? Is this based on a jupyter notebook?
- 9y ago

amelius 9y ago

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.

Tomte 9y ago
Isn't that the MetaFont model that Knuth used?
dhotson 9y ago
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/images/GUID-7843C231-CA5F-4E4F-A1D6-8CAE29BDE03B.png http://help.autodesk.com/cloudhelp/2017/ENU/Alias-Tutorials/... .. or in 2d: http://help.autodesk.com/cloudhelp/2017/ENU/Alias-Tutorials/images/GUID-6F0F3D4F-31A0-4D92-AD1F-836B6BCB5DC6.png http://help.autodesk.com/cloudhelp/2017/ENU/Alias-Tutorials/... 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/images/GUID-A46C1946-0928-4669-B6B5-77B6AED39200.png http://help.autodesk.com/cloudhelp/2017/ENU/Alias-Tutorials/...
- perl4ever 9y ago
  I wonder whether for curvy automobile sheet metal these days they sculpt and then digitize or start out directly creating virtual shapes.
- deleted 9y ago
  [deleted]

ttd 9y ago

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/

paulddraper 9y ago
An amazing guide that does not disappoint in either accessibility or depth.
laythea 9y ago
Awesome link. Thanks.
aidos 9y ago
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/

jordigh 9y ago

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.1.44.5770.pdf http://wiki.povray.org/uploaded/5/5e/LeForgeronXSplines-10.1... 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.

Cenk 9y ago

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.

ghusbands 9y ago

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.

egypturnash 9y ago

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 9y ago
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 9y ago
  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.)

joehan 9y ago

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

mark-r 9y ago

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.