info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-22 16:23:12 +02:00
Code Issues Releases Wiki Activity

added <Graphic/> protection + extended converted to markdown

Browse Source
This commit is contained in:
Pomax
2017-02-15 15:09:06 -08:00
parent b47a94d23d
commit badb1ebed3
4 changed files with 90 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,28 @@
# The Bézier interval [0,1]
Now that we know the mathematics behind Bézier curves, there's one curious thing that you may have noticed: they always run from `t=0` to `t=1`. Why that particular interval?
It all has to do with how we run from "the start" of our curve to "the end" of our curve. If we have a value that is a mixture of two other values, then the general formula for this is:
\[
mixture = a \cdot value_1 + b \cdot value_2
\]
The obvious start and end values here need to be `a=1, b=0`, so that the mixed value is 100% value 1, and 0% value 2, and `a=0, b=1`, so that the mixed value is 0% value 1 and 100% value 2. Additionally, we don't want "a" and "b" to be independent: if they are, then we could just pick whatever values we like, and end up with a mixed value that is, for example, 100% value 1 **and** 100% value 2. In principle that's fine, but for Bézier curves we always want mixed values *between* the start and end point, so we need to make sure we can never set "a" and "b" to some values that lead to a mix value that sums to more than 100%. And that's easy:
\[
m = a \cdot value_1 + (1 - a) \cdot value_2
\]
With this we can guarantee that we never sum above 100%. By restricting `a` to values in the interval [0,1], we will always be somewhere between our two values (inclusively), and we will always sum to a 100% mix.
But... what if we use this form, used in the assumption that we will only ever use values between 0 and 1, and instead use values outside of that interval? Do things go horribly wrong? Well... not really, but we get to "see more".
In the case of Bézier curves, extending the interval simply makes our curve "keep going". Bézier curves are simply segments on some polynomial curve, so if we pick a wider interval we simply get to see more of the curve. So what do they look like?
The following two graphics show you Bézier curves rendered "the usual way", as well as the curves they "lie on" if we were to extend the `t` values much further. As you can see, there's a lot more "shape" hidden in the rest of the curve, and we can model those parts by moving the curve points around.
<Graphic preset="simple" title="Quadratic infinite interval Bézier curve" setup={this.setupQuadratic} draw={this.draw} />
<Graphic preset="simple" title="Cubic infinite interval Bézier curve" setup={this.setupCubic} draw={this.draw} />
In fact, there are curves used in graphics design and computer modelling that do the opposite of Bézier curves, where rather than fixing the interval, and giving you free coordinates, they fix the coordinates, but give you freedom over the interval. A great example of this is the ["Spiro" curve](http://levien.com/phd/phd.html), which is a curve based on part of a [Cornu Spiral, also known as Euler's Spiral](https://en.wikipedia.org/wiki/Euler_spiral). It's a very aesthetically pleasing curve and you'll find it in quite a few graphics packages like [FontForge](https://fontforge.github.io) and [Inkscape](https://inkscape.org), having even been used in font design (such as for the Inconsolata font).

64
components/sections/extended/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 = "extended";
var Explanation = React.createClass({
getDefaultProps: function() {
return {
title: "The Bézier interval [0,1]"
title: locale.getTitle(page)
};
},
@@ -44,61 +46,7 @@ var Explanation = React.createClass({
render: function() {
return (
<section>
<SectionHeader {...this.props} />
<p>Now that we know the mathematics behind Bézier curves, there's one curious thing that you may have
noticed: they always run from <i>t=0</i> to <i>t=1</i>. Why that particular interval?</p>
<p>It all has to do with how we run from "the start" of our curve to "the end" of our curve. If we have
a value that is a mixture of two other values, then the general formula for this is:</p>
<p>\[
mixture = a \cdot value_1 + b \cdot value_2
\]</p>
<p>The obvious start and end values here need to be <i>a=1, b=0</i>, so that the mixed value is 100%
value 1, and 0% value 2, and <i>a=0, b=1</i>, so that the mixed value is 0% value 1 and 100% value 2.
Additionally, we don't want "a" and "b" to be independent: if they are, then we could just pick
whatever values we like, and end up with a mixed value that is, for example, 100% value
1 <strong>and</strong> 100% value 2. In principle that's fine, but for Bézier curves we always
want mixed values <em>between</em> the start and end point, so we need to make sure we can
never set "a" and "b" to some values that lead to a mix value that sums to more than 100%. And
that's easy:</p>
<p>\[
m = a \cdot value_1 + (1 - a) \cdot value_2
\]</p>
<p>With this we can guarantee that we never sum above 100%. By restricting <i>a</i> to values
in the interval [0,1], we will always be somewhere between our two values (inclusively), and
we will always sum to a 100% mix.</p>
<p>But... what if we use this form, used in the assumption that we will only ever use values
between 0 and 1, and instead use values outside of that interval? Do things go horribly wrong?
Well... not really, but we get to "see more".</p>
<p>In the case of Bézier curves, extending the interval simply makes our curve "keep going".
Bézier curves are simply segments on some polynomial curve, so if we pick a wider interval
we simply get to see more of the curve. So what do they look like?</p>
<p>The following two graphics show you Bézier curves rendered "the usual way", as well as the curves
they "lie on" if we were to extend the <i>t</i> values much further. As you can see, there's a lot
more "shape" hidden in the rest of the curve, and we can model those parts by moving the curve
points around.</p>
<Graphic preset="simple" title="Quadratic infinite interval Bézier curve" setup={this.setupQuadratic} draw={this.draw} />
<Graphic preset="simple" title="Cubic infinite interval Bézier curve" setup={this.setupCubic} draw={this.draw} />
<p>In fact, there are curves used in graphics design and computer modelling that do the opposite
of Bézier curves, where rather than fixing the interval, and giving you free coordinates, they fix
the coordinates, but give you freedom over the interval. A great example of this is the <a href="http://levien.com/phd/phd.html">"Spiro"
curve</a>, which is a curve based on part of a <a href="https://en.wikipedia.org/wiki/Euler_spiral">Cornu Spiral, also
known as Euler's Spiral</a>. It's a very aesthetically pleasing curve and you'll find it in
quite a few graphics packages
like <a href="https://fontforge.github.io">FontForge</a> and <a href="https://inkscape.org">Inkscape</a>, having
even been used in font design (such as for the Inconsolata font).</p>
</section>
<section>{ locale.getContent(page, this) }</section>
);
}
});