by ad8e on 9/10/23, 3:56 PM with 57 comments
by egypturnash on 9/10/23, 8:58 PM
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.
by slimsag on 9/10/23, 6:12 PM
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.
by bobbylarrybobby on 9/10/23, 9:25 PM
by TheRealPomax on 9/10/23, 10:17 PM
Making people draw Bezier curves just because "the file format uses those" is by far the bigger problem here.
by PaulHoule on 9/10/23, 11:58 PM
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.
by dang on 9/10/23, 6:29 PM
I've taken "Show HN" out of the title now.
by wentin on 9/11/23, 5:09 PM
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
by raphlinus on 9/10/23, 8:26 PM
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
[2]: https://xi.zulipchat.com/#narrow/stream/260979-kurbo/topic/H...
by delta_p_delta_x on 9/10/23, 5:58 PM
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.
by swayvil on 9/11/23, 1:41 PM
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).
And here's the code for that
https://github.com/johnalexandergreene/Geom_2D/blob/master/C...
There's a version of that for open curves too, elsewhere in that package .
by bobajeff on 9/10/23, 6:00 PM
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.
by IAmGraydon on 9/11/23, 1:37 AM
by butz on 9/10/23, 6:40 PM
by Nycto on 9/10/23, 6:03 PM
https://pomax.github.io/bezierinfo/
by jheriko on 9/10/23, 7:08 PM
by CrimsonCape on 9/10/23, 6:04 PM
by javajosh on 9/10/23, 5:42 PM