mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-03-15 11:50:12 +01:00
99 lines
4.5 KiB
JavaScript
99 lines
4.5 KiB
JavaScript
<p>Bézier curves are (like all "splines") interpolation functions, meaning they take a set of
|
|
points, and generate values somewhere "between" those points. (One of the consequences of this
|
|
is that you'll never be able to generate a point that lies outside the outline for the control
|
|
points, commonly called the "hull" for the curve. Useful information!). In fact, we can visualize
|
|
how each point contributes to the value generated by the function, so we can see which points are
|
|
important, where, in the curve.</p>
|
|
|
|
<p>The following graphs show the interpolation functions for quadratic and cubic curves, with "S"
|
|
being the strength of a point's contribution to the total sum of the Bézier function. Click or
|
|
click-drag to see the interpolation percentages for each curve-defining point at a specific <i>t</i>
|
|
value.</p>
|
|
|
|
<p>Also shown is the interpolation function for a 15th order Bézier function. As you can see,
|
|
the start and end point contribute considerably more to the curve's shape than any other point
|
|
in the control point set.</p>
|
|
|
|
<textarea class="sketch-code" data-sketch-preset="ratios" data-sketch-title="Quadratic interpolations">
|
|
int order = 3;
|
|
</textarea>
|
|
|
|
<textarea class="sketch-code" data-sketch-preset="ratios" data-sketch-title="Cubic interpolations">
|
|
int order = 4;
|
|
</textarea>
|
|
|
|
<textarea class="sketch-code" data-sketch-preset="ratios" data-sketch-title="15th order interpolations">
|
|
int order = 15;
|
|
</textarea>
|
|
|
|
<p>If we want to change the curve, we need to change the weights of each point, effectively changing
|
|
the interpolations. The way to do this is about as straight forward as possible: just multiply each
|
|
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>
|
|
|
|
<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}}
|
|
\]</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,
|
|
w<sub>n</sub> is our last coordinate, and everything in between is a controlling coordinate. Say we want
|
|
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>
|
|
|
|
<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. \]</p>
|
|
|
|
<p>Which gives us the curve we saw at the top of the article:</p>
|
|
|
|
<textarea class="sketch-code" data-sketch-preset="simple" data-sketch-title="Our cubic Bézier curve">
|
|
void setupCurve() {
|
|
setupDefaultCubic();
|
|
}
|
|
|
|
void drawCurve(BezierCurve curve) {
|
|
curve.draw();
|
|
}</textarea>
|
|
|
|
<p>What else can we do with Bézier curves? Quite a lot, actually. The rest of this article covers
|
|
a multitude of possible operations and algorithms that we can apply, and the tasks they achieve.</p>
|
|
|
|
<div class="howtocode">
|
|
<h3>How to implement the weighted basis function</h3>
|
|
|
|
<p>Given that we already know how to implement basis function, adding in the control points
|
|
is remarkably easy:</p>
|
|
|
|
<pre>function Bezier(n,t,w[]):
|
|
sum = 0
|
|
for(k=0; k<n; k++):
|
|
sum += w[k] * binomial(n,k) * (1-t)^(n-k) * t^(k)
|
|
return sum</pre>
|
|
|
|
<p>And for the extremely optimized versions:</p>
|
|
|
|
<pre>function Bezier(2,t,w[]):
|
|
t2 = t * t
|
|
mt = 1-t
|
|
mt2 = mt * mt
|
|
return w[0]*mt2 + w[1]*2*mt*t + w[2]*t2
|
|
|
|
function Bezier(3,t,w[]):
|
|
t2 = t * t
|
|
t3 = t2 * t
|
|
mt = 1-t
|
|
mt2 = mt * mt
|
|
mt3 = mt2 * mt
|
|
return w[0]*mt3 + 3*w[1]*mt2*t + 3*w[2]*mt*t2 + w[3]*t3</pre>
|
|
|
|
<p>And now we know how to program the weighted basis function.</p>
|
|
</div>
|