mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-02-24 01:22:26 +01:00
178 lines
9.5 KiB
HTML
178 lines
9.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>A Primer on Bézier Curves</title>
|
|
|
|
<!-- mobile optimize -->
|
|
<meta name="viewport" content="width=800, initial-scale=1.0">
|
|
|
|
<!-- opengraph information -->
|
|
<meta property="og:title" content="A Primer on Bézier Curves">
|
|
<meta property="og:type" content="text">
|
|
<meta property="og:url" content="http://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">
|
|
|
|
<style>
|
|
html, body, article { height: 100%; margin: 0; }
|
|
body { width: 800px; margin: auto; font-size: 4.25mm!important; }
|
|
</style>
|
|
|
|
<link rel="stylesheet" href="stylesheets/style.css">
|
|
</head>
|
|
<body>
|
|
<!-- in page localization -->
|
|
<script src="https://localize-bezierinfo.herokuapp.com/pontoon.js"></script>
|
|
|
|
<div class="dev">
|
|
<style>
|
|
div.dev {
|
|
background: rgb(43, 49, 95);
|
|
color: rgb(81, 181, 255);
|
|
position: fixed;
|
|
transform: rotate(-45deg);
|
|
width: 22em;
|
|
text-align: center;
|
|
top: 4em;
|
|
left: -6em;
|
|
font-variant: small-caps;
|
|
font-weight: bolder;
|
|
font-family: Helvetica;
|
|
box-shadow: 0px 5px 7px 2px rgba(0, 0, 0, 0.3);
|
|
}
|
|
</style>
|
|
DEV PREVIEW ONLY
|
|
</div>
|
|
|
|
<!-- Because people probably want to share this article -->
|
|
<div class="sharebuttons">
|
|
<style>
|
|
div.sharebuttons {
|
|
position: fixed;
|
|
top: 1rem;
|
|
left: 1rem;
|
|
padding: 0.1em;
|
|
background: white;
|
|
}
|
|
div.sharebuttons img {
|
|
min-width: 1.25rem;
|
|
min-height: 1.25rem;
|
|
max-height: 1.25rem;
|
|
}
|
|
}
|
|
</style>
|
|
<a href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
|
|
<img src="https://www.redditstatic.com/spreddit1.gif" alt="submit to reddit" title="submit to reddit">
|
|
</a>
|
|
<a href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
|
|
<img src="https://news.ycombinator.com/y18.gif" alt="submit to hacker news" title="submit to hacker news">
|
|
</a>
|
|
<a href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
|
|
<img src="https://abs.twimg.com/favicons/favicon.ico" alt="tweet your read" title="tweet your read">
|
|
</a>
|
|
</div>
|
|
|
|
<!-- referral tracking, because I like knowing who's linking to my book -->
|
|
<script src="lib/site/referrer.js" async></script>
|
|
|
|
<article>
|
|
<div id="article">
|
|
<!-- these rules will get overwritten by the style in the article.js React bundle -->
|
|
<style>
|
|
header h1, header h2 { text-align: center; }
|
|
header h1 { font-size: 300%; margin: 0.2em; }
|
|
p.jsnote { margin: 2em; text-align: justify; }
|
|
p.jsnote:first-child { width: 13em; margin: auto; }
|
|
</style>
|
|
|
|
<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>
|
|
</header>
|
|
|
|
<!-- This content only shows for as long as JS/React hasn't loaded the page content -->
|
|
<section>
|
|
<p class="jsnote">Loading the article<span id="loader">...</span></p>
|
|
|
|
<p class="enabling jsnote">If you have JavaScript disabled, you'll have to enable it, as this book heavily relies on JS rendering, both for the base content (it's been written as a React application) and all the interactive graphics, which rely on JS not just for the user interaction but also for the live-drawing (none of the graphics in this book are flat images, they're all live-rendered).</p>
|
|
|
|
<script>var n=document.querySelector(".enabling");n.parentNode.removeChild(n);(function update(el,str){str=(str.length===3)?'':str+'.';el.textContent=str;setTimeout(function(){update(el,str);},333);}(document.querySelector("#loader"),"..."));</script>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 id="preface">Preface</h2>
|
|
|
|
<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's 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 getting them known to the world as a curve
|
|
well-suited for design work (working for Renault and publishing his investigations in 1962),
|
|
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, investigating the nature of these curves in 1959 while working at
|
|
Citroën, coming 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>,
|
|
with publications on them at least as far back as 1912. 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>So, 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>
|
|
|
|
<p>—Pomax (or in the tweetworld, <a href="https://twitter.com/TheRealPomax">@TheRealPomax</a>)</p>
|
|
|
|
<div className="note">
|
|
<h2>This book is open source.</h2>
|
|
|
|
<p>This book is an open source software project, and lives on two github repositorites. 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>Questions, comments:</h2>
|
|
|
|
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.
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- the actual article is a JS bundle -->
|
|
<script src="article.js" async></script>
|
|
</body>
|
|
</html>
|