info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-17 14:10:56 +02:00
Code Issues Releases Wiki Activity

localization based on markdown

Browse Source
This commit is contained in:
Pomax
2017-02-13 17:27:52 -08:00
parent 59f4bea20b
commit f2eeab6a21
61 changed files with 862 additions and 27032 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Ribbon.jsx
View File

@@ -9,7 +9,7 @@ var Ribbon = React.createClass({
render: function() {
return (<div className="ribbon">
<img src="images/ribbon.png" alt="This page on GitHub" border={0} useMap={"#githubmap"} width="200px" height="149px"/>
<img src="images/ribbon.png" alt="This page on GitHub" style={{border:"none"}} useMap={"#githubmap"} width="200px" height="149px"/>
<map name="githubmap">
<area shape="poly" coords="30,0, 200,0, 200,114" href={this.state.href} alt="This page on GitHub"/>
</map>

2
components/sections/comments/index.js
View File

@@ -13,7 +13,7 @@ var sectionHTML = (
<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 class="link" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QPRDLNGDANJSW"
always <a className="link" 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

159
components/sections/explanation/content.en-GB.md Normal file
View File

@@ -0,0 +1,159 @@
# The mathematics of Bézier curves
Bézier curves are a form of "parametric" function. Mathematically speaking, parametric functions are cheats: a "function" is actually a well defined term representing a mapping from any number of inputs to a <strong>single</strong> output. Numbers go in, a single number comes out. Change the numbers that go in, and the number that comes out is still a single number. Parametric functions cheat. They basically say "alright, well, we want multiple values coming out, so we'll just use more than one function". An illustration: Let's say we have a function that maps some value, let's call it <i>x</i>, to some other value, using some kind of number manipulation:
\[
f(x) = \cos(x)
\]
The notation <i>f(x)</i> is the standard way to show that it's a function (by convention called <i>f</i> if we're only listing one) and its output changes based on one variable (in this case, <i>x</i>). Change <i>x</i>, and the output for <i>f(x)</i> changes.
So far so good. Now, let's look at parametric functions, and how they cheat. Let's take the following two functions:
\[
\begin{matrix}
f(a) = \cos(a) \\
f(b) = \sin(b)
\end{matrix}
\]
There's nothing really remarkable about them, they're just a sine and cosine function, but you'll notice the inputs have different names. If we change the value for <i>a</i>, we're not going to change the output value for <i>f(b)</i>, since <i>a</i> isn't used in that function. Parametric functions cheat by changing that. In a parametric function all the different functions share a variable, like this:
\[
\left \{ \begin{matrix}
f_a(t) = \cos(t) \\
f_b(t) = \sin(t)
\end{matrix} \right.
\]
Multiple functions, but only one variable. If we change the value for <i>t</i>, we change the outcome of both <i>f<sub>a</sub>(t)</i> and <i>f<sub>b</sub>(t)</i>. You might wonder how that's useful, and the answer is actually pretty simple: if we change the labels <i>f<sub>a</sub>(t)</i> and <i>f<sub>b</sub>(t)</i> with what we usually mean with them for parametric curves, things might be a lot more obvious:
\[
\left \{ \begin{matrix}
x = \cos(t) \\
y = \sin(t)
\end{matrix} \right.
\]
There we go. <i>x</i>/<i>y</i> coordinates, linked through some mystery value <i>t</i>.
So, parametric curves don't define a <i>y</i> coordinate in terms of an <i>x</i> coordinate, like normal functions do, but they instead link the values to a "control" variable. If we vary the value of <i>t</i>, then with every change we get <strong>two</strong> values, which we can use as (<i>x</i>,<i>y</i>) coordinates in a graph. The above set of functions, for instance, generates points on a circle: We can range <i>t</i> from negative to positive infinity, and the resulting (<i>x</i>,<i>y</i>) coordinates will always lie on a circle with radius 1 around the origin (0,0). If we plot it for <i>t</i> from 0 to 5, we get this (use your up and down arrow keys to change the plot end value):
<Graphic preset="empty" title="A (partial) circle: x=sin(t), y=cos(t)" static={true} setup={this.setup} draw={this.draw} onKeyDown={this.props.onKeyDown}/>
Bézier curves are (one in many classes of) parametric functions, and are characterised by using the same base function for all its dimensions. Unlike the above example, where the <i>x</i> and <i>y</i> values use different functions (one uses a sine, the other a cosine), Bézier curves use the "binomial polynomial" for both <i>x</i> and <i>y</i>. So what are binomial polynomials?
You may remember polynomials from high school, where they're those sums that look like:
\[
f(x) = a \cdot x^3 + b \cdot x^2 + c \cdot x + d
\]
If they have a highest order term <i>x³</i> they're called "cubic" polynomials, if it's <i>x²</i> it's a "square" polynomial, if it's just <i>x</i> it's a line (and if there aren't even any terms with <i>x</i> it's not a polynomial!)
Bézier curves are polynomials of <i>t</i>, rather than <i>x</i>, with the value for <i>t</i> fixed being between 0 and 1, with coefficients <i>a</i>, <i>b</i> etc. taking the "binomial" form, which sounds fancy but is actually a pretty simple description for mixing values:
\[
\begin{align*}
linear &= (1-t) + t \\
square &= (1-t)^2 + 2 \cdot (1-t) \cdot t + t^2 \\
cubic &= (1-t)^3 + 3 \cdot (1-t)^2 \cdot t + 3 \cdot (1-t) \cdot t^2 + t^3
\end{align*}
\]
I know what you're thinking: that doesn't look too simple, but if we remove <i>t</i> and add in "times one", things suddenly look pretty easy. Check out these binomial terms:
\[
\begin{align*}
linear &= \hskip{2.5em} 1 + 1 \\
square &= \hskip{1.7em} 1 + 2 + 1\\
cubic &= \hskip{0.85em} 1 + 3 + 3 + 1\\
hypercubic &= 1 + 4 + 6 + 4 + 1
\end{align*}
\]
Notice that 2 is the same as 1+1, and 3 is 2+1 and 1+2, and 6 is 3+3... As you can see, each time we go up a dimension, we simply start and end with 1, and everything in between is just "the two numbers above it, added together". Now <i>that's</i> easy to remember.
There's an equally simple way to figure out how the polynomial terms work: if we rename <i>(1-t)</i> to <i>a</i> and <i>t</i> to <i>b</i>, and remove the weights for a moment, we get this:
\[
\begin{align*}
linear &= BLUE[a] + RED[b] \\
square &= BLUE[a] \cdot BLUE[a] + BLUE[a] \cdot RED[b] + RED[b] \cdot RED[b] \\
cubic &= BLUE[a] \cdot BLUE[a] \cdot BLUE[a] + BLUE[a] \cdot BLUE[a] \cdot RED[b] + BLUE[a] \cdot RED[b] \cdot RED[b] + RED[b] \cdot RED[b] \cdot RED[b]\\
\end{align*}
\]
It's basically just a sum of "every combination of <i>a</i> and <i>b</i>", progressively replacing <i>a</i>'s with <i>b</i>'s after every + sign. So that's actually pretty simple too. So now you know binomial polynomials, and just for completeness I'm going to show you the generic function for this:
\[
Bézier(n,t) = \sum_{i=0}^{n}
\underset{binomial\ term}{\underbrace{\binom{n}{i}}}
\cdot\
\underset{polynomial\ term}{\underbrace{(1-t)^{n-i} \cdot t^{i}}}
\]
And that's the full description for Bézier curves. Σ in this function indicates that this is a series of additions (using the variable listed below the Σ, starting at ...=&lt;value&gt; and ending at the value listed on top of the Σ).
<div className="howtocode">
### How to implement the basis function
We could naively implement the basis function as a mathematical construct, using the function as our guide, like this:
<pre>function Bezier(n,t):
sum = 0
for(k=0; k<n; k++):
sum += n!/(k!*(n-k)!) * (1-t)^(n-k) * t^(k)
return sum</pre>
I say we could, because we're not going to: the factorial function is *incredibly* expensive. And, as we can see from the above explanation, we can actually create Pascal's triangle quite easily without it: just start at [1], then [1,1], then [1,2,1], then [1,3,3,1], and so on, with each next row fitting 1 more number than the previous row, starting and ending with "1", with all the numbers in between being the sum of the previous row's elements on either side "above" the one we're computing.
We can generate this as a list of lists lightning fast, and then never have to compute the binomial terms because we have a lookup table:
<pre>lut = [ [1], // n=0
[1,1], // n=1
[1,2,1], // n=2
[1,3,3,1], // n=3
[1,4,6,4,1], // n=4
[1,5,10,10,5,1], // n=5
[1,6,15,20,15,6,1]] // n=6
binomial(n,k):
while(n >= lut.length):
s = lut.length
nextRow = new array(size=s+1)
nextRow[0] = 1
for(i=1, prev=s-1; i&ltprev; i++):
nextRow[i] = lut[prev][i-1] + lut[prev][i]
nextRow[s] = 1
lut.add(nextRow)
return lut[n][k]</pre>
So what's going on here? First, we declare a lookup table with a size that's reasonably large enough to accommodate most lookups. Then, we declare a function to get us the values we need, and we make sure that if an n/k pair is requested that isn't in the LUT yet, we expand it first. Our basis function now looks like this:
<pre>function Bezier(n,t):
sum = 0
for(k=0; k<=n; k++):
sum += binomial(n,k) * (1-t)^(n-k) * t^(k)
return sum</pre>
Perfect. Of course, we can optimize further. For most computer graphics purposes, we don't need arbitrary curves. We need quadratic and cubic curves (this primer actually does do arbitrary curves, so you'll find code similar to shown here), which means we can drastically simplify the code:
<pre>function Bezier(2,t):
t2 = t * t
mt = 1-t
mt2 = mt * mt
return mt2 + 2*mt*t + t2
function Bezier(3,t):
t2 = t * t
t3 = t2 * t
mt = 1-t
mt2 = mt * mt
mt3 = mt2 * mt
return mt3 + 3*mt2*t + 3*mt*t2 + t3</pre>
And now we know how to program the basis function. Exellent.
</div>
So, now we know what the base function(s) look(s) like, time to add in the magic that makes Bézier curves so special: control points.

219
components/sections/explanation/index.js
View File

@@ -1,8 +1,10 @@
var React = require("react");
var Graphic = require("../../Graphic.jsx");
var SectionHeader = require("../../SectionHeader.jsx");
var keyHandling = require("../../decorators/keyhandling-decorator.jsx");
var Locale = require("../../../lib/locale");
var locale = new Locale("en-GB");
var page = "explanation";
var Explanation = React.createClass({
statics: {
keyHandlingOptions: {
@@ -21,7 +23,7 @@ var Explanation = React.createClass({
getDefaultProps: function() {
return {
title: "The mathematics of Bézier curves"
title: locale.getTitle(page)
};
},
@@ -63,216 +65,7 @@ var Explanation = React.createClass({
render: function() {
return (
<section>
<SectionHeader {...this.props} />
<p>Bézier curves are a form of "parametric" function. Mathematically speaking, parametric
functions are cheats: a "function" is actually a well defined term representing a mapping
from any number of inputs to a <strong>single</strong> output. Numbers go in, a single
number comes out. Change the numbers that go in, and the number that comes out is still
a single number. Parametric functions cheat. They basically say "alright, well, we want
multiple values coming out, so we'll just use more than one function". An illustration:
Let's say we have a function that maps some value, let's call it <i>x</i>, to
some other value, using some kind of number manipulation:</p>
<p>\[
f(x) = \cos(x)
\]</p>
<p>The notation <i>f(x)</i> is the standard way to show that it's a function (by convention
called <i>f</i> if we're only listing one) and its output changes based on one variable
(in this case, <i>x</i>). Change <i>x</i>, and the output for <i>f(x)</i> changes.</p>
<p>So far so good. Now, let's look at parametric functions, and how they cheat.
Let's take the following two functions:</p>
<p>\[\begin{matrix}
f(a) = \cos(a) \\
f(b) = \sin(b)
\end{matrix}\]</p>
<p>There's nothing really remarkable about them, they're just a sine and cosine function,
but you'll notice the inputs have different names. If we change the value for <i>a</i>,
we're not going to change the output value for <i>f(b)</i>, since <i>a</i> isn't used
in that function. Parametric functions cheat by changing that. In a parametric function
all the different functions share a variable, like this:</p>
<p>\[
\left \{ \begin{matrix}
f_a(t) = \cos(t) \\
f_b(t) = \sin(t)
\end{matrix} \right. \]</p>
<p>Multiple functions, but only one variable. If we change the value for <i>t</i>,
we change the outcome of both <i>f<sub>a</sub>(t)</i> and <i>f<sub>b</sub>(t)</i>.
You might wonder how that's useful, and the answer is actually pretty simple: if
we change the labels <i>f<sub>a</sub>(t)</i> and <i>f<sub>b</sub>(t)</i> with what
we usually mean with them for parametric curves, things might be a lot more obvious:</p>
<p>\[
\left \{ \begin{matrix}
x = \cos(t) \\
y = \sin(t)
\end{matrix} \right. \]</p>
<p>There we go. <i>x</i>/<i>y</i> coordinates, linked through some mystery value <i>t</i>.</p>
<p>So, parametric curves don't define a <i>y</i> coordinate in terms of an <i>x</i> coordinate,
like normal functions do, but they instead link the values to a "control" variable.
If we vary the value of <i>t</i>, then with every change we get <strong>two</strong> values,
which we can use as (<i>x</i>,<i>y</i>) coordinates in a graph. The above set of functions,
for instance, generates points on a circle: We can range <i>t</i> from negative to positive
infinity, and the resulting (<i>x</i>,<i>y</i>) coordinates will always lie on a circle with
radius 1 around the origin (0,0). If we plot it for <i>t</i> from 0 to 5, we get this (use
your up and down arrow keys to change the plot end value):</p>
<Graphic preset="empty" title="A (partial) circle: x=sin(t), y=cos(t)" static={true} setup={this.setup} draw={this.draw} onKeyDown={this.props.onKeyDown}/>
<p>Bézier curves are (one in many classes of) parametric functions, and are characterised
by using the same base function for all its dimensions. Unlike the above example,
where the <i>x</i> and <i>y</i> values use different functions (one uses a sine, the other
a cosine), Bézier curves use the "binomial polynomial" for both <i>x</i> and <i>y</i>.
So what are binomial polynomials?</p>
<p>You may remember polynomials from high school, where they're those sums that look like:</p>
<p>\[
f(x) = a \cdot x^3 + b \cdot x^2 + c \cdot x + d
\]</p>
<p>If they have a highest order term <i>x³</i> they're called "cubic" polynomials, if it's
<i>x²</i> it's a "square" polynomial, if it's just <i>x</i> it's a line (and if there aren't
even any terms with <i>x</i> it's not a polynomial!)</p>
<p>Bézier curves are polynomials of <i>t</i>, rather than <i>x</i>, with the value for <i>t</i>
fixed being between 0 and 1, with coefficients <i>a</i>, <i>b</i> etc. taking the "binomial"
form, which sounds fancy but is actually a pretty simple description for mixing values:</p>
<p>\[ \begin{align*}
linear &= (1-t) + t \\
square &= (1-t)^2 + 2 \cdot (1-t) \cdot t + t^2 \\
cubic &= (1-t)^3 + 3 \cdot (1-t)^2 \cdot t + 3 \cdot (1-t) \cdot t^2 + t^3
\end{align*} \]</p>
<p>I know what you're thinking: that doesn't look too simple, but if we remove <i>t</i> and
add in "times one", things suddenly look pretty easy. Check out these binomial terms:</p>
<p>\[ \begin{align*}
linear &= \hskip{2.5em} 1 + 1 \\
square &= \hskip{1.7em} 1 + 2 + 1\\
cubic &= \hskip{0.85em} 1 + 3 + 3 + 1\\
hypercubic &= 1 + 4 + 6 + 4 + 1
\end{align*} \]</p>
<p>Notice that 2 is the same as 1+1, and 3 is 2+1 and 1+2, and 6 is 3+3... As you
can see, each time we go up a dimension, we simply start and end with 1, and everything
in between is just "the two numbers above it, added together". Now <i>that's</i> easy
to remember.</p>
<p>There's an equally simple way to figure out how the polynomial terms work:
if we rename <i>(1-t)</i> to <i>a</i> and <i>t</i> to <i>b</i>, and remove the weights
for a moment, we get this:</p>
<p>\[ \begin{align*}
linear &= BLUE[a] + RED[b] \\
square &= BLUE[a] \cdot BLUE[a] + BLUE[a] \cdot RED[b] + RED[b] \cdot RED[b] \\
cubic &= BLUE[a] \cdot BLUE[a] \cdot BLUE[a] + BLUE[a] \cdot BLUE[a] \cdot RED[b] + BLUE[a] \cdot RED[b] \cdot RED[b] + RED[b] \cdot RED[b] \cdot RED[b]\\
\end{align*} \]</p>
<p>It's basically just a sum of "every combination of <i>a</i> and <i>b</i>", progressively
replacing <i>a</i>'s with <i>b</i>'s after every + sign. So that's actually pretty simple
too. So now you know binomial polynomials, and just for completeness I'm going to show
you the generic function for this:</p>
<p>\[
Bézier(n,t) = \sum_{i=0}^{n}
\underset{binomial\ term}{\underbrace{\binom{n}{i}}}
\cdot\
\underset{polynomial\ term}{\underbrace{(1-t)^{n-i} \cdot t^{i}}}
\]</p>
<p>And that's the full description for Bézier curves. Σ in this function indicates that this is
a series of additions (using the variable listed below the Σ, starting at ...=&lt;value&gt; and ending
at the value listed on top of the Σ).</p>
<div className="howtocode">
<h3>How to implement the basis function</h3>
<p>We could naively implement the basis function as a mathematical construct,
using the function as our guide, like this:</p>
<pre>function Bezier(n,t):
sum = 0
for(k=0; k<n; k++):
sum += n!/(k!*(n-k)!) * (1-t)^(n-k) * t^(k)
return sum</pre>
<p>I say we could, because we're not going to: the factorial function is <em>incredibly</em>
expensive. And, as we can see from the above explanation, we can actually create Pascal's
triangle quite easily without it: just start at [1], then [1,1], then [1,2,1], then [1,3,3,1],
and so on, with each next row fitting 1 more number than the previous row, starting and
ending with "1", with all the numbers in between being the sum of the previous row's
elements on either side "above" the one we're computing.</p>
<p>We can generate this as a list of lists lightning fast, and then never have to compute
the binomial terms because we have a lookup table:</p>
<pre>lut = [ [1], // n=0
[1,1], // n=1
[1,2,1], // n=2
[1,3,3,1], // n=3
[1,4,6,4,1], // n=4
[1,5,10,10,5,1], // n=5
[1,6,15,20,15,6,1]] // n=6
binomial(n,k):
while(n >= lut.length):
s = lut.length
nextRow = new array(size=s+1)
nextRow[0] = 1
for(i=1, prev=s-1; i&ltprev; i++):
nextRow[i] = lut[prev][i-1] + lut[prev][i]
nextRow[s] = 1
lut.add(nextRow)
return lut[n][k]</pre>
<p>So what's going on here? First, we declare a lookup table with a size that's reasonably
large enough to accommodate most lookups. Then, we declare a function to get us the values
we need, and we make sure that if an n/k pair is requested that isn't in the LUT yet, we
expand it first. Our basis function now looks like this:</p>
<pre>function Bezier(n,t):
sum = 0
for(k=0; k<=n; k++):
sum += binomial(n,k) * (1-t)^(n-k) * t^(k)
return sum</pre>
<p>Perfect. Of course, we can optimize further. For most computer graphics purposes, we
don't need arbitrary curves. We need quadratic and cubic curves (this primer actually
does do arbitrary curves, so you'll find code similar to shown here), which means we can
drastically simplify the code:</p>
<pre>function Bezier(2,t):
t2 = t * t
mt = 1-t
mt2 = mt * mt
return mt2 + 2*mt*t + t2
function Bezier(3,t):
t2 = t * t
t3 = t2 * t
mt = 1-t
mt2 = mt * mt
mt3 = mt2 * mt
return mt3 + 3*mt2*t + 3*mt*t2 + t3</pre>
<p>And now we know how to program the basis function. Exellent.</p>
</div>
<p>So, now we know what the base function(s) look(s) like, time to add in the magic that makes
Bézier curves so special: control points.</p>
</section>
<section>{ locale.getContent(page, this) }</section>
);
}
});

10
components/sections/introduction/content.en-GB.md Normal file
View File

@@ -0,0 +1,10 @@
# A lightning introduction
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.
<div className="figure">
<Graphic inline={true} title="Quadratic Bézier curves" setup={ this.drawQuadratic } draw={ this.drawCurve }/>
<Graphic inline={true} title="Cubic Bézier curves" setup={ this.drawCubic } draw={ this.drawCurve }/>
</div>
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, the 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!

29
components/sections/introduction/index.js
View File

@@ -1,11 +1,13 @@
var React = require("react");
var Graphic = require("../../Graphic.jsx");
var SectionHeader = require("../../SectionHeader.jsx");
var Locale = require("../../../lib/locale");
var locale = new Locale("en-GB");
var page = "introduction";
var Introduction = React.createClass({
getDefaultProps: function() {
return {
title: "A lightning introduction"
title: locale.getTitle(page)
};
},
@@ -27,26 +29,7 @@ var Introduction = React.createClass({
render: function() {
return (
<section>
<SectionHeader {...this.props} />
<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 className="figure">
<Graphic inline={true} title="Quadratic Bézier curves" setup={ this.drawQuadratic } draw={ this.drawCurve }/>
<Graphic inline={true} title="Cubic Bézier curves" setup={ this.drawCubic } draw={ this.drawCurve }/>
</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,
the 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>{ locale.getContent(page, this) }</section>
);
}
});

36
components/sections/preface/content.en-GB.md Normal file
View File

@@ -0,0 +1,36 @@
# Preface
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.
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
They're named after [Pierre Bézier](https://en.wikipedia.org/wiki/Pierre_B%C3%A9zier), 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 [Paul de Casteljau](https://en.wikipedia.org/wiki/Paul_de_Casteljau) 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 [Sergei Natanovich Bernstein](https://en.wikipedia.org/wiki/Sergei_Natanovich_Bernstein), 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 nkscape, those curves you've been drawing are Bézier curves.
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!
—Pomax (or in the tweetworld, [@TheRealPomax](https://twitter.com/TheRealPomax))
<div className="note">
## Note: virtually all Bézier graphics are interactive.
This page uses interactive examples, relying heavily on [Bezier.js](http://pomax.github.io/bezierjs), as well as "real" maths (in LaTeX form) which is typeset using the most excellent [MathJax](http://MathJax.org) 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.
## This book is open source.
This book is an open source software project, and lives on two github repositorites. The first is [https://github.com/pomax/bezierinfo](https://github.com/pomax/bezierinfo) and is the purely-for-presentation version you are viewing right now. The other repository is [https://github.com/pomax/BezierInfo-2](https://github.com/pomax/BezierInfo-2), 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 =)
## How complicated is the maths going to be?
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 *far* 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.
## Questions, comments:
If you have suggestions for new sections, hit up the [Github issue tracker](https://github.com/pomax/BezierInfo-2/issues) (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.
## Buy me a coffee?
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 [buy me a coffee](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QPRDLNGDANJSW), 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!
</div>

99
components/sections/preface/index.js
View File

@@ -1,106 +1,19 @@
var React = require("react");
var Locale = require("../../../lib/locale");
var locale = new Locale("en-GB");
var page = "preface";
var Preface = React.createClass({
getDefaultProps: function() {
return {
title: "Preface"
title: locale.getTitle(page)
};
},
render: function() {
return (
<section>
<h2>{this.props.title}</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>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>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>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>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 class="link" 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>
<section>{ locale.getContent(page, this) }</section>
);
}
});

28
components/sections/whatis/content.en-GB.md Normal file
View File

@@ -0,0 +1,28 @@
# So what makes a Bézier Curve?
Playing with the points for curves may have given you a feel for how Bézier curves behave, but what *are* 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:
Bezier curves are the result of [linear interpolations](https://en.wikipedia.org/wiki/Linear_interpolation). 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".
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:
\[
Given \left (
\begin{align}
p_1 &= some\ point \\
p_2 &= some\ other\ point \\
distance &= (p_2 - p_1) \\
ratio &= \frac{percentage}{100} \\
\end{align}
\right ),\ our\ new\ point = p_1 + distance \cdot ratio
\]
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 use 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:
<Graphic title="Linear Interpolation leading to Bézier curves" setup={this.setup} draw={this.draw} onKeyDown={this.onKeyDown}/>
And that brings us to the complicated maths: calculus.
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 that a curve will never extend beyond the points we used to construct it, for instance)
So let's start looking at Bézier curves a bit more in depth. Their mathematical expressions, the properties we can derive from those, and the various things we can do to, and with, Bézier curves.

54
components/sections/whatis/index.js
View File

@@ -1,7 +1,8 @@
var React = require("react");
var Graphic = require("../../Graphic.jsx");
var SectionHeader = require("../../SectionHeader.jsx");
var Locale = require("../../../lib/locale");
var locale = new Locale("en-GB");
var page = "whatis";
var Whatis = React.createClass({
getDefaultProps: function() {
@@ -116,54 +117,7 @@ var Whatis = React.createClass({
render: function() {
return (
<section>
<SectionHeader {...this.props} />
<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>Bezier 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>
<p>\[
Given \left (
\begin{align}
p_1 &= some\ point \\
p_2 &= some\ other\ point \\
distance &= (p_2 - p_1) \\
ratio &= \frac{percentage}{100} \\
\end{align}
\right ),\ our\ new\ point = p_1 + distance \cdot ratio
\]</p>
<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 use 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>
<Graphic title="Linear Interpolation leading to Bézier curves" setup={this.setup} draw={this.draw} onKeyDown={this.onKeyDown}/>
<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
that a curve will never extend beyond the points we used to construct it, for instance)</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 those, and the various things we can do to, and with, Bézier curves.</p>
</section>
<section>{ locale.getContent(page, this) }</section>
);
}
});

1
images/latex/a7f950254a01ce365603096bada00b6e3c337f2e.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

11
index.html
View File

@@ -28,7 +28,7 @@
</head>
<body>
<div class="dev">
<div class="dev" style="display:none;">
<style>
div.dev {
background: rgb(43, 49, 95);
@@ -46,6 +46,15 @@
}
</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 -->

1
lib/latex-loader.js
View File

@@ -33,6 +33,7 @@ var options = {
// convert this LaTeX code into an SVG file in ./images/latex,
// using mathjax-node in the ./tools directory.
var hash = sha1(latex);
var filename = "images/latex/" + hash + ".svg";
var destination = __dirname + "/../" + filename;

19
lib/locale.js Normal file
View File

@@ -0,0 +1,19 @@
var enData = require('../locales/en-GB/content.js');
class Locale {
constructor(locale) {
this.data = {};
this.locale = locale || "en-GB";
this.data = enData;
}
getContent(key, handler) {
return this.data[key].getContent(handler);
}
getTitle(key) {
return this.data[key].title;
}
};
module.exports = Locale;

452
locales/en-GB/content.js Normal file
View File

@@ -0,0 +1,452 @@
var React = require('react');
var Graphic = require("../../components/Graphic.jsx");
var SectionHeader = require("../../components/SectionHeader.jsx");
module.exports = {
"preface": {
"title": "Preface",
"getContent": function(handler) { return <section>
<SectionHeader name="preface" title="Preface" number="0"/>
<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 nkscape, 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 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>; }
},
"introduction": {
"title": "A lightning introduction",
"getContent": function(handler) { return <section>
<SectionHeader name="introduction" title="A lightning introduction" number="1"/>
<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 className="figure">
<Graphic inline={true} title="Quadratic Bézier curves" setup={ handler.drawQuadratic } draw={ handler.drawCurve }/>
<Graphic inline={true} title="Cubic Bézier curves" setup={ handler.drawCubic } draw={ handler.drawCurve }/>
</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, the 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>; }
},
"whatis": {
"title": "So what makes a Bézier Curve?",
"getContent": function(handler) { return <section>
<SectionHeader name="whatis" title="So what makes a Bézier Curve?" number="2"/>
<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>Bezier 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>
\[
Given \left (
\begin{align}
p_1 &= some\ point \\
p_2 &= some\ other\ point \\
distance &= (p_2 - p_1) \\
ratio &= \frac{percentage}{100} \\
\end{align}
\right ),\ our\ new\ point = p_1 + distance \cdot ratio
\]
<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 use 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>
<Graphic title="Linear Interpolation leading to Bézier curves" setup={handler.setup} draw={handler.draw} onKeyDown={handler.onKeyDown}/>
<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 that a curve will never extend beyond the points we used to construct it, for instance)</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 those, and the various things we can do to, and with, Bézier curves.</p>
</section>; }
},
"explanation": {
"title": "The mathematics of Bézier curves",
"getContent": function(handler) { return <section>
<SectionHeader name="explanation" title="The mathematics of Bézier curves" number="3"/>
<p>Bézier curves are a form of "parametric" function. Mathematically speaking, parametric functions are cheats: a "function" is actually a well defined term representing a mapping from any number of inputs to a <strong>single</strong> output. Numbers go in, a single number comes out. Change the numbers that go in, and the number that comes out is still a single number. Parametric functions cheat. They basically say "alright, well, we want multiple values coming out, so we'll just use more than one function". An illustration: Let's say we have a function that maps some value, let's call it <i>x</i>, to some other value, using some kind of number manipulation:</p>
\[
f(x) = \cos(x)
\]
<p>The notation <i>f(x)</i> is the standard way to show that it's a function (by convention called <i>f</i> if we're only listing one) and its output changes based on one variable (in this case, <i>x</i>). Change <i>x</i>, and the output for <i>f(x)</i> changes.</p>
<p>So far so good. Now, let's look at parametric functions, and how they cheat. Let's take the following two functions:</p>
\[
\begin{matrix}
f(a) = \cos(a) \\
f(b) = \sin(b)
\end{matrix}
\]
<p>There's nothing really remarkable about them, they're just a sine and cosine function, but you'll notice the inputs have different names. If we change the value for <i>a</i>, we're not going to change the output value for <i>f(b)</i>, since <i>a</i> isn't used in that function. Parametric functions cheat by changing that. In a parametric function all the different functions share a variable, like this:</p>
\[
\left \{ \begin{matrix}
f_a(t) = \cos(t) \\
f_b(t) = \sin(t)
\end{matrix} \right.
\]
<p>Multiple functions, but only one variable. If we change the value for <i>t</i>, we change the outcome of both <i>f<sub>a</sub>(t)</i> and <i>f<sub>b</sub>(t)</i>. You might wonder how that's useful, and the answer is actually pretty simple: if we change the labels <i>f<sub>a</sub>(t)</i> and <i>f<sub>b</sub>(t)</i> with what we usually mean with them for parametric curves, things might be a lot more obvious:</p>
\[
\left \{ \begin{matrix}
x = \cos(t) \\
y = \sin(t)
\end{matrix} \right.
\]
<p>There we go. <i>x</i>/<i>y</i> coordinates, linked through some mystery value <i>t</i>.</p>
<p>So, parametric curves don't define a <i>y</i> coordinate in terms of an <i>x</i> coordinate, like normal functions do, but they instead link the values to a "control" variable. If we vary the value of <i>t</i>, then with every change we get <strong>two</strong> values, which we can use as (<i>x</i>,<i>y</i>) coordinates in a graph. The above set of functions, for instance, generates points on a circle: We can range <i>t</i> from negative to positive infinity, and the resulting (<i>x</i>,<i>y</i>) coordinates will always lie on a circle with radius 1 around the origin (0,0). If we plot it for <i>t</i> from 0 to 5, we get this (use your up and down arrow keys to change the plot end value):</p>
<Graphic preset="empty" title="A (partial) circle: x=sin(t), y=cos(t)" static={true} setup={handler.setup} draw={handler.draw} onKeyDown={handler.props.onKeyDown}/>
<p>Bézier curves are (one in many classes of) parametric functions, and are characterised by using the same base function for all its dimensions. Unlike the above example, where the <i>x</i> and <i>y</i> values use different functions (one uses a sine, the other a cosine), Bézier curves use the "binomial polynomial" for both <i>x</i> and <i>y</i>. So what are binomial polynomials?</p>
<p>You may remember polynomials from high school, where they're those sums that look like:</p>
\[
f(x) = a \cdot x^3 + b \cdot x^2 + c \cdot x + d
\]
<p>If they have a highest order term <i>x³</i> they're called "cubic" polynomials, if it's <i>x²</i> it's a "square" polynomial, if it's just <i>x</i> it's a line (and if there aren't even any terms with <i>x</i> it's not a polynomial!)</p>
<p>Bézier curves are polynomials of <i>t</i>, rather than <i>x</i>, with the value for <i>t</i> fixed being between 0 and 1, with coefficients <i>a</i>, <i>b</i> etc. taking the "binomial" form, which sounds fancy but is actually a pretty simple description for mixing values:</p>
\[
\begin{align*}
linear &= (1-t) + t \\
square &= (1-t)^2 + 2 \cdot (1-t) \cdot t + t^2 \\
cubic &= (1-t)^3 + 3 \cdot (1-t)^2 \cdot t + 3 \cdot (1-t) \cdot t^2 + t^3
\end{align*}
\]
<p>I know what you're thinking: that doesn't look too simple, but if we remove <i>t</i> and add in "times one", things suddenly look pretty easy. Check out these binomial terms:</p>
\[
\begin{align*}
linear &= \hskip{2.5em} 1 + 1 \\
square &= \hskip{1.7em} 1 + 2 + 1\\
cubic &= \hskip{0.85em} 1 + 3 + 3 + 1\\
hypercubic &= 1 + 4 + 6 + 4 + 1
\end{align*}
\]
<p>Notice that 2 is the same as 1+1, and 3 is 2+1 and 1+2, and 6 is 3+3... As you can see, each time we go up a dimension, we simply start and end with 1, and everything in between is just "the two numbers above it, added together". Now <i>that's</i> easy to remember.</p>
<p>There's an equally simple way to figure out how the polynomial terms work: if we rename <i>(1-t)</i> to <i>a</i> and <i>t</i> to <i>b</i>, and remove the weights for a moment, we get this:</p>
\[
\begin{align*}
linear &= BLUE[a] + RED[b] \\
square &= BLUE[a] \cdot BLUE[a] + BLUE[a] \cdot RED[b] + RED[b] \cdot RED[b] \\
cubic &= BLUE[a] \cdot BLUE[a] \cdot BLUE[a] + BLUE[a] \cdot BLUE[a] \cdot RED[b] + BLUE[a] \cdot RED[b] \cdot RED[b] + RED[b] \cdot RED[b] \cdot RED[b]\\
\end{align*}
\]
<p>It's basically just a sum of "every combination of <i>a</i> and <i>b</i>", progressively replacing <i>a</i>'s with <i>b</i>'s after every + sign. So that's actually pretty simple too. So now you know binomial polynomials, and just for completeness I'm going to show you the generic function for this:</p>
\[
Bézier(n,t) = \sum_{i=0}^{n}
\underset{binomial\ term}{\underbrace{\binom{n}{i}}}
\cdot\
\underset{polynomial\ term}{\underbrace{(1-t)^{n-i} \cdot t^{i}}}
\]
<p>And that's the full description for Bézier curves. Σ in this function indicates that this is a series of additions (using the variable listed below the Σ, starting at ...=&lt;value&gt; and ending at the value listed on top of the Σ).</p>
<div className="howtocode">
### How to implement the basis function
We could naively implement the basis function as a mathematical construct, using the function as our guide, like this:
<pre>function Bezier(n,t):
sum = 0
for(k=0; k<n; k++):
sum += n!/(k!*(n-k)!) * (1-t)^(n-k) * t^(k)
return sum</pre>
I say we could, because we're not going to: the factorial function is <em>incredibly</em> expensive. And, as we can see from the above explanation, we can actually create Pascal's triangle quite easily without it: just start at [1], then [1,1], then [1,2,1], then [1,3,3,1], and so on, with each next row fitting 1 more number than the previous row, starting and ending with "1", with all the numbers in between being the sum of the previous row's elements on either side "above" the one we're computing.
We can generate this as a list of lists lightning fast, and then never have to compute the binomial terms because we have a lookup table:
<pre>lut = [ [1], // n=0
[1,1], // n=1
[1,2,1], // n=2
[1,3,3,1], // n=3
[1,4,6,4,1], // n=4
[1,5,10,10,5,1], // n=5
[1,6,15,20,15,6,1]] // n=6
binomial(n,k):
while(n &gt;= lut.length):
s = lut.length
nextRow = new array(size=s+1)
nextRow[0] = 1
for(i=1, prev=s-1; i&ltprev; i++):
nextRow[i] = lut[prev][i-1] + lut[prev][i]
nextRow[s] = 1
lut.add(nextRow)
return lut[n][k]</pre>
So what's going on here? First, we declare a lookup table with a size that's reasonably large enough to accommodate most lookups. Then, we declare a function to get us the values we need, and we make sure that if an n/k pair is requested that isn't in the LUT yet, we expand it first. Our basis function now looks like this:
<pre>function Bezier(n,t):
sum = 0
for(k=0; k&lt;=n; k++):
sum += binomial(n,k) <em> (1-t)^(n-k) </em> t^(k)
return sum</pre>
Perfect. Of course, we can optimize further. For most computer graphics purposes, we don't need arbitrary curves. We need quadratic and cubic curves (this primer actually does do arbitrary curves, so you'll find code similar to shown here), which means we can drastically simplify the code:
<pre>function Bezier(2,t):
t2 = t <em> t
mt = 1-t
mt2 = mt </em> mt
return mt2 + 2<em>mt</em>t + t2
function Bezier(3,t):
t2 = t <em> t
t3 = t2 </em> t
mt = 1-t
mt2 = mt <em> mt
mt3 = mt2 </em> mt
return mt3 + 3<em>mt2</em>t + 3<em>mt</em>t2 + t3</pre>
And now we know how to program the basis function. Exellent.
</div>
<p>So, now we know what the base function(s) look(s) like, time to add in the magic that makes Bézier curves so special: control points.</p>
</section>; }
},
"control": {
"title": "Unknown title (control)",
"getContent": function(handler) { return <section>
</section>; }
},
"extended": {
"title": "Unknown title (extended)",
"getContent": function(handler) { return <section>
</section>; }
},
"matrix": {
"title": "Unknown title (matrix)",
"getContent": function(handler) { return <section>
</section>; }
},
"decasteljau": {
"title": "Unknown title (decasteljau)",
"getContent": function(handler) { return <section>
</section>; }
},
"flattening": {
"title": "Unknown title (flattening)",
"getContent": function(handler) { return <section>
</section>; }
},
"splitting": {
"title": "Unknown title (splitting)",
"getContent": function(handler) { return <section>
</section>; }
},
"matrixsplit": {
"title": "Unknown title (matrixsplit)",
"getContent": function(handler) { return <section>
</section>; }
},
"reordering": {
"title": "Unknown title (reordering)",
"getContent": function(handler) { return <section>
</section>; }
},
"derivatives": {
"title": "Unknown title (derivatives)",
"getContent": function(handler) { return <section>
</section>; }
},
"pointvectors": {
"title": "Unknown title (pointvectors)",
"getContent": function(handler) { return <section>
</section>; }
},
"components": {
"title": "Unknown title (components)",
"getContent": function(handler) { return <section>
</section>; }
},
"extremities": {
"title": "Unknown title (extremities)",
"getContent": function(handler) { return <section>
</section>; }
},
"boundingbox": {
"title": "Unknown title (boundingbox)",
"getContent": function(handler) { return <section>
</section>; }
},
"aligning": {
"title": "Unknown title (aligning)",
"getContent": function(handler) { return <section>
</section>; }
},
"tightbounds": {
"title": "Unknown title (tightbounds)",
"getContent": function(handler) { return <section>
</section>; }
},
"inflections": {
"title": "Unknown title (inflections)",
"getContent": function(handler) { return <section>
</section>; }
},
"canonical": {
"title": "Unknown title (canonical)",
"getContent": function(handler) { return <section>
</section>; }
},
"arclength": {
"title": "Unknown title (arclength)",
"getContent": function(handler) { return <section>
</section>; }
},
"arclengthapprox": {
"title": "Unknown title (arclengthapprox)",
"getContent": function(handler) { return <section>
</section>; }
},
"tracing": {
"title": "Unknown title (tracing)",
"getContent": function(handler) { return <section>
</section>; }
},
"intersections": {
"title": "Unknown title (intersections)",
"getContent": function(handler) { return <section>
</section>; }
},
"curveintersection": {
"title": "Unknown title (curveintersection)",
"getContent": function(handler) { return <section>
</section>; }
},
"abc": {
"title": "Unknown title (abc)",
"getContent": function(handler) { return <section>
</section>; }
},
"moulding": {
"title": "Unknown title (moulding)",
"getContent": function(handler) { return <section>
</section>; }
},
"pointcurves": {
"title": "Unknown title (pointcurves)",
"getContent": function(handler) { return <section>
</section>; }
},
"catmullconv": {
"title": "Unknown title (catmullconv)",
"getContent": function(handler) { return <section>
</section>; }
},
"catmullmoulding": {
"title": "Unknown title (catmullmoulding)",
"getContent": function(handler) { return <section>
</section>; }
},
"polybezier": {
"title": "Unknown title (polybezier)",
"getContent": function(handler) { return <section>
</section>; }
},
"shapes": {
"title": "Unknown title (shapes)",
"getContent": function(handler) { return <section>
</section>; }
},
"projections": {
"title": "Unknown title (projections)",
"getContent": function(handler) { return <section>
</section>; }
},
"offsetting": {
"title": "Unknown title (offsetting)",
"getContent": function(handler) { return <section>
</section>; }
},
"graduatedoffset": {
"title": "Unknown title (graduatedoffset)",
"getContent": function(handler) { return <section>
</section>; }
},
"circles": {
"title": "Unknown title (circles)",
"getContent": function(handler) { return <section>
</section>; }
},
"circles_cubic": {
"title": "Unknown title (circles_cubic)",
"getContent": function(handler) { return <section>
</section>; }
},
"arcapproximation": {
"title": "Unknown title (arcapproximation)",
"getContent": function(handler) { return <section>
</section>; }
},
"bsplines": {
"title": "Unknown title (bsplines)",
"getContent": function(handler) { return <section>
</section>; }
},
"comments": {
"title": "Unknown title (comments)",
"getContent": function(handler) { return <section>
</section>; }
}
};

19
locales/en-US/messages.properties
View File

@@ -1,19 +0,0 @@
# local data goes here
title=A Primer on Bézier Curves
subtitle=A free, online book for when you really need to know how to do Bézier things.
preface_title=Preface
preface_p1=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.
preface_p2=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
preface_p3=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.
preface_p4=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!
preface_signoff=—Pomax (or in the tweetworld, <a href="https://twitter.com/TheRealPomax">@TheRealPomax</a>)
preface_int=Note: virtually all Bézier graphics are interactive.
preface_int_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.
preface_note_oss=This book is open source.
preface_note_oss_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 =)
preface_math=How complicated is the maths going to be?
preface_math_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.
preface_note_qc=Questions, comments:
preface_note_oss_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.
preface_coff=Buy me a coffee?
preface_coff_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 class="link" 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!

107
make-locales.js Normal file
View File

@@ -0,0 +1,107 @@
const glue = '<div className="note">';
var marked = require("marked");
var fs = require("fs-extra");
// bundle all content in a specific locale for use by the app
var locale = process.env.locale || "en-GB";
// shim nodejs so that it knows what to do with jsx files: return empty objects.
var Module = require('module');
var originalRequire = Module.prototype.require;
Module.prototype.require = function() {
try {
return originalRequire.apply(this, arguments);
} catch (e) {
return {};
}
};
/**
* Split data up into "markdown" and "latex"
*/
function chunk(data) {
var p = 0, e = 0, chunks = [];
while (p !== -1) {
let s = data.indexOf('\n\\[', p);
if (s === -1) {
chunks.push({
latex: false,
data: data.substring(p)
});
break;
}
chunks.push({
latex: false,
data: data.substring(p, s)
});
e = data.indexOf('\\]\n\n', s) + 4;
chunks.push({
latex: true,
data: data.substring(s, e)
});
p = e;
}
return chunks;
}
// Then get the section map. This will try to load .jsx code, which will fail,
// but the above shim makes a failure simply return an empty object instead.
// This is good: we only care about the keys, not the content.
var index = require("./components/sections");
var sections = Object.keys(index);
var content = {};
sections.forEach((cname, number) => {
var loc = `./components/sections/${cname}/content.${locale}.md`;
var data, title;
try {
data = fs.readFileSync(loc).toString();
// convert all non-latex data
data = data.split(glue).map(content => {
return chunk(content).map(chunk => {
if (chunk.latex) return chunk.data;
let d = marked(chunk.data)
// And then some post-processing...
d = d.replace(/<h1[^>]+>([^<]+)<\/h1>/,function(_,t) {
title = t;
return `<SectionHeader name="${cname}" title="` + t + `" number="${number}"/>`;
});
d = d.replace('<p></div></p>', '</div>')
// serious can we fucking not, please.
.replace(/&#39;/g, "'")
.replace(/&amp;/g, '&')
.replace(/&quot;/g, '"')
return d;
}).join('');
}).join(glue);
} catch (e) {
data = '';
title = `Unknown title (${cname})`;
}
content[cname] = {
title: title,
getContent: "<section>" + data + "</section>"
};
});
// Now, form a JSX resource for this locale.
var bcode = JSON.stringify(content, false, 2);
bcode = bcode.replace(/"<section>/g, "function(handler) { return <section>")
.replace(/this\./g, "handler.")
.replace(/<\/section>"(,?)/g, "</section>; }$1\n")
.replace(/\\"/g,'"')
.replace(/\\n/g,'\n')
.replace(/></g,'>\n<')
.replace(/\\\\/g, '\\');
var bundle = `var React = require('react');\nvar Graphic = require("../../components/Graphic.jsx");\nvar SectionHeader = require("../../components/SectionHeader.jsx");\n\nmodule.exports = ${bcode};\n`;
var dir = `./locales/${locale}`;
fs.ensureDir(dir);
fs.writeFileSync(`${dir}/content.js`, bundle);

17
package.json
View File

@@ -4,8 +4,7 @@
"description": "pomax.github.io/bezierinfo",
"scripts": {
"build": "npm run less && webpack --prod",
"build:singles": "npm run less && webpack --prod --singles",
"dev": "npm run less && webpack-dev-server --progress --colors --hot --inline",
"dev": "node make-locales && npm run less && webpack-dev-server --progress --colors --hot --inline",
"latex": "node tools/mathjax",
"less": "lessc stylesheets/style.less > stylesheets/style.css",
"singles": "npm run dev -- --singles",
@@ -41,11 +40,12 @@
"chroma-js": "^1.1.1",
"css-loader": "^0.23.0",
"eslint": "^1.10.3",
"eslint-loader": "^1.2.0",
"eslint-plugin-react": "^3.15.0",
"eslint-loader": "^1.6.0",
"eslint-plugin-react": "^6.9.0",
"file-loader": "^0.8.5",
"fs-extra": "^0.26.4",
"fs-extra": "^0.26.7",
"history": "^1.17.0",
"html-entities": "^1.2.0",
"image-size": "^0.4.0",
"jsmin": "^1.0.1",
"json-loader": "^0.5.4",
@@ -53,6 +53,9 @@
"less": "^2.5.3",
"less-loader": "^2.2.2",
"less-watch-compiler": "^1.1.4",
"markdown": "^0.5.0",
"markdown-it": "^8.2.2",
"marked": "^0.3.6",
"mathjax-node": "^0.4.0",
"pirates": "^2.1.0",
"raw-loader": "^0.5.1",
@@ -64,7 +67,7 @@
"style-loader": "^0.13.0",
"svgo": "^0.6.6",
"uglify-loader": "^1.3.0",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
"webpack": "^2.0.0",
"webpack-dev-server": "^2.0.0"
}
}

13
pages/abc/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/aligning/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/arcapproximation/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/arclength/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/arclengthapprox/index.html
View File

@@ -1,13 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>
Approximated arc length
</title>
<base href='..'>
</head>
<body>
<div data-reactid=".121nwui0zy8" data-react-checksum="-1297355722"><div class="ribbon" data-reactid=".121nwui0zy8.0"><img src="images/ribbon.png" alt="This page on GitHub" usemap="#githubmap" width="200px" height="149px" data-reactid=".121nwui0zy8.0.0"/><map name="githubmap" data-reactid=".121nwui0zy8.0.1"><area shape="poly" coords="30,0, 200,0, 200,114" href="http://github.com/pomax/BezierInfo-2" alt="This page on GitHub" data-reactid=".121nwui0zy8.0.1.0"/></map></div><header data-reactid=".121nwui0zy8.1"><h1 data-reactid=".121nwui0zy8.1.0">A Primer on Bézier Curves</h1><h2 data-reactid=".121nwui0zy8.1.1">A free, online book for when you really need to know how to do Bézier things.</h2></header><div data-reactid=".121nwui0zy8.2"><table class="relatives before" data-reactid=".121nwui0zy8.2.0"><tbody data-reactid=".121nwui0zy8.2.0.0"><tr data-reactid=".121nwui0zy8.2.0.0.0"><td data-reactid=".121nwui0zy8.2.0.0.0.0"><a class="prev" href="arclength" data-reactid=".121nwui0zy8.2.0.0.0.0.0">19. Arc length</a></td><td class="toc" data-reactid=".121nwui0zy8.2.0.0.0.1"><a class="" href="/" data-reactid=".121nwui0zy8.2.0.0.0.1.0">ToC</a></td><td data-reactid=".121nwui0zy8.2.0.0.0.2"><a class="next" href="tracing" data-reactid=".121nwui0zy8.2.0.0.0.2.0">21. Tracing a curve at fixed distance intervals</a></td></tr></tbody></table><section data-reactid=".121nwui0zy8.2.$arclengthapprox"><h2 data-num="20" data-reactid=".121nwui0zy8.2.$arclengthapprox.0"><a href="#arclengthapprox" data-reactid=".121nwui0zy8.2.$arclengthapprox.0.0">Approximated arc length</a></h2><p data-reactid=".121nwui0zy8.2.$arclengthapprox.1">Sometimes, we don&#x27;t actually need the precision of a true arc length, and we can get away with simply computing the approximate arc length instead. The by far fastest way to do this is to flatten the curve and then simply calculate the linear distance from point to point. This will come with an error, but this can be made arbitrarily small by increasing the segment count.</p><p data-reactid=".121nwui0zy8.2.$arclengthapprox.2">If we combine the work done in the previous sections on curve flattening and arc length computation, we can implement these with minimal effort:</p><figure class="false" data-reactid=".121nwui0zy8.2.$arclengthapprox.3"><canvas tabindex="0" data-reactid=".121nwui0zy8.2.$arclengthapprox.3.0"></canvas><figcaption data-reactid=".121nwui0zy8.2.$arclengthapprox.3.1"><span data-reactid=".121nwui0zy8.2.$arclengthapprox.3.1.0">Approximate quadratic curve arc length</span><span data-reactid=".121nwui0zy8.2.$arclengthapprox.3.1.1"> </span></figcaption></figure><figure class="false" data-reactid=".121nwui0zy8.2.$arclengthapprox.4"><canvas tabindex="0" data-reactid=".121nwui0zy8.2.$arclengthapprox.4.0"></canvas><figcaption data-reactid=".121nwui0zy8.2.$arclengthapprox.4.1"><span data-reactid=".121nwui0zy8.2.$arclengthapprox.4.1.0">Approximate cubic curve arc length</span><span data-reactid=".121nwui0zy8.2.$arclengthapprox.4.1.1"> </span></figcaption></figure><p data-reactid=".121nwui0zy8.2.$arclengthapprox.5">Try clicking on the sketch and using your up and down arrow keys to lower the number of segments for both the quadratic and cubic curve. You may notice that the error in length is actually pretty significant, even if the percentage is fairly low: if the number of segments used yields an error of 0.1% or higher, the flattened curve already looks fairly obviously flattened. And of course, the longer the curve, the more significant the error will be.</p></section><table class="relatives after" data-reactid=".121nwui0zy8.2.2"><tbody data-reactid=".121nwui0zy8.2.2.0"><tr data-reactid=".121nwui0zy8.2.2.0.0"><td data-reactid=".121nwui0zy8.2.2.0.0.0"><a class="prev" href="arclength" data-reactid=".121nwui0zy8.2.2.0.0.0.0">19. Arc length</a></td><td class="toc" data-reactid=".121nwui0zy8.2.2.0.0.1"><a class="" href="/" data-reactid=".121nwui0zy8.2.2.0.0.1.0">ToC</a></td><td data-reactid=".121nwui0zy8.2.2.0.0.2"><a class="next" href="tracing" data-reactid=".121nwui0zy8.2.2.0.0.2.0">21. Tracing a curve at fixed distance intervals</a></td></tr></tbody></table></div><footer class="copyright" data-reactid=".121nwui0zy8.3"><span data-reactid=".121nwui0zy8.3.0">This article is © 2011-2016 to me, Mike &quot;Pomax&quot; Kamermans, but the text, code, and images are </span><a href="https://github.com/Pomax/bezierinfo/blob/gh-pages/LICENSE.md" data-reactid=".121nwui0zy8.3.1">almost no rights reserved</a><span data-reactid=".121nwui0zy8.3.2">. Go do something cool with it!</span></footer></div>
</body>
</html>

13
pages/boundingbox/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/canonical/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/catmullconv/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/catmullmoulding/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/circles/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/circles_cubic/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/components/index.html
View File

File diff suppressed because one or more lines are too long

29
pages/control/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/curveintersection/index.html
View File

File diff suppressed because one or more lines are too long

29
pages/decasteljau/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/derivatives/index.html
View File

File diff suppressed because one or more lines are too long

50
pages/explanation/index.html
View File

File diff suppressed because one or more lines are too long

72
pages/extremities/index.html
View File

File diff suppressed because one or more lines are too long

25
pages/flattening/index.html
View File

@@ -1,25 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>
Simplified drawing
</title>
<base href='..'>
</head>
<body>
<div data-reactid=".hi3zddc0sg" data-react-checksum="-797324801"><div class="ribbon" data-reactid=".hi3zddc0sg.0"><img src="images/ribbon.png" alt="This page on GitHub" usemap="#githubmap" width="200px" height="149px" data-reactid=".hi3zddc0sg.0.0"/><map name="githubmap" data-reactid=".hi3zddc0sg.0.1"><area shape="poly" coords="30,0, 200,0, 200,114" href="http://github.com/pomax/BezierInfo-2" alt="This page on GitHub" data-reactid=".hi3zddc0sg.0.1.0"/></map></div><header data-reactid=".hi3zddc0sg.1"><h1 data-reactid=".hi3zddc0sg.1.0">A Primer on Bézier Curves</h1><h2 data-reactid=".hi3zddc0sg.1.1">A free, online book for when you really need to know how to do Bézier things.</h2></header><div data-reactid=".hi3zddc0sg.2"><table class="relatives before" data-reactid=".hi3zddc0sg.2.0"><tbody data-reactid=".hi3zddc0sg.2.0.0"><tr data-reactid=".hi3zddc0sg.2.0.0.0"><td data-reactid=".hi3zddc0sg.2.0.0.0.0"><a class="prev" href="decasteljau" data-reactid=".hi3zddc0sg.2.0.0.0.0.0">6. de Casteljau&#x27;s algorithm</a></td><td class="toc" data-reactid=".hi3zddc0sg.2.0.0.0.1"><a class="" href="/" data-reactid=".hi3zddc0sg.2.0.0.0.1.0">ToC</a></td><td data-reactid=".hi3zddc0sg.2.0.0.0.2"><a class="next" href="splitting" data-reactid=".hi3zddc0sg.2.0.0.0.2.0">8. Splitting curves</a></td></tr></tbody></table><section data-reactid=".hi3zddc0sg.2.$flattening"><h2 data-num="7" data-reactid=".hi3zddc0sg.2.$flattening.0"><a href="#flattening" data-reactid=".hi3zddc0sg.2.$flattening.0.0">Simplified drawing</a></h2><p data-reactid=".hi3zddc0sg.2.$flattening.1">We can also simplify the drawing process by &quot;sampling&quot; the curve at certain points, and then joining those points up with straight lines, a process known as &quot;flattening&quot;, as we are reducing a curve to a simple sequence of straight, &quot;flat&quot; lines.</p><p data-reactid=".hi3zddc0sg.2.$flattening.2">We can do this is by saying &quot;we want X segments&quot;, and then sampling the curve at intervals that are spaced such that we end up with the number of segments we wanted. The advantage of this method is that it&#x27;s fast: instead of evaluating 100 or even 1000 curve coordinates, we can sample a much lower number and still end up with a curve that sort-of-kind-of looks good enough. The disadvantage of course is that we lose the precision of working with &quot;the real curve&quot;, so we usually can&#x27;t use the flattened for for doing true intersection detection, or curvature alignment.</p><figure class="false" data-reactid=".hi3zddc0sg.2.$flattening.3"><canvas tabindex="0" data-reactid=".hi3zddc0sg.2.$flattening.3.0"></canvas><figcaption data-reactid=".hi3zddc0sg.2.$flattening.3.1"><span data-reactid=".hi3zddc0sg.2.$flattening.3.1.0">Flattening a quadratic curve</span><span data-reactid=".hi3zddc0sg.2.$flattening.3.1.1"> </span></figcaption></figure><figure class="false" data-reactid=".hi3zddc0sg.2.$flattening.4"><canvas tabindex="0" data-reactid=".hi3zddc0sg.2.$flattening.4.0"></canvas><figcaption data-reactid=".hi3zddc0sg.2.$flattening.4.1"><span data-reactid=".hi3zddc0sg.2.$flattening.4.1.0">Flattening a cubic curve</span><span data-reactid=".hi3zddc0sg.2.$flattening.4.1.1"> </span></figcaption></figure><p data-reactid=".hi3zddc0sg.2.$flattening.5">Try clicking on the sketch and using your up and down arrow keys to lower the number of segments for both the quadratic and cubic curve. You&#x27;ll notice that for certain curvatures, a low number of segments works quite well, but for more complex curvatures (try this for the cubic curve), a higher number is required to capture the curvature changes properly.</p><div class="howtocode" data-reactid=".hi3zddc0sg.2.$flattening.6"><h3 data-reactid=".hi3zddc0sg.2.$flattening.6.0">How to implement curve flattening</h3><p data-reactid=".hi3zddc0sg.2.$flattening.6.1">Let&#x27;s just use the algorithm we just specified, and implement that:</p><pre data-reactid=".hi3zddc0sg.2.$flattening.6.2"><span data-reactid=".hi3zddc0sg.2.$flattening.6.2.0">function flattenCurve(curve, segmentCount):</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.2.1">
</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.2.2"> step = 1/segmentCount;</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.2.3">
</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.2.4"> coordinates = [curve.getXValue(0), curve.getYValue(0)]</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.2.5">
</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.2.6"> for(i=1; i &lt;= segmentCount; i++):</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.2.7">
</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.2.8"> t = i*step;</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.2.9">
</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.2.a"> coordinates.push[curve.getXValue(t), curve.getYValue(t)]</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.2.b">
</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.2.c"> return coordinates;</span></pre><p data-reactid=".hi3zddc0sg.2.$flattening.6.3">And done, that&#x27;s the algorithm implemented. That just leaves drawing the resulting &quot;curve&quot; as a sequence of lines:</p><pre data-reactid=".hi3zddc0sg.2.$flattening.6.4"><span data-reactid=".hi3zddc0sg.2.$flattening.6.4.0">function drawFlattenedCurve(curve, segmentCount):</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.4.1">
</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.4.2"> coordinates = flattenCurve(curve, segmentCount)</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.4.3">
</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.4.4"> coord = coordinates[0], _coords;</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.4.5">
</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.4.6"> for(i=1; i &lt; coordinates.length; i++):</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.4.7">
</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.4.8"> _coords = coordinates[i]</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.4.9">
</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.4.a"> line(coords, _coords)</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.4.b">
</span><span data-reactid=".hi3zddc0sg.2.$flattening.6.4.c"> coords = _coords</span></pre><p data-reactid=".hi3zddc0sg.2.$flattening.6.5">We start with the first coordinate as reference point, and then just draw lines between each point and its next point.</p></div></section><table class="relatives after" data-reactid=".hi3zddc0sg.2.2"><tbody data-reactid=".hi3zddc0sg.2.2.0"><tr data-reactid=".hi3zddc0sg.2.2.0.0"><td data-reactid=".hi3zddc0sg.2.2.0.0.0"><a class="prev" href="decasteljau" data-reactid=".hi3zddc0sg.2.2.0.0.0.0">6. de Casteljau&#x27;s algorithm</a></td><td class="toc" data-reactid=".hi3zddc0sg.2.2.0.0.1"><a class="" href="/" data-reactid=".hi3zddc0sg.2.2.0.0.1.0">ToC</a></td><td data-reactid=".hi3zddc0sg.2.2.0.0.2"><a class="next" href="splitting" data-reactid=".hi3zddc0sg.2.2.0.0.2.0">8. Splitting curves</a></td></tr></tbody></table></div><footer class="copyright" data-reactid=".hi3zddc0sg.3"><span data-reactid=".hi3zddc0sg.3.0">This article is © 2011-2016 to me, Mike &quot;Pomax&quot; Kamermans, but the text, code, and images are </span><a href="https://github.com/Pomax/bezierinfo/blob/gh-pages/LICENSE.md" data-reactid=".hi3zddc0sg.3.1">almost no rights reserved</a><span data-reactid=".hi3zddc0sg.3.2">. Go do something cool with it!</span></footer></div>
</body>
</html>

43
pages/generatePages.js
View File

@@ -1,43 +0,0 @@
//var unhook = require('./requirehook');
//unhook();
var React = require('react');
var ReactDOM = require('react-dom');
var ReactDOMServer = require('react-dom/server');
var ReactRouter = require('react-router');
var RoutingContext = ReactRouter.RoutingContext;
var match = ReactRouter.match;
var RouteMap = require('./routemap');
var routes = RouteMap.routes;
var paths = RouteMap.paths;
var sections = RouteMap.sections;
var rootComponent = RouteMap.rootComponent;
var RouteSet = RouteMap.RouteSet;
var fs = require("fs-extra");
var pageWrap = require("../lib/site/pagewrap");
var title = "A Primer on Bézier Curves";
var html = ReactDOMServer.renderToStaticMarkup(React.createElement(rootComponent));
console.log("generating " + title + " main page");
fs.mkdirp('./pages/');
fs.writeFile('./pages/index.html', pageWrap(title, html), 'utf-8');
var writeHTML = function(location) {
return function(err, _, renderProps) {
title = sections[location].getDefaultProps().title;
routingContext = React.createElement(RoutingContext, renderProps);
html = ReactDOMServer.renderToString(routingContext);
console.log(title);
fs.mkdirp('./pages/' + location);
fs.writeFile('./pages/' + location + '/index.html', pageWrap(title, html), 'utf-8');
};
};
paths.forEach(function(location) {
var opts = { routes:routes, location: location };
match(opts, writeHTML(location));
});

13
pages/graduatedoffset/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/index.html
View File

@@ -1,13 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>
A Primer on Bézier Curves
</title>
<base href='..'>
</head>
<body>
<div><div class="ribbon"><img src="images/ribbon.png" alt="This page on GitHub" usemap="#githubmap" width="200px" height="149px"/><map name="githubmap"><area shape="poly" coords="30,0, 200,0, 200,114" href="http://github.com/pomax/BezierInfo-2" alt="This page on GitHub"/></map></div><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><div><p class="single-notice">This is the one-page-per-section version of the primer, to view the regular version, please click <a href="..">here</a>.</p><div><navigation><ul class="navigation"><li data-number="0"><a href="#preface">Preface</a></li><li data-number="1"><a href="#introduction">A lightning introduction</a></li><li data-number="2"><a href="#whatis">So what makes a Bézier Curve?</a></li><li data-number="3"><a href="#explanation">The mathematics of Bézier curves</a></li><li data-number="4"><a href="#control">Controlling Bézier curvatures</a></li><li data-number="5"><a href="#matrix">Bézier curvatures as matrix operations</a></li><li data-number="6"><a href="#decasteljau">de Casteljau&#x27;s algorithm</a></li><li data-number="7"><a href="#flattening">Simplified drawing</a></li><li data-number="8"><a href="#splitting">Splitting curves</a></li><li data-number="9"><a href="#matrixsplit">Splitting curves using matrices</a></li><li data-number="10"><a href="#reordering">Lowering and elevating curve order</a></li><li data-number="11"><a href="#derivatives">Derivatives</a></li><li data-number="12"><a href="#pointvectors">Tangents and normals</a></li><li data-number="13"><a href="#components">Component functions</a></li><li data-number="14"><a href="#extremities">Finding extremities: root finding</a></li><li data-number="15"><a href="#boundingbox">Bounding boxes</a></li><li data-number="16"><a href="#aligning">Aligning curves</a></li><li data-number="17"><a href="#tightbounds">Tight boxes</a></li><li data-number="18"><a href="#canonical">Canonical form (for cubic curves)</a></li><li data-number="19"><a href="#arclength">Arc length</a></li><li data-number="20"><a href="#arclengthapprox">Approximated arc length</a></li><li data-number="21"><a href="#tracing">Tracing a curve at fixed distance intervals</a></li><li data-number="22"><a href="#intersections">Intersections</a></li><li data-number="23"><a href="#curveintersection">Curve/curve intersection</a></li><li data-number="24"><a href="#abc">The projection identity</a></li><li data-number="25"><a href="#moulding">Manipulating a curve</a></li><li data-number="26"><a href="#pointcurves">Creating a curve from three points</a></li><li data-number="27"><a href="#catmullconv">Bézier curves and Catmull-Rom curves</a></li><li data-number="28"><a href="#catmullmoulding">Creating a Catmull-Rom curve from three points</a></li><li data-number="29"><a href="#polybezier">Forming poly-Bézier curves</a></li><li data-number="30"><a href="#shapes">Boolean shape operations</a></li><li data-number="31"><a href="#projections">Projecting a point onto a Bézier curve</a></li><li data-number="32"><a href="#offsetting">Curve offsetting</a></li><li data-number="33"><a href="#graduatedoffset">Graduated curve offsetting</a></li><li data-number="34"><a href="#circles">Circles and quadratic Bézier curves</a></li><li data-number="35"><a href="#circles_cubic">Circles and cubic Bézier curves</a></li><li data-number="36"><a href="#arcapproximation">Approximating Bézier curves with circular arcs</a></li></ul></navigation></div></div><footer class="copyright">This article is © 2011-2016 to me, Mike &quot;Pomax&quot; Kamermans, but the text, code, and images are <a href="https://github.com/Pomax/bezierinfo/blob/gh-pages/LICENSE.md">almost no rights reserved</a>. Go do something cool with it!</footer></div>
</body>
</html>

13
pages/inflections/index.html
View File

File diff suppressed because one or more lines are too long

29
pages/intersections/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/introduction/index.html
View File

@@ -1,13 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>
A lightning introduction
</title>
<base href='..'>
</head>
<body>
<div data-reactid=".1cqscxeha8" data-react-checksum="1527031050"><div class="ribbon" data-reactid=".1cqscxeha8.0"><img src="images/ribbon.png" alt="This page on GitHub" usemap="#githubmap" width="200px" height="149px" data-reactid=".1cqscxeha8.0.0"/><map name="githubmap" data-reactid=".1cqscxeha8.0.1"><area shape="poly" coords="30,0, 200,0, 200,114" href="http://github.com/pomax/BezierInfo-2" alt="This page on GitHub" data-reactid=".1cqscxeha8.0.1.0"/></map></div><header data-reactid=".1cqscxeha8.1"><h1 data-reactid=".1cqscxeha8.1.0">A Primer on Bézier Curves</h1><h2 data-reactid=".1cqscxeha8.1.1">A free, online book for when you really need to know how to do Bézier things.</h2></header><div data-reactid=".1cqscxeha8.2"><table class="relatives before" data-reactid=".1cqscxeha8.2.0"><tbody data-reactid=".1cqscxeha8.2.0.0"><tr data-reactid=".1cqscxeha8.2.0.0.0"><td data-reactid=".1cqscxeha8.2.0.0.0.0"><a class="prev" href="preface" data-reactid=".1cqscxeha8.2.0.0.0.0.0">0. Preface</a></td><td class="toc" data-reactid=".1cqscxeha8.2.0.0.0.1"><a class="" href="/" data-reactid=".1cqscxeha8.2.0.0.0.1.0">ToC</a></td><td data-reactid=".1cqscxeha8.2.0.0.0.2"><a class="next" href="whatis" data-reactid=".1cqscxeha8.2.0.0.0.2.0">2. So what makes a Bézier Curve?</a></td></tr></tbody></table><section data-reactid=".1cqscxeha8.2.$introduction"><h2 data-num="1" data-reactid=".1cqscxeha8.2.$introduction.0"><a href="#introduction" data-reactid=".1cqscxeha8.2.$introduction.0.0">A lightning introduction</a></h2><p data-reactid=".1cqscxeha8.2.$introduction.1">Let&#x27;s start with the good stuff: when we&#x27;re talking about Bézier curves, we&#x27;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 &quot;intermediate&quot; 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" data-reactid=".1cqscxeha8.2.$introduction.2"><figure class="inline" data-reactid=".1cqscxeha8.2.$introduction.2.0"><canvas tabindex="0" data-reactid=".1cqscxeha8.2.$introduction.2.0.0"></canvas><figcaption data-reactid=".1cqscxeha8.2.$introduction.2.0.1"><span data-reactid=".1cqscxeha8.2.$introduction.2.0.1.0">Quadratic Bézier curves</span><span data-reactid=".1cqscxeha8.2.$introduction.2.0.1.1"> </span></figcaption></figure><figure class="inline" data-reactid=".1cqscxeha8.2.$introduction.2.1"><canvas tabindex="0" data-reactid=".1cqscxeha8.2.$introduction.2.1.0"></canvas><figcaption data-reactid=".1cqscxeha8.2.$introduction.2.1.1"><span data-reactid=".1cqscxeha8.2.$introduction.2.1.1.0">Cubic Bézier curves</span><span data-reactid=".1cqscxeha8.2.$introduction.2.1.1.1"> </span></figcaption></figure></div><p data-reactid=".1cqscxeha8.2.$introduction.3">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, the 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><table class="relatives after" data-reactid=".1cqscxeha8.2.2"><tbody data-reactid=".1cqscxeha8.2.2.0"><tr data-reactid=".1cqscxeha8.2.2.0.0"><td data-reactid=".1cqscxeha8.2.2.0.0.0"><a class="prev" href="preface" data-reactid=".1cqscxeha8.2.2.0.0.0.0">0. Preface</a></td><td class="toc" data-reactid=".1cqscxeha8.2.2.0.0.1"><a class="" href="/" data-reactid=".1cqscxeha8.2.2.0.0.1.0">ToC</a></td><td data-reactid=".1cqscxeha8.2.2.0.0.2"><a class="next" href="whatis" data-reactid=".1cqscxeha8.2.2.0.0.2.0">2. So what makes a Bézier Curve?</a></td></tr></tbody></table></div><footer class="copyright" data-reactid=".1cqscxeha8.3"><span data-reactid=".1cqscxeha8.3.0">This article is © 2011-2016 to me, Mike &quot;Pomax&quot; Kamermans, but the text, code, and images are </span><a href="https://github.com/Pomax/bezierinfo/blob/gh-pages/LICENSE.md" data-reactid=".1cqscxeha8.3.1">almost no rights reserved</a><span data-reactid=".1cqscxeha8.3.2">. Go do something cool with it!</span></footer></div>
</body>
</html>

13
pages/matrix/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/matrixsplit/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/moulding/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/offsetting/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/pointcurves/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/pointvectors/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/polybezier/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/preface/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/projections/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/reordering/index.html
View File

File diff suppressed because one or more lines are too long

54
pages/requirehook.js
View File

@@ -1,54 +0,0 @@
/**
* In order to run all this code in Node.js, rather than bundling it using
* webpack, we need to hook into Node's require, so that it runs .js and
* .jsx files through our preprocessors, as well as Babel.
*
* We use Pirates for that O_O!
*/
var pirates = require("pirates");
var babel = require("babel-core");
var loaders = {
latex: require('../lib/latex-loader'),
pre: require('../lib/pre-loader'),
p: require('../lib/p-loader'),
babel: function(source) {
return babel.transform(source, {
presets: ['es2015', 'react']
}).code;
}
};
function convertJS(source, filename) {
// bug? https://github.com/ariporad/pirates/issues/15
if (!filename.match(/.js(x)$/)) return source;
source = loaders.p(source);
source = loaders.pre(source);
source = loaders.latex(source);
source = loaders.babel(source);
return source;
}
/*
function convertLESS(source, filename) {
// bug? https://github.com/ariporad/pirates/issues/15
if (!filename.match(/.less$/)) return source;
source = loaders.p(source);
source = loaders.pre(source);
source = loaders.latex(source);
source = loaders.babel(source);
return source;
}
*/
var revert = [
pirates.addHook(convertJS, { exts: ['.js'] }),
pirates.addHook(convertJS, { exts: ['.jsx'] }),
pirates.addHook(convertLESS, { exts: ['.less'] })
];
module.exports = function() {
revert.forEach(function(fn) { fn(); });
};

25817
pages/routemap.js
View File

File diff suppressed because it is too large Load Diff

13
pages/shapes/index.html
View File

File diff suppressed because one or more lines are too long

28
pages/splitting/index.html
View File

@@ -1,28 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>
Splitting curves
</title>
<base href='..'>
</head>
<body>
<div data-reactid=".nq7zum5mo0" data-react-checksum="-1803885457"><div class="ribbon" data-reactid=".nq7zum5mo0.0"><img src="images/ribbon.png" alt="This page on GitHub" usemap="#githubmap" width="200px" height="149px" data-reactid=".nq7zum5mo0.0.0"/><map name="githubmap" data-reactid=".nq7zum5mo0.0.1"><area shape="poly" coords="30,0, 200,0, 200,114" href="http://github.com/pomax/BezierInfo-2" alt="This page on GitHub" data-reactid=".nq7zum5mo0.0.1.0"/></map></div><header data-reactid=".nq7zum5mo0.1"><h1 data-reactid=".nq7zum5mo0.1.0">A Primer on Bézier Curves</h1><h2 data-reactid=".nq7zum5mo0.1.1">A free, online book for when you really need to know how to do Bézier things.</h2></header><div data-reactid=".nq7zum5mo0.2"><table class="relatives before" data-reactid=".nq7zum5mo0.2.0"><tbody data-reactid=".nq7zum5mo0.2.0.0"><tr data-reactid=".nq7zum5mo0.2.0.0.0"><td data-reactid=".nq7zum5mo0.2.0.0.0.0"><a class="prev" href="flattening" data-reactid=".nq7zum5mo0.2.0.0.0.0.0">7. Simplified drawing</a></td><td class="toc" data-reactid=".nq7zum5mo0.2.0.0.0.1"><a class="" href="/" data-reactid=".nq7zum5mo0.2.0.0.0.1.0">ToC</a></td><td data-reactid=".nq7zum5mo0.2.0.0.0.2"><a class="next" href="matrixsplit" data-reactid=".nq7zum5mo0.2.0.0.0.2.0">9. Splitting curves using matrices</a></td></tr></tbody></table><section data-reactid=".nq7zum5mo0.2.$splitting"><h2 data-num="8" data-reactid=".nq7zum5mo0.2.$splitting.0"><a href="#splitting" data-reactid=".nq7zum5mo0.2.$splitting.0.0">Splitting curves</a></h2><p data-reactid=".nq7zum5mo0.2.$splitting.1"><span data-reactid=".nq7zum5mo0.2.$splitting.1.0">With de Casteljau&#x27;s algorithm we also find all the points we need to split up a Bézier curve into two, smaller curves, which taken together form the original curve. When we construct de Casteljau&#x27;s skeleton for some value</span><i data-reactid=".nq7zum5mo0.2.$splitting.1.1">t</i><span data-reactid=".nq7zum5mo0.2.$splitting.1.2">, the procedure gives us all the points we need to split a curve at that </span><i data-reactid=".nq7zum5mo0.2.$splitting.1.3">t</i><span data-reactid=".nq7zum5mo0.2.$splitting.1.4"> value: one curve is defined by all the inside skeleton points found prior to our on-curve point, with the other curve being defined by all the inside skeleton points after our on-curve point.</span></p><figure class="false" data-reactid=".nq7zum5mo0.2.$splitting.2"><canvas tabindex="0" data-reactid=".nq7zum5mo0.2.$splitting.2.0"></canvas><figcaption data-reactid=".nq7zum5mo0.2.$splitting.2.1"><span data-reactid=".nq7zum5mo0.2.$splitting.2.1.0">Splitting a curve</span><span data-reactid=".nq7zum5mo0.2.$splitting.2.1.1"> </span></figcaption></figure><div class="howtocode" data-reactid=".nq7zum5mo0.2.$splitting.3"><h3 data-reactid=".nq7zum5mo0.2.$splitting.3.0">implementing curve splitting</h3><p data-reactid=".nq7zum5mo0.2.$splitting.3.1">We can implement curve splitting by bolting some extra logging onto the de Casteljau function:</p><pre data-reactid=".nq7zum5mo0.2.$splitting.3.2"><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.0">left=[]</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.1">
</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.2">right=[]</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.3">
</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.4">function drawCurve(points[], t):</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.5">
</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.6"> if(points.length==1):</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.7">
</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.8"> left.add(points[0])</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.9">
</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.a"> right.add(points[0])</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.b">
</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.c"> draw(points[0])</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.d">
</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.e"> else:</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.f">
</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.g"> newpoints=array(points.size-1)</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.h">
</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.i"> for(i=0; i&lt;newpoints.length; i++):</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.j">
</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.k"> if(i==0):</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.l">
</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.m"> left.add(points[i])</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.n">
</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.o"> if(i==newpoints.length-1):</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.p">
</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.q"> right.add(points[i+1])</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.r">
</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.s"> newpoints[i] = (1-t) * points[i] + t * points[i+1]</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.t">
</span><span data-reactid=".nq7zum5mo0.2.$splitting.3.2.u"> drawCurve(newpoints, t)</span></pre><p data-reactid=".nq7zum5mo0.2.$splitting.3.3"><span data-reactid=".nq7zum5mo0.2.$splitting.3.3.0">After running this function for some value </span><i data-reactid=".nq7zum5mo0.2.$splitting.3.3.1">t</i><span data-reactid=".nq7zum5mo0.2.$splitting.3.3.2">, the </span><i data-reactid=".nq7zum5mo0.2.$splitting.3.3.3">left</i><span data-reactid=".nq7zum5mo0.2.$splitting.3.3.4"> and </span><i data-reactid=".nq7zum5mo0.2.$splitting.3.3.5">right</i><span data-reactid=".nq7zum5mo0.2.$splitting.3.3.6"> arrays will contain all the coordinates for two new curves - one to the &quot;left&quot; of our </span><i data-reactid=".nq7zum5mo0.2.$splitting.3.3.7">t</i><span data-reactid=".nq7zum5mo0.2.$splitting.3.3.8"> value, the other on the &quot;right&quot;, of the same order as the original curve, and overlayed exactly on the original curve.</span></p></div><p data-reactid=".nq7zum5mo0.2.$splitting.4">This is best illustrated with an animated graphic (click to play/pause):</p><figure class="false" data-reactid=".nq7zum5mo0.2.$splitting.5"><canvas tabindex="0" data-reactid=".nq7zum5mo0.2.$splitting.5.0"></canvas><figcaption data-reactid=".nq7zum5mo0.2.$splitting.5.1"><span data-reactid=".nq7zum5mo0.2.$splitting.5.1.0">Bézier curve splitting</span><span data-reactid=".nq7zum5mo0.2.$splitting.5.1.1"> </span></figcaption></figure></section><table class="relatives after" data-reactid=".nq7zum5mo0.2.2"><tbody data-reactid=".nq7zum5mo0.2.2.0"><tr data-reactid=".nq7zum5mo0.2.2.0.0"><td data-reactid=".nq7zum5mo0.2.2.0.0.0"><a class="prev" href="flattening" data-reactid=".nq7zum5mo0.2.2.0.0.0.0">7. Simplified drawing</a></td><td class="toc" data-reactid=".nq7zum5mo0.2.2.0.0.1"><a class="" href="/" data-reactid=".nq7zum5mo0.2.2.0.0.1.0">ToC</a></td><td data-reactid=".nq7zum5mo0.2.2.0.0.2"><a class="next" href="matrixsplit" data-reactid=".nq7zum5mo0.2.2.0.0.2.0">9. Splitting curves using matrices</a></td></tr></tbody></table></div><footer class="copyright" data-reactid=".nq7zum5mo0.3"><span data-reactid=".nq7zum5mo0.3.0">This article is © 2011-2016 to me, Mike &quot;Pomax&quot; Kamermans, but the text, code, and images are </span><a href="https://github.com/Pomax/bezierinfo/blob/gh-pages/LICENSE.md" data-reactid=".nq7zum5mo0.3.1">almost no rights reserved</a><span data-reactid=".nq7zum5mo0.3.2">. Go do something cool with it!</span></footer></div>
</body>
</html>

13
pages/tightbounds/index.html
View File

@@ -1,13 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>
Tight boxes
</title>
<base href='..'>
</head>
<body>
<div data-reactid=".1lnpc6xk8ao" data-react-checksum="-802171951"><div class="ribbon" data-reactid=".1lnpc6xk8ao.0"><img src="images/ribbon.png" alt="This page on GitHub" usemap="#githubmap" width="200px" height="149px" data-reactid=".1lnpc6xk8ao.0.0"/><map name="githubmap" data-reactid=".1lnpc6xk8ao.0.1"><area shape="poly" coords="30,0, 200,0, 200,114" href="http://github.com/pomax/BezierInfo-2" alt="This page on GitHub" data-reactid=".1lnpc6xk8ao.0.1.0"/></map></div><header data-reactid=".1lnpc6xk8ao.1"><h1 data-reactid=".1lnpc6xk8ao.1.0">A Primer on Bézier Curves</h1><h2 data-reactid=".1lnpc6xk8ao.1.1">A free, online book for when you really need to know how to do Bézier things.</h2></header><div data-reactid=".1lnpc6xk8ao.2"><table class="relatives before" data-reactid=".1lnpc6xk8ao.2.0"><tbody data-reactid=".1lnpc6xk8ao.2.0.0"><tr data-reactid=".1lnpc6xk8ao.2.0.0.0"><td data-reactid=".1lnpc6xk8ao.2.0.0.0.0"><a class="prev" href="aligning" data-reactid=".1lnpc6xk8ao.2.0.0.0.0.0">16. Aligning curves</a></td><td class="toc" data-reactid=".1lnpc6xk8ao.2.0.0.0.1"><a class="" href="/" data-reactid=".1lnpc6xk8ao.2.0.0.0.1.0">ToC</a></td><td data-reactid=".1lnpc6xk8ao.2.0.0.0.2"><a class="next" href="canonical" data-reactid=".1lnpc6xk8ao.2.0.0.0.2.0">18. Canonical form (for cubic curves)</a></td></tr></tbody></table><section data-reactid=".1lnpc6xk8ao.2.$tightbounds"><h2 data-num="17" data-reactid=".1lnpc6xk8ao.2.$tightbounds.0"><a href="#tightbounds" data-reactid=".1lnpc6xk8ao.2.$tightbounds.0.0">Tight boxes</a></h2><p data-reactid=".1lnpc6xk8ao.2.$tightbounds.1">With our knowledge of bounding boxes, and curve alignment, We can now form the &quot;tight&quot; bounding box for curves. We first align our curve, recording the translation we performed, &quot;T&quot;, and the rotation angle we used, &quot;R&quot;. We then determine the aligned curve&#x27;s normal bounding box. Once we have that, we can map that bounding box back to our original curve by rotating it by -R, and then translating it by -T. We now have nice tight bounding boxes for our curves:</p><figure class="false" data-reactid=".1lnpc6xk8ao.2.$tightbounds.2"><canvas tabindex="0" data-reactid=".1lnpc6xk8ao.2.$tightbounds.2.0"></canvas><figcaption data-reactid=".1lnpc6xk8ao.2.$tightbounds.2.1"><span data-reactid=".1lnpc6xk8ao.2.$tightbounds.2.1.0">Aligning a quadratic curve</span><span data-reactid=".1lnpc6xk8ao.2.$tightbounds.2.1.1"> </span></figcaption></figure><figure class="false" data-reactid=".1lnpc6xk8ao.2.$tightbounds.3"><canvas tabindex="0" data-reactid=".1lnpc6xk8ao.2.$tightbounds.3.0"></canvas><figcaption data-reactid=".1lnpc6xk8ao.2.$tightbounds.3.1"><span data-reactid=".1lnpc6xk8ao.2.$tightbounds.3.1.0">Aligning a cubic curve</span><span data-reactid=".1lnpc6xk8ao.2.$tightbounds.3.1.1"> </span></figcaption></figure><p data-reactid=".1lnpc6xk8ao.2.$tightbounds.4">These are, strictly speaking, not necessarily the tightest possible bounding boxes. It is possible to compute the optimal bounding box by determining which spanning lines we need to effect a minimal box area, but because of the parametric nature of Bézier curves this is actually a rather costly operation, and the gain in bounding precision is often not worth it. If there is high demand for it, I&#x27;ll add a section on how to precisely compute the best fit bounding box, but the maths is fairly gruelling and just not really worth spending time on.</p></section><table class="relatives after" data-reactid=".1lnpc6xk8ao.2.2"><tbody data-reactid=".1lnpc6xk8ao.2.2.0"><tr data-reactid=".1lnpc6xk8ao.2.2.0.0"><td data-reactid=".1lnpc6xk8ao.2.2.0.0.0"><a class="prev" href="aligning" data-reactid=".1lnpc6xk8ao.2.2.0.0.0.0">16. Aligning curves</a></td><td class="toc" data-reactid=".1lnpc6xk8ao.2.2.0.0.1"><a class="" href="/" data-reactid=".1lnpc6xk8ao.2.2.0.0.1.0">ToC</a></td><td data-reactid=".1lnpc6xk8ao.2.2.0.0.2"><a class="next" href="canonical" data-reactid=".1lnpc6xk8ao.2.2.0.0.2.0">18. Canonical form (for cubic curves)</a></td></tr></tbody></table></div><footer class="copyright" data-reactid=".1lnpc6xk8ao.3"><span data-reactid=".1lnpc6xk8ao.3.0">This article is © 2011-2016 to me, Mike &quot;Pomax&quot; Kamermans, but the text, code, and images are </span><a href="https://github.com/Pomax/bezierinfo/blob/gh-pages/LICENSE.md" data-reactid=".1lnpc6xk8ao.3.1">almost no rights reserved</a><span data-reactid=".1lnpc6xk8ao.3.2">. Go do something cool with it!</span></footer></div>
</body>
</html>

13
pages/tracing/index.html
View File

File diff suppressed because one or more lines are too long

13
pages/whatis/index.html
View File

File diff suppressed because one or more lines are too long

37
webpack.config.js
View File

@@ -2,9 +2,6 @@ var webpack = require('webpack');
var path = require('path');
var fs = require('fs');
// see http://jlongster.com/Backend-Apps-with-Webpack--Part-I
var externals = false;
// Bundle entry point
var entry = ['./components/App.jsx'];
@@ -20,7 +17,7 @@ var output = {
// Necessary webpack loaders for converting our content:
var webpackLoaders = [
'babel-loader',
'eslint',
'eslint-loader',
__dirname + '/lib/latex-loader',
__dirname + '/lib/pre-loader',
__dirname + '/lib/p-loader'
@@ -30,8 +27,6 @@ var plugins = [];
// Dev mode: make certain concessions to speed up dev work.
if(process.argv.indexOf("--prod") === -1 && process.argv.indexOf("--lint")) {
// use the webpack hot Reload server:
entry.push('webpack/hot/dev-server');
// allow code in textareas when in dev mode:
webpackLoaders.push(__dirname + '/lib/textarea-loader');
}
@@ -41,26 +36,7 @@ else if(process.argv.indexOf("--prod") > -1) {
plugins.push(new webpack.optimize.UglifyJsPlugin());
}
// However, do we want one full page, or single pages with react-router?
if(process.argv.indexOf("--singles") !== -1 ) {
entry = ['./lib/site/routemap.js'];
target = "node";
output = {
path: output.path + '/pages',
filename: "routemap.js",
library: "routemap",
libraryTarget: "commonjs2"
};
console.log("\n","marking node_modules as external","\n");
externals = {};
fs.readdirSync('node_modules')
.filter(function(x) { return ['.bin'].indexOf(x) === -1; })
.forEach(function(mod) { externals[mod] = 'commonjs ' + mod; });
plugins.pop();
}
console.log("content for entry:", entry);
// And the final config that webpack will read in.
module.exports = {
@@ -85,15 +61,12 @@ module.exports = {
test: /.jsx?$/,
include: [
/components/,
/lib.site/
/lib.site/,
/locales/
],
loaders: webpackLoaders
}
]
},
plugins: plugins,
eslint: {
configFile: __dirname + '/.eslintrc'
},
externals: externals
plugins: plugins
};