
A Primer on Bézier Curves - mabynogy
https://pomax.github.io/bezierinfo#preface
======
artursapek
I 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/coffe...](https://github.com/artursapek/mondrian/blob/master/src/coffee/geometry/cubic-
bezier-line-segment.coffee#L397)

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
What the heck...!?! I would really love for someone to explain how something
like this happens.

~~~
phkahler
It happens because the curves are not polynomials in the normal sense. The
parameter t that ranges from [0..1] is not the same between the two curves, so
it is not equivalent to setting two polynomials equal to each other and
solving for x, or t in this case. A solution to the intersection is equivalent
to solving for the t parameter of both curves simultaneously and IIRC that
ends up having an order that is the product of the orders of the curves (9th
order for 2 cubics?). On second thought it's not the product, but it is
definitely much higher order. That is the reason people use the matrix
representations, once you get a feel for that the complexity tends to get
hidden by representing an entire matrix of Nth order polynomials by a letter
like B.

If anyone is really interested in this stuff and wants to make a major
contribution to open source software... First study these and then move on to
NURBS, surfaces, and then trimmed NURBS surfaces. These are the core of all
CAD software and a clean library for trimmed NURBS is sorely lacking. There
are two that I'm aware of, the one in OpenCascade which is a huge ball of mud
(but works) and the one in SolveSpace which doesn't scale well and has some
other limitations - that is the one I feel is most worthy of someones time.

~~~
blt
NLib is the gold standard in closed-source, right?

~~~
colomon
Disclaimer: I am financially tied to NLib's current distributor.

NLib has a lot of sophisticated NURBS math tools. It was literally written by
one of the men who wrote The NURBS Book.

As far as I know, it doesn't do anything much for trimmed NURBS surfaces, in
the sense of a surface trimmed by an arbitrary series of curves. (Might be a
tessellation routine for that case?) Basically it is mostly geometry, with
only very limited topology support.

There are lots of products which provide geometry & topology support: SMLib,
SOLIDS++, Acis, and Parasolid come to mind. The first two are built on NLib. I
don't think any of them have as sophisticated NURBS geometry tools as NLib
does. (Except to the extent that you can call NLib routines directly with the
first two.)

I'm not aware of any commercial product which directly competes with NLib at
all. Which doesn't mean one doesn't exist! I'd be interested if anyone has
experience with other libraries.

------
TheRealPomax
Pomax (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
You'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)

~~~
aidos
Excuse the pedantry: Biennial is every 2 years ;-)

~~~
TheRealPomax
Additional pedantry: while biennial does exclusively mean "once every two
years", biannual is not strictly speaking wrong. However, quite
inconveniently, like most "bi-[time span]" words, biannual can mean either
twice a year or once every two years.

~~~
mxfh
I actually had it first with biennial, but thought but that would be the word
for the event (like the italian _Biennale_ ) not the time interval, since it
sounded weird as an adjective. Oh the ambivalence; yet listing the years
should make the intent obvious.

Also if you use search, there are some more high profile SVG related posts
that don't follow that made up pattern.

------
seanalltogether
It never fully clicked for me until I saw it animated
[https://www.jasondavies.com/animated-
bezier/](https://www.jasondavies.com/animated-bezier/)

~~~
melling
I've got a few other references on Bezier curves, including a link to a
previous HN conversation:

[https://github.com/melling/ComputerGraphics/blob/master/bezi...](https://github.com/melling/ComputerGraphics/blob/master/bezier.org)

------
klibertp
This 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
Always happy to hear the primer made a difference in someone's life =)

------
combatentropy

      > 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
Hmm, 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?

------
_eLRIC
Pierre 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

------
Washuu
I 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
Oh that's cool - it's always great to see the primer having helped in making a
thing!

------
retox
Look at the archives, this link has been doing the rounds for at least 6 years
now.

~~~
raphlinus
That 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
My 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
Good 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.

------
athenot
I 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!

------
pyromine
Lovely 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.

------
azeirah
> 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
Bresenham'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
Plus Bresenham is for doing things just using integer math, with floats
rasterizing a line is little more than straightforward linear interpolation.

------
legulere
I 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).

------
fogleman
This came in very handy for me on one of my side projects, specifically
finding intersections between curves. Excellent content.

