
Secrets of smooth Béziers - zengid
https://raphlinus.github.io/curves/2018/12/08/euler-spiral.html
======
benrbray
See also Pomax's "A Primer on Bezier Curves":

[https://pomax.github.io/bezierinfo/](https://pomax.github.io/bezierinfo/)

~~~
jammygit
Pomax is my personal saint. I cloned his repo a few months ago to make sure I
never lose this wonderful ebook

~~~
TheRealPomax
I'm not sure I'm entirely comfortable with that, but I _am_ always happy that
something I wrote is making a difference =)

------
kowdermeister
I like how it instantly has the discuss in HN link and it's on the front page
:)

Bézier curves seemed to me a bit weird too, but this video made it crystal
clear:

[https://www.youtube.com/watch?v=dXECQRlmIaE](https://www.youtube.com/watch?v=dXECQRlmIaE)

------
bezieio
I'm in full agreement that bezier curves are hard to learn to use well! I
created an app called Bezie ([http://bezie.io/](http://bezie.io/)) about a
year ago in which you could create quadratic and cubic bezier MIDI automation.
I ended up not including it in the release, but I had a smoothness feature
where it'd basically update the amount of steps that it'd pass to the
interpolate function (using De Casteljau's algorithm). The more steps the
higher the curve resolution. I found 64 steps to be somewhat of a magic number
as it always looked and sounded smooth. There's also the balance of how many
times you want the interpolate function to run while dragging points. With too
high a resolution it gets CPU intensive and lags and with too low it starts
getting boxy and no longer represents a curve. It's been on my plate to open
source the app. It includes some helpful math for deriving control points
while dragging points on the curve. Anyhow, nice post and thanks for sharing!

~~~
jamesb93
Ever thought of making this work with OSC? Then you can get more resolution on
the control curves.

~~~
bezieio
I got motivated today after this post and finally open sourced Bezie! If
anyone wants to see some of the bezier logic I used you can check that out in
`app/utils`.
[https://github.com/jperler/bezie](https://github.com/jperler/bezie)

------
zengid
I'm certain that Raph is a Renaissance man.

~~~
raphlinus
Fun fact that I came across while researching this. Hobby's PhD work (which I
probably should have cited) was reviewed by one Kevin Karplus, who is perhaps
best known for his role in the Karplus-Strong algorithm for plucked string
sound synthesis.

[http://i.stanford.edu/pub/cstr/reports/cs/tr/85/1047/CS-
TR-8...](http://i.stanford.edu/pub/cstr/reports/cs/tr/85/1047/CS-
TR-85-1047.pdf)

~~~
hendrikw
I implemented that once, if I remember right, it was a huge pain to read
because the OCR messed up many of the symbols. Hobby splines look pretty nice
though.

~~~
raphlinus
Actually
[https://link.springer.com/content/pdf/10.1007%2FBF02187690.p...](https://link.springer.com/content/pdf/10.1007%2FBF02187690.pdf)
is probably a better source, it's an image of the original paper.

------
undershirt
Is this an accurate summary?

Spiro curves are necessarily smooth, but beziers aren't. To show what makes
beziers smooth, you created a viz that maps spiro curves to their bezier
equivalents:

    
    
      *   x,y = spiro curve angles
      * color = bezier handle lengths (to best approximate spiro)
    

The abrupt changes in color in the image reveal the difficulty in creating
smooth bezier curves—because it forces abrupt changes in handle lengths for
small angle changes.

~~~
raphlinus
Yes, that's about right. The only thing I'd qualify is that Spiro contains
Euler spiral segments but also other things, especially smooth straight-to-
curved transitions. This is only about the first, but the others are also
important to font design. I wanted to keep it simple though.

------
pontifier
The Euler spiral seems very similar to a curve I was generating in a stepwise
manner while doing self driving car work.

I was trying to generate the path the vehicle would follow if you were driving
at a constant speed, and start turning the steering wheel at a constant rate.
The full curve would then see you holding that angle, then returning the wheel
to center.

After brute forcing this curved portion, I was able to solve a linear algebra
problem to determine how far to drive during these straight segments to
smoothly enter a parking spot with exactly 3 turns: 2 arbitrary turns, and a
3rd that brings the vehicle to the correct angle.

After brute forcing each combo of the first 2 turns, throwing the path through
a weighted fitness function that minimised travel, and penalized reverse
moves, while at the same time checking for collisions, it would spit out a
very simple and elegant parking plan.

------
lindig
The interactive tool linked in the article does not work in Safari for me. I
does work in Chromium.

[https://levien.com/euler_explorer/](https://levien.com/euler_explorer/)

~~~
the_grue
Neither in Firefox...

~~~
zengid
Works fine for me in Fox.. Are you on nightly?

~~~
the_grue
I'm using FF 56, since that's the last version to support the old extensions.
Sorry, should've mentioned it.

~~~
TJSomething
Ah. They're using the pointerdown event, which was added in Firefox 59
([https://developer.mozilla.org/en-
US/docs/Web/API/GlobalEvent...](https://developer.mozilla.org/en-
US/docs/Web/API/GlobalEventHandlers/onpointerdown)).

~~~
raphlinus
Right, this is also why it doesn't work in Safari. That's fixed now, but
imperfectly (I don't know how to do the equivalent of setPointerCapture in
ancient browsers, and also it only adds a mouse, not a touch handler, so still
doesn't work in mobile Safari). Thanks!

------
aidos
I always liked this interactive page to get an intuition.

[https://www.jasondavies.com/animated-
bezier/](https://www.jasondavies.com/animated-bezier/)

~~~
lkuty
Yes I like it too. I think this one is better because we also get the math.

[http://jamie-wong.com/post/bezier-curves/](http://jamie-wong.com/post/bezier-
curves/)

~~~
aidos
Oh nice! Thanks for the link.

------
maire
Would it be easier to use rational beziers (NURBS) rather than just beziers?

~~~
jacobolus
Easier for what?

Rational curves give you another degree of freedom. CAD people like them
because they can exactly represent conics.

Neither polynomials nor NURBS are IMO especially intuitive to work with as a
design tool. As an approximate output target I think cubic polynomials are
okay: a few cubic segments strung together are plenty flexible for typical
drawing/modeling purposes.

~~~
maire
"Easier for what?" is a legitimate question. I also had the question after I
submitted my question because the "for what" wasn't specified in the article.
If the target application only takes beziers, then that is the only tool you
have.

My original question was that a rational bezier would be easier to use since a
rational bezier would make an exact representation of a Euler Curve instead of
an approximate representation.

I agree with you that full NURBs are difficult. But if you ignore the "Non
Uniform" (NU) part of NURBs and just use the "Rational BSpline" (RB) part of
NURBs then they are as easy to use as just beziers. The rational term just
means a projection from n+1 space to n space. It is what gives an exact
representation of a conic.

If you want to fully model the parametric equation then you would need the
"non uniform" part. I don't know why you would want to do this since you can
analyze the original curve directly.

~~~
jacobolus
You cannot represent a section of an Euler spiral exactly with a polynomial or
rational function.

You can make a fine approximation if you either (a) increase the degree of the
polynomial or (b) increase the number of segments.

There is no particular advantage of NURBS for this vs. polynomials as far as I
can tell.

~~~
maire
You are right.

I just came across this article which talks about using rational cubic
trigonometric Bézier curves.

[https://link.springer.com/article/10.1186/s40064-016-2544-3](https://link.springer.com/article/10.1186/s40064-016-2544-3)

~~~
jacobolus
I don’t really see the point of this paper.

The reason to try to approximate Euler spirals by Bézier curves is that Bézier
curves are ubiquitous in existing implementations. Trigonometric Bézier curves
([https://ac.els-
cdn.com/S0893965908001262/1-s2.0-S08939659080...](https://ac.els-
cdn.com/S0893965908001262/1-s2.0-S0893965908001262-main.pdf?_tid=8924d36c-e3b8-40a2-8e39-946f8ff09f00&acdnat=1544395363_14596f5d6adba170cd34f4745364919e))
are not to my knowledge implemented anywhere.

------
microbians
Very very interesting papers, will deep on it this week. Also I'm interested
on this Baziers and here is my papers about "Quadratic bezier through three
points and the -equivalent quadratic bezier-" and "Quadratic bezier offsetting
with selective subdivision" here →
[http://microbians.com/?page=math](http://microbians.com/?page=math)

