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

control section

Browse Source
This commit is contained in:
Pomax
2015-12-29 16:59:12 -08:00
parent fd0d07a4be
commit 54fb8b2cef
17 changed files with 1403 additions and 566 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,6 +5,10 @@ var LaTeX = require("../../LaTeX.jsx");
var Whatis = React.createClass({
statics: {
title: "So what makes a Bézier Curve?"
},
interpolation: require("./interpolation"),
componentWillMount: function() {
@@ -15,46 +19,50 @@ var Whatis = React.createClass({
render: function() {
return (
<section>
<SectionHeader {...this.props}>What is a Bézier Curve?</SectionHeader>
<SectionHeader {...this.props}>{Whatis.title}</SectionHeader>
<p>Playing with the points for curves may have given you a feel for how Bézier curves behaves, but
what <em>are</em> Bézier curves, really?</p>
<p>There are two ways to explain what a Bézier curve is, and they turn out to be the entirely equivalent,
but one of them uses complicated maths, and the other uses really simple maths. So... let's start
with the simple explanation:</p>
what <em>are</em> Bézier curves, really? There are two ways to explain what a Bézier curve is, and
they turn out to be the entirely equivalent, but one of them uses complicated maths, and the other
uses really simple maths. So... let's start with the simple explanation:</p>
<p>Bezier curves are the result of <a href="https://en.wikipedia.org/wiki/Linear_interpolation">linear
interpolations</a>. That sounds complicated but you've been doing linear interpolation since you were
very young: any time you had to point at something between two other things, you've been applying
linear interpolation. It's simply "picking a point between two, points". If we know the distance
between those two points, and we want a new point that is, say, 20% the distance away from
the first point (and thus 80% the distance away from the second point) then we can compute that
really easily:</p>
linear interpolation. It's simply "picking a point between two, points".</p>
<p>If we know the distance between those two points, and we want a new point that is, say, 20% the
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_1 = some\ point, \\
p_2 = some\ other\ point, \\
distance = (p_2 - p_1), \\
ratio = \frac{percentage}{100}, \\
new\ point = p_1 + distance \cdot ratio
Given \left (
\begin{align}
p_1 &= some\ point \\
p_2 &= some\ other\ point \\
distance &= (p_2 - p_1) \\
ratio &= \frac{percentage}{100} \\
\end{align}
\right ),\ our\ new\ point = p_1 + distance \cdot ratio
\]</LaTeX>
<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
with three points, which gives us two lines. Linear interpolation over those lines gives use two
points, between which we can again perform linear interpolation, yielding a single point. And that
point, and all points we can form in this way for all distances taken together, form our Bézier curve:</p>
point —and all points we can form in this way for all distances taken together— form our Bézier curve:</p>
<Graphic title="Linear Interpolation leading to Bézier curves" setup={this.setup} draw={this.draw}/>
<p>And that brings us to the complicated maths: calculus. While it doesn't look like that's what we've just done,
we actually just drew a quadratic curve, in steps, rather than in a single go. One of the fascinating parts
about Bézier curves is that they can both be described in terms of polynomial functions, as well as in terms
of very simple interpolations of interpolations of [...]. That it turn means we can look at what these curves
can do based on both "real maths" (by examining the functions, their derivatives, and all that stuff), as well
as by looking at the "mechanical" composition (which tells us that a curve will never extend beyond the points
we used to construct it, for instance)</p>
<p>And that brings us to the complicated maths: calculus.</p>
<p>While it doesn't look like that's what we've just done, we actually just drew a quadratic curve, in steps,
rather than in a single go. One of the fascinating parts about Bézier curves is that they can both be described
in terms of polynomial functions, as well as in terms of very simple interpolations of interpolations of [...].
That it turn means we can look at what these curves can do based on both "real maths" (by examining the functions,
their derivatives, and all that stuff), as well as by looking at the "mechanical" composition (which tells us
that a curve will never extend beyond the points we used to construct it, for instance)</p>
<p>So let's start looking at Bézier curves a bit more in depth. Their mathematical expressions, the properties we
can derive from those, and the various things we can do to, and with, Bézier curves.</p>

19
components/sections/whatis/interpolation.js
View File

@@ -62,7 +62,7 @@ module.exports = {
sketch.setColor("black");
sketch.setFill("black");
sketch.drawSkeleton(curve);
sketch.drawCurve(curve);
//sketch.drawCurve(curve);
// draw 20% off-start points and struts
sketch.setWeight(2);
@@ -85,7 +85,7 @@ module.exports = {
sketch.drawCircle(p1e3,3);
sketch.drawCircle(p2e3,3);
sketch.drawText("First linear interpolation at 20% / 40% / 60%", {x:5, y:15});
sketch.text("First linear interpolation at 20% / 40% / 60%", {x:5, y:15});
// next panel
sketch.setColor("black");
@@ -94,7 +94,7 @@ module.exports = {
sketch.drawLine({x:0, y:0}, {x:0, y:this.dim});
sketch.drawSkeleton(curve);
sketch.drawCurve(curve);
//sketch.drawCurve(curve);
sketch.setColor("rgb(100,100,200)");
sketch.drawLine(p1e, p2e);
@@ -124,7 +124,7 @@ module.exports = {
sketch.drawLine(p1e3, m3);
sketch.drawCircle(m3,3);
sketch.drawText("Second interpolation at 20% / 40% / 60%", {x:5, y:15});
sketch.text("Second interpolation at 20% / 40% / 60%", {x:5, y:15});
// next panel
sketch.setColor("black");
@@ -133,11 +133,18 @@ module.exports = {
sketch.drawLine({x:0, y:0}, {x:0, y:this.dim});
sketch.drawSkeleton(curve);
sketch.drawCurve(curve);
sketch.setColor("lightgrey");
for(var t=1,d=20,v,tvp; t<d; t++) {
v = t/d;
tvp = curve.get(v);
sketch.drawCircle(tvp,2);
}
sketch.setColor("black");
sketch.drawCircle(m,3);
sketch.drawCircle(m2,3);
sketch.drawCircle(m3,3);
sketch.drawText("Curve points for t = 0.2, t = 0.4, t = 0.6", {x:5, y:15});
sketch.text("Curve points for t = 0.2, t = 0.4, t = 0.6", {x:5, y:15});
}
};