6 ms·

The Hyperbezier Pen Tool

120 points by raphlinus 6y ago

enthdegree 6y ago
Love this website's design, is it statically generated or is that somehow an actual directory listing?
- cmyr 6y ago
  It's jekyll under the hood, merely a tribute to the good old days. :,(
egypturnash 6y ago
“ In particular, it can be tricky to maintain consistent curvature between adjoining segments of a path, which can lead to a ‘lumpy’ look; the following example is contrived, but in practice consistently getting smooth feeling curves with Béziers is challenging.” It’s not that hard. I’m an artist who specializes in Illustrator, and I have some simple rules for its pen tool: 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. There are people out there who have a similar set of rules but prefer to always put their control points at 12/3/6/9 o’clock; for more circular shapes this works, but it falls apart on anything interesting - try drawing an oval with its long axis at about 45° with my method and with this method, and observe how much more uneven the curve handles have to be for the 12/3/6/9 method.
- raphlinus 6y ago
  These kinds of rules are common, but it also means you're only using a fraction of the expressive power of the Béziers. Why not draw actual S-curves? That way you're guaranteed an actual inflection point where curvature goes smoothly through zero, as opposed to two arcs joined. Why not explore control over tension by using curve handles greater than 1/3 (so curvature on endpoints is less) or less than 1/3, cranking up the tension in a way inspired by physical materials? Why not have the computer do the work of ensuring the joins are G2 continuous by construction, instead of having to eyeball it?
  - egypturnash 6y ago
    These rules create visually pleasing curves that are easy to manipulate. You can break these rules and get curves that have fewer points, but they will be very tough to tweak. Break these rules and you will pay for it in more time spent when you need to change things. You can make an analogy to programming rules that tell you to eschew excessive cleverness - sure, it may be more succinct, but are you gonna be able to edit it later? What about the person who comes in once you've left and has to deal with it? (These are also guidelines, I do not obsessively follow these precisely; to be quite honest I mostly avoid using Illustrator's Pen tool for the organic shapes I mostly draw - but if I need to tweak a path, I'll use these rules and a couple other tools to quickly modify where the points are along a path, and do it easily.)
    - raphlinus 6y ago
      I think I miscommunicated a bit. I'm not suggesting you should be routinely breaking these rules with cubic Béziers. Rather, I'm saying that if you had a better underlying curve family, you wouldn't need these rules, as you'd get good results even with a freer approach to designing curves. That's basically the hypothesis we're testing.
- cthonicthulu 6y ago
  These rules are interesting. How did you arrive at them?
  - egypturnash 6y ago
    I got 'em from a book I read standing around at the bookstore like twenty years ago. They were good rules. If I could go back in time and hand Broke 2000 Me twenty bucks to buy that book I would.
TheRealPomax 6y ago
It's probably worth adding a css cursor rule so users can tell that things can be dragged when they mouse over. That said: I'd love to see the more detailed explanation that guides your algorithm. Because auto-curvature is always useful (ever since Knuth wrote down metafont ;)
javajosh 6y ago
Very cool, and I like it a lot. Regarding the prototype/POC, did you ever consider writing the editor using SVG instead of canvas? And if you did, why did you go with canvas?
- cmyr 6y ago
  This is mostly circumstance; the prototype is a compilation to wasm of a bunch of code that was originally written for runebender, a desktop font editor. The framework that project is written in uses canvas when targeting the web.
dan-robertson 6y ago
I read this but didn’t find what I was looking for: a construction of the curve. Firstly, the article talks about G2 continuity. I didn’t find a definition but I didn’t try very hard. I think it is: A curve g : [a,b] -> R^n, parameterised by arclength is G_k-continuous if the kth derivative of g is continuous. So G2 continuity means that 0. The curve is connected; 1. There are no cusps—abrupt changes of angle; and 2. The rate of change of curvature is continuous—if you drove along the curve at constant speed, you could turn the steering wheel smoothly without jerking it. For a bézier spline I don’t think there’s a good way to get G2 continuity. G1 continuity comes from the editor forcing the control points on either side of curve points to be colinear with the curve point. I think the best place for the definition of these splines is [1], in particular [2]. It gives the following expression for the curve between two on-curve points: k(s) = k0 * f(bias0, 1 - s) + k1 * f(bias1, s) I think s, is a normalised arclength which ranges over the unit interval, k0 and k1 are the (also normalised) curvatures at the endpoints, and f is a seemingly bizarre function defined in [2]. k(s) is an expression for the curvature a distance s along the curve. So to find the points on the curve, one must solve a system of differential equations, x’^2 + y’^2 = 1 x’’^2 + y’’^2 = k(s)^2, subject to some suitable initial conditions. The above equation is slightly wrong as it should be using signed curvature, but these are simpler to write down. I think the initial conditions would be initial x and y values and an initial tangent, which doesn’t feel like sufficiently many degrees of freedom to me (you could presumably come up with some initial conditions for the first curve point and control point but I don’t understand how to go from the solution to the equation to the final curve: you can’t seem to move the point at s=1 into the right place as scaling changes the curvature and rotating or skewing changes the initial tangent). Looking more at the code, it seems that the relative angles come from solving the equation and then parameters are chosen such that the solution to the equation gives the desired angles. I’ll have to look more and try to understand it later but if there’s a better reference I’d be interested to know. [1] https://github.com/linebender/spline https://github.com/linebender/spline [2] https://github.com/linebender/spline/blob/main/src/hyperbezier.rs https://github.com/linebender/spline/blob/main/src/hyperbezi...
- raphlinus 6y ago
  The mathematical treatment of the underlying 4-parameter curve family is coming soonish; this blog focuses on the UX, which I think is also a very interesting and challenging problem.
akdor1154 6y ago
Is this the same idea as Inkscape's smooth points? ("make selected nodes auto-smooth") Or is it a different method? EDIT: hmm, the behaviour is not quite the same - inkscape seems to move the handles of its auto-smooth nodes only in response to the positions of neighbouring nodes. This "hyperbezier" demo moves its handles in response to positions of both neighbouring nodes and their handles.
- cmyr 6y ago
  This is correct, the hyperbezier positions auto points to maintain curvature, so anything that impacts curvature of a segment can cause adjustment of the handles of neighbouring segments. In addition, auto points do not need to be smooth; you can have a corner with two auto points, which will be adjusted automatically in response to changes in segments to their 'side' of the corner (see the heart demo on the page for an example of this.)
neolog 6y ago
It's been years since I tried to use Beziers but I remember feeling like I didn't understand what it was doing. This is much more predictable. What's the explanation for what's happening when it ...explodes?
- cmyr 6y ago
  The solver is still a little rough, and there are some robustness issues in certain circumstances, generally when points are very close together. This will get ironed out eventually.
dandelany 6y ago
This is a great idea, I always struggle getting Bezier points to look natural. Will definitely play more with this, looking forward to the future posts!

120 points by raphlinus 6y ago

enthdegree 6y ago

Love this website's design, is it statically generated or is that somehow an actual directory listing?

cmyr 6y ago
It's jekyll under the hood, merely a tribute to the good old days. :,(

egypturnash 6y ago

“ In particular, it can be tricky to maintain consistent curvature between adjoining segments of a path, which can lead to a ‘lumpy’ look; the following example is contrived, but in practice consistently getting smooth feeling curves with Béziers is challenging.” It’s not that hard. I’m an artist who specializes in Illustrator, and I have some simple rules for its pen tool: 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. There are people out there who have a similar set of rules but prefer to always put their control points at 12/3/6/9 o’clock; for more circular shapes this works, but it falls apart on anything interesting - try drawing an oval with its long axis at about 45° with my method and with this method, and observe how much more uneven the curve handles have to be for the 12/3/6/9 method.

raphlinus 6y ago
These kinds of rules are common, but it also means you're only using a fraction of the expressive power of the Béziers. Why not draw actual S-curves? That way you're guaranteed an actual inflection point where curvature goes smoothly through zero, as opposed to two arcs joined. Why not explore control over tension by using curve handles greater than 1/3 (so curvature on endpoints is less) or less than 1/3, cranking up the tension in a way inspired by physical materials? Why not have the computer do the work of ensuring the joins are G2 continuous by construction, instead of having to eyeball it?
- egypturnash 6y ago
  These rules create visually pleasing curves that are easy to manipulate. You can break these rules and get curves that have fewer points, but they will be very tough to tweak. Break these rules and you will pay for it in more time spent when you need to change things. You can make an analogy to programming rules that tell you to eschew excessive cleverness - sure, it may be more succinct, but are you gonna be able to edit it later? What about the person who comes in once you've left and has to deal with it? (These are also guidelines, I do not obsessively follow these precisely; to be quite honest I mostly avoid using Illustrator's Pen tool for the organic shapes I mostly draw - but if I need to tweak a path, I'll use these rules and a couple other tools to quickly modify where the points are along a path, and do it easily.)
  - raphlinus 6y ago
    I think I miscommunicated a bit. I'm not suggesting you should be routinely breaking these rules with cubic Béziers. Rather, I'm saying that if you had a better underlying curve family, you wouldn't need these rules, as you'd get good results even with a freer approach to designing curves. That's basically the hypothesis we're testing.
cthonicthulu 6y ago
These rules are interesting. How did you arrive at them?
- egypturnash 6y ago
  I got 'em from a book I read standing around at the bookstore like twenty years ago. They were good rules. If I could go back in time and hand Broke 2000 Me twenty bucks to buy that book I would.

TheRealPomax 6y ago

It's probably worth adding a css cursor rule so users can tell that things can be dragged when they mouse over. That said: I'd love to see the more detailed explanation that guides your algorithm. Because auto-curvature is always useful (ever since Knuth wrote down metafont ;)

javajosh 6y ago

Very cool, and I like it a lot. Regarding the prototype/POC, did you ever consider writing the editor using SVG instead of canvas? And if you did, why did you go with canvas?

cmyr 6y ago
This is mostly circumstance; the prototype is a compilation to wasm of a bunch of code that was originally written for runebender, a desktop font editor. The framework that project is written in uses canvas when targeting the web.

dan-robertson 6y ago

I read this but didn’t find what I was looking for: a construction of the curve. Firstly, the article talks about G2 continuity. I didn’t find a definition but I didn’t try very hard. I think it is: A curve g : [a,b] -> R^n, parameterised by arclength is G_k-continuous if the kth derivative of g is continuous. So G2 continuity means that 0. The curve is connected; 1. There are no cusps—abrupt changes of angle; and 2. The rate of change of curvature is continuous—if you drove along the curve at constant speed, you could turn the steering wheel smoothly without jerking it. For a bézier spline I don’t think there’s a good way to get G2 continuity. G1 continuity comes from the editor forcing the control points on either side of curve points to be colinear with the curve point. I think the best place for the definition of these splines is [1], in particular [2]. It gives the following expression for the curve between two on-curve points: k(s) = k0 * f(bias0, 1 - s) + k1 * f(bias1, s) I think s, is a normalised arclength which ranges over the unit interval, k0 and k1 are the (also normalised) curvatures at the endpoints, and f is a seemingly bizarre function defined in [2]. k(s) is an expression for the curvature a distance s along the curve. So to find the points on the curve, one must solve a system of differential equations, x’^2 + y’^2 = 1 x’’^2 + y’’^2 = k(s)^2, subject to some suitable initial conditions. The above equation is slightly wrong as it should be using signed curvature, but these are simpler to write down. I think the initial conditions would be initial x and y values and an initial tangent, which doesn’t feel like sufficiently many degrees of freedom to me (you could presumably come up with some initial conditions for the first curve point and control point but I don’t understand how to go from the solution to the equation to the final curve: you can’t seem to move the point at s=1 into the right place as scaling changes the curvature and rotating or skewing changes the initial tangent). Looking more at the code, it seems that the relative angles come from solving the equation and then parameters are chosen such that the solution to the equation gives the desired angles. I’ll have to look more and try to understand it later but if there’s a better reference I’d be interested to know. [1] https://github.com/linebender/spline https://github.com/linebender/spline [2] https://github.com/linebender/spline/blob/main/src/hyperbezier.rs https://github.com/linebender/spline/blob/main/src/hyperbezi...

raphlinus 6y ago
The mathematical treatment of the underlying 4-parameter curve family is coming soonish; this blog focuses on the UX, which I think is also a very interesting and challenging problem.

akdor1154 6y ago

Is this the same idea as Inkscape's smooth points? ("make selected nodes auto-smooth") Or is it a different method? EDIT: hmm, the behaviour is not quite the same - inkscape seems to move the handles of its auto-smooth nodes only in response to the positions of neighbouring nodes. This "hyperbezier" demo moves its handles in response to positions of both neighbouring nodes and their handles.

cmyr 6y ago
This is correct, the hyperbezier positions auto points to maintain curvature, so anything that impacts curvature of a segment can cause adjustment of the handles of neighbouring segments. In addition, auto points do not need to be smooth; you can have a corner with two auto points, which will be adjusted automatically in response to changes in segments to their 'side' of the corner (see the heart demo on the page for an example of this.)

neolog 6y ago

It's been years since I tried to use Beziers but I remember feeling like I didn't understand what it was doing. This is much more predictable. What's the explanation for what's happening when it ...explodes?

cmyr 6y ago
The solver is still a little rough, and there are some robustness issues in certain circumstances, generally when points are very close together. This will get ironed out eventually.

dandelany 6y ago

This is a great idea, I always struggle getting Bezier points to look natural. Will definitely play more with this, looking forward to the future posts!