raphlinus · 156 points · 24 comments · há 5 dias · Open original
Comments
5 preview comments · loading full thread
Log in to use comments
Log in to h4cker, then connect Hacker News to publish comments.
MOmomojohá 7 horas
I love bezier curves. In community-college, it was the first time I ever encountered a subject that made me want to go do more research on my own. One of my core memories is toiling away for multiple nights when the rest of the house was asleep on my 2015 Macbook Pro, writing janky p5.js code and pressing refresh on the browser page over and over until suddenly, I started see real, beautiful curves blossom from my control points.
I just went back to dig up some old sources[0], and I can't believe this post is almost a decade old now. This guy's explainers and animations were leagues beyond any other resource I could find through Google searc at the time.
[0] https://jamie-wong.com/post/bezier-curves/
DAdaharthá 5 horas
So Raph, how do you draw these things? I’m not sure exactly where I’d start given an equation of the curvature or tangent (I assume?) angle. The pen tool link talks about “auto points”, giving the impression that it’s a sort of Bezier subdivision with some constraints, is that accurate? And your article mentions you’ve since fixed some things in the math - so this is a bit different from the pen tool, not using auto points?
Playing with your demo, I see the curve lock shape in certain configurations and stop moving even when I’m dragging one of the control points around. Is this a temporary or numerical stability issue, or is this a property of hyperbezier curves? For example if I arrange the control points in a square with P0 bottom left, C1 bottom right, C2 top left, P3 top right, and then drag C1 to the right, the shape locks up quickly. Eyeballing, it’s maybe when the length of P0C1 is ~1.5 times the length of C2P3? Moving C1 further right and up/down, there’s a huge area where moving C1 doesn’t affect the shape of the curve.
I was slightly curious about the P/C naming as well - is this a Hermite-like idea where P[03] are points and C[12] are similar to tangent vectors? Why not use P[0123]?
Probably one really obvious thing worth mentioning - Beziers are indeed very versatile, but it has to be said that one of the reasons they’re so popular is because the math is so simple, right? Decomposable into linear steps, integer exponents, with a couple multiplies of only your parameter you can evaluate them with a matrix multiply. They’re trivial to draw. Add in the controllability and intuitiveness and simplicity of computing other properties of the curve (such as finding roots & inflections & bounding boxes, splitting curves, etc.), and it makes sense they’re very popular. Hyperbeziers look interesting, and I don’t have intuition on their uses yet, but I assume their rendering involves heavier math than Beziers - since the curvature & angle equations have a divide & square root? Can they be split or subdivided easily?
You’ve been in search of a better curve for a long time. I’m wondering how you think about and where you stand on subdividing curves like Bezier vs finding a more perfect interpolation. Obviously there are tradeoffs, but are you aiming at problems that can’t be solved in practice using subdivision/approximation? I’d also be curious to hear your thoughts on hyperbeziers vs NURBS.
KRkrtkushhá 8 horas
Related: Last year I had the pleasure to work with Bezier curves to make a very specific UI for an app I was working on.
I wrote down a bunch of posts on how I achieved the UI primarly to explain the process to my future self[0]
As a mobile developer it was so much fun to do something other than building a CRUD app.
[0]https://www.krtkush.com/computer-graphics-basics-with-compos...
DCdcrazyhá 6 horas
Playing with the example, the controls points don’t feel any more intuitive to work with than traditional cubic Béziers. They still exhibit annoying behaviors near the endpoints, though they don’t tend to “explode” like traditional cubics.
I find it curious that the author makes no attempt to compare his solution to other splines like B-splines or Catmull-Rom splines, given their popularity in computer graphics and CAD.
DIdiabllicseagullhá 7 horas
One big aspect that made Bezier popular was local support, i.e. moving control points resulted in expected changes in the same direction. It's interesting that this is the result of a search for 'a curve family better suited for interactive design than cubic Beziers.' I think it's better for achieving curve quality in the sense of curvature changes, but not so much in interactivity.
Comments
5 preview comments · loading full threadLog in to h4cker, then connect Hacker News to publish comments.
I love bezier curves. In community-college, it was the first time I ever encountered a subject that made me want to go do more research on my own. One of my core memories is toiling away for multiple nights when the rest of the house was asleep on my 2015 Macbook Pro, writing janky p5.js code and pressing refresh on the browser page over and over until suddenly, I started see real, beautiful curves blossom from my control points. I just went back to dig up some old sources[0], and I can't believe this post is almost a decade old now. This guy's explainers and animations were leagues beyond any other resource I could find through Google searc at the time. [0] https://jamie-wong.com/post/bezier-curves/
So Raph, how do you draw these things? I’m not sure exactly where I’d start given an equation of the curvature or tangent (I assume?) angle. The pen tool link talks about “auto points”, giving the impression that it’s a sort of Bezier subdivision with some constraints, is that accurate? And your article mentions you’ve since fixed some things in the math - so this is a bit different from the pen tool, not using auto points? Playing with your demo, I see the curve lock shape in certain configurations and stop moving even when I’m dragging one of the control points around. Is this a temporary or numerical stability issue, or is this a property of hyperbezier curves? For example if I arrange the control points in a square with P0 bottom left, C1 bottom right, C2 top left, P3 top right, and then drag C1 to the right, the shape locks up quickly. Eyeballing, it’s maybe when the length of P0C1 is ~1.5 times the length of C2P3? Moving C1 further right and up/down, there’s a huge area where moving C1 doesn’t affect the shape of the curve. I was slightly curious about the P/C naming as well - is this a Hermite-like idea where P[03] are points and C[12] are similar to tangent vectors? Why not use P[0123]? Probably one really obvious thing worth mentioning - Beziers are indeed very versatile, but it has to be said that one of the reasons they’re so popular is because the math is so simple, right? Decomposable into linear steps, integer exponents, with a couple multiplies of only your parameter you can evaluate them with a matrix multiply. They’re trivial to draw. Add in the controllability and intuitiveness and simplicity of computing other properties of the curve (such as finding roots & inflections & bounding boxes, splitting curves, etc.), and it makes sense they’re very popular. Hyperbeziers look interesting, and I don’t have intuition on their uses yet, but I assume their rendering involves heavier math than Beziers - since the curvature & angle equations have a divide & square root? Can they be split or subdivided easily? You’ve been in search of a better curve for a long time. I’m wondering how you think about and where you stand on subdividing curves like Bezier vs finding a more perfect interpolation. Obviously there are tradeoffs, but are you aiming at problems that can’t be solved in practice using subdivision/approximation? I’d also be curious to hear your thoughts on hyperbeziers vs NURBS.
Related: Last year I had the pleasure to work with Bezier curves to make a very specific UI for an app I was working on. I wrote down a bunch of posts on how I achieved the UI primarly to explain the process to my future self[0] As a mobile developer it was so much fun to do something other than building a CRUD app. [0]https://www.krtkush.com/computer-graphics-basics-with-compos...
Playing with the example, the controls points don’t feel any more intuitive to work with than traditional cubic Béziers. They still exhibit annoying behaviors near the endpoints, though they don’t tend to “explode” like traditional cubics. I find it curious that the author makes no attempt to compare his solution to other splines like B-splines or Catmull-Rom splines, given their popularity in computer graphics and CAD.
One big aspect that made Bezier popular was local support, i.e. moving control points resulted in expected changes in the same direction. It's interesting that this is the result of a search for 'a curve family better suited for interactive design than cubic Beziers.' I think it's better for achieving curve quality in the sense of curvature changes, but not so much in interactivity.