12 ms·

New Bézier curves for vector graphics

181 points by ad8e 3y ago

javajosh 3y ago
beautifully made. However I think one's intuition for where the control points go and what they do are very clear if you've ever taken calculus. The line segments control the direction and magnitude of the tangent to the curve at that position. If you understand that, then it makes the motivating problem go away, and all the challenge problems are easy to solve.
- pavlov 3y ago
  Interactive curves are primarily meant to be used by designers. They are a tool. When the tool is not intuitive, it’s not really a solution to say “designers should just take calculus and it makes the problem go away.”
- ad8e 3y ago
  It's not as easy to visualize the tangent magnitude as you are suggesting, because the time parametrization makes the calculation fail - the curve doesn't travel forward at a constant rate. This is best seen with the second example: If the left handle is fully extended and the right handle is 0, the Bézier curve looks almost exactly the same as when the handles are reversed. Here's a picture: https://i.imgur.com/WkanN1G.png https://i.imgur.com/WkanN1G.png The handle varies from 0 to full-strength, but the magnitude of the tangent vector stays constant. This means the handle doesn't decide the magnitude. Tracing the path in your head to visualize the changing tangent vectors would mean visualizing a competition between t^2, (1-t)^2t, and (1-t)^3, which I find difficult, even with some calculus knowledge.
- deleted 3y ago
  [deleted]
- unconed 3y ago
  This isn't true, and is obvious when you try to split a bezier without distorting its shape. As a bezier is just repeated interpolations, the tangents and their lengths can be derived from the intermediate interpolations [1]. This means that if you split a bezier near an existing control point, the new point will have wildly unbalanced tangents on both sides, and yet, connect into the exact same cubic curve. So both your intuition and your confidence in it are... wrong. [1] https://i.stack.imgur.com/I9wKC.png https://i.stack.imgur.com/I9wKC.png
delta_p_delta_x 3y ago
> Béziers can't represent circles. If you try to approximate one by hand, it'll look lopsided. Many graphics algorithms (vector operations: scale, translate, rotate; raster operations like rasterisation and interpolation) specialise for straight lines (and hence also triangles), Bézier curves, circles, etc separately, rather than forcing everything to be a Bézier curve.
- slimsag 3y ago
  "Béziers can't represent circles" is not exactly wrong, but is not really the full picture. Often you don't need to _represent_ a circle. TrueType fonts (quadratics) and OpenType fonts (cubics) can't mathmatically _represent_ a circle, either, but does that mean no font has circles in it? Sometimes an approximation is pretty damn good. Also conics (rational quadratic Beziers), which Microsoft has a surprisingly good article on[0], can represent circles. [0] https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/graphics/skiasharp/curves/beziers https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user...
  - cormullion 3y ago
    Fortunately fonts usually don't contain perfect circles anyway, because the designer will optically correct any circles so that they don't appear to bulge. Kabel is the closest font I found with circular formas; LineTo's Circular is also quite close but slightly taller than wider.
    - mkl 3y ago
      Fonts are supposed to contain perfect circles; try searching for "circle" in a Unicode character map. They only don't in practice because quadratic and cubic Bezier splines can't do them.
      - TheRealPomax 3y ago
        And they don't have to. The approximation of a circle with a bunch of cubic curves is so accurate [1] that you'd need to print a huge circle and then sit there with a measuring tape to be able to even tell it's not a perfect circle. Which is why "you can't draw a circle with Bezier curves" is only a mathematical "problem", it's not an actual problem. [1] https://pomax.github.io/bezierinfo/#circles_cubic https://pomax.github.io/bezierinfo/#circles_cubic
bobajeff 3y ago
The guy from the mach engine has also talked about issues dealing with Bézier curves and came up with a interesting set a primitives: Triangles, quadratic curves and semi-circles. Mostly this is make it easier to do vector graphics on a gpu, which is why I'm interested in it, but I think it might be easier to understand.
Nycto 3y ago
Obligatory links for anyone that is interested in learning more about Bézier curves: https://pomax.github.io/bezierinfo/ https://pomax.github.io/bezierinfo/ https://pomax.github.io/bezierjs/ https://pomax.github.io/bezierjs/ https://github.com/Pomax/bezierjs https://github.com/Pomax/bezierjs
- AlphaCerium 3y ago
  Might I also add: https://youtu.be/aVwxzDHniEw?feature=shared https://youtu.be/aVwxzDHniEw?feature=shared Which works through them from first principles with beautiful animations.
  - atan2 3y ago
    I personally really like this video, but it's interesting how when I showed it to a group of CS undergrad students, they all loved the animations but performed poorly on a post-video quiz about the topic. I knew the content already, but I wonder if this video is really as educational as it appears to be.
    - bombdailer 3y ago
      Her other video on the subject https://www.youtube.com/watch?v=jvPPXbo87ds&t https://www.youtube.com/watch?v=jvPPXbo87ds&t is far more interesting and informative imo.
- anon____ 3y ago
  These, too: https://ciechanow.ski/drawing-bezier-curves/ https://ciechanow.ski/drawing-bezier-curves/ https://ciechanow.ski/curves-and-surfaces/ https://ciechanow.ski/curves-and-surfaces/
CrimsonCape 3y ago
Do you have any publicly available code on github?
- ad8e 3y ago
  The source code is visible with Ctrl+U, I didn't minimize anything. The g9 use is pretty neat. It definitely deserves the shout-out I gave it. I just now uploaded a worse C++ desktop version with saving and loading: https://github.com/ad8e/local-curves https://github.com/ad8e/local-curves This desktop version is 5 years old. I think the web version is better. This github repo is only interesting if you want to copy code from it; it's not practical as a drawing tool.
  - CrimsonCape 3y ago
    Ok thanks. I will possibly try to port to SkiaSharp in the future to learn how your code works.
slimsag 3y ago
Cool to see others working on this problem. I hope more people do. Funnily I've seen a lot of programmers and math folks who express how truly, genuinely beautiful Beziers and the math behind them are. But I've never met an artist or graphic designer who didn't express some deep frustration at Bezier controls and how hard they are to work with. There are even games[0] which make a mockery out of how hard Bezier controls are to use, where the game is purely using the controls. Controls are just one side of the problem, in my view; the other side is that cubics are terrible for GPUs, they don't understand them - and I believe many of the best 2D graphics libraries today are not even fully GPU accelerated, e.g. Skia. There are folks working on compute shader-based approaches, where we try to shoe-horn this CPU-focused algorithm into GPUs and pray - but it still isn't really suitable. The controls suck for artists, and the math sucks for GPUs. This is only true of cubics, if you restrict yourself to quadratics (although that brings other challenges), both the control issue goes away (you can just click+drag the curve!) and the performance issue goes away (quadratics are triangles, GPUs love them) That's the summary of the talk[1] I gave at SYCL'22. In that talk, I didn't have time to present the downsides of my solution (which are real!) so if you watch it please keep that in mind - the talk is about the problem statement, not a solution. We are exploring a different solution today than what was presented in that talk. My overall point in there, though, is a solid one: vector graphics as they exist today suck for artists and GPUs alike. The only reason we stick with vector graphics in their current form is because of SVG & compatibility with existing tooling. But isn't it crazy? We have new bitmap image formats all the time, and so few vector graphics formats. In Mach engine[2] we're continuing to explore this space, end-to-end, from author tooling -> format -> rendering. I'm not claiming we have a perfect solution, we don't, but we're at least thinking about this problem. Kudos to the authors of this article for thinking about this space as well. [0] https://bezier.method.ac/ https://bezier.method.ac/ [1] https://www.youtube.com/watch?v=QTybQ-5MlrE https://www.youtube.com/watch?v=QTybQ-5MlrE [2] https://machengine.org https://machengine.org
- pavlov 3y ago
  Postscript used cubic Béziers, but TrueType, specified some ten years later by Apple with the learnings from practical use of Postscript on Macs, opted to only support quadratics instead. Donald E. Knuth seems to think pretty highly of this decision: “The quadratic has the great advantage that there's a real cheap way to render them. You can make hardware to draw a quadratic spline lickety-split. It's all Greek mathematics, the conic sections. You can describe a quadratic spline by a quadratic equation (x, y) so that the value of f(x, y) is positive on one side of the curve and negative on the other side. And then you can just follow along pixel by pixel, and when x changes by one and y changes by one, you can see which way to move to draw the curve in the optimal way. And the mathematics is really simple for a quadratic. The corresponding thing for a cubic is six times as complicated, and it has extra very strange effects in it because cubic curves can have cusps in them that are hidden. They can have places where the function will be plus on both sides of the cubic, instead of plus on one side and minus on the other. “The algorithm that's like the quadratic one, but for cubics, turns out that you can be in something that looks like a very innocuous curve, but mathematically you're passing a singular point. That's sort of like a dividing by zero even though it doesn't look like there's any reason to do so. The bottom line is that the quadratic curves that TrueType uses allow extremely fast hardware implementations, in parallel.” https://lists.nongnu.org/archive/html/freetype-devel/2000-01/msg00052.html https://lists.nongnu.org/archive/html/freetype-devel/2000-01...
dang 3y ago
This is a nice post but not a valid Show HN - please see https://news.ycombinator.com/showhn.html https://news.ycombinator.com/showhn.html. I've taken "Show HN" out of the title now.
butz 3y ago
Just trying to align curves to targets was fun. Someone should build a whole game on this idea.
- slimsag 3y ago
  https://bezier.method.ac/ https://bezier.method.ac/
tantalor 3y ago
[flagged]
jheriko 3y ago
good work. i've always found bezier curves impractical and overrated, using standard polynomial interpolations or more easily understood variants.
raphlinus 3y ago
The goals look quite similar to my hyperbezier explorations. There's an online demo of the first draft[1], and a Zulip thread on some progress toward a second draft[2]. The tl;dr is that I think I have the mathematics of the curve family, but I haven't finished the mapping between control points and the parameters of the curve family. Both drafts have (exact) Euler spirals inside their parameter space, and thus circular arcs as well. I think that's a good criterion for a Bézier successor. It's on the back burner for now, but I hope to get back to it, and am open to collaboration. [1]: https://www.cmyr.net/blog/hyperbezier.html https://www.cmyr.net/blog/hyperbezier.html [2]: https://xi.zulipchat.com/#narrow/stream/260979-kurbo/topic/Hyperbezier.20progress https://xi.zulipchat.com/#narrow/stream/260979-kurbo/topic/H...
egypturnash 3y ago
"I don't know of a reasonable way to guess the right location." 1. Drag curve handles out to 1/3 of the length of the curve segment they control. 2. Eschew s-curves between two control points. 3. Don't turn more than about 90º between two control points. I learnt this about a year into what is now a 23-year career as an Illustrator artist. It has served me well. You will note that the first interactive example on this page is asking you to violate rule 2. "Béziers can't represent circles. If you try to approximate one by hand, it'll look lopsided." If you try to draw a circle by hand, it'll look lopsided too. Any pro traditional artist will have a compass and a few circle templates in their kit. In Illustrator there's an ellipse tool one keypress away. I've been drawing at a pro level for about thirty years and while I can probably pick up a pencil and draw a better circle in a couple quick arm motions than you can in a bunch of little sketchy attempts, they're still nowhere near perfect, and they don't need to be. I also draw about 90% of my paths with the Pencil tool, which just abstracts worrying all of this way. Unless you are doing very geometric work, or require the absolute minimum possible number of points, I feel that using the Pen tool to draw everything is about as sensible as writing a program entirely in assembly language. And if I do need to work under a tight point count constraint, then I will still draw it with the Pencil, then pull out Astute's Smart Point Removal tool, which does a great job of optimizing the heck out of my paths, much better than Adobe's tools for this.
- karaterobot 3y ago
  I think what you've done is mastered an unintuitive (or even counterintuitive) system. That's well and good, but it doesn't mean the system shouldn't be improved. It would make life no worse for you, and better for people with less experience, less time to experiment.
  - cush 3y ago
    I don’t think they’re implying it takes 21 years to learn. I’m inexperienced and learned how to accurately follow paths with bezier curves using the same technique after watching a 10 minute Burt Munroy tutorial.
    - 3y ago
bobbylarrybobby 3y ago
Are Bézier curves with handles “worth it”? I've always found the easiest method for drawing curves to be, simply, “give me the (cubic) spline curve that goes through these points”. You place your points and continuity conditions determine the cubic, as described in https://mathworld.wolfram.com/CubicSpline.html https://mathworld.wolfram.com/CubicSpline.html .
- Kenji 3y ago
  [dead]
- crazygringo 3y ago
  That's exactly what I've always been curious about! It seems vastly more intuitive to place points rather than adjust handles. (And set directions for endpoints if the curve is open.) And obviously a practical tool will provide the capability to join separate cubic splines at sharp angles. Does anyone know of a GUI drawing tool based on this? I've always wanted to experiment with it. Because I've always wanted to either confirm that it's a great idea that we should all be using instead of beziers, or else discover if there's an immediately obvious reason once you try it out that it's a terrible idea.
  - ad8e 3y ago
    I have used this in some commercial software before (maybe Illustrator?); my experience was not positive. When you move a node, some not-so-close curves start wiggling, and you think, "I already set that part correctly, stop moving please". It behaves very poorly around rounded corners. Adding points causes the curves to shift, usually not how you want, and then you try to add more points, which causes more shifts, etc. Arc length-based interpolation might do better in this respect, as opposed to the (# of points)-based interpolation which I expect it used. The alternative, which obeys similar principles, is the Pencil tool. This simply spams out a ton of points to match what you draw. https://news.ycombinator.com/item?id=37460009 https://news.ycombinator.com/item?id=37460009 mentions that these points can be capably reduced, which could serve your purpose.
- dahart 3y ago
TheRealPomax 3y ago
It looks like the conclusion is "let's use rational Bezier curves instead of plain Bezier curves", in which case: you can, you just have more parameters to tweak now. Also calling this "new" is a bit disingenous given that rational Beziers have been around half a century now. They're useful, but if you only look at Bezier curves from the tooling side of things, you're going to miss the reason why we use them so much. And the biggest mistake in design software is having tools that actually let you work with the datatypes that your final product is going to end up using. Need a circle? Draw a circle based on a center point and a radius. Good tooling won't surface that fact that it's going to end up being a Bezier curve, it just lets you design with the primitives you need, and will take care of the conversion as needed when you export it to whatever format your deliverable needs to be. Making people draw Bezier curves just because "the file format uses those" is by far the bigger problem here.
- bsder 3y ago
  This article is really stretching when the conclusion is smacking him in the face: "Use quadratic Beziers." The original article points out that quadratic Beziers have most of the desirable properties with very few of the downsides. It used to be that the issue was that you would have to use significantly more quadratic Beziers to approximate something that a much smaller number of cubic Bezier's could do. This was a big deal when a font file might clog up a floppy disk. Now that we're slinging around gigabyte patch files. Do we really care?
- ad8e 3y ago
  There are a few misunderstandings here. Rational Bézier curves are incidental in this article, and the conclusion is not that they are correct. They were just a convenient curve I used to express the main message of local control, and the article endorses looking for other curves that fit the properties. The parameter count has not gone up; it's equal to or less than usual Bézier control handles, because I forced the parameters to take specific values. The part that is "new" about the Béziers is the new formula that selects one specific Bézier out of all the possible choices. I think this linguistic accusation is silly; for example, if someone discovers a new rock, it would be fair to call it a "new rock" even though rocks have been discovered thousands of years ago. These curves are also unrelated to the file format; the curves are designed to fit how the user thinks about curves rather than be computer-efficient. For the tooling point, I think you are agreeing with me while arguing; I agree that there's no reason the curve should match what is used in the final product, and some of the other curve choices I considered require a complex conversion step.
PaulHoule 3y ago
There are these civilized curves https://en.wikipedia.org/wiki/Non-uniform_rational_B-spline https://en.wikipedia.org/wiki/Non-uniform_rational_B-spline which you never saw because patents kept them off the markets until Beziers were completely entrenched.
IAmGraydon 3y ago
I found the examples extremely easy to align with the target, but I've also been using Adobe Illustrator for over 20 years.
swayvil 3y ago
I like using the "split tweak" method to do my curves. Converts polygons to curves. Works VERY well. Very intuitive, straightforward and ez. It's a variety of bezier. Alg : given polygon P. For each vertex V in P. Get the midpoints of the 2 segs adjacent to V. M0 M1. Add those 2 points to the polygon. Get the midpoint of seg(M0, M1). M2. Move V to the midpoint of (V,M2). Repeat 2 or 3 times or whatever. Each iteration increases smoothness. And here's the code for that https://github.com/johnalexandergreene/Geom_2D/blob/master/CurveSmoother_Closed.java https://github.com/johnalexandergreene/Geom_2D/blob/master/C... There's a version of that for open curves too, elsewhere in that package .
wentin 3y ago
I was really hyped up by the beginning of the article, but it seems really miss the points with the conclusion. I don't think it is easier to manipulate with the last two examples, and I am guessing no actual graphic artist has read this or play with this before you publish it. To think of ways to improve bezier curves for vector graphics, you need to fully contextualize your thinking about the use case; this is not an academic mathematical discussion after all. Based on my understanding, your finding has no mathematical value as Pomax pointed it out, it is not new, it is an old math with a few constraints that is pre-defined, based on your assumption of what graphic artist wanted most of the time, which I agree is a good direction. I strongly suggest for anyone to try to make a better vector graphics tool, try to draw a letter S with the new approach as a test case, you can choose an existing font to match. And know existing vector graphics rules, here is a couple as example: - add anchor points at the horizontal and vertical extrema of your paths - control points should not cross path with one another Curves that doesn't follow these rules are valid, fine mathematical curves, but graphic artists has practices this for years to rule out them as bad for the purpose of graphic design. Again, the goal is to find the more much smaller set of suitable curves from the infinite realm of mathematical possibilities, for the context of graphic design

181 points by ad8e 3y ago

beautifully made. However I think one's intuition for where the control points go and what they do are very clear if you've ever taken calculus. The line segments control the direction and magnitude of the tangent to the curve at that position. If you understand that, then it makes the motivating problem go away, and all the challenge problems are easy to solve.

pavlov 3y ago
Interactive curves are primarily meant to be used by designers. They are a tool. When the tool is not intuitive, it’s not really a solution to say “designers should just take calculus and it makes the problem go away.”
ad8e 3y ago
It's not as easy to visualize the tangent magnitude as you are suggesting, because the time parametrization makes the calculation fail - the curve doesn't travel forward at a constant rate. This is best seen with the second example: If the left handle is fully extended and the right handle is 0, the Bézier curve looks almost exactly the same as when the handles are reversed. Here's a picture: https://i.imgur.com/WkanN1G.png https://i.imgur.com/WkanN1G.png The handle varies from 0 to full-strength, but the magnitude of the tangent vector stays constant. This means the handle doesn't decide the magnitude. Tracing the path in your head to visualize the changing tangent vectors would mean visualizing a competition between t^2, (1-t)^2t, and (1-t)^3, which I find difficult, even with some calculus knowledge.
deleted 3y ago
[deleted]
unconed 3y ago
This isn't true, and is obvious when you try to split a bezier without distorting its shape. As a bezier is just repeated interpolations, the tangents and their lengths can be derived from the intermediate interpolations [1]. This means that if you split a bezier near an existing control point, the new point will have wildly unbalanced tangents on both sides, and yet, connect into the exact same cubic curve. So both your intuition and your confidence in it are... wrong. [1] https://i.stack.imgur.com/I9wKC.png https://i.stack.imgur.com/I9wKC.png

delta_p_delta_x 3y ago

> Béziers can't represent circles. If you try to approximate one by hand, it'll look lopsided. Many graphics algorithms (vector operations: scale, translate, rotate; raster operations like rasterisation and interpolation) specialise for straight lines (and hence also triangles), Bézier curves, circles, etc separately, rather than forcing everything to be a Bézier curve.

slimsag 3y ago
"Béziers can't represent circles" is not exactly wrong, but is not really the full picture. Often you don't need to _represent_ a circle. TrueType fonts (quadratics) and OpenType fonts (cubics) can't mathmatically _represent_ a circle, either, but does that mean no font has circles in it? Sometimes an approximation is pretty damn good. Also conics (rational quadratic Beziers), which Microsoft has a surprisingly good article on[0], can represent circles. [0] https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/graphics/skiasharp/curves/beziers https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user...
- cormullion 3y ago
  Fortunately fonts usually don't contain perfect circles anyway, because the designer will optically correct any circles so that they don't appear to bulge. Kabel is the closest font I found with circular formas; LineTo's Circular is also quite close but slightly taller than wider.
  - mkl 3y ago
    Fonts are supposed to contain perfect circles; try searching for "circle" in a Unicode character map. They only don't in practice because quadratic and cubic Bezier splines can't do them.
    - TheRealPomax 3y ago
      And they don't have to. The approximation of a circle with a bunch of cubic curves is so accurate [1] that you'd need to print a huge circle and then sit there with a measuring tape to be able to even tell it's not a perfect circle. Which is why "you can't draw a circle with Bezier curves" is only a mathematical "problem", it's not an actual problem. [1] https://pomax.github.io/bezierinfo/#circles_cubic https://pomax.github.io/bezierinfo/#circles_cubic

bobajeff 3y ago

The guy from the mach engine has also talked about issues dealing with Bézier curves and came up with a interesting set a primitives: Triangles, quadratic curves and semi-circles. Mostly this is make it easier to do vector graphics on a gpu, which is why I'm interested in it, but I think it might be easier to understand.

Nycto 3y ago

Obligatory links for anyone that is interested in learning more about Bézier curves: https://pomax.github.io/bezierinfo/ https://pomax.github.io/bezierinfo/ https://pomax.github.io/bezierjs/ https://pomax.github.io/bezierjs/ https://github.com/Pomax/bezierjs https://github.com/Pomax/bezierjs

AlphaCerium 3y ago
Might I also add: https://youtu.be/aVwxzDHniEw?feature=shared https://youtu.be/aVwxzDHniEw?feature=shared Which works through them from first principles with beautiful animations.
- atan2 3y ago
  I personally really like this video, but it's interesting how when I showed it to a group of CS undergrad students, they all loved the animations but performed poorly on a post-video quiz about the topic. I knew the content already, but I wonder if this video is really as educational as it appears to be.
  - bombdailer 3y ago
    Her other video on the subject https://www.youtube.com/watch?v=jvPPXbo87ds&t https://www.youtube.com/watch?v=jvPPXbo87ds&t is far more interesting and informative imo.
anon____ 3y ago
These, too: https://ciechanow.ski/drawing-bezier-curves/ https://ciechanow.ski/drawing-bezier-curves/ https://ciechanow.ski/curves-and-surfaces/ https://ciechanow.ski/curves-and-surfaces/

CrimsonCape 3y ago

Do you have any publicly available code on github?

ad8e 3y ago
The source code is visible with Ctrl+U, I didn't minimize anything. The g9 use is pretty neat. It definitely deserves the shout-out I gave it. I just now uploaded a worse C++ desktop version with saving and loading: https://github.com/ad8e/local-curves https://github.com/ad8e/local-curves This desktop version is 5 years old. I think the web version is better. This github repo is only interesting if you want to copy code from it; it's not practical as a drawing tool.
- CrimsonCape 3y ago
  Ok thanks. I will possibly try to port to SkiaSharp in the future to learn how your code works.

slimsag 3y ago

Cool to see others working on this problem. I hope more people do. Funnily I've seen a lot of programmers and math folks who express how truly, genuinely beautiful Beziers and the math behind them are. But I've never met an artist or graphic designer who didn't express some deep frustration at Bezier controls and how hard they are to work with. There are even games[0] which make a mockery out of how hard Bezier controls are to use, where the game is purely using the controls. Controls are just one side of the problem, in my view; the other side is that cubics are terrible for GPUs, they don't understand them - and I believe many of the best 2D graphics libraries today are not even fully GPU accelerated, e.g. Skia. There are folks working on compute shader-based approaches, where we try to shoe-horn this CPU-focused algorithm into GPUs and pray - but it still isn't really suitable. The controls suck for artists, and the math sucks for GPUs. This is only true of cubics, if you restrict yourself to quadratics (although that brings other challenges), both the control issue goes away (you can just click+drag the curve!) and the performance issue goes away (quadratics are triangles, GPUs love them) That's the summary of the talk[1] I gave at SYCL'22. In that talk, I didn't have time to present the downsides of my solution (which are real!) so if you watch it please keep that in mind - the talk is about the problem statement, not a solution. We are exploring a different solution today than what was presented in that talk. My overall point in there, though, is a solid one: vector graphics as they exist today suck for artists and GPUs alike. The only reason we stick with vector graphics in their current form is because of SVG & compatibility with existing tooling. But isn't it crazy? We have new bitmap image formats all the time, and so few vector graphics formats. In Mach engine[2] we're continuing to explore this space, end-to-end, from author tooling -> format -> rendering. I'm not claiming we have a perfect solution, we don't, but we're at least thinking about this problem. Kudos to the authors of this article for thinking about this space as well. [0] https://bezier.method.ac/ https://bezier.method.ac/ [1] https://www.youtube.com/watch?v=QTybQ-5MlrE https://www.youtube.com/watch?v=QTybQ-5MlrE [2] https://machengine.org https://machengine.org

pavlov 3y ago
Postscript used cubic Béziers, but TrueType, specified some ten years later by Apple with the learnings from practical use of Postscript on Macs, opted to only support quadratics instead. Donald E. Knuth seems to think pretty highly of this decision: “The quadratic has the great advantage that there's a real cheap way to render them. You can make hardware to draw a quadratic spline lickety-split. It's all Greek mathematics, the conic sections. You can describe a quadratic spline by a quadratic equation (x, y) so that the value of f(x, y) is positive on one side of the curve and negative on the other side. And then you can just follow along pixel by pixel, and when x changes by one and y changes by one, you can see which way to move to draw the curve in the optimal way. And the mathematics is really simple for a quadratic. The corresponding thing for a cubic is six times as complicated, and it has extra very strange effects in it because cubic curves can have cusps in them that are hidden. They can have places where the function will be plus on both sides of the cubic, instead of plus on one side and minus on the other. “The algorithm that's like the quadratic one, but for cubics, turns out that you can be in something that looks like a very innocuous curve, but mathematically you're passing a singular point. That's sort of like a dividing by zero even though it doesn't look like there's any reason to do so. The bottom line is that the quadratic curves that TrueType uses allow extremely fast hardware implementations, in parallel.” https://lists.nongnu.org/archive/html/freetype-devel/2000-01/msg00052.html https://lists.nongnu.org/archive/html/freetype-devel/2000-01...

dang 3y ago

This is a nice post but not a valid Show HN - please see https://news.ycombinator.com/showhn.html https://news.ycombinator.com/showhn.html. I've taken "Show HN" out of the title now.

butz 3y ago

Just trying to align curves to targets was fun. Someone should build a whole game on this idea.

slimsag 3y ago
https://bezier.method.ac/ https://bezier.method.ac/

tantalor 3y ago

[flagged]

jheriko 3y ago

good work. i've always found bezier curves impractical and overrated, using standard polynomial interpolations or more easily understood variants.

raphlinus 3y ago

The goals look quite similar to my hyperbezier explorations. There's an online demo of the first draft[1], and a Zulip thread on some progress toward a second draft[2]. The tl;dr is that I think I have the mathematics of the curve family, but I haven't finished the mapping between control points and the parameters of the curve family. Both drafts have (exact) Euler spirals inside their parameter space, and thus circular arcs as well. I think that's a good criterion for a Bézier successor. It's on the back burner for now, but I hope to get back to it, and am open to collaboration. [1]: https://www.cmyr.net/blog/hyperbezier.html https://www.cmyr.net/blog/hyperbezier.html [2]: https://xi.zulipchat.com/#narrow/stream/260979-kurbo/topic/Hyperbezier.20progress https://xi.zulipchat.com/#narrow/stream/260979-kurbo/topic/H...

egypturnash 3y ago

"I don't know of a reasonable way to guess the right location." 1. Drag curve handles out to 1/3 of the length of the curve segment they control. 2. Eschew s-curves between two control points. 3. Don't turn more than about 90º between two control points. I learnt this about a year into what is now a 23-year career as an Illustrator artist. It has served me well. You will note that the first interactive example on this page is asking you to violate rule 2. "Béziers can't represent circles. If you try to approximate one by hand, it'll look lopsided." If you try to draw a circle by hand, it'll look lopsided too. Any pro traditional artist will have a compass and a few circle templates in their kit. In Illustrator there's an ellipse tool one keypress away. I've been drawing at a pro level for about thirty years and while I can probably pick up a pencil and draw a better circle in a couple quick arm motions than you can in a bunch of little sketchy attempts, they're still nowhere near perfect, and they don't need to be. I also draw about 90% of my paths with the Pencil tool, which just abstracts worrying all of this way. Unless you are doing very geometric work, or require the absolute minimum possible number of points, I feel that using the Pen tool to draw everything is about as sensible as writing a program entirely in assembly language. And if I do need to work under a tight point count constraint, then I will still draw it with the Pencil, then pull out Astute's Smart Point Removal tool, which does a great job of optimizing the heck out of my paths, much better than Adobe's tools for this.

karaterobot 3y ago
I think what you've done is mastered an unintuitive (or even counterintuitive) system. That's well and good, but it doesn't mean the system shouldn't be improved. It would make life no worse for you, and better for people with less experience, less time to experiment.
- cush 3y ago
  I don’t think they’re implying it takes 21 years to learn. I’m inexperienced and learned how to accurately follow paths with bezier curves using the same technique after watching a 10 minute Burt Munroy tutorial.
  - 3y ago

bobbylarrybobby 3y ago

Are Bézier curves with handles “worth it”? I've always found the easiest method for drawing curves to be, simply, “give me the (cubic) spline curve that goes through these points”. You place your points and continuity conditions determine the cubic, as described in https://mathworld.wolfram.com/CubicSpline.html https://mathworld.wolfram.com/CubicSpline.html .

Kenji 3y ago
[dead]
crazygringo 3y ago
That's exactly what I've always been curious about! It seems vastly more intuitive to place points rather than adjust handles. (And set directions for endpoints if the curve is open.) And obviously a practical tool will provide the capability to join separate cubic splines at sharp angles. Does anyone know of a GUI drawing tool based on this? I've always wanted to experiment with it. Because I've always wanted to either confirm that it's a great idea that we should all be using instead of beziers, or else discover if there's an immediately obvious reason once you try it out that it's a terrible idea.
- ad8e 3y ago
  I have used this in some commercial software before (maybe Illustrator?); my experience was not positive. When you move a node, some not-so-close curves start wiggling, and you think, "I already set that part correctly, stop moving please". It behaves very poorly around rounded corners. Adding points causes the curves to shift, usually not how you want, and then you try to add more points, which causes more shifts, etc. Arc length-based interpolation might do better in this respect, as opposed to the (# of points)-based interpolation which I expect it used. The alternative, which obeys similar principles, is the Pencil tool. This simply spams out a ton of points to match what you draw. https://news.ycombinator.com/item?id=37460009 https://news.ycombinator.com/item?id=37460009 mentions that these points can be capably reduced, which could serve your purpose.
dahart 3y ago

TheRealPomax 3y ago

It looks like the conclusion is "let's use rational Bezier curves instead of plain Bezier curves", in which case: you can, you just have more parameters to tweak now. Also calling this "new" is a bit disingenous given that rational Beziers have been around half a century now. They're useful, but if you only look at Bezier curves from the tooling side of things, you're going to miss the reason why we use them so much. And the biggest mistake in design software is having tools that actually let you work with the datatypes that your final product is going to end up using. Need a circle? Draw a circle based on a center point and a radius. Good tooling won't surface that fact that it's going to end up being a Bezier curve, it just lets you design with the primitives you need, and will take care of the conversion as needed when you export it to whatever format your deliverable needs to be. Making people draw Bezier curves just because "the file format uses those" is by far the bigger problem here.

bsder 3y ago
This article is really stretching when the conclusion is smacking him in the face: "Use quadratic Beziers." The original article points out that quadratic Beziers have most of the desirable properties with very few of the downsides. It used to be that the issue was that you would have to use significantly more quadratic Beziers to approximate something that a much smaller number of cubic Bezier's could do. This was a big deal when a font file might clog up a floppy disk. Now that we're slinging around gigabyte patch files. Do we really care?
ad8e 3y ago
There are a few misunderstandings here. Rational Bézier curves are incidental in this article, and the conclusion is not that they are correct. They were just a convenient curve I used to express the main message of local control, and the article endorses looking for other curves that fit the properties. The parameter count has not gone up; it's equal to or less than usual Bézier control handles, because I forced the parameters to take specific values. The part that is "new" about the Béziers is the new formula that selects one specific Bézier out of all the possible choices. I think this linguistic accusation is silly; for example, if someone discovers a new rock, it would be fair to call it a "new rock" even though rocks have been discovered thousands of years ago. These curves are also unrelated to the file format; the curves are designed to fit how the user thinks about curves rather than be computer-efficient. For the tooling point, I think you are agreeing with me while arguing; I agree that there's no reason the curve should match what is used in the final product, and some of the other curve choices I considered require a complex conversion step.

PaulHoule 3y ago

There are these civilized curves https://en.wikipedia.org/wiki/Non-uniform_rational_B-spline https://en.wikipedia.org/wiki/Non-uniform_rational_B-spline which you never saw because patents kept them off the markets until Beziers were completely entrenched.

IAmGraydon 3y ago

I found the examples extremely easy to align with the target, but I've also been using Adobe Illustrator for over 20 years.

swayvil 3y ago

I like using the "split tweak" method to do my curves. Converts polygons to curves. Works VERY well. Very intuitive, straightforward and ez. It's a variety of bezier. Alg : given polygon P. For each vertex V in P. Get the midpoints of the 2 segs adjacent to V. M0 M1. Add those 2 points to the polygon. Get the midpoint of seg(M0, M1). M2. Move V to the midpoint of (V,M2). Repeat 2 or 3 times or whatever. Each iteration increases smoothness. And here's the code for that https://github.com/johnalexandergreene/Geom_2D/blob/master/CurveSmoother_Closed.java https://github.com/johnalexandergreene/Geom_2D/blob/master/C... There's a version of that for open curves too, elsewhere in that package .

wentin 3y ago

I was really hyped up by the beginning of the article, but it seems really miss the points with the conclusion. I don't think it is easier to manipulate with the last two examples, and I am guessing no actual graphic artist has read this or play with this before you publish it. To think of ways to improve bezier curves for vector graphics, you need to fully contextualize your thinking about the use case; this is not an academic mathematical discussion after all. Based on my understanding, your finding has no mathematical value as Pomax pointed it out, it is not new, it is an old math with a few constraints that is pre-defined, based on your assumption of what graphic artist wanted most of the time, which I agree is a good direction. I strongly suggest for anyone to try to make a better vector graphics tool, try to draw a letter S with the new approach as a test case, you can choose an existing font to match. And know existing vector graphics rules, here is a couple as example: - add anchor points at the horizontal and vertical extrema of your paths - control points should not cross path with one another Curves that doesn't follow these rules are valid, fine mathematical curves, but graphic artists has practices this for years to rule out them as bad for the purpose of graphic design. Again, the goal is to find the more much smaller set of suitable curves from the infinite realm of mathematical possibilities, for the context of graphic design