mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-01-17 21:49:16 +01:00
171 lines
13 KiB
HTML
171 lines
13 KiB
HTML
<!-- AUTOGENERATED CONTENT, PLEASE EDIT 'index.template.html' INSTEAD! -->
|
|
<!-- AUTOGENERATED CONTENT, PLEASE EDIT 'index.template.html' INSTEAD! -->
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>A Primer on Bézier Curves</title>
|
|
<link rel="shortcut icon" href="favicon.png" type="image/png">
|
|
|
|
<script>
|
|
(function() {
|
|
// force https except during local testing (e.g. not on port 80)
|
|
let loc = window.location.toString();
|
|
if (loc.indexOf(":8080") === -1 && loc.indexOf("http:") === 0) {
|
|
window.location = loc.replace("http:","https:");
|
|
}
|
|
// if we're still here, load google analytics
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-69475841-3', 'auto');
|
|
ga('send', 'pageview');
|
|
}());
|
|
</script>
|
|
|
|
<!-- optional <base> element to make sure localised content still uses the base location -->
|
|
|
|
<!-- 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: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">
|
|
|
|
<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>
|
|
<!-- referral tracking, because I like knowing who's linking to my book -->
|
|
<script src="lib/site/referrer.js" async></script>
|
|
|
|
<div class="dev" style="display:none;">
|
|
<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
|
|
<script>
|
|
(function() {
|
|
var loc = window.location.toString();
|
|
if(loc.indexOf('localhost')!==-1 || loc.indexOf('-2')!==-1) {
|
|
var e = document.querySelector('div.dev');
|
|
e.removeAttribute("style");
|
|
}
|
|
}());
|
|
</script>
|
|
</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 class="social reddit" 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 class="social hn" 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 class="social twitter" 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="images/twitter.ico" alt="tweet your read" title="tweet your read">
|
|
</a>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<!-- this content is retrieved from the preface section -->
|
|
<section class="preface"><h2>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>
|
|
|
|
<div className="print">
|
|
<h2 id="ps-buy-me-a-coffee-">PS: buy me a coffee?</h2>
|
|
<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 an 85+ 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 id="note-virtually-all-b-zier-graphics-are-interactive-">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 "real" maths (in LaTeX form) which is typeset using the most excellent <a href="http://MathJax.org">MathJax</a> library. The page is generated offline as a React application, using Webpack, which has made adding "view source" options considerably more challenging. I'm still trying to figure out how to add them back in, but it didn't feel like it should hold up deploying this update compared to the previous years' version.</p>
|
|
<h2 id="this-book-is-open-source-">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 id="how-complicated-is-the-maths-going-to-be-">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 id="questions-comments-">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 id="buy-me-a-coffee-">Buy me a coffee?</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 can always <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QPRDLNGDANJSW">buy me a coffee</a>, however-much a coffee is where you live. This work has grown over the years, from a small primer to a 70ish print-page-equivalent reader 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!</p>
|
|
</div></section>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- the actual article is a JS bundle -->
|
|
<script src="article.js" async></script>
|
|
<script src="lib/site/social-updater.js" async></script>
|
|
</body>
|
|
</html>
|