info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-09-02 21:02:49 +02:00
Code Issues Releases Wiki Activity

new section

Browse Source
This commit is contained in:
Pomax
2016-01-22 17:43:40 -08:00
parent 819b628456
commit fc6fed2e0f
219 changed files with 29156 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/App.jsx
View File

@@ -1,5 +1,4 @@
var React = require("react");
var ReactDOM = require("react-dom");
var FullArticle = require("./FullArticle.jsx");
var generateSingleSection = require("../pages/generateSingleSection");
ReactDOM.render(<FullArticle/>, document.getElementById("article"));

2
components/FullArticle.jsx
View File

@@ -12,7 +12,7 @@ var sectionList = require("./sections"),
var FullArticle = React.createClass({
render: function() {
return <Page content={ allSections }/>;
return <Page>{ allSections }</Page>;
}
});

7
components/Navigation.jsx
View File

@@ -5,15 +5,14 @@ var Link = ReactRouter.Link;
var sections = require("./sections");
var sectionPages = Object.keys(sections);
// LESS is automatically turned into CSS and bundled in:
require("../stylesheets/style.less");
var Navigation = React.createClass({
generateNavItem: function(name, entry) {
var Type = sections[name];
var title = Type.getDefaultProps().title;
var link = <a href={'#' + name}>{ title }</a>;
if (this.props.fullNav) { link = <Link to={(name!=="preface") ? name : "/"}>{title}</Link>; }
if (this.props.fullNav) {
link = <Link to={name}>{title}</Link>;
}
return <li key={name} data-number={entry}>{link}</li>;
},

51
components/Page.jsx
View File

@@ -7,24 +7,51 @@ var Navigation = require("./Navigation.jsx");
var Footer = require("./Footer.jsx");
var Page = React.createClass({
render: function() {
var nav = <Navigation compact={this.props.compact}/>;
var orderedContent = [nav].concat();
if (this.props.compact) {
orderedContent.splice(0,1);
orderedContent.push(nav);
}
renderCompactContent: function(nav) {
return (
<div>
<Ribbon/>
<Header/>
{nav}
<Relatives prev={this.props.prev} next={this.props.next} position="before" />
{this.props.content}
{this.props.children}
<Relatives prev={this.props.prev} next={this.props.next} position="after" />
<Footer/>
</div>
);
},
renderCompactRoot: function(nav) {
return (
<div>
{this.props.children}
{nav}
</div>
);
},
renderPageContent: function(nav) {
return (
<div>
{nav}
{this.props.children}
</div>
);
},
render: function() {
var content;
var compact = this.props.compact;
var isRoot = this.props.name === '/';
var nav = <Navigation compact={compact && !isRoot}/>;
if (compact) {
if (isRoot) {
content = this.renderCompactRoot(nav);
} else {
content = this.renderCompactContent(nav);
}
} else {
content = this.renderPageContent(nav);
}
return <div><Ribbon/><Header/>{ content }<Footer/></div>;
}
});

20
components/Relatives.jsx
View File

@@ -7,8 +7,6 @@ var pageIDs = Object.keys(sections);
var Relatives = React.createClass({
getInitialState() {
console.log(this.props);
var prev = this.props.prev;
if (prev > -1) {
prev = {
@@ -34,11 +32,19 @@ var Relatives = React.createClass({
render: function() {
if (!this.props.prev && !this.props.next) return null;
return (
<div className={"relatives " + this.props.position}>
{ !this.state.next ? null : <Link className="next" to={this.state.next.to}>{this.props.next + ". " + this.state.next.title}</Link> }
{ this.state.prev ? <Link to="/">Index</Link> : null }
{ !this.state.prev ? null : <Link className="prev" to={this.state.prev.to}>{this.props.prev + ". " + this.state.prev.title}</Link> }
</div>
<table className={"relatives " + this.props.position}>
<tbody>
<tr>
<td>
{!this.state.prev ? null : <Link className="prev" to={this.state.prev.to}>{this.props.prev + ". " + this.state.prev.title}</Link>}
</td><td className='toc'>
<Link to="/">ToC</Link>
</td><td>
{!this.state.next ? null : <Link className="next" to={this.state.next.to}>{this.props.next + ". " + this.state.next.title}</Link>}
</td>
</tr>
</tbody>
</table>
);
}
});

115
components/sections/extended/index.js Normal file
View File

@@ -0,0 +1,115 @@
var React = require("react");
var Graphic = require("../../Graphic.jsx");
var SectionHeader = require("../../SectionHeader.jsx");
var Explanation = React.createClass({
getDefaultProps: function() {
return {
title: "The Bézier interval"
};
},
setupQuadratic: function(api) {
var curve = new api.Bezier(70, 155, 20, 110, 100,75);
api.setCurve(curve);
},
setupCubic: function(api) {
var curve = new api.Bezier(60,105, 75,30, 215,115, 140,160);
api.setCurve(curve);
},
draw: function(api, curve) {
api.reset();
api.drawSkeleton(curve);
api.drawCurve(curve);
api.setColor("lightgrey");
var t, step=0.05, min=-10;
var pt = curve.get(min - step), pn;
for (t=min; t<=step; t+=step) {
pn = curve.get(t);
api.drawLine(pt, pn);
pt = pn;
}
pt = curve.get(1);
var max = 10;
for (t=1+step; t<=max; t+=step) {
pn = curve.get(t);
api.drawLine(pt, pn);
pt = pn;
}
},
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>. That might seem obvious, but even if you're
a seasoned mathematician, the first question you should have when you see that is "Why?", because
it's fairly arbitrary. Or, at least, it would seem arbitrary.</p>
<p>It's actually mostly to do with how we run from "the start" of our curve to "the end" of our curve.
We want the curve to start at the first coordinate we define, and end at the last coordinate we define,
and that pretty much tells us we want the interval [0,1], because of interpolation. If we want to mix
two values, the easiest way to do that is to use the super simple formula</p>
<p>\[
mixture = a \cdot value_1 + b \cdot value_2
\]</p>
<p>but this is two variables, and that's inconvenient. If we can express that <i>b</i> in terms
of <i>a</i> we'll be much better off, and the easiest way to do that is to do something like this:</p>
<p>\[
m = a \cdot value_1 + f(a) \cdot value_2
\]</p>
<p>Now, if we pick the following, things get really easy:</p>
<p>\[
m = a \cdot value_1 + f(a)=(C-a) \cdot value_2, C = constant
\]</p>
<p>I know, that doesn't look easier, but the important part is the "C - a" part. All we're doing is
subtracting <i>a</i> from a constant, plain number. And the most obvious number in mathematics is
the "unit" number. That would be 1.</p>
<p>\[
m = a \cdot value_1 + (1-a) \cdot value_2
\]</p>
<p>By picking any number <i>a</i> between 0 and 1, we can now cover the full mix of 100% value 1, 0% value 2,
to 0% value 1 and 100% value 2.</p>
<p>but... it's just an "artificial" restriction, what if we use the functions that assume our values
are going to be between 0 and 1, and instead feed them values outside of that interval? In the case
of Bézier curves, not a whole lot: the curve simply "keeps going" in what become more and more of a
straight line, as the polynomials "straighten out". Because of the polynomial form that Bézier curves
use, most of the curvy bits are in the [0,1] interval, but let's plot some Bézier curves without
that interval restriction. 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 internval Bézier curve" setup={this.setupQuadratic} draw={this.draw} />
<Graphic preset="simple" title="Cubic infinite internval 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 easthetically pleasing curve and you'll find it in
quite a few graphics packages like Illustrator and Inkscape, having even been used in font
design (such as for the Inconsolata font).</p>
</section>
);
}
});
module.exports = Explanation;

1
components/sections/index.js
View File

@@ -7,6 +7,7 @@ module.exports = {
introduction: require("./introduction"),
whatis: require("./whatis"),
explanation: require("./explanation"),
extended: require("./extended"),
control: require("./control"),
matrix: require("./matrix"),

2
components/sections/preface/index.js
View File

@@ -52,7 +52,7 @@ var Preface = React.createClass({
<p>—Pomax (or in the tweetworld, <a href="https://twitter.com/TheRealPomax">@TheRealPomax</a>)</p>
<div className="note">
<h2>Note: virtuall all Bézier graphics are interactive.</h2>
<h2>Note: virtually all Bézier graphics are interactive.</h2>
<p>This page uses interactive examples, relying heavily on <a href="http://pomax.github.io/bezierjs/">Bezier.js</a>,
as well as "real" maths (in LaTeX form) which is typeset using the most excellent <a href="http://MathJax.org">MathJax</a> library.

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

@@ -142,7 +142,6 @@ var Whatis = React.createClass({
ratio &= \frac{percentage}{100} \\
\end{align}
\right ),\ our\ new\ point = p_1 + distance \cdot ratio
\]</p>
<p>So let's look at that in action: the following graphic is interactive in that you can use your