[HN Gopher] A Primer on Bezier Curves
___________________________________________________________________
A Primer on Bezier Curves
Author : s1291
Score : 143 points
Date : 2022-01-27 13:42 UTC (9 hours ago)
(HTM) web link (pomax.github.io)
(TXT) w3m dump (pomax.github.io)
| TheRealPomax wrote:
| Always nice to see folks enjoying the primer - if anyone runs
| into issues with it, feel free to head on over to
| https://github.com/Pomax/BezierInfo-2/issues and report your
| findings so we can improve things together.
| s1mon wrote:
| Thanks again to Pomax for one of my favorite references on
| Beziers.
|
| This has been posted to HN 19+ times, here are some of the more
| useful threads:
|
| https://news.ycombinator.com/item?id=14191577
|
| https://news.ycombinator.com/item?id=20751074
|
| https://news.ycombinator.com/item?id=11402656
|
| https://news.ycombinator.com/item?id=12503851
|
| https://news.ycombinator.com/item?id=8804691
|
| https://news.ycombinator.com/item?id=30100427
|
| https://news.ycombinator.com/item?id=28686939
|
| https://news.ycombinator.com/item?id=17803451
| phkahler wrote:
| There is a nice C++ (GPLv3+) implementation of a lot of these
| algorithms in Solvespace here:
|
| https://github.com/solvespace/solvespace/blob/master/src/srf...
|
| I'll be having a read of this to see if we can improve on some of
| these. In particular I've wanting to add curve-curve intersection
| as in section 29:
|
| https://pomax.github.io/bezierinfo/#curveintersection
|
| I had already considered that exact approach, but there are cases
| (in CAD anyway) where portions of 2 curves may exactly overlap.
| In that case we'd want to identify the overlapping region and
| split the 2 curves into 3. These special cases might seem like
| corner cases and they are, but they come up in practice more than
| I'd like.
| polygotdomain wrote:
| They come up in practice a LOT actually. The challenge with
| curve/curve intersections boils down to tolerances. Visualize
| two circles with different radii, with the smaller circle
| inside the larger circle, that meet at a single point. When
| understanding those circles as primitives (centerpoint, radius)
| finding that intersection point is relatively trivial. However
| when simply thinking of these as arbitrary curves, we have a
| condition where those curves are getting progressively closer
| together, but it's really hard to tell if they exactly touch,
| and exactly where.
|
| Of course at a point we'll get close enough to consider there
| to be some intersection, but do we get "close enough" for a
| single point? for a portion of each of the curves? Does the
| result change with the scale of the circles? Does it scale when
| the relative radius between the circles changes? Making those
| kinds of judgement calls within the algorithms is really a
| challenge, but makes a huge difference when building a geometry
| library and for usability (for other developers, and end
| users). Knowing your use cases may be helpful in determining
| what's the right approach for these situations.
| phkahler wrote:
| >> we have a condition where those curves are getting
| progressively closer together, but it's really hard to tell
| if they exactly touch, and exactly where.
|
| OMG different curves and surfaces becoming tangent at a point
| is a huge pain. It's tempting to say that it tends to happen
| at the ends and can be checked for as a special case, or an
| algorithm tweaked based on that assumption, but then someone
| will find a perfectly reasonable construction that results in
| tangency at some arbitrary place and the problem returns.
| cpach wrote:
| Previously:
| https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...
| TheRealPomax wrote:
| I always wonder: why just drop a link like this in? Are you
| trying to let people know there are previous entries with
| comment threads that they might be interested in, or are you
| trying to shame folks for not knowing it got posted in the
| past? Or even something else altogether?
| cpach wrote:
| just in case anyone wanted to read the previous comments
| sydthrowaway wrote:
| I would forget Bezier and go straight to Catmull Rom. They're
| convertible.
| dahart wrote:
| Why's that? They're convertible but not equivalent; there's
| lots of things you can do with Bezier curves that you can't do
| with Catmull-Rom. Manually tweaking animation curves in a
| timeline is something that doesn't work with Catmull-Rom
| because of the lack of control over tangents. There are several
| other reasons but I'm curious to hear yours.
|
| Edit to clarify, you can convert Catmull-Rom strands to Bezier
| strands, but you cannot generally go the other way from Bezier
| to Catmull-Rom and still preserve connected segments.
| TheRealPomax wrote:
| Except now you gave yourself the problem of not having a curve
| that starts and ends at your first and last point. CR are
| great, but they are absolutely not a "better choice" than
| Bezier curves in myriad applications.
| pickledcods wrote:
| Slightly related: Closed Continuous Bezier Curves with on-curve
| control-points for a Much more intuitive interaction. It is also
| used to fit curves into arbitrary outlines like country/region
| borders.
|
| The project is heavily under construction, however the
| interactive examples are functional. The examples are intended
| for desktop, but should work with touchscreens.
|
| https://rockingship.github.io/ccbc/README.html
| samwillis wrote:
| Oh I do love a Bezier Curve post, the math and geometry behind
| them is just so beautiful.
|
| Bartosz Ciechanowski's one from last year is my favourite, a
| little less math heavy and goes on to explain other curves and
| surfaces: https://ciechanow.ski/curves-and-surfaces/
| sroussey wrote:
| Yes, this is my favorite Bezier Curves
| eveningtree wrote:
| Another beautifully explained piece on bezier curves is: The
| beauty of bezier curves by Freya Holmer
|
| https://youtu.be/aVwxzDHniEw
|
| Found this via a contest by Grant Sanderson, and it absolutely
| blew me away(and most people I forwarded it to)
| junon wrote:
| +1 to both to Freya and Bartosz, both are incredible
| knowledge sharers. I'm happy to see their names pop up on
| these sorts of things more frequently.
| chriswarbo wrote:
| Norman J Wildberger has a series of videos about Bezier curves
| (referring to them as "de Casteljau Bezier", or dCB, curves)
| https://www.youtube.com/watch?v=6LtMKObyKMs
|
| He's got hundreds of videos, from elementary school subjects up
| to research seminars, and they usually provide interesting
| perspectives even for familiar subjects, since he always tries to
| avoid using infinite sets, irrational numbers, limits, etc.
| (which he "doesn't believe in")
| wirrbel wrote:
| Interesting (I guess one can call it ,,religious") belief.
| nayuki wrote:
| This video tutorial is also good:
| https://www.youtube.com/watch?v=aVwxzDHniEw
| fcantournet wrote:
| Real good
| shahar2k wrote:
| knew Freya's video would show up on this post! her work is
| pretty fantastic, lots of great bits on shaders as well!
| dtjb wrote:
| Unrelated but similar, https://blog.maximeheckel.com/posts/cubic-
| bezier-from-math-t....
|
| Includes hands-on examples to help understand the math behind
| bezier curves.
| jacquesm wrote:
| I worked a lot with different curve generating algorithms when I
| was working in sail CAD design. If you can, avoid Bezier curves
| and use Splines. Far more predictable and much easier to
| construct with.
| counternotions wrote:
| Related, for a practical application of Bezier curves, they can
| be used to simulate human-like mouse movements to prevent bot
| detection (ie. aimbots, web scraping):
| https://github.com/vincentbavitz/bezmouse
| herodotus wrote:
| Good article but I found this remark at the start interesting:
| "The first of these are as easy to draw as they are easy to make
| a computer draw. Give a computer the first and last point in the
| line, and BAM! straight line. No questions asked."
|
| Ha! Of course every graphics API makes it easy, but there is much
| going on under the hood. (Um, do GPU's have hoods?) See
| "Bresenham's algorithm":
| https://en.wikipedia.org/wiki/Bresenham's_line_algorithm
| TheRealPomax wrote:
| Sure, but bresenham's algorithm is a highly optimized form of
| "drawing a line" in the same way that we can write a highly
| optimized forward prediction algorithm for Bezier curves and it
| will be more work than Bresenham's algorithm for lines.
|
| The basic "draw a line" is the incredibly simple "single lerp
| to get the next on-line pixel coordinate" (which for naive
| drawing, may be _the same_ coordinate, of course).
| jacquesm wrote:
| Bresenham's algorithm really is all about integer division,
| and its applications are far broader than just drawing a
| line. When I was still doing a lot of CAD work Bresenham's
| was the proverbial Swiss Army Knife, from stepper control
| across five axis (including rotation axis for thread cutting)
| to 3D visualization and all kinds of other odds and ends.
| akireu wrote:
| danielvaughn wrote:
| Over the past couple of weeks I've been diving into WebGL, and
| even at that level of abstraction (several layers higher than
| the GPU itself), the incredible complexity involved in
| rendering stuff to the screen becomes apparent. It's truly
| amazing.
| dahart wrote:
| For some reason that comment brings back memories of writing
| Basic on an Apple II when I was kid, where it only had "hlin"
| and "vlin" commands - only axis-aligned lines, no function for
| diagonal lines.
|
| Yeah the API counts as a hood, I would say modern GPUs and CPUs
| have multiple hoods... multiple API layers... hoods under
| hoods. It's hoods all the way down. :P
|
| An interesting generalization of Bresenham is the DDA
| https://en.wikipedia.org/wiki/Digital_differential_analyzer_...
| zajio1am wrote:
| There is a trivial interpretation of Bezier curves that helped me
| to understand them:
|
| Quadratic Bezier is just trajectory of a point with initial
| velocity and constant acceleration.
|
| Cubic Bezier is just trajectory of a point with initial velocity
| and acceleration, and constant change of acceleration.
|
| Direction to control points are just initial/final velocity.
| jacobolus wrote:
| An alternative would be to say: Bezier curves are parametric
| polynomial curves (represented in Bernstein basis rather than
| monomial basis).
|
| (A function with constant _n_ th derivative is a polynomial.)
| [deleted]
| laurensr wrote:
| Is it just me or do the sliders lose focus after the slightest
| change? This prevents me from dragging the slider to different
| values using my cursor to view the changes smoothly.
| TheRealPomax wrote:
| No one's reported that before so that might really just be you:
| please file an issue about it over on
| https://github.com/Pomax/BezierInfo-2/issues with some STR (and
| obviously os/browser/extensions information) and I can have a
| look.
| PaulHoule wrote:
| I used to think it was my fault that I struggled to draw things
| with Bezier curves but then I took a look at the resource packs
| for a game I respected (which had a flat art style that would
| have been a good fit for vectors) and found that my favorite
| character designers didn't know how to draw anime characters with
| Bezier curves either.
|
| That is, no matter how much art you know or math you know it is
| awkward to draw things with Bezier curves and it's a bit of a
| tragedy that NURBS and other curve families that are more
| intuitive to work with haven't caught on.
| jordigh wrote:
| I personally really like x-splines:
|
| https://inversethought.com/jordi/xsplines/
|
| I find them super-intuitive to use. The fact that at each node
| you can make it close, sharp, or interpolating is quite
| helpful. They're also not hard to implement. You can read my js
| code to see how I did it.
|
| They're implemented in Xfig and just about nowhere else. I wish
| they were elsewhere. I've been thinking about getting them into
| GNU IMP. Maybe some day I'll sit down and try to write patches
| for it.
| elcapitan wrote:
| I wouldn't think of Bezier curves as a design tool, they are
| more an implementation device. So design comes from some
| freestyle drawing, and then you implement it with a Bezier tool
| to set perfect and minimal curves (the minimal is a property
| that is important when designing fonts). But to go from blank
| to design with just the curves can be brutal, yes. There are
| also the usual free drawing tools which allow you to draw lines
| freely and then approximate them automatically with curves, but
| that can be imprecise and murky.
|
| The first implementations of digital fonts (before the DTP time
| with Adobe/Apple/Microsoft) were also using other types of
| curves, but Beziers won, I think because they are much more
| efficient to calculate, which was particularly important in the
| 90s (as the next step after bitmap fonts).
| PaulHoule wrote:
| Right, if you were going to design with NURBS or something
| like that you would probably approximate them with Bezier
| when you deploy them.
|
| For all the complaints that people have about PDF files my
| favorite is that PDF doesn't have a primitive to draw circles
| (generally conics) so a 'circle' in a PDF file is always some
| combination of Bezier curves.
|
| One application I like for Beziers is easing curves for
| animations, dimming lights, etc. Unlike the 2-d drawing case
| I feel like I can always get the effect I want without a
| fight.
| mabub24 wrote:
| > it is awkward to draw things with Bezier curves
|
| I guess? I think most designers are so used to using the pen
| tools and problem solving with them that they start to become
| intuitive after a while. There's a bit of a learning curve (pun
| intended), but I think once you understand how they are
| implemented in Adobe products, for instance, they become pretty
| simple.
|
| This Bezier game is excellent practice:
| https://bezier.method.ac/
| jacobolus wrote:
| Beziers never become intuitive, even for professional font
| designers and illustrators with decades of experience. If you
| start paying attention you will find that almost every expert
| regularly makes lumpy curves with them, with lumpiness
| unrelated to their original artistic intentions, just an
| artifact of a tool that poorly matches people's goals and
| expectations.
|
| To always get "fair" curves using Bezier segments requires an
| extreme amount of effort, and either a very good eye and a
| lot of experience or some additional tooling that highlights
| where the lumps are.
| pickledcods wrote:
| > it is awkward to draw things with Bezier curves
|
| Sorry for repeating my comment, but you really should check out
| the the interactive examples of the closed bezier curves (which
| could also be open). They were designed to be intuitive as the
| control points are on curve.
|
| The project is is in its infancy, yet the interactive examples
| are working. https://rockingship.github.io/ccbc/README.html
| [deleted]
| andrewnc wrote:
| So, let's say I want to implement these (or other) curves into a
| drawing program. How do I go about doing that? I mean to say, I
| want to implement a brush on canvas type interface - how do
| Bezier curves fit into that?
|
| Do I collect points when mouse is down and build a curve with
| those points? Do I get some other path information and rasterize?
|
| I'm trying to write my own drawing program (for fun) but given my
| lack of background in this I feel myself floundering.
| valine wrote:
| I'd look at other programs for inspiration. Blender for example
| allows you to place the anchor point and then gives you the
| option for how many segments you want connecting the anchors.
| Turning the resolution up and down gives you a feel for how
| many subdivisions you'll need for a smooth curve.
|
| At the very least you'll need a UI for placing the anchors and
| handles, but how the UI works is really subjective. Your next
| step is to take those anchors and desired resolution and
| generate a list of vertices. After that it's just an exercise
| in rasterization.
___________________________________________________________________
(page generated 2022-01-27 23:01 UTC)