info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-31 20:11:59 +02:00
Code Issues Releases Wiki Activity

tweaks

Browse Source
This commit is contained in:
Pomax
2016-02-20 17:50:30 -08:00
parent dda27c123b
commit a65d5a437d
11 changed files with 509 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
index.html
View File

@@ -4,6 +4,9 @@
<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">
@@ -44,6 +47,9 @@
DEV PREVIEW ONLY
</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 -->
@@ -60,37 +66,81 @@
</header>
<!-- This content only shows for as long as JS/React hasn't loaded the page content -->
<p class="jsnote">Loading book content<span id="loader">...</span></p>
<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>
<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>
<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>
<section id="comments">
<style>
#comments {
margin-top: 0px;
width: calc(960px + 2em);
border-top: 1px solid rgba(255, 0, 0, 0.5);
padding-top: 3em;
}
</style>
<h2>Comments and questions</h2>
<div id="disqus_thread"></div>
</section>
<!-- Disqus commenting -->
<script src="lib/site/disqus.js" async></script>
<!-- referral tracking, because I like knowing who's linking to my book -->
<script src="lib/site/referrer.js" async></script>
<!-- the actual article is a JS bundle -->
<script src="article.js" async></script>
<!-- Disqus commenting -->
<script src="lib/site/disqus.js"></script>
</body>
</html>