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

no more LaTeX component.

Browse Source
This commit is contained in:
Pomax
2015-12-31 16:46:04 -08:00
parent a3a01fe0a3
commit ff9abb8bfc
6 changed files with 87 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/sections/control/index.js
View File

@@ -1,7 +1,6 @@
var React = require("react");
var Graphic = require("../../Graphic.jsx");
var SectionHeader = require("../../SectionHeader.jsx");
var LaTeX = require("../../LaTeX.jsx");
var Control = React.createClass({
statics: {
@@ -211,14 +210,14 @@ var Control = React.createClass({
point with a value that changes its strength. These values are conventionally called "Weights", and
we can add them to our original Bézier function:</p>
<LaTeX>\[
<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}}}
\cdot\
\underset{weight}{\underbrace{w_i}}
\]</LaTeX>
\]</p>
<p>That looks complicated, but as it so happens, the "weights" are actually just the coordinate values
we want our curve to have: for an <i>n<sup>th</sup></i> order curve, w<sub>0</sub> is our start coordinate,
@@ -226,11 +225,11 @@ var Control = React.createClass({
a cubic curve that starts at (120,160), is controlled by (35,200) and (220,260) and ends at (220,40),
we use this Bézier curve:</p>
<LaTeX>\[
<p>\[
\left \{ \begin{matrix}
x = BLUE[120] \cdot (1-t)^3 + BLUE[35] \cdot 3 \cdot (1-t)^2 \cdot t + BLUE[220] \cdot 3 \cdot (1-t) \cdot t^2 + BLUE[220] \cdot t^3 \\
y = BLUE[160] \cdot (1-t)^3 + BLUE[200] \cdot 3 \cdot (1-t)^2 \cdot t + BLUE[260] \cdot 3 \cdot (1-t) \cdot t^2 + BLUE[40] \cdot t^3
\end{matrix} \right. \]</LaTeX>
\end{matrix} \right. \]</p>
<p>Which gives us the curve we saw at the top of the article:</p>

1
components/sections/decasteljau/index.js
View File

@@ -1,7 +1,6 @@
var React = require("react");
var Graphic = require("../../Graphic.jsx");
var SectionHeader = require("../../SectionHeader.jsx");
var LaTeX = require("../../LaTeX.jsx");
var deCasteljau = React.createClass({
statics: {

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

@@ -1,7 +1,6 @@
var React = require("react");
var Graphic = require("../../Graphic.jsx");
var SectionHeader = require("../../SectionHeader.jsx");
var LaTeX = require("../../LaTeX.jsx");
var Explanation = React.createClass({
statics: {
@@ -29,9 +28,9 @@ var Explanation = React.createClass({
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>
<LaTeX>\[
<p>\[
f(x) = \cos(x)
\]</LaTeX>
\]</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
@@ -40,10 +39,10 @@ var Explanation = React.createClass({
<p>So far so good. Now, let's look at parametric functions, and how they cheat.
Let's take the following two functions:</p>
<LaTeX>\[\begin{matrix}
<p>\[\begin{matrix}
f(a) = \cos(a) \\
f(b) = \sin(b)
\end{matrix}\]</LaTeX>
\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>,
@@ -51,11 +50,11 @@ var Explanation = React.createClass({
in that function. Parametric functions cheat by changing that. In a parametric function
all the different functions share a variable, like this:</p>
<LaTeX>\[
<p>\[
\left \{ \begin{matrix}
f_a(t) = \cos(t) \\
f_b(t) = \sin(t)
\end{matrix} \right. \]</LaTeX>
\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>.
@@ -63,11 +62,11 @@ var Explanation = React.createClass({
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>
<LaTeX>\[
<p>\[
\left \{ \begin{matrix}
x = \cos(t) \\
y = \sin(t)
\end{matrix} \right. \]</LaTeX>
\end{matrix} \right. \]</p>
<p>There we go. <i>x</i>/<i>y</i> coordinates, linked through some mystery value <i>t</i>.</p>
@@ -89,9 +88,9 @@ var Explanation = React.createClass({
<p>You may remember polynomials from high school, where they're those sums that look like:</p>
<LaTeX>\[
<p>\[
f(x) = a \cdot x^3 + b \cdot x^2 + c \cdot x + d
\]</LaTeX>
\]</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
@@ -101,21 +100,21 @@ var Explanation = React.createClass({
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>
<LaTeX>\[ \begin{align*}
<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*} \]</LaTeX>
\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>
<LaTeX>\[ \begin{align*}
<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*} \]</LaTeX>
\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
@@ -126,23 +125,23 @@ var Explanation = React.createClass({
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>
<LaTeX>\[ \begin{align*}
<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*} \]</LaTeX>
\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>
<LaTeX>\[
<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}}}
\]</LaTeX>
\]</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

41
components/sections/matrix/index.js
View File

@@ -1,6 +1,5 @@
var React = require("react");
var SectionHeader = require("../../SectionHeader.jsx");
var LaTeX = require("../../LaTeX.jsx");
var Matrix = React.createClass({
statics: {
@@ -16,85 +15,85 @@ var Matrix = React.createClass({
as a polynomial basis function, the weight matrix, and the actual coordinates as matrix.
Let's look at what this means for the cubic curve :</p>
<LaTeX>\[
<p>\[
B(t) = P_1 \cdot (1-t)^3 + P_2 \cdot 3 \cdot (1-t)^2 \cdot t + P_3 \cdot 3 \cdot (1-t) \cdot t^2 + P_4 \cdot t^3
\]</LaTeX>
\]</p>
<p>Disregarding our actual coordinates for a moment, we have:</p>
<LaTeX>\[
<p>\[
B(t) = (1-t)^3 + 3 \cdot (1-t)^2 \cdot t + 3 \cdot (1-t) \cdot t^2 + t^3
\]</LaTeX>
\]</p>
<p>We can write this as a sum of four expressions:</p>
<LaTeX>\[
<p>\[
\begin{matrix}
... & = & (1-t)^3 \\
& + & 3 \cdot (1-t)^2 \cdot t \\
& + & 3 \cdot (1-t) \cdot t^2 \\
& + & t^3 \\
\end{matrix}
\]</LaTeX>
\]</p>
<p>And we can expand these expressions:</p>
<LaTeX>\[
<p>\[
\begin{matrix}
... & = & (1-t) \cdot (1-t) \cdot (1-t) & = & -t^3 + 3 \cdot t^2 - 3 \cdot t + 1 \\
& + & 3 \cdot (1-t) \cdot (1-t) \cdot t & = & 3 \cdot t^3 - 6 \cdot t^2 + 3 \cdot t \\
& + & 3 \cdot (1-t) \cdot t \cdot t & = & -3 \cdot t^3 + 3 \cdot t^2 \\
& + & t \cdot t \cdot t & = & t^3 \\
\end{matrix}
\]</LaTeX>
\]</p>
<p>Furthermore, we can make all the 1 and 0 factors explicit:</p>
<LaTeX>\[
<p>\[
\begin{matrix}
... & = & -1 \cdot t^3 + 3 \cdot t^2 - 3 \cdot t + 1 \\
& + & +3 \cdot t^3 - 6 \cdot t^2 + 3 \cdot t + 0 \\
& + & -3 \cdot t^3 + 3 \cdot t^2 + 0 \cdot t + 0 \\
& + & +1 \cdot t^3 + 0 \cdot t^2 + 0 \cdot t + 0 \\
\end{matrix}
\]</LaTeX>
\]</p>
<p>And <em>that</em>, we can view as a series of four matrix operations:</p>
<LaTeX>\[
<p>\[
\begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}-1 \\ 3 \\ -3 \\ 1\end{bmatrix}
+ \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}3 \\ -6 \\ 3 \\ 0\end{bmatrix}
+ \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}-3 \\ 3 \\ 0 \\ 0\end{bmatrix}
+ \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}1 \\ 0 \\ 0 \\ 0\end{bmatrix}
\]</LaTeX>
\]</p>
<p>If we compact this into a single matrix operation, we get:</p>
<LaTeX>\[
<p>\[
\begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}
-1 & 3 & -3 & 1 \\
3 & -6 & 3 & 0 \\
-3 & 3 & 0 & 0 \\
1 & 0 & 0 & 0
\end{bmatrix}
\]</LaTeX>
\]</p>
<p>This kind of polynomial basis representation is generally written with the bases in
increasing order, which means we need to flip our <em>t</em> matrix horizontally, and our
big "mixing" matrix upside down:</p>
<LaTeX>\[
<p>\[
\begin{bmatrix}1 & t & t^2 & t^3\end{bmatrix} \cdot \begin{bmatrix}
1 & 0 & 0 & 0 \\
-3 & 3 & 0 & 0 \\
3 & -6 & 3 & 0 \\
-1 & 3 & -3 & 1
\end{bmatrix}
\]</LaTeX>
\]</p>
<p>And then finally, we can add in our original coordinates as a single third matrix:</p>
<LaTeX>\[
<p>\[
B(t) = \begin{bmatrix}
1 & t & t^2 & t^3
\end{bmatrix}
@@ -109,11 +108,11 @@ var Matrix = React.createClass({
\begin{bmatrix}
P_1 \\ P_2 \\ P_3 \\ P_4
\end{bmatrix}
\]</LaTeX>
\]</p>
<p>We can perform the same trick for the quadratic curve, in which case we end up with:</p>
<LaTeX>\[
<p>\[
B(t) = \begin{bmatrix}
1 & t & t^2
\end{bmatrix}
@@ -127,7 +126,7 @@ var Matrix = React.createClass({
\begin{bmatrix}
P_1 \\ P_2 \\ P_3
\end{bmatrix}
\]</LaTeX>
\]</p>
<p>If we plug in a <em>t</em> value, and then multiply the matrices, we will
get exactly the same values as when we evaluate the original polynomial function,

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

@@ -1,7 +1,6 @@
var React = require("react");
var Graphic = require("../../Graphic.jsx");
var SectionHeader = require("../../SectionHeader.jsx");
var LaTeX = require("../../LaTeX.jsx");
var Whatis = React.createClass({
@@ -35,7 +34,7 @@ var Whatis = React.createClass({
distance away from the first point (and thus 80% the distance away from the second point) then we
can compute that really easily:</p>
<LaTeX>\[
<p>\[
Given \left (
\begin{align}
p_1 &= some\ point \\
@@ -45,7 +44,7 @@ var Whatis = React.createClass({
\end{align}
\right ),\ our\ new\ point = p_1 + distance \cdot ratio
\]</LaTeX>
\]</p>
<p>So let's look at that in action: the following graphic is interactive in that you can use your
'+' and '-' keys to increase or decrease the interpolation distance, to see what happens. We start