1
0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-02-25 01:53:05 +01:00

Various edits for "explanation" section. (#177)

This commit is contained in:
Simon Cozens 2019-06-11 00:59:06 +01:00 committed by Pomax
parent def3e7e3af
commit 50ef8bdf3c

View File

@ -1,6 +1,8 @@
# 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:
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)
@ -8,7 +10,7 @@ Bézier curves are a form of "parametric" function. Mathematically speaking, par
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:
So far, so good. Now, let's look at parametric functions, and how they cheat. Let's take the following two functions:
\[
\begin{matrix}
@ -41,17 +43,17 @@ So, parametric curves don't define a <i>y</i> coordinate in terms of an <i>x</i>
<Graphic 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?
Bézier curves are just one out of the many classes of parametric functions, and are characterised by using the same base function for all of the output values. In the example we saw above, the <i>x</i> and <i>y</i> values were generated by different functions (one uses a sine, the other a cosine); but Bézier curves use the "binomial polynomial" for both the <i>x</i> and <i>y</i> outputs. So what are binomial polynomials?
You may remember polynomials from high school, where they're those sums that look like:
You may remember polynomials from high school. They're those sums that look like this:
\[
f(x) = a \cdot x^3 + b \cdot x^2 + c \cdot x + d
\]
If they have a highest order term <i></i> they're called "cubic" polynomials, if it's <i></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!)
If the highest order term they have is <i></i>, they're called "cubic" polynomials; if it's <i></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:
Bézier curves are polynomials of <i>t</i>, rather than <i>x</i>, with the value for <i>t</i> being fixed 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{aligned}
@ -61,7 +63,7 @@ Bézier curves are polynomials of <i>t</i>, rather than <i>x</i>, with the value
\end{aligned}
\]
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:
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{aligned}
@ -134,7 +136,7 @@ binomial(n,k):
return lut[n][k]
```
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:
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 <i>n/k</i> pair is requested that isn't in the LUT yet, we expand it first. Our basis function now looks like this:
```
function Bezier(n,t):
@ -144,7 +146,7 @@ function Bezier(n,t):
return sum
```
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:
Perfect. Of course, we can optimize further. For most computer graphics purposes, we don't need arbitrary curves (although we will also provide code for arbitrary curves in this primer); we need quadratic and cubic curves, and that means we can drastically simplify the code:
```
function Bezier(2,t):
@ -166,4 +168,4 @@ And now we know how to program the basis function. Excellent.
</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.
So, now we know what the basis function looks like, time to add in the magic that makes Bézier curves so special: control points.