9 ms·
A Primer on Bézier Curves
- klibertp 10y agoThis is a really good article! It was thanks to this (and the Wikipedia page) that I managed to write code[1] for drawing evenly-spaced letters along the curve. The letters are even rotated to match the curve, all thanks to this article. It's basically a one-stop shop for all things Bezier :) [1] In Racket, here: https://github.com/piotrklibert/curved-text https://github.com/piotrklibert/curved-text
- TheRealPomax 10y agoAlways happy to hear the primer made a difference in someone's life =)
- athenot 10y agoI was expecting another superficial article with some interactive graphs but this is a lot deeper with handy formulas for various flavors and uses of Bézier curves. Worth a bookmark!
- seanalltogether 10y agoIt never fully clicked for me until I saw it animated https://www.jasondavies.com/animated-bezier/ https://www.jasondavies.com/animated-bezier/
- Etheryte 10y agoLikewise, I always find an animation when I need to explain it to someone. A great example of an intuitive understanding of a tricky problem.
- Nadya 10y agoI never thought to seek out animations for it. That makes them a hell of a lot more intuitive for imagining "how will my modifications affect the curve?" Thanks for sharing.
- melling 10y agoI've got a few other references on Bezier curves, including a link to a previous HN conversation: https://github.com/melling/ComputerGraphics/blob/master/bezier.org https://github.com/melling/ComputerGraphics/blob/master/bezi...
- ChuckMcM 10y agoAnd the cool thing is that this animation is actually in the article! (not the exact animation but the same conceptual animation, and you can move your mouse left or right and walk it forward and backward)
- fogleman 10y agoThis came in very handy for me on one of my side projects, specifically finding intersections between curves. Excellent content.
- retox 10y agoLook at the archives, this link has been doing the rounds for at least 6 years now.
- raphlinus 10y agoThat makes it especially impressive that he used React and other recent Web technologies to build the site. (It's been around a while but this is a rewrite and looks like a pretty massive update)
- TheRealPomax 10y agoMy day job is web techs, so I've been slowly upgrading this article ever since I turned it into a "real page" in 2011. The latest part (that got done after the last time this hit HN) is localization support, so there are now Chinese and Japanese translations for the first 10ish sections, and a relatively clean way to translate entire sections at a time (each section is now an .md file that gets transpiled to a JSX component, before bundling kicks in. It's nifty)
- artursapek 10y agoGood on you for keeping it up to date. This page is extremely dense with information and clearly has cost you a lot of your time.
- TheRealPomax 10y agoThe link has, the content hasn't: it's always growing, even if not at a terribly fast pace =)
- artursapek 10y agoI love bezier curves. I'm working on rebuilding a project I started in college, a vector graphics editor. The function for determining intersections between two cubic bezier curves, which I found on a professor's website, is absolutely insane: https://github.com/artursapek/mondrian/blob/master/src/coffee/geometry/cubic-bezier-line-segment.coffee#L397 https://github.com/artursapek/mondrian/blob/master/src/coffe... It's a wall of this: c11.x*c12.y*c13.x*c13.y*c23.x*c23.y - c11.y*c12.x*c13.x*c13.y*c23.x*c23.y + 6*c21.x*c22.x*c13y3*c23.x + 3*c11.x*c12.x*c13.x*c13.y*c23y2 + 6*c10.x*c13.x*c13y2*c23.x*c23.y - 3*c11.x*c12.x*c13y2*c23.x*c23.y - 3*c11.y*c12.y*c13.x*c13.y*c23x2 - 6*c10.y*c13x2*c13.y*c23.x*c23.y - 6*c20.x*c13.x*c13y2*c23.x*c23.y + 3*c11.y*c12.y*c13x2*c23.x*c23.y - 2*c12.x*c12y2*c13.x*c23.x*c23.y - 6*c21.x*c13.x*c22.x*c13y2*c23.y - 6*c21.x*c13.x*c13y2*c22.y*c23.x - 6*c13.x*c21.y*c22.x*c13y2*c23.x + 6*c21.x*c13x2*c13.y*c22.y*c23.y + Maybe there's a way to refactor it, but I wouldn't know because I still don't understand it; I just know that it works.
- nkoren 10y agoWhat the heck...!?! I would really love for someone to explain how something like this happens.
- artursapek 10y agoMe too. It's constructing some polynomial, but the rest is lost on me.
- T-hawk 10y agoLooks like what you would get if you wrote out all the operations for matrix multiplication? It must be related to expressing the coordinates of the nodes as matrices. I would guess the factors of 3 and 6 arise from derivatives of the cubics: x^3 derives to 3x^2 derives to 6x.
- wnissen 10y agoThe intersection of two NURBS (Non-uniform Rational B-Spline) surfaces has a degree into the hundreds. Those are the surface types used in virtually all CAD modelers. For that reason the intersection is not calculated exactly but approximated to a geometric tolerance. It is harder, mathematically and algorithm-wise to calculate the approximation, but much faster to evaluate afterwards. It's amazing what magic lurks below the surface of even something as simple as "find the intersection of two polynomial functions".
- azeirah 10y ago> In fact, they even need this for straight lines, but the function is ridiculously easy, so we tend to ignore that as far as computers are concerned Well.... If it was so easy, why does the algorithm have a name? (Bresenham's algorithm), if it's named surely it must've been "invented" at some point, implying it wasn't as easy?
- slazaro 10y agoBresenham's algorithm is for rasterization, and I think the article refers to the function f(t) -> (x,y), which is just a linear interpolation in 2D.
- Sharlin 10y agoPlus Bresenham is for doing things just using integer math, with floats rasterizing a line is little more than straightforward linear interpolation.
- Etheryte 10y agoEasy or hard are always relative terms. I think in this case the author means easy or hard relative to the status quo.
- deleted 10y ago[deleted]
- _eLRIC 10y agoPierre Béziers, in addition to being a great mathematician and engineer, was a great teacher (including when he was ranting about us, youngsters, not being able to solve "simple" mechanical problems !) It's good to see people investing such effort to make it easy to understand and available to everyone
- mentaat 10y agoSo is there any advantage of using bezier or b-splines when you have nurbs curve?
- Washuu 10y agoI used this resource about six months ago as a refresher so I could build bezier splines[1] for character pathing while I was learning Unity. It is probably the best resource out there for this.(Outside of game engine specific information.) 1: http://i.imgur.com/8pWMTZS.png http://i.imgur.com/8pWMTZS.png 2: https://vid.me/GMso https://vid.me/GMso
- TheRealPomax 10y agoOh that's cool - it's always great to see the primer having helped in making a thing!
- TheRealPomax 10y agoPomax (the author) here: for those wondering about what's different since last time this hit HN, this is a slowly-but-surely updating project that has been in the works since 2011. If you remember seeing it before: you're not wrong! But it will probably have been less content or less functionality than it is this time round =) The latest improvement is that the codebase now supports localization which means that if you're a dual (triple, etc) speaker and you want to help bring this content to people who don't speak English, now you can! Chinese and Japanese localizations are already underway (although it's a volunteer effort, much like the Primer itself, so progress is again steady, but slow) and currently cover the first 10 or so sections. For more details on the fine points of the build system and how much work it was to overhaul an "everything is assumed to be English, no l10n provisions have been made whatsoever" to "EASY to localize" (not just 'possible to', but 'easy'), hit up http://pomax.github.io/1489108158510/localization-is-hard http://pomax.github.io/1489108158510/localization-is-hard where I've blogged about the uplift and the tech choices I made. And on a less impressive note but certainly more useful for social sharing, the social share buttons now actually point to the section you're reading, so that future sections can be shared waaay easier. For the last six years, those things have just pointed to the base article URL and that is not very useful when you want to share the fact that you just read up on how to split a Bézier curve using matrix operations, or want to link to the B-Spline section all the way at the bottom of the Primer.
- mxfh 10y agoYou're apparently part of the biannual State of SVG days on HN 2017: https://news.ycombinator.com/item?id=14155393 https://news.ycombinator.com/item?id=14155393 2015: https://news.ycombinator.com/item?id=10678652 https://news.ycombinator.com/item?id=10678652 2013: https://news.ycombinator.com/item?id=6470908 https://news.ycombinator.com/item?id=6470908
- TheRealPomax 10y agoHaha, that made my day, thanks! (it's only 10am atm, but that'll carry for a few hours yet)
- aidos 10y ago
- legulere 10y agoI think I used an earlier version of the section of splitting bezier curves to do the opposite: Combining two bezier curves in SVG (probably they were split at some point before by the outputting program).
- combatentropy 10y ago> They're named after Pierre Bézier . . . publishing his investigations in 1962 > One might be tempted to say that the mathematician Paul de Casteljau was first, investigating the nature of these curves in 1959 > Bézier curves are, at their core, "Bernstein polynomials", a family of mathematical functions investigated by Sergei Natanovich Bernstein, with publications on them at least as far back as 1912. I see many stories like this, which shatter the idea of a lone inventor bringing something new out of thin air.
- TheRealPomax 10y agoHmm, I don't think anyone who actually learned even a modicum of maths history holds that idea, though. Where were you made to believe the idea of one person coming up with complete solutions all on their own?
- deleted 10y ago[deleted]
- pyromine 10y agoLovely explanation, I always find them fascinating. I really need to get around to coding some of them sometimes, but I find most of the itnerest in the mathetics. That said, early higheschoolers knows jack about binomials unless they are particularly smart. I would venture a majority of college students (in subjects other than engineering and science) would find this too daunting. I think by downplaying the complexity it actually turns people off from trying to learn. Which of course is a shame.
- deleted 10y ago[deleted]