mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-08-20 07:21:43 +02:00
XeLaTeX interpration of LaTeX for localization
This commit is contained in:
Pomax
@@ -32,10 +32,12 @@ So that just leaves finding A.
|
||||
While that relation is fixed, the function *u(t)* differs depending on whether we're working
|
||||
with quadratic or cubic curves:
|
||||
|
||||
\[\begin{align}
|
||||
& u(t)_{quadratic} = \frac{(1-t)^2}{t^2 + (1-t)^2} \\
|
||||
& u(t)_{cubic} = \frac{(1-t)^3}{t^3 + (1-t)^3}
|
||||
\end{align}\]
|
||||
\[
|
||||
\begin{aligned}
|
||||
& u(t)_{quadratic} &= \frac{(1-t)^2}{t^2 + (1-t)^2} \\
|
||||
& u(t)_{cubic} &= \frac{(1-t)^3}{t^3 + (1-t)^3}
|
||||
\end{aligned}
|
||||
\]
|
||||
|
||||
So, if we know the start and end coordinates, and we know the *t* value, we know C:
|
||||
|
||||
|
||||
@@ -58,7 +58,7 @@ The approach is going to start with a curve that doesn't have all-colinear point
|
||||
Step 1: we translate any curve by -p1.x and -p1.y, so that the curve starts at (0,0). We're going to make use of an interesting trick here, by pretending our 2D coordinates are 3D, with the <i>z</i> coordinate simply always being 1. This is an old trick in graphics to overcome the limitations of 2D transformations: without it, we can only turn (x,y) coordinates into new coordinates of the form (ax + by, cx + dy), which means we can't do translation, since that requires we end up with some kind of (x + a, y + b). If we add a bogus <i>z</i> coordinate that is always 1, then we can suddenly add arbitrary values. For example:
|
||||
|
||||
\[
|
||||
\left [ \begin{array}
|
||||
\left [ \begin{array}{ccc}
|
||||
01 & 0 & a \\
|
||||
0 & 1 & b \\
|
||||
0 & 0 & 1
|
||||
@@ -101,7 +101,7 @@ Sweet! <i>z</i> stays 1, so we can effectively ignore it entirely, but we added
|
||||
|
||||
\[
|
||||
T_1 =
|
||||
\left [ \begin{array}
|
||||
\left [ \begin{array}{ccc}
|
||||
01 & 0 & -{P_1}_x \\
|
||||
0 & 1 & -{P_1}_y \\
|
||||
0 & 0 & 1
|
||||
|
||||
@@ -139,13 +139,13 @@ var Circles = React.createClass({
|
||||
|
||||
<p>which we can then substitute in the expression for <i>a</i>:</p>
|
||||
|
||||
<p>\[ \begin{align*}
|
||||
<p>\[ \begin{aligned}
|
||||
a &= sin(φ) + b \cdot cos(φ) \\
|
||||
.. &= sin(φ) + \frac{-1 + cos(φ)}{sin(φ)} \cdot cos(φ) \\
|
||||
.. &= sin(φ) + \frac{-cos(φ) + cos^2(φ)}{sin(φ)} \\
|
||||
.. &= \frac{sin^2(φ) + cos^2(φ) - cos(φ)}{sin(φ)} \\
|
||||
a &= \frac{1 - cos(φ)}{sin(φ)}
|
||||
\end{align*} \]</p>
|
||||
\end{aligned} \]</p>
|
||||
|
||||
<p>A quick check shows that plugging these values for <i>a</i> and <i>b</i> into the expressions
|
||||
for C<sub>x</sub> and C<sub>y</sub> give the same x/y coordinates for both "<i>a</i> away from A"
|
||||
@@ -167,21 +167,21 @@ var Circles = React.createClass({
|
||||
<p>Which, worked out for the x and y components, gives:</p>
|
||||
|
||||
<p>\[\begin{array}{l}
|
||||
\left\{\begin{align*}
|
||||
\left\{\begin{aligned}
|
||||
T_x &= \frac{1}{4}(3 + cos(φ))\\
|
||||
T_y &= \frac{1}{4}\left(\frac{2-2cos(φ)}{sin(φ)} + sin(φ)\right)
|
||||
= \frac{1}{4}\left(2tan\left(\frac{φ}{2}\right) + sin(φ)\right)
|
||||
\end{align*}\right.
|
||||
\end{aligned}\right.
|
||||
\end{array}\]</p>
|
||||
|
||||
<p>And the distance between these two is the standard Euclidean distance:</p>
|
||||
|
||||
<p>\[\begin{align}
|
||||
<p>\[\begin{aligned}
|
||||
d_x(φ) &= T_x - P_x = \frac{1}{4}(3 + cos(φ)) - cos(\frac{φ}{2}) = 2sin^4\left(\frac{φ}{4}\right) \ , \\
|
||||
d_y(φ) &= T_y - P_y = \frac{1}{4}\left(2tan\left(\frac{φ}{2}\right) + sin(φ)\right) - sin(\frac{φ}{2}) \ , \\
|
||||
&⇓\\
|
||||
d(φ) &= \sqrt{d^2_x + d^2_y} = \ ... \ = 2sin^4(\frac{φ}{2})\sqrt{\frac{1}{cos^2(\frac{φ}{2})}}
|
||||
\end{align}\]</p>
|
||||
\end{aligned}\]</p>
|
||||
|
||||
<p>So, what does this distance function look like when we plot it for a
|
||||
number of ranges for the angle φ, such as a half circle, quarter circle and eighth circle?</p>
|
||||
|
||||
@@ -26,48 +26,53 @@ Sometimes just being told "this is the derivative" is nice, but you might want t
|
||||
|
||||
Applying the [product](http://en.wikipedia.org/wiki/Product_rule) and [chain](http://en.wikipedia.org/wiki/Chain_rule) rules gives us:
|
||||
|
||||
\[\begin{array}{l}
|
||||
... &= {n \choose k} \left (
|
||||
\[
|
||||
\begin{array}{l}
|
||||
... = {n \choose k} \left (
|
||||
k \cdot t^{k-1} (1-t)^{n-k} + t^k \cdot (1-t)^{n-k-1} \cdot (n-k) \cdot -1
|
||||
\right )
|
||||
\end{array}\]
|
||||
\end{array}
|
||||
\]
|
||||
|
||||
Which is hard to work with, so let's expand that properly:
|
||||
|
||||
\[\begin{array}{l}
|
||||
... &= \frac{kn!}{k!(n-k)!} t^{k-1} (1-t)^{n-k} - \frac{(n-k)n!}{k!(n-k)!} t^k (1-t)^{n-1-k}
|
||||
\end{array}\]
|
||||
\[
|
||||
\begin{array}{l}
|
||||
... = \frac{kn!}{k!(n-k)!} t^{k-1} (1-t)^{n-k} - \frac{(n-k)n!}{k!(n-k)!} t^k (1-t)^{n-1-k}
|
||||
\end{array}
|
||||
\]
|
||||
|
||||
Now, the trick is to turn this expression into something that has binomial coefficients again, so we want to end up with things that look like "x! over y!(x-y)!". If we can do that in a way that involves terms of <i>n-1</i> and <i>k-1</i>, we'll be on the right track.
|
||||
|
||||
\[\begin{array}{l}
|
||||
... &= \frac{n!}{(k-1)!(n-k)!} t^{k-1} (1-t)^{n-k} - \frac{(n-k)n!}{k!(n-k)!} t^k (1-t)^{n-1-k} \\
|
||||
\[
|
||||
\begin{array}{l}
|
||||
... = \frac{n!}{(k-1)!(n-k)!} t^{k-1} (1-t)^{n-k} - \frac{(n-k)n!}{k!(n-k)!} t^k (1-t)^{n-1-k} \\
|
||||
|
||||
... &= n \left (
|
||||
... = n \left (
|
||||
\frac{(n-1)!}{(k-1)!(n-k)!} t^{k-1} (1-t)^{n-k} - \frac{(n-k)(n-1)!}{k!(n-k)!} t^k (1-t)^{n-1-k}
|
||||
\right ) \\
|
||||
|
||||
... &= n \left (
|
||||
... = n \left (
|
||||
\frac{(n-1)!}{(k-1)!((n-1)-(k-1))!} t^{(k-1)} (1-t)^{(n-1)-(k-1)} - \frac{(n-1)!}{k!((n-1)-k)!} t^k (1-t)^{(n-1)-k}
|
||||
\right )
|
||||
\end{array}\]
|
||||
\end{array}
|
||||
\]
|
||||
|
||||
And that's the first part done: the two components inside the parentheses are actually regular, lower order Bezier expressions:
|
||||
|
||||
\[\begin{array}{l}
|
||||
... &= n \left (
|
||||
... = n \left (
|
||||
\frac{x!}{y!(x-y)!} t^{y} (1-t)^{x-y} - \frac{x!}{k!(x-k)!} t^k (1-t)^{x-k}
|
||||
\right )
|
||||
\ ,\ with\ x=n-1,\ y=k-1
|
||||
\\
|
||||
|
||||
|
||||
... &= n \left ( B_{(n-1),(k-1)}(t) - B_{(n-1),k}(t) \right )
|
||||
\end{array}\]
|
||||
... = n \left ( B_{(n-1),(k-1)}(t) - B_{(n-1),k}(t) \right )
|
||||
\end{array}
|
||||
\]
|
||||
|
||||
Now to apply this to our weighted Bezier curves. We'll write out the plain curve formula that we saw earlier, and then work our way through to its derivative:
|
||||
|
||||
\[\begin{array}{l}
|
||||
\[\begin{array}{lcl}
|
||||
Bézier_{n,k}(t) &=& B_{n,0}(t) \cdot w_0 + B_{n,1}(t) \cdot w_1 + B_{n,2}(t) \cdot w_2 + B_{n,3}(t) \cdot w_3 + ... \\
|
||||
Bézier_{n,k}(t) \frac{d}{dt} &=& n \cdot (B_{n-1,-1}(t) - B_{n-1,0}(t)) \cdot w_0 + \\
|
||||
& & n \cdot (B_{n-1,0}(t) - B_{n-1,1}(t)) \cdot w_1 + \\
|
||||
@@ -78,7 +83,7 @@ Now to apply this to our weighted Bezier curves. We'll write out the plain curve
|
||||
|
||||
If we expand this (with some color to show how terms line up), and reorder the terms by increasing values for <i>k</i> we see the following:
|
||||
|
||||
\[\begin{array}{l}
|
||||
\[\begin{array}{lclc}
|
||||
n \cdot B_{n-1,-1}(t) \cdot w_0 &+& & \\
|
||||
n \cdot B_{n-1,BLUE[0]}(t) \cdot w_1 &-& n \cdot B_{n-1,BLUE[0]}(t) \cdot w_0 & + \\
|
||||
n \cdot B_{n-1,RED[1]}(t) \cdot w_2 &-& n \cdot B_{n-1,RED[1]}(t) \cdot w_1 & + \\
|
||||
@@ -89,7 +94,7 @@ If we expand this (with some color to show how terms line up), and reorder the t
|
||||
|
||||
Two of these terms fall way: the first term falls away because there is no -1<sup>st</sup> term in a summation. As such, it always contributes "nothing", so we can safely completely ignore it for the purpose of finding the derivative function. The other term is the very last term in this expansion: one involving <i>B<sub>n-1,n</sub></i>. This term would have a binomial coefficient of [<i>i</i> choose <i>i+1</i>], which is a non-existent binomial coefficient. Again, this term would contribute "nothing", so we can ignore it, too. This means we're left with:
|
||||
|
||||
\[\begin{array}{l}
|
||||
\[\begin{array}{lclc}
|
||||
n \cdot B_{n-1,BLUE[0]}(t) \cdot w_1 &-& n \cdot B_{n-1,BLUE[0]}(t) \cdot w_0 &+ \\
|
||||
n \cdot B_{n-1,RED[1]}(t) \cdot w_2 &-& \ n \cdot B_{n-1,RED[1]}(t) \cdot w_1 &+ \\
|
||||
n \cdot B_{n-1,MAGENTA[2]}(t) \cdot w_3 &-& n \cdot B_{n-1,MAGENTA[2]}(t) \cdot w_2 &+ \\
|
||||
@@ -139,7 +144,7 @@ Let's rewrite that in a form similar to our original formula, so we can see the
|
||||
|
||||
What are the differences? In terms of the actual Bézier curve, virtually nothing! We lowered the order (rather than <i>n</i>, it's now <i>n-1</i>), but it's still the same Bézier function. The only real difference is in how the weights change when we derive the curve's function. If we have four points A, B, C, and D, then the derivative will have three points, the second derivative two, and the third derivative one:
|
||||
|
||||
\[ \begin{array}{l}
|
||||
\[ \begin{array}{llll}
|
||||
B(n,t), & & w = \{A,B,C,D\} \\
|
||||
B'(n,t), & n = 3, & w' = \{A',B',C'\} &= \{3 \cdot (B-A), {\ } 3 \cdot (C-B), {\ } 3 \cdot (D-C)\} \\
|
||||
B''(n,t), & n = 2, & w'' = \{A'',B''\} &= \{2 \cdot (B'-A'), {\ } 2 \cdot (C'-B')\} \\
|
||||
|
||||
@@ -54,22 +54,22 @@ If they have a highest order term <i>x³</i> they're called "cubic" polynomials,
|
||||
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*}
|
||||
\begin{aligned}
|
||||
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*}
|
||||
\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:
|
||||
|
||||
\[
|
||||
\begin{align*}
|
||||
linear &= \hskip{2.5em} 1 + 1 \\
|
||||
square &= \hskip{1.7em} 1 + 2 + 1\\
|
||||
cubic &= \hskip{0.85em} 1 + 3 + 3 + 1\\
|
||||
\begin{aligned}
|
||||
linear &= \hspace{2.5em} 1 + 1 \\
|
||||
square &= \hspace{1.7em} 1 + 2 + 1\\
|
||||
cubic &= \hspace{0.85em} 1 + 3 + 3 + 1\\
|
||||
hypercubic &= 1 + 4 + 6 + 4 + 1
|
||||
\end{align*}
|
||||
\end{aligned}
|
||||
\]
|
||||
|
||||
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.
|
||||
@@ -77,11 +77,11 @@ Notice that 2 is the same as 1+1, and 3 is 2+1 and 1+2, and 6 is 3+3... As you c
|
||||
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*}
|
||||
\begin{aligned}
|
||||
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*}
|
||||
\end{aligned}
|
||||
\]
|
||||
|
||||
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:
|
||||
|
||||
@@ -54,22 +54,22 @@
|
||||
ベジエ曲線は<i>x</i>の多項式ではなく、<i>t</i>の多項式です。<i>t</i>の値は0から1までの間に制限され、その係数<i>a</i>、<i>b</i>などは「二項係数」の形をとります。というと複雑そうに聞こえますが、実際には値を組み合わせて、とてもシンプルに記述できます。
|
||||
|
||||
\[
|
||||
\begin{align*}
|
||||
\begin{aligned}
|
||||
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*}
|
||||
\end{aligned}
|
||||
\]
|
||||
|
||||
「そこまでシンプルには見えないよ」と思っていることでしょう。しかし仮に、<i>t</i>を取り去って係数に1を掛けることにしてしまえば、急激に簡単になります。これが二項係数部分の項です。
|
||||
|
||||
\[
|
||||
\begin{align*}
|
||||
linear &= \hskip{2.5em} 1 + 1 \\
|
||||
square &= \hskip{1.7em} 1 + 2 + 1\\
|
||||
cubic &= \hskip{0.85em} 1 + 3 + 3 + 1\\
|
||||
\begin{aligned}
|
||||
linear &= \hspace{2.5em} 1 + 1 \\
|
||||
square &= \hspace{1.7em} 1 + 2 + 1\\
|
||||
cubic &= \hspace{0.85em} 1 + 3 + 3 + 1\\
|
||||
hypercubic &= 1 + 4 + 6 + 4 + 1
|
||||
\end{align*}
|
||||
\end{aligned}
|
||||
\]
|
||||
|
||||
2は1+1に等しく、3は2+1や1+2に等しく、6は3+3に等しく、……ということに注目してください。見てわかるように、先頭と末尾は単に1になっていますが、中間はどれも次数が増えるたびに「上の2つの数を足し合わせた」ものになっています。<i>これなら</i>覚えやいですね。
|
||||
@@ -77,11 +77,11 @@
|
||||
多項式部分の項がどうなっているのか、同じぐらい簡単な方法で考えることができます。仮に、<i>(1-t)</i>を<i>a</i>に、<i>t</i>を<i>b</i>に書き換え、さらに重みを一旦削除してしまえば、このようになります。
|
||||
|
||||
\[
|
||||
\begin{align*}
|
||||
\begin{aligned}
|
||||
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*}
|
||||
\end{aligned}
|
||||
\]
|
||||
|
||||
これは要するに、「<i>a</i>と<i>b</i>のすべての組み合わせ」の単なる和です。プラスが出てくるたびに、<i>a</i>を<i>b</i>へと1つずつ置き換えていけばよいのです。こちらも本当に単純です。さて、これで「二項係数多項式」がわかりました。完璧を期するため、この関数の一般の形を示しておきます。
|
||||
|
||||
@@ -54,22 +54,22 @@
|
||||
贝塞尔曲线不是x的多项式，它是<i>t</i>的多项式，<i>t</i>的值被限制在0和1之间，并且含有<i>a</i>，<i>b</i>等参数。它采用了二次项的形式，听起来很神奇但实际上就是混合不同值的简单描述：
|
||||
|
||||
\[
|
||||
\begin{align*}
|
||||
\begin{aligned}
|
||||
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*}
|
||||
\end{aligned}
|
||||
\]
|
||||
|
||||
我明白你在想什么：这看起来并不简单，但如果我们拿掉<i>t</i>并让系数乘以1，事情就会立马简单很多，看看这些二次项：
|
||||
|
||||
\[
|
||||
\begin{align*}
|
||||
linear &= \hskip{2.5em} 1 + 1 \\
|
||||
square &= \hskip{1.7em} 1 + 2 + 1\\
|
||||
cubic &= \hskip{0.85em} 1 + 3 + 3 + 1\\
|
||||
\begin{aligned}
|
||||
linear &= \hspace{2.5em} 1 + 1 \\
|
||||
square &= \hspace{1.7em} 1 + 2 + 1\\
|
||||
cubic &= \hspace{0.85em} 1 + 3 + 3 + 1\\
|
||||
hypercubic &= 1 + 4 + 6 + 4 + 1
|
||||
\end{align*}
|
||||
\end{aligned}
|
||||
\]
|
||||
|
||||
需要注意的是，2与1+1相同，3相当于2+1或1+2，6相当于3+3...如你所见，每次我们增加一个维度，只要简单地将头尾置为1，中间的操作都是“将上面的两个数字相加”。现在就能很容易地记住了。
|
||||
@@ -77,11 +77,11 @@
|
||||
还有一个简单的办法可以弄清参数项怎么工作的：如果我们将<i>(1-t)</i>重命名为<i>a</i>，将<i>t</i>重命名为<i>b</i>，暂时把权重删掉，可以得到这个：
|
||||
|
||||
\[
|
||||
\begin{align*}
|
||||
\begin{aligned}
|
||||
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*}
|
||||
\end{aligned}
|
||||
\]
|
||||
|
||||
基本上它就是“每个<i>a</i>和<i>b</i>结合项”的和，在每个加号后面逐步的将<i>a</i>换成<i>b</i>。因此这也很简单。现在你已经知道了二次多项式，为了叙述的完整性，我将给出一般方程：
|
||||
|
||||
@@ -7,12 +7,12 @@ Now that we understand (well, superficially anyway) the component functions, we
|
||||
Finding the solution for "where is this line 0" should be trivial:
|
||||
|
||||
\[
|
||||
\begin{align}
|
||||
\begin{aligned}
|
||||
l(x) = ax + b &= 0,\\
|
||||
ax + b &= 0,\\
|
||||
ax &= -b \\
|
||||
x &= \frac{-b}{a}
|
||||
\end{align}
|
||||
\end{aligned}
|
||||
\]
|
||||
|
||||
Done. And quadratic curves have no meaningful second derivative, so we're *really* done.
|
||||
@@ -30,32 +30,32 @@ So, if we can express a Bézier component function as a plain polynomial, we're
|
||||
First we turn our cubic Bézier function into a quadratic one, by following the rule mentioned at the end of the [derivatives section](#derivatives):
|
||||
|
||||
\[
|
||||
\begin{align}
|
||||
\begin{array}{l}
|
||||
B(t)\ uses\ \{ p_1,p_2,p_3,p_4 \} \\
|
||||
B'(t)\ uses\ \{ v_1.v_2,v_3 \},\ where\ v_1 = 3(p_2-p_1),\ v_2 = 3(p_3-p_2),\ v_3 = 3(p_4-p_3)
|
||||
\end{align}
|
||||
\end{array}
|
||||
\]
|
||||
|
||||
And then, using these *v* values, we can find out what our *a*, *b*, and *c* should be:
|
||||
|
||||
\[
|
||||
\begin{align}
|
||||
\begin{aligned}
|
||||
B'(t) &= v_1(1-t)^2 + 2v_2(1-t)t + v_3t^2 \\
|
||||
... &= v_1(t^2 - 2t + 1) + 2v_2(t-t^2) + v_3t^2 \\
|
||||
... &= v_1t^2 - 2v_1t + v_1 + 2v_2t - 2v_2t^2 + v_3t^2 \\
|
||||
... &= v_1t^2 - 2v_2t^2 + v_3t^2 - 2v_1t + v_1 + 2v_2t \\
|
||||
... &= (v_1-2v_2+v_3)t^2 + 2(v_2-v_1)t + v_1
|
||||
\end{align}
|
||||
\end{aligned}
|
||||
\]
|
||||
|
||||
This gives us thee coefficients *a*, *b*, and *c* that are expressed in terms of *v* values, where the *v* values are just convenient expressions of our original *p* values, so we can do some trivial substitution to get:
|
||||
|
||||
\[
|
||||
\begin{align}
|
||||
\begin{aligned}
|
||||
a &= v_1-2v_2+v_3 = 3(-p_1 + 3p_2 - 3p_3 + p_4) \\
|
||||
b &= 2(v_2-v_1) = 6(p_1 - 2p_2 + p_3) \\
|
||||
c &= v_1 = 3(p_2-p_1)
|
||||
\end{align}
|
||||
\end{aligned}
|
||||
\]
|
||||
|
||||
Easy peasy. We can now almost trivially find the roots by plugging those values into the quadratic formula. We also note that the second derivative of a cubic curve means computing the first derivative of a quadratic curve, and we just saw how to do that in the section above.
|
||||
|
||||
@@ -27,32 +27,32 @@ However as we've seen in the section on aligning, aligning lets us simplify thin
|
||||
Of course, before we do our aligned check, let's see what happens if we compute the curvature function without axis-aligning. We start with the first and second derivatives, given our basis functions:
|
||||
|
||||
\[
|
||||
\begin{align*}
|
||||
\begin{aligned}
|
||||
& Bézier(t) = x_1(1-t)^3 + 3x_2(1-t)^2t + 3x_3(1-t)t^2 + x_4t^3 \\
|
||||
& Bézier^\prime(t) = a(1-t)^2 + 2b(1-t)^t + ct^2\ \left\{ a=3(x_2-x_1),b=3(x_3-x_2),c=3(x_4-x_3) \right\} \\
|
||||
& Bézier^{\prime\prime}(t) = u(1-t) + vt\ \left\{ u=2(b-a),v=2(c-b) \right\}\
|
||||
\end{align*}
|
||||
\end{aligned}
|
||||
\]
|
||||
|
||||
And of course the same functions for *y*:
|
||||
|
||||
\[
|
||||
\begin{align*}
|
||||
\begin{aligned}
|
||||
& Bézier(t) = y_1(1-t)^3 + 3y_2(1-t)^2t + 3y_3(1-t)t^2 + y_4t^3 \\
|
||||
& Bézier^\prime(t) = d(1-t)^2 + 2e(1-t)^t + ft^2\\
|
||||
& Bézier^{\prime\prime}(t) = w(1-t) + zt
|
||||
\end{align*}
|
||||
\end{aligned}
|
||||
\]
|
||||
|
||||
Asking a computer to now compose the *C(t)* function for us (and to expand it to a readable form of simple terms) gives us this rather overly complicated set of arithmetic expressions:
|
||||
|
||||
\[
|
||||
\begin{array}
|
||||
-18 t^2 x_2 y_1+36 t^2 x_3 y_1-18 t^2 x_4 y_1+18 t^2 x_1 y_2-54 t^2 x_3 y_2 \\
|
||||
+36 t^2 x_4 y_2-36 t^2 x_1 y_3+54 t^2 x_2 y_3-18 t^2 x_4 y_3+18 t^2 x_1 y_4 \\
|
||||
-36 t^2 x_2 y_4+18 t^2 x_3 y_4+36 t x_2 y_1-54 t x_3 y_1+18 t x_4 y_1-36 t x_1 y_2 \\
|
||||
+54 t x_3 y_2-18 t x_4 y_2+54 t x_1 y_3-54 t x_2 y_3-18 t x_1 y_4+18 t x_2 y_4 \\
|
||||
-18 x_2 y_1+18 x_3 y_1+18 x_1 y_2-18 x_3 y_2-18 x_1 y_3+18 x_2 y_3
|
||||
\begin{array}{lclclclclcl}
|
||||
-18 t^2 x_2 y_1 &+& 36 t^2 x_3 y_1 &-& 18 t^2 x_4 y_1 &+& 18 t^2 x_1 y_2 &-& 54 t^2 x_3 y_2 &&\\
|
||||
+36 t^2 x_4 y_2 &-& 36 t^2 x_1 y_3 &+& 54 t^2 x_2 y_3 &-& 18 t^2 x_4 y_3 &+& 18 t^2 x_1 y_4 &&\\
|
||||
-36 t^2 x_2 y_4 &+& 18 t^2 x_3 y_4 &+& 36 t x_2 y_1 &-& 54 t x_3 y_1 &+& 18 t x_4 y_1 &-& 36 t x_1 y_2 \\
|
||||
+54 t x_3 y_2 &-& 18 t x_4 y_2 &+& 54 t x_1 y_3 &-& 54 t x_2 y_3 &-& 18 t x_1 y_4 &+& 18 t x_2 y_4 \\
|
||||
-18 x_2 y_1 &+& 18 x_3 y_1 &+& 18 x_1 y_2 &-& 18 x_3 y_2 &-& 18 x_1 y_3 &+& 18 x_2 y_3
|
||||
\end{array}
|
||||
\]
|
||||
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
We can also represent Bézier as matrix operations, by expressing the Bézier formula 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:
|
||||
|
||||
\[
|
||||
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
|
||||
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
|
||||
\]
|
||||
|
||||
Disregarding our actual coordinates for a moment, we have:
|
||||
|
||||
\[
|
||||
B(t) = (1-t)^3 + 3 \cdot (1-t)^2 \cdot t + 3 \cdot (1-t) \cdot t^2 + t^3
|
||||
B(t) = (1-t)^3 + 3 \cdot (1-t)^2 \cdot t + 3 \cdot (1-t) \cdot t^2 + t^3
|
||||
\]
|
||||
|
||||
We can write this as a sum of four expressions:
|
||||
|
||||
@@ -19,19 +19,19 @@ To help understand what's going on, the cubic graphic shows the full de Castelja
|
||||
First, we construct the one-level-of-de-Casteljau-up points:
|
||||
|
||||
\[
|
||||
\left \{ \begin{align}
|
||||
\left \{ \begin{aligned}
|
||||
v1 &= A' + \frac{e1 - A'}{t} \\
|
||||
v2 &= A' + \frac{e2 - A'}{1 - t}
|
||||
\end{align} \right .
|
||||
\end{aligned} \right .
|
||||
\]
|
||||
|
||||
And then we can compute the new control points:
|
||||
|
||||
\[
|
||||
\left \{ \begin{align}
|
||||
\left \{ \begin{aligned}
|
||||
C1' &= v1 + \frac{v1 - start}{t} \\
|
||||
C2' &= v2 + \frac{v2 - end}{1 - t}
|
||||
\end{align} \right .
|
||||
\end{aligned} \right .
|
||||
\]
|
||||
|
||||
And that's cubic curve manipulation.
|
||||
|
||||
@@ -8,12 +8,12 @@ If we know the distance between those two points, and we want a new point that i
|
||||
|
||||
\[
|
||||
Given \left (
|
||||
\begin{align}
|
||||
\begin{aligned}
|
||||
p_1 &= some\ point \\
|
||||
p_2 &= some\ other\ point \\
|
||||
distance &= (p_2 - p_1) \\
|
||||
ratio &= \frac{percentage}{100} \\
|
||||
\end{align}
|
||||
\end{aligned}
|
||||
\right ),\ our\ new\ point = p_1 + distance \cdot ratio
|
||||
\]
|
||||
|
||||
|
||||
@@ -8,12 +8,12 @@
|
||||
|
||||
\[
|
||||
Given \left (
|
||||
\begin{align}
|
||||
\begin{aligned}
|
||||
p_1 &= some\ point \\
|
||||
p_2 &= some\ other\ point \\
|
||||
distance &= (p_2 - p_1) \\
|
||||
ratio &= \frac{percentage}{100} \\
|
||||
\end{align}
|
||||
\end{aligned}
|
||||
\right ),\ our\ new\ point = p_1 + distance \cdot ratio
|
||||
\]
|
||||
|
||||
|
||||
@@ -8,12 +8,12 @@
|
||||
|
||||
\[
|
||||
Given \left (
|
||||
\begin{align}
|
||||
\begin{aligned}
|
||||
p_1 &= some\ point \\
|
||||
p_2 &= some\ other\ point \\
|
||||
distance &= (p_2 - p_1) \\
|
||||
ratio &= \frac{percentage}{100} \\
|
||||
\end{align}
|
||||
\end{aligned}
|
||||
\right ),\ our\ new\ point = p_1 + distance \cdot ratio
|
||||
\]
|
||||
|
||||
|
||||
Reference in New Issue
Block a user