mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-02-22 16:50:13 +01:00
384 lines
18 KiB
HTML
384 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-GB">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
<title>A Primer on Bézier Curves</title>
|
|
<link rel="shortcut icon" href="favicon.png" type="image/png" />
|
|
|
|
<!-- opengraph information -->
|
|
<meta property="og:title" content="A Primer on Bézier Curves" />
|
|
<meta
|
|
property="og:image"
|
|
content="https://pomax.github.io/bezierinfo/images/og-image.png"
|
|
/>
|
|
<meta property="og:type" content="text" />
|
|
<meta property="og:url" content="https://pomax.github.io/bezierinfo" />
|
|
<meta
|
|
property="og:description"
|
|
content="A detailed explanation of Bézier curves, and how to do the many things that we commonly want to do with them."
|
|
/>
|
|
<meta property="og:locale" content="en-GB}}" />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:published_time" content="2013-06-13 12:00:00" />
|
|
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
|
|
<meta property="og:section" content="Bézier Curves" />
|
|
<meta property="og:tag" content="Bézier Curves" />
|
|
|
|
<!-- my own referral/page hit tracker -->
|
|
<script src="./lib/site/referrer.js" type="module" async></script>
|
|
|
|
<!-- the part that makes interactive graphics work: an HTML5 <graphics-element> custom element -->
|
|
<script
|
|
src="./lib/custom-element/graphics-element.js"
|
|
type="module"
|
|
async
|
|
defer
|
|
></script>
|
|
<link rel="stylesheet" href="./lib/custom-element/graphics-element.css" />
|
|
|
|
<!-- page styling -->
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<h1>A Primer on Bézier Curves</h1>
|
|
<h2>
|
|
A free, online book for when you really need to know how to do Bézier
|
|
things.
|
|
</h2>
|
|
<span>Read this in your own language:</span>
|
|
<ul>
|
|
<li><a href="./index.html">English</a></li>
|
|
<li><a href="ja-JP/index.html">日本語</a></li>
|
|
<li><a href="zh-CN/index.html">中文</a></li>
|
|
</ul>
|
|
<span
|
|
>Don't see your language listed?
|
|
<a href="https://github.com/Pomax/BezierInfo-2/wiki/localize"
|
|
>Help translate this content!</a
|
|
></span
|
|
>
|
|
</header>
|
|
|
|
<main>
|
|
<section id="preface">
|
|
<section id="preface">
|
|
<h1>Preface</h1>
|
|
<p>
|
|
In order to draw things in 2D, we usually rely on lines, which
|
|
typically get classified into two categories: straight lines, and
|
|
curves. 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.
|
|
</p>
|
|
<p>
|
|
Curves, however, are a much bigger problem. While we can draw curves
|
|
with ridiculous ease freehand, computers are a bit handicapped in
|
|
that they can't draw curves unless there is a mathematical function
|
|
that describes how it should be drawn. 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; all lines are
|
|
"functions", regardless of whether they're straight or curves.
|
|
However, that does mean that we need to come up with fast-to-compute
|
|
functions that lead to nice looking curves on a computer. There are
|
|
a number of these, and in this article we'll focus on a particular
|
|
function that has received quite a bit of attention and is used in
|
|
pretty much anything that can draw curves: Bézier curves.
|
|
</p>
|
|
<p>
|
|
They're named after
|
|
<a href="https://en.wikipedia.org/wiki/Pierre_B%C3%A9zier"
|
|
>Pierre Bézier</a
|
|
>, who is principally responsible for making them known to the world
|
|
as a curve well-suited for design work (publishing his
|
|
investigations in 1962 while working for Renault), although he was
|
|
not the first, or only one, to "invent" these type of curves. One
|
|
might be tempted to say that the mathematician
|
|
<a href="https://en.wikipedia.org/wiki/Paul_de_Casteljau"
|
|
>Paul de Casteljau</a
|
|
>
|
|
was first, as he began investigating the nature of these curves in
|
|
1959 while working at Citroën, and came up with a really elegant way
|
|
of figuring out how to draw them. However, de Casteljau did not
|
|
publish his work, making the question "who was first" hard to answer
|
|
in any absolute sense. Or is it? Bézier curves are, at their core,
|
|
"Bernstein polynomials", a family of mathematical functions
|
|
investigated by
|
|
<a href="https://en.wikipedia.org/wiki/Sergei_Natanovich_Bernstein"
|
|
>Sergei Natanovich Bernstein</a
|
|
>, whose publications on them date back at least as far as 1912.
|
|
</p>
|
|
<p>
|
|
Anyway, that's mostly trivia, what you are more likely to care about
|
|
is that these curves are handy: you can link up multiple Bézier
|
|
curves so that the combination looks like a single curve. If you've
|
|
ever drawn Photoshop "paths" or worked with vector drawing programs
|
|
like Flash, Illustrator or Inkscape, those curves you've been
|
|
drawing are Bézier curves.
|
|
</p>
|
|
<p>
|
|
But what if you need to program them yourself? What are the
|
|
pitfalls? How do you draw them? What are the bounding boxes, how do
|
|
you determine intersections, how can you extrude a curve, in short:
|
|
how do you do everything that you might want when you do with these
|
|
curves? That's what this page is for. Prepare to be mathed!
|
|
</p>
|
|
<div className="print">
|
|
## PS: buy me a coffee?
|
|
|
|
<p>
|
|
If you enjoyed this book enough to print it out, you might be
|
|
wondering if there is some way to give something back. To answer
|
|
that question: you can always buy me a coffee, however-much a
|
|
coffee is where you live, or if you want to pay a fair price for
|
|
this book, you can buy me a really expensive coffee =)
|
|
</p>
|
|
<p>
|
|
This book has grown over the years from a short primer to a 100+
|
|
print-page-equivalent ebook on the subject of Bézier curves, and a
|
|
lot of coffee went into the making of it. I don't regret a minute
|
|
I spent on writing it, but I can always do with some more coffee
|
|
to keep on writing! Please visit
|
|
<a href="https://pomax.github.io/bezierinfo"
|
|
>https://pomax.github.io/bezierinfo</a
|
|
>
|
|
and click on the link in the online preface to donate some coffee
|
|
money.
|
|
</p>
|
|
</div>
|
|
|
|
<p>
|
|
—Pomax (or in the tweetworld,
|
|
<a href="https://twitter.com/TheRealPomax">@TheRealPomax</a>)
|
|
</p>
|
|
<div className="note">
|
|
<h2>Note: virtually all Bézier graphics are interactive.</h2>
|
|
<p>
|
|
This page uses interactive examples, relying heavily on
|
|
<a href="http://pomax.github.io/bezierjs">Bezier.js</a>, as well
|
|
as maths formulae which are typeset into SVG using the
|
|
<a href="https://ctan.org/pkg/xetex">XeLaTeX</a> typesetting
|
|
system and
|
|
<a href="https://github.com/dawbarton/pdf2svg">pdf2svg</a> by
|
|
<a href="http://www.cityinthesky.co.uk/">David Barton</a>. The
|
|
page is generated offline as a React application.
|
|
</p>
|
|
<h2>This book is open source.</h2>
|
|
<p>
|
|
This book is an open source software project, and lives on two
|
|
github repositories. The first is
|
|
<a href="https://github.com/pomax/bezierinfo"
|
|
>https://github.com/pomax/bezierinfo</a
|
|
>
|
|
and is the purely-for-presentation version you are viewing right
|
|
now. The other repository is
|
|
<a href="https://github.com/pomax/BezierInfo-2"
|
|
>https://github.com/pomax/BezierInfo-2</a
|
|
>, which is the development version, housing all the HTML,
|
|
JavaScript, and CSS. You can fork either of these, and pretty much
|
|
do with them as you please, except for passing it off as your own
|
|
work wholesale, of course =)
|
|
</p>
|
|
<h2>How complicated is the maths going to be?</h2>
|
|
<p>
|
|
Most of the mathematics in this Primer are early high school
|
|
maths. If you understand basic arithmetic, and you know how to
|
|
read English, you should be able to get by just fine. There will
|
|
at times be <em>far</em> more complicated maths, but if you don't
|
|
feel like digesting them, you can safely skip over them by either
|
|
skipping over the "detail boxes" in section or by just jumping to
|
|
the end of a section with maths that looks too involving. The end
|
|
of sections typically simply list the conclusions so you can just
|
|
work with those values directly.
|
|
</p>
|
|
<h2>Questions, comments:</h2>
|
|
<p>
|
|
If you have suggestions for new sections, hit up the
|
|
<a href="https://github.com/pomax/BezierInfo-2/issues"
|
|
>Github issue tracker</a
|
|
>
|
|
(also reachable from the repo linked to in the upper right). If
|
|
you have questions about the material, there's currently no
|
|
comment section while I'm doing the rewrite, but you can use the
|
|
issue tracker for that as well. Once the rewrite is done, I'll add
|
|
a general comment section back in, and maybe a more topical
|
|
"select this section of text and hit the 'question' button to ask
|
|
a question about it" system. We'll see.
|
|
</p>
|
|
<h2>Help support the book!</h2>
|
|
<p>
|
|
If you enjoyed this book, or you simply found it useful for
|
|
something you were trying to get done, and you were wondering how
|
|
to let me know you appreciated this book, you have two options:
|
|
you can either head on over to the
|
|
<a href="https://patreon.com/bezierinfo">Patreon page</a> for this
|
|
book, or if you prefer to make a one-time donation, head on over
|
|
to the
|
|
<a
|
|
href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QPRDLNGDANJSW"
|
|
>buy Pomax a coffee</a
|
|
>
|
|
page. This work has grown from a small primer to a 100-plus
|
|
print-page-equivalent reader on the subject of Bézier curves over
|
|
the years, and a lot of coffee went into the making of it. I don't
|
|
regret a minute I spent on writing it, but I can always do with
|
|
some more coffee to keep on writing!
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
<section id="toc">
|
|
<h1>Table of Contents</h1>
|
|
<ol>
|
|
<li><a href="#introduction">A lightning introduction</a></li>
|
|
<li><a href="#whatis">So what makes a Bézier Curve?</a></li>
|
|
</ol>
|
|
</section>
|
|
|
|
<section id="changelog"></section>
|
|
|
|
<section id="chapters">
|
|
<section id="introduction">
|
|
<h1>A lightning introduction</h1>
|
|
<p>
|
|
Let's start with the good stuff: when we're talking about Bézier
|
|
curves, we're talking about the things that you can see in the
|
|
following graphics. They run from some start point to some end
|
|
point, with their curvature influenced by one or more "intermediate"
|
|
control points. Now, because all the graphics on this page are
|
|
interactive, go manipulate those curves a bit: click-drag the
|
|
points, and see how their shape changes based on what you do.
|
|
</p>
|
|
<div class="figure">
|
|
<graphics-element
|
|
title="A quadratic Bézier curve"
|
|
width="275"
|
|
height="275"
|
|
src="./chapters/introduction/quadratic.js"
|
|
>
|
|
<fallback-image>
|
|
<img
|
|
src="./chapters/introduction/quadratic.png"
|
|
width="275"
|
|
height="275"
|
|
/>
|
|
<span>Scripts are disabled. Showing fallback image.</span>
|
|
</fallback-image>
|
|
</graphics-element>
|
|
|
|
<graphics-element
|
|
title="A cubic Bézier curve"
|
|
width="275"
|
|
height="275"
|
|
src="./chapters/introduction/cubic.js"
|
|
>
|
|
<fallback-image>
|
|
<img
|
|
src="./chapters/introduction/cubic.png"
|
|
width="275"
|
|
height="275"
|
|
/>
|
|
<span>Scripts are disabled. Showing fallback image.</span>
|
|
</fallback-image>
|
|
</graphics-element>
|
|
</div>
|
|
|
|
<p>
|
|
These curves are used a lot in computer aided design and computer
|
|
aided manufacturing (CAD/CAM) applications, as well as in graphic
|
|
design programs like Adobe Illustrator and Photoshop, Inkscape,
|
|
GIMP, etc. and in graphic technologies like scalable vector graphics
|
|
(SVG) and OpenType fonts (TTF/OTF). A lot of things use Bézier
|
|
curves, so if you want to learn more about them... prepare to get
|
|
your learn on!
|
|
</p>
|
|
</section>
|
|
<section id="whatis">
|
|
<h1>So what makes a Bézier Curve?</h1>
|
|
<p>
|
|
Playing with the points for curves may have given you a feel for how
|
|
Bézier curves behave, but what <em>are</em> Bézier curves, really?
|
|
There are two ways to explain what a Bézier curve is, and they turn
|
|
out to be the entirely equivalent, but one of them uses complicated
|
|
maths, and the other uses really simple maths. So... let's start
|
|
with the simple explanation:
|
|
</p>
|
|
<p>
|
|
Bézier curves are the result of
|
|
<a href="https://en.wikipedia.org/wiki/Linear_interpolation"
|
|
>linear interpolations</a
|
|
>. That sounds complicated but you've been doing linear
|
|
interpolation since you were very young: any time you had to point
|
|
at something between two other things, you've been applying linear
|
|
interpolation. It's simply "picking a point between two points".
|
|
</p>
|
|
<p>
|
|
If we know the distance between those two points, and we want a new
|
|
point that is, say, 20% the distance away from the first point (and
|
|
thus 80% the distance away from the second point) then we can
|
|
compute that really easily:
|
|
</p>
|
|
<img
|
|
className="LaTeX SVG"
|
|
src="images/latex/0ee04e4056391f945c1c21c1174a03b5.svg"
|
|
width="507px"
|
|
height="103px"
|
|
/>
|
|
<p>
|
|
So let's look at that in action: the following graphic is
|
|
interactive in that you can use your up and down arrow keys to
|
|
increase or decrease the interpolation ratio, to see what happens.
|
|
We start with three points, which gives us two lines. Linear
|
|
interpolation over those lines gives us two points, between which we
|
|
can again perform linear interpolation, yielding a single point. And
|
|
that point —and all points we can form in this way for all ratios
|
|
taken together— form our Bézier curve:
|
|
</p>
|
|
<graphics-element
|
|
title="Linear Interpolation leading to Bézier curves"
|
|
width="825"
|
|
height="275"
|
|
src="./chapters/whatis/interpolation.js"
|
|
>
|
|
<fallback-image>
|
|
<img
|
|
src="./chapters/whatis/interpolation.png"
|
|
width="825"
|
|
height="275"
|
|
/>
|
|
<span>Scripts are disabled. Showing fallback image.</span>
|
|
</fallback-image>
|
|
</graphics-element>
|
|
|
|
<p>And that brings us to the complicated maths: calculus.</p>
|
|
<p>
|
|
While it doesn't look like that's what we've just done, we actually
|
|
just drew a quadratic curve, in steps, rather than in a single go.
|
|
One of the fascinating parts about Bézier curves is that they can
|
|
both be described in terms of polynomial functions, as well as in
|
|
terms of very simple interpolations of interpolations of [...].
|
|
That, in turn, means we can look at what these curves can do based
|
|
on both "real maths" (by examining the functions, their derivatives,
|
|
and all that stuff), as well as by looking at the "mechanical"
|
|
composition (which tells us, for instance, that a curve will never
|
|
extend beyond the points we used to construct it).
|
|
</p>
|
|
<p>
|
|
So let's start looking at Bézier curves a bit more in depth: their
|
|
mathematical expressions, the properties we can derive from them,
|
|
and the various things we can do to, and with, Bézier curves.
|
|
</p>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<!-- ...code goes here... -->
|
|
</footer>
|
|
</body>
|
|
</html>
|