Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

New Bézier curves for vector graphics

ad8e.pages.dev

Post reply on HN
Print view View original

31–40 of 61 posts

Re: New Bézier curves for vector graphics

#31

Post by spoiler »

egypturnash wrote: post #27

"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 thi…

> I feel that using the Pen tool to draw everything is about as sensible as writing a program entirely in assembly language.

As someone who's only ever used the pen tool, I feel mildly attacked!

Jokes aside, I think I agree with you if you have a tablet. I used to draw with a mouse back then, so I'd basically sketch on paper, take a picture or scan it, then use my mouse to pen over it. Sometimes I'd skip the sketching/importing steps, depending on what I'd work on.

Later when I could afford a tablet, I mostly left Illustrator/Inkskape behind in favour of just using Krita for most things. However, if I'm making a vector illustration today, I still use the pen tool... and the mouse, even if I have the tablet. If I were to work on something complex enough, I'd probably sketch it in Krita though, and then use the good'ol pen and mouse...

I'm by no means a professional artist, just do this as a hobby though. So, if my workflows outlined here have mortified you; apologies for that.

Re: New Bézier curves for vector graphics

#32

Post by bobbylarrybobby »

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 .

Re: New Bézier curves for vector graphics

#33

Post by mkl »

cormullion wrote: post #24
slimsag wrote: post #12

Earlier quoted context omitted.

"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…

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.

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.

Re: New Bézier curves for vector graphics

#34

Post by TheRealPomax »

pavlov wrote: post #13
slimsag wrote: post #11

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 contr…

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 mathe…

those are both Bezier curves. They're just second vs. first order Bezier curves, but all the same math applies, and polybeziers are so much harder to work with when they're quadratic instead of cubic, it's not even funny.

Re: New Bézier curves for vector graphics

#35

Post by TheRealPomax »

mkl wrote: post #33
cormullion wrote: post #24

Earlier quoted context omitted.

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.

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.

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

Re: New Bézier curves for vector graphics

#36

Post by egypturnash »

cush wrote: post #30
karaterobot wrote: post #28

Earlier quoted context omitted.

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.

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.

Correct. I have certainly learnt a ton more about how to manipulate vector art in the intervening years, and the set of tools I have available has expanded a lot - Adobe's added a lot of tools to Illustrator, and so has the Illustrator plugin ecosystem. But those three simple rules did a lot to make my Illustrator practice a lot faster.

Re: New Bézier curves for vector graphics

#37

Post by TheRealPomax »

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.

Re: New Bézier curves for vector graphics

#38

Post by egypturnash »

spoiler wrote: post #31
egypturnash wrote: post #27

"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 thi…

> I feel that using the Pen tool to draw everything is about as sensible as writing a program entirely in assembly language. As someone who's only ever used the pen tool, I feel mildly attacked! Jokes aside, I think I agree with you if you have a tablet. I used to draw with a mouse back then, so I'd basically sketch on paper, take a picture or scan it, then use my mouse to pen over it. Sometimes I'd skip the sketchin…

The workflow you outline is where I started! It's not one I'd want to use any more, now that I can casually make Illustrator automatically do a lot of work for me, then come back in and refine a few places manually. But it was a good place to begin.

https://egypt.urnash.com/illustratorbook/

Re: New Bézier curves for vector graphics

#39

Post by Kenji »

bobbylarrybobby wrote: post #32

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 .

[dead]

Re: New Bézier curves for vector graphics

#40

Post by raphlinus »

egypturnash wrote: post #27

"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 thi…

I can perhaps refine (1) and provide some insight in support of (2).

It does make intuitive sense for handles to be 1/3 of the length of the curve, as that makes the "speed" close to constant, but this is not the smoothest possible choice in general. In particular, it's not the best approximation to a circular arc, which by most reasonable definitions is the smoothest possible curve. I did the math[1] and found that there's a parabola around each endpoint that does result in an accurate arc approximation, and in fact may be easier to apply as it doesn't move around as the length of the curve changes. Rather, each of the parabolas can be applied independently.

Evidence in favor of this is O(n^5) accuracy scaling to approximate Euler spirals (which are also a good candidate for "smoothest possible curve" depending on the way you define that). I suspect, but haven't yet demonstrated, that there's some variational sense in which this choice is optimum, or at least to a first order approximation.

You can think of cubic Béziers as forming a four-dimensional parameter space (the parameters can be accounted as the lengths and angles of the control handles; in this scheme, the positions of the endpoints are not counted). By applying a rule such as 1/3 arc length, or falling on a parabola, that reduces it to a two-dimensional space (same dimensionality as quadratic Beziers, Euler spirals, and sections of rectangular elastica). I think two dimensions is too few, as it doesn't give you the ability to easily form superellipse shapes, a particular strength of cubic Béziers and quite handy for font design, as superellipse is extremely common in fonts. I think there may be some value in exploring a three-dimensional parameter space (which, among other things, is the count for general elastica) and have some ideas.

As for (2), the problem is that for s-shaped curves, cubic Béziers tend to put curvature maxima near but not exactly on endpoints. Since the curvature maximum is visually salient, you do better subdividing your curves so you can place them at joins. Other curve families, notably those based on elastica and Euler spirals, don't have this problem.

[1]: https://raphlinus.github.io/curves/2021/02/19/parallel-curve...

Post reply on HN