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

no more LaTeX component.

Browse Source
This commit is contained in:
Pomax
2015-12-31 16:46:04 -08:00
parent a3a01fe0a3
commit ff9abb8bfc
6 changed files with 87 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
article.js
View File

@@ -62,7 +62,7 @@
var React = __webpack_require__(8); var React = __webpack_require__(8);
var ReactDOM = __webpack_require__(165); var ReactDOM = __webpack_require__(165);
var Article = __webpack_require__(166); var Article = __webpack_require__(166);
var style = __webpack_require__(185); var style = __webpack_require__(183);
ReactDOM.render(React.createElement(Article, null), document.getElementById("article")); ReactDOM.render(React.createElement(Article, null), document.getElementById("article"));
@@ -19751,10 +19751,10 @@
preface: __webpack_require__(168), preface: __webpack_require__(168),
introduction: __webpack_require__(169), introduction: __webpack_require__(169),
whatis: __webpack_require__(176), whatis: __webpack_require__(176),
explanation: __webpack_require__(180), explanation: __webpack_require__(178),
control: __webpack_require__(182), control: __webpack_require__(180),
matrix: __webpack_require__(183), matrix: __webpack_require__(181),
decasteljau: __webpack_require__(184) decasteljau: __webpack_require__(182)
}; };
/* /*
@@ -24079,7 +24079,6 @@
var React = __webpack_require__(8); var React = __webpack_require__(8);
var Graphic = __webpack_require__(170); var Graphic = __webpack_require__(170);
var SectionHeader = __webpack_require__(175); var SectionHeader = __webpack_require__(175);
var LaTeX = __webpack_require__(177);
var Whatis = React.createClass({ var Whatis = React.createClass({
displayName: "Whatis", displayName: "Whatis",
@@ -24088,7 +24087,7 @@
title: "So what makes a Bézier Curve?" title: "So what makes a Bézier Curve?"
}, },
interpolation: __webpack_require__(179), interpolation: __webpack_require__(177),
componentWillMount: function componentWillMount() { componentWillMount: function componentWillMount() {
this.setup = this.interpolation.setup.bind(this); this.setup = this.interpolation.setup.bind(this);
@@ -24132,7 +24131,7 @@
"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:" "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:"
), ),
React.createElement( React.createElement(
LaTeX, "p",
null, null,
React.createElement("img", { className: "LaTeX SVG", src: "images/latex/93b03244097aea8be8fcac493afd3706c79fa403.svg" }) React.createElement("img", { className: "LaTeX SVG", src: "images/latex/93b03244097aea8be8fcac493afd3706c79fa403.svg" })
), ),
@@ -24165,47 +24164,6 @@
/***/ }, /***/ },
/* 177 */ /* 177 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var React = __webpack_require__(8);
var ReactDOM = __webpack_require__(165);
var noop = __webpack_require__(178);
var MathJax = typeof window !== "undefined" ? window.MathJax : false;
// fallback will simply do nothing when typesetting.
if (!MathJax) {
MathJax = { Hub: { Queue: noop } };
}
var LaTeX = React.createClass({
displayName: "LaTeX",
render: function render() {
return React.createElement(
"p",
{ ref: "latex" },
this.props.children
);
}
});
module.exports = LaTeX;
/***/ },
/* 178 */
/***/ function(module, exports) {
/**
* because somethings you just need a no-op
*/
module.exports = function noop() {};
/***/ },
/* 179 */
/***/ function(module, exports) { /***/ function(module, exports) {
"use strict"; "use strict";
@@ -24371,7 +24329,7 @@
}; };
/***/ }, /***/ },
/* 180 */ /* 178 */
/***/ function(module, exports, __webpack_require__) { /***/ function(module, exports, __webpack_require__) {
"use strict"; "use strict";
@@ -24379,7 +24337,6 @@
var React = __webpack_require__(8); var React = __webpack_require__(8);
var Graphic = __webpack_require__(170); var Graphic = __webpack_require__(170);
var SectionHeader = __webpack_require__(175); var SectionHeader = __webpack_require__(175);
var LaTeX = __webpack_require__(177);
var Explanation = React.createClass({ var Explanation = React.createClass({
displayName: "Explanation", displayName: "Explanation",
@@ -24388,7 +24345,7 @@
title: "The basics of Bézier curves" title: "The basics of Bézier curves"
}, },
circle: __webpack_require__(181), circle: __webpack_require__(179),
componentWillMount: function componentWillMount() { componentWillMount: function componentWillMount() {
this.setup = this.circle.setup.bind(this); this.setup = this.circle.setup.bind(this);
@@ -24422,7 +24379,7 @@
", to some other value, using some kind of number manipulation:" ", to some other value, using some kind of number manipulation:"
), ),
React.createElement( React.createElement(
LaTeX, "p",
null, null,
React.createElement("img", { className: "LaTeX SVG", src: "images/latex/1702a1f7b6c180a18d2e94b25808262b1e4c6195.svg" }) React.createElement("img", { className: "LaTeX SVG", src: "images/latex/1702a1f7b6c180a18d2e94b25808262b1e4c6195.svg" })
), ),
@@ -24467,7 +24424,7 @@
"So far so good. Now, let's look at parametric functions, and how they cheat. Let's take the following two functions:" "So far so good. Now, let's look at parametric functions, and how they cheat. Let's take the following two functions:"
), ),
React.createElement( React.createElement(
LaTeX, "p",
null, null,
React.createElement("img", { className: "LaTeX SVG", src: "images/latex/90842920b7553c3091917cfc38fc0a67c2055d38.svg" }) React.createElement("img", { className: "LaTeX SVG", src: "images/latex/90842920b7553c3091917cfc38fc0a67c2055d38.svg" })
), ),
@@ -24495,7 +24452,7 @@
" isn't used in that function. Parametric functions cheat by changing that. In a parametric function all the different functions share a variable, like this:" " isn't used in that function. Parametric functions cheat by changing that. In a parametric function all the different functions share a variable, like this:"
), ),
React.createElement( React.createElement(
LaTeX, "p",
null, null,
React.createElement("img", { className: "LaTeX SVG", src: "images/latex/e5fb9f01d6545e3e2f43410625edfdf483eb3668.svg" }) React.createElement("img", { className: "LaTeX SVG", src: "images/latex/e5fb9f01d6545e3e2f43410625edfdf483eb3668.svg" })
), ),
@@ -24559,7 +24516,7 @@
" with what we usually mean with them for parametric curves, things might be a lot more obvious:" " with what we usually mean with them for parametric curves, things might be a lot more obvious:"
), ),
React.createElement( React.createElement(
LaTeX, "p",
null, null,
React.createElement("img", { className: "LaTeX SVG", src: "images/latex/a1189e16ce64ad24e90aa3ea75a724f05d7ab599.svg" }) React.createElement("img", { className: "LaTeX SVG", src: "images/latex/a1189e16ce64ad24e90aa3ea75a724f05d7ab599.svg" })
), ),
@@ -24687,7 +24644,7 @@
"You may remember polynomials from high school, where they're those sums that look like:" "You may remember polynomials from high school, where they're those sums that look like:"
), ),
React.createElement( React.createElement(
LaTeX, "p",
null, null,
React.createElement("img", { className: "LaTeX SVG", src: "images/latex/4f7c9e4f8c7c560ba061ebd09e8a63364401ff22.svg" }) React.createElement("img", { className: "LaTeX SVG", src: "images/latex/4f7c9e4f8c7c560ba061ebd09e8a63364401ff22.svg" })
), ),
@@ -24756,7 +24713,7 @@
" etc. taking the \"binomial\" form, which sounds fancy but is actually a pretty simple description for mixing values:" " etc. taking the \"binomial\" form, which sounds fancy but is actually a pretty simple description for mixing values:"
), ),
React.createElement( React.createElement(
LaTeX, "p",
null, null,
React.createElement("img", { className: "LaTeX SVG", src: "images/latex/0d76eda1bc302fcbae9ad77311288ffb9935e9f0.svg" }) React.createElement("img", { className: "LaTeX SVG", src: "images/latex/0d76eda1bc302fcbae9ad77311288ffb9935e9f0.svg" })
), ),
@@ -24772,7 +24729,7 @@
" and add in \"times one\", things suddenly look pretty easy. Check out these binomial terms:" " and add in \"times one\", things suddenly look pretty easy. Check out these binomial terms:"
), ),
React.createElement( React.createElement(
LaTeX, "p",
null, null,
React.createElement("img", { className: "LaTeX SVG", src: "images/latex/b7307b83a6aed8f3981842ce4365cddaaad5ba3b.svg" }) React.createElement("img", { className: "LaTeX SVG", src: "images/latex/b7307b83a6aed8f3981842ce4365cddaaad5ba3b.svg" })
), ),
@@ -24817,7 +24774,7 @@
", and remove the weights for a moment, we get this:" ", and remove the weights for a moment, we get this:"
), ),
React.createElement( React.createElement(
LaTeX, "p",
null, null,
React.createElement("img", { className: "LaTeX SVG", src: "images/latex/85716f7b80fabb43411b982ea3c2919f01f546b6.svg" }) React.createElement("img", { className: "LaTeX SVG", src: "images/latex/85716f7b80fabb43411b982ea3c2919f01f546b6.svg" })
), ),
@@ -24851,7 +24808,7 @@
"'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:" "'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:"
), ),
React.createElement( React.createElement(
LaTeX, "p",
null, null,
React.createElement("img", { className: "LaTeX SVG", src: "images/latex/524d2b97aebbfe44de7529989629e4e0dd11a754.svg" }) React.createElement("img", { className: "LaTeX SVG", src: "images/latex/524d2b97aebbfe44de7529989629e4e0dd11a754.svg" })
), ),
@@ -25009,7 +24966,7 @@
module.exports = Explanation; module.exports = Explanation;
/***/ }, /***/ },
/* 181 */ /* 179 */
/***/ function(module, exports) { /***/ function(module, exports) {
"use strict"; "use strict";
@@ -25051,7 +25008,7 @@
}; };
/***/ }, /***/ },
/* 182 */ /* 180 */
/***/ function(module, exports, __webpack_require__) { /***/ function(module, exports, __webpack_require__) {
"use strict"; "use strict";
@@ -25059,7 +25016,6 @@
var React = __webpack_require__(8); var React = __webpack_require__(8);
var Graphic = __webpack_require__(170); var Graphic = __webpack_require__(170);
var SectionHeader = __webpack_require__(175); var SectionHeader = __webpack_require__(175);
var LaTeX = __webpack_require__(177);
var Control = React.createClass({ var Control = React.createClass({
displayName: "Control", displayName: "Control",
@@ -25291,7 +25247,7 @@
"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:" "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:"
), ),
React.createElement( React.createElement(
LaTeX, "p",
null, null,
React.createElement("img", { className: "LaTeX SVG", src: "images/latex/e41083ef7693be5384f724a8b354b5a38c9b0ed4.svg" }) React.createElement("img", { className: "LaTeX SVG", src: "images/latex/e41083ef7693be5384f724a8b354b5a38c9b0ed4.svg" })
), ),
@@ -25324,7 +25280,7 @@
" 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:" " 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:"
), ),
React.createElement( React.createElement(
LaTeX, "p",
null, null,
React.createElement("img", { className: "LaTeX SVG", src: "images/latex/13a1df3fc05f3610035843aee9ee6be82a5820e7.svg" }) React.createElement("img", { className: "LaTeX SVG", src: "images/latex/13a1df3fc05f3610035843aee9ee6be82a5820e7.svg" })
), ),
@@ -25440,14 +25396,13 @@
**/ **/
/***/ }, /***/ },
/* 183 */ /* 181 */
/***/ function(module, exports, __webpack_require__) { /***/ function(module, exports, __webpack_require__) {
"use strict"; "use strict";
var React = __webpack_require__(8); var React = __webpack_require__(8);
var SectionHeader = __webpack_require__(175); var SectionHeader = __webpack_require__(175);
var LaTeX = __webpack_require__(177);
var Matrix = React.createClass({ var Matrix = React.createClass({
displayName: "Matrix", displayName: "Matrix",
@@ -25471,7 +25426,7 @@
"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 :" "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 :"
), ),
React.createElement( React.createElement(
LaTeX, "p",
null, null,
React.createElement("img", { className: "LaTeX SVG", src: "images/latex/27810102a13621b9a1e3a533516ffec96f98694a.svg" }) React.createElement("img", { className: "LaTeX SVG", src: "images/latex/27810102a13621b9a1e3a533516ffec96f98694a.svg" })
), ),
@@ -25481,7 +25436,7 @@
"Disregarding our actual coordinates for a moment, we have:" "Disregarding our actual coordinates for a moment, we have:"
), ),
React.createElement( React.createElement(
LaTeX, "p",
null, null,
React.createElement("img", { className: "LaTeX SVG", src: "images/latex/57e8df56566add302c750691d8f83ee0863ca888.svg" }) React.createElement("img", { className: "LaTeX SVG", src: "images/latex/57e8df56566add302c750691d8f83ee0863ca888.svg" })
), ),
@@ -25491,7 +25446,7 @@
"We can write this as a sum of four expressions:" "We can write this as a sum of four expressions:"
), ),
React.createElement( React.createElement(
LaTeX, "p",
null, null,
React.createElement("img", { className: "LaTeX SVG", src: "images/latex/db3823d8088bd7efa7af9fc9f0db34580a364e22.svg" }) React.createElement("img", { className: "LaTeX SVG", src: "images/latex/db3823d8088bd7efa7af9fc9f0db34580a364e22.svg" })
), ),
@@ -25501,7 +25456,7 @@
"And we can expand these expressions:" "And we can expand these expressions:"
), ),
React.createElement( React.createElement(
LaTeX, "p",
null, null,
React.createElement("img", { className: "LaTeX SVG", src: "images/latex/7917f77b496627b3f54b0678ee5e253c7773fd8b.svg" }) React.createElement("img", { className: "LaTeX SVG", src: "images/latex/7917f77b496627b3f54b0678ee5e253c7773fd8b.svg" })
), ),
@@ -25511,7 +25466,7 @@
"Furthermore, we can make all the 1 and 0 factors explicit:" "Furthermore, we can make all the 1 and 0 factors explicit:"
), ),
React.createElement( React.createElement(
LaTeX, "p",
null, null,
React.createElement("img", { className: "LaTeX SVG", src: "images/latex/73e32c4b471bc1751add68148d9acababcf43ff1.svg" }) React.createElement("img", { className: "LaTeX SVG", src: "images/latex/73e32c4b471bc1751add68148d9acababcf43ff1.svg" })
), ),
@@ -25527,7 +25482,7 @@
", we can view as a series of four matrix operations:" ", we can view as a series of four matrix operations:"
), ),
React.createElement( React.createElement(
LaTeX, "p",
null, null,
React.createElement("img", { className: "LaTeX SVG", src: "images/latex/98f76abba92e71685cc2d94f0a9f482b6cbe554e.svg" }) React.createElement("img", { className: "LaTeX SVG", src: "images/latex/98f76abba92e71685cc2d94f0a9f482b6cbe554e.svg" })
), ),
@@ -25537,7 +25492,7 @@
"If we compact this into a single matrix operation, we get:" "If we compact this into a single matrix operation, we get:"
), ),
React.createElement( React.createElement(
LaTeX, "p",
null, null,
React.createElement("img", { className: "LaTeX SVG", src: "images/latex/e4496d76627a594150c9034f6c011bcb1cfe853c.svg" }) React.createElement("img", { className: "LaTeX SVG", src: "images/latex/e4496d76627a594150c9034f6c011bcb1cfe853c.svg" })
), ),
@@ -25553,7 +25508,7 @@
" matrix horizontally, and our big \"mixing\" matrix upside down:" " matrix horizontally, and our big \"mixing\" matrix upside down:"
), ),
React.createElement( React.createElement(
LaTeX, "p",
null, null,
React.createElement("img", { className: "LaTeX SVG", src: "images/latex/bbfe6ae9683fb2be29df8db065e1004b94066780.svg" }) React.createElement("img", { className: "LaTeX SVG", src: "images/latex/bbfe6ae9683fb2be29df8db065e1004b94066780.svg" })
), ),
@@ -25563,7 +25518,7 @@
"And then finally, we can add in our original coordinates as a single third matrix:" "And then finally, we can add in our original coordinates as a single third matrix:"
), ),
React.createElement( React.createElement(
LaTeX, "p",
null, null,
React.createElement("img", { className: "LaTeX SVG", src: "images/latex/6f51af1c66ef77785066ea5601e7dc5064831401.svg" }) React.createElement("img", { className: "LaTeX SVG", src: "images/latex/6f51af1c66ef77785066ea5601e7dc5064831401.svg" })
), ),
@@ -25573,7 +25528,7 @@
"We can perform the same trick for the quadratic curve, in which case we end up with:" "We can perform the same trick for the quadratic curve, in which case we end up with:"
), ),
React.createElement( React.createElement(
LaTeX, "p",
null, null,
React.createElement("img", { className: "LaTeX SVG", src: "images/latex/8fa7f5a1b32d06d66b0a4d0f000b2496e0bacccd.svg" }) React.createElement("img", { className: "LaTeX SVG", src: "images/latex/8fa7f5a1b32d06d66b0a4d0f000b2496e0bacccd.svg" })
), ),
@@ -25622,7 +25577,7 @@
module.exports = Matrix; module.exports = Matrix;
/***/ }, /***/ },
/* 184 */ /* 182 */
/***/ function(module, exports, __webpack_require__) { /***/ function(module, exports, __webpack_require__) {
"use strict"; "use strict";
@@ -25630,7 +25585,6 @@
var React = __webpack_require__(8); var React = __webpack_require__(8);
var Graphic = __webpack_require__(170); var Graphic = __webpack_require__(170);
var SectionHeader = __webpack_require__(175); var SectionHeader = __webpack_require__(175);
var LaTeX = __webpack_require__(177);
var deCasteljau = React.createClass({ var deCasteljau = React.createClass({
displayName: "deCasteljau", displayName: "deCasteljau",
@@ -25937,16 +25891,16 @@
module.exports = deCasteljau; module.exports = deCasteljau;
/***/ }, /***/ },
/* 185 */ /* 183 */
/***/ function(module, exports, __webpack_require__) { /***/ function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag // style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles // load the styles
var content = __webpack_require__(186); var content = __webpack_require__(184);
if(typeof content === 'string') content = [[module.id, content, '']]; if(typeof content === 'string') content = [[module.id, content, '']];
// add the styles to the DOM // add the styles to the DOM
var update = __webpack_require__(189)(content, {}); var update = __webpack_require__(187)(content, {});
if(content.locals) module.exports = content.locals; if(content.locals) module.exports = content.locals;
// Hot Module Replacement // Hot Module Replacement
if(false) { if(false) {
@@ -25963,21 +25917,21 @@
} }
/***/ }, /***/ },
/* 186 */ /* 184 */
/***/ function(module, exports, __webpack_require__) { /***/ function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(187)(); exports = module.exports = __webpack_require__(185)();
// imports // imports
// module // module
exports.push([module.id, "html,\nbody {\n font-family: Verdana;\n margin: 0;\n padding: 0;\n}\nbody {\n background: url(" + __webpack_require__(188) + ");\n}\nheader,\nsection,\nfooter {\n width: 960px;\n margin: 0 auto;\n}\nheader {\n font-family: Times;\n text-align: center;\n margin-bottom: 2rem;\n}\nheader h1 {\n font-size: 360%;\n margin: 0;\n margin-bottom: 1rem;\n}\nheader h2 {\n font-size: 125%;\n margin: 0;\n}\narticle {\n font-family: Verdana;\n width: 960px;\n margin: auto;\n background: rgba(255, 255, 255, 0.74);\n border: solid rgba(255, 0, 0, 0.35);\n border-width: 0;\n border-left-width: 1px;\n padding: 1em;\n box-shadow: 25px 0px 25px 25px rgba(255, 255, 255, 0.74);\n}\na,\na:visited {\n color: #0000c8;\n text-decoration: none;\n}\n#ribbonimg {\n position: fixed;\n top: 0;\n right: 0;\n z-index: 999;\n}\nfooter {\n font-style: italic;\n margin: 2em 0 1em 0;\n background: inherit;\n}\nnavigation {\n font-family: Georgia;\n display: block;\n width: 70%;\n margin: 0 auto;\n padding: 0;\n border: 1px solid grey;\n}\nnavigation ul {\n background: #F2F2F9;\n list-style: none;\n margin: 0;\n padding: 0.5em 1em;\n}\nnavigation ul li:nth-child(n+2):before {\n content: \"\\A7\" attr(data-number) \". \";\n}\nsection p {\n text-align: justify;\n}\nsection h2[data-num]:before {\n content: \"\\A7\" attr(data-num) \" \\2014 \";\n}\nsection h2 a,\nsection h2 a:active,\nsection h2 a:hover,\nsection h2 a:visited {\n text-decoration: none;\n color: inherit;\n}\ndiv.note {\n font-size: 90%;\n margin: 1em 2em;\n padding: 1em;\n border: 1px solid grey;\n background: rgba(150, 150, 50, 0.05);\n}\ndiv.note * {\n margin: 0;\n padding: 0;\n}\ndiv.note p {\n margin: 1em 0;\n}\ndiv.note div.MathJax_Display {\n margin: 1em 0;\n}\n.howtocode {\n border: 1px solid #8d94bd;\n padding: 0 1em;\n margin: 0 2em;\n overflow-x: hidden;\n}\n.howtocode h3 {\n margin: 0 -1em;\n padding: 0;\n background: #91bef7;\n padding-left: 0.5em;\n color: white;\n text-shadow: 1px 1px 0 #000000;\n cursor: pointer;\n}\n.howtocode pre {\n border: 1px solid #8d94bd;\n background: rgba(223, 226, 243, 0.32);\n margin: 0.5em;\n padding: 0.5em;\n}\nfigure {\n display: inline-block;\n border: 1px solid grey;\n background: #F0F0F0;\n padding: 0.5em 0.5em 0 0.5em;\n text-align: center;\n}\nfigure.inline {\n border: none;\n margin: 0;\n}\nfigure canvas {\n display: inline-block;\n background: white;\n border: 1px solid lightgrey;\n}\nfigure figcaption {\n text-align: center;\n padding: 0.5em 0;\n font-style: italic;\n font-size: 90%;\n}\ndiv.figure {\n display: inline-block;\n border: 1px solid grey;\n text-align: center;\n}\ngithub-issues {\n position: relative;\n display: block;\n width: 100%;\n border: 1px solid #EEE;\n border-left: 0.3em solid #e5ecf3;\n background: white;\n padding: 0 0.3em;\n width: 95%;\n margin: auto;\n min-height: 33px;\n font: 13px Helvetica, arial, freesans, clean, sans-serif;\n}\ngithub-issues github-issue + github-issue {\n margin-top: 1em;\n}\ngithub-issues github-issue h3 {\n font-size: 100%;\n background: #e5ecf3;\n margin: 0;\n position: relative;\n left: -0.5%;\n width: 101%;\n font-weight: bold;\n border-bottom: 1px solid #999;\n}\ngithub-issues github-issue a {\n position: absolute;\n top: 2px;\n right: 10px;\n padding: 0 4px;\n color: #4183C4!important;\n background: white;\n line-height: 10px;\n font-size: 10px;\n}\nimg.LaTeX {\n display: block;\n margin-left: 2em;\n}\n", ""]); exports.push([module.id, "html,\nbody {\n font-family: Verdana;\n margin: 0;\n padding: 0;\n}\nbody {\n background: url(" + __webpack_require__(186) + ");\n}\nheader,\nsection,\nfooter {\n width: 960px;\n margin: 0 auto;\n}\nheader {\n font-family: Times;\n text-align: center;\n margin-bottom: 2rem;\n}\nheader h1 {\n font-size: 360%;\n margin: 0;\n margin-bottom: 1rem;\n}\nheader h2 {\n font-size: 125%;\n margin: 0;\n}\narticle {\n font-family: Verdana;\n width: 960px;\n margin: auto;\n background: rgba(255, 255, 255, 0.74);\n border: solid rgba(255, 0, 0, 0.35);\n border-width: 0;\n border-left-width: 1px;\n padding: 1em;\n box-shadow: 25px 0px 25px 25px rgba(255, 255, 255, 0.74);\n}\na,\na:visited {\n color: #0000c8;\n text-decoration: none;\n}\n#ribbonimg {\n position: fixed;\n top: 0;\n right: 0;\n z-index: 999;\n}\nfooter {\n font-style: italic;\n margin: 2em 0 1em 0;\n background: inherit;\n}\nnavigation {\n font-family: Georgia;\n display: block;\n width: 70%;\n margin: 0 auto;\n padding: 0;\n border: 1px solid grey;\n}\nnavigation ul {\n background: #F2F2F9;\n list-style: none;\n margin: 0;\n padding: 0.5em 1em;\n}\nnavigation ul li:nth-child(n+2):before {\n content: \"\\A7\" attr(data-number) \". \";\n}\nsection p {\n text-align: justify;\n}\nsection h2[data-num]:before {\n content: \"\\A7\" attr(data-num) \" \\2014 \";\n}\nsection h2 a,\nsection h2 a:active,\nsection h2 a:hover,\nsection h2 a:visited {\n text-decoration: none;\n color: inherit;\n}\ndiv.note {\n font-size: 90%;\n margin: 1em 2em;\n padding: 1em;\n border: 1px solid grey;\n background: rgba(150, 150, 50, 0.05);\n}\ndiv.note * {\n margin: 0;\n padding: 0;\n}\ndiv.note p {\n margin: 1em 0;\n}\ndiv.note div.MathJax_Display {\n margin: 1em 0;\n}\n.howtocode {\n border: 1px solid #8d94bd;\n padding: 0 1em;\n margin: 0 2em;\n overflow-x: hidden;\n}\n.howtocode h3 {\n margin: 0 -1em;\n padding: 0;\n background: #91bef7;\n padding-left: 0.5em;\n color: white;\n text-shadow: 1px 1px 0 #000000;\n cursor: pointer;\n}\n.howtocode pre {\n border: 1px solid #8d94bd;\n background: rgba(223, 226, 243, 0.32);\n margin: 0.5em;\n padding: 0.5em;\n}\nfigure {\n display: inline-block;\n border: 1px solid grey;\n background: #F0F0F0;\n padding: 0.5em 0.5em 0 0.5em;\n text-align: center;\n}\nfigure.inline {\n border: none;\n margin: 0;\n}\nfigure canvas {\n display: inline-block;\n background: white;\n border: 1px solid lightgrey;\n}\nfigure figcaption {\n text-align: center;\n padding: 0.5em 0;\n font-style: italic;\n font-size: 90%;\n}\ndiv.figure {\n display: inline-block;\n border: 1px solid grey;\n text-align: center;\n}\ngithub-issues {\n position: relative;\n display: block;\n width: 100%;\n border: 1px solid #EEE;\n border-left: 0.3em solid #e5ecf3;\n background: white;\n padding: 0 0.3em;\n width: 95%;\n margin: auto;\n min-height: 33px;\n font: 13px Helvetica, arial, freesans, clean, sans-serif;\n}\ngithub-issues github-issue + github-issue {\n margin-top: 1em;\n}\ngithub-issues github-issue h3 {\n font-size: 100%;\n background: #e5ecf3;\n margin: 0;\n position: relative;\n left: -0.5%;\n width: 101%;\n font-weight: bold;\n border-bottom: 1px solid #999;\n}\ngithub-issues github-issue a {\n position: absolute;\n top: 2px;\n right: 10px;\n padding: 0 4px;\n color: #4183C4!important;\n background: white;\n line-height: 10px;\n font-size: 10px;\n}\nimg.LaTeX {\n display: block;\n margin-left: 2em;\n}\n", ""]);
// exports // exports
/***/ }, /***/ },
/* 187 */ /* 185 */
/***/ function(module, exports) { /***/ function(module, exports) {
/* /*
@@ -26033,13 +25987,13 @@
/***/ }, /***/ },
/* 188 */ /* 186 */
/***/ function(module, exports, __webpack_require__) { /***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__.p + "images/packed/7d3b28205544712db60d1bb7973f10f3.png"; module.exports = __webpack_require__.p + "images/packed/7d3b28205544712db60d1bb7973f10f3.png";
/***/ }, /***/ },
/* 189 */ /* 187 */
/***/ function(module, exports, __webpack_require__) { /***/ function(module, exports, __webpack_require__) {
/* /*

9
components/sections/control/index.js
View File

@@ -1,7 +1,6 @@
var React = require("react"); var React = require("react");
var Graphic = require("../../Graphic.jsx"); var Graphic = require("../../Graphic.jsx");
var SectionHeader = require("../../SectionHeader.jsx"); var SectionHeader = require("../../SectionHeader.jsx");
var LaTeX = require("../../LaTeX.jsx");
var Control = React.createClass({ var Control = React.createClass({
statics: { statics: {
@@ -211,14 +210,14 @@ var Control = React.createClass({
point with a value that changes its strength. These values are conventionally called "Weights", and 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> we can add them to our original Bézier function:</p>
<LaTeX>\[ <p>\[
Bézier(n,t) = \sum_{i=0}^{n} Bézier(n,t) = \sum_{i=0}^{n}
\underset{binomial\ term}{\underbrace{\binom{n}{i}}} \underset{binomial\ term}{\underbrace{\binom{n}{i}}}
\cdot\ \cdot\
\underset{polynomial\ term}{\underbrace{(1-t)^{n-i} \cdot t^{i}}} \underset{polynomial\ term}{\underbrace{(1-t)^{n-i} \cdot t^{i}}}
\cdot\ \cdot\
\underset{weight}{\underbrace{w_i}} \underset{weight}{\underbrace{w_i}}
\]</LaTeX> \]</p>
<p>That looks complicated, but as it so happens, the "weights" are actually just the coordinate values <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, we want our curve to have: for an <i>n<sup>th</sup></i> order curve, w<sub>0</sub> is our start coordinate,
@@ -226,11 +225,11 @@ var Control = React.createClass({
a cubic curve that starts at (120,160), is controlled by (35,200) and (220,260) and ends at (220,40), 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> we use this Bézier curve:</p>
<LaTeX>\[ <p>\[
\left \{ \begin{matrix} \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 \\ 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 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. \]</LaTeX> \end{matrix} \right. \]</p>
<p>Which gives us the curve we saw at the top of the article:</p> <p>Which gives us the curve we saw at the top of the article:</p>

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

@@ -1,7 +1,6 @@
var React = require("react"); var React = require("react");
var Graphic = require("../../Graphic.jsx"); var Graphic = require("../../Graphic.jsx");
var SectionHeader = require("../../SectionHeader.jsx"); var SectionHeader = require("../../SectionHeader.jsx");
var LaTeX = require("../../LaTeX.jsx");
var deCasteljau = React.createClass({ var deCasteljau = React.createClass({
statics: { statics: {

37
components/sections/explanation/index.js
View File

@@ -1,7 +1,6 @@
var React = require("react"); var React = require("react");
var Graphic = require("../../Graphic.jsx"); var Graphic = require("../../Graphic.jsx");
var SectionHeader = require("../../SectionHeader.jsx"); var SectionHeader = require("../../SectionHeader.jsx");
var LaTeX = require("../../LaTeX.jsx");
var Explanation = React.createClass({ var Explanation = React.createClass({
statics: { statics: {
@@ -29,9 +28,9 @@ var Explanation = React.createClass({
Let's say we have a function that maps some value, let's call it <i>x</i>, to Let's say we have a function that maps some value, let's call it <i>x</i>, to
some other value, using some kind of number manipulation:</p> some other value, using some kind of number manipulation:</p>
<LaTeX>\[ <p>\[
f(x) = \cos(x) f(x) = \cos(x)
\]</LaTeX> \]</p>
<p>The notation <i>f(x)</i> is the standard way to show that it's a function (by convention <p>The notation <i>f(x)</i> is the standard way to show that it's a function (by convention
called <i>f</i> if we're only listing one) and its output changes based on one variable called <i>f</i> if we're only listing one) and its output changes based on one variable
@@ -40,10 +39,10 @@ var Explanation = React.createClass({
<p>So far so good. Now, let's look at parametric functions, and how they cheat. <p>So far so good. Now, let's look at parametric functions, and how they cheat.
Let's take the following two functions:</p> Let's take the following two functions:</p>
<LaTeX>\[\begin{matrix} <p>\[\begin{matrix}
f(a) = \cos(a) \\ f(a) = \cos(a) \\
f(b) = \sin(b) f(b) = \sin(b)
\end{matrix}\]</LaTeX> \end{matrix}\]</p>
<p>There's nothing really remarkable about them, they're just a sine and cosine function, <p>There's nothing really remarkable about them, they're just a sine and cosine function,
but you'll notice the inputs have different names. If we change the value for <i>a</i>, but you'll notice the inputs have different names. If we change the value for <i>a</i>,
@@ -51,11 +50,11 @@ var Explanation = React.createClass({
in that function. Parametric functions cheat by changing that. In a parametric function in that function. Parametric functions cheat by changing that. In a parametric function
all the different functions share a variable, like this:</p> all the different functions share a variable, like this:</p>
<LaTeX>\[ <p>\[
\left \{ \begin{matrix} \left \{ \begin{matrix}
f_a(t) = \cos(t) \\ f_a(t) = \cos(t) \\
f_b(t) = \sin(t) f_b(t) = \sin(t)
\end{matrix} \right. \]</LaTeX> \end{matrix} \right. \]</p>
<p>Multiple functions, but only one variable. If we change the value for <i>t</i>, <p>Multiple functions, but only one variable. If we change the value for <i>t</i>,
we change the outcome of both <i>f<sub>a</sub>(t)</i> and <i>f<sub>b</sub>(t)</i>. we change the outcome of both <i>f<sub>a</sub>(t)</i> and <i>f<sub>b</sub>(t)</i>.
@@ -63,11 +62,11 @@ var Explanation = React.createClass({
we change the labels <i>f<sub>a</sub>(t)</i> and <i>f<sub>b</sub>(t)</i> with what we change the labels <i>f<sub>a</sub>(t)</i> and <i>f<sub>b</sub>(t)</i> with what
we usually mean with them for parametric curves, things might be a lot more obvious:</p> we usually mean with them for parametric curves, things might be a lot more obvious:</p>
<LaTeX>\[ <p>\[
\left \{ \begin{matrix} \left \{ \begin{matrix}
x = \cos(t) \\ x = \cos(t) \\
y = \sin(t) y = \sin(t)
\end{matrix} \right. \]</LaTeX> \end{matrix} \right. \]</p>
<p>There we go. <i>x</i>/<i>y</i> coordinates, linked through some mystery value <i>t</i>.</p> <p>There we go. <i>x</i>/<i>y</i> coordinates, linked through some mystery value <i>t</i>.</p>
@@ -89,9 +88,9 @@ var Explanation = React.createClass({
<p>You may remember polynomials from high school, where they're those sums that look like:</p> <p>You may remember polynomials from high school, where they're those sums that look like:</p>
<LaTeX>\[ <p>\[
f(x) = a \cdot x^3 + b \cdot x^2 + c \cdot x + d f(x) = a \cdot x^3 + b \cdot x^2 + c \cdot x + d
\]</LaTeX> \]</p>
<p>If they have a highest order term <i>x³</i> they're called "cubic" polynomials, if it's <p>If they have a highest order term <i>x³</i> they're called "cubic" polynomials, if it's
<i>x²</i> it's a "square" polynomial, if it's just <i>x</i> it's a line (and if there aren't <i>x²</i> it's a "square" polynomial, if it's just <i>x</i> it's a line (and if there aren't
@@ -101,21 +100,21 @@ var Explanation = React.createClass({
fixed being between 0 and 1, with coefficients <i>a</i>, <i>b</i> etc. taking the "binomial" 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:</p> form, which sounds fancy but is actually a pretty simple description for mixing values:</p>
<LaTeX>\[ \begin{align*} <p>\[ \begin{align*}
linear &= (1-t) + t \\ linear &= (1-t) + t \\
square &= (1-t)^2 + 2 \cdot (1-t) \cdot t + t^2 \\ 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 cubic &= (1-t)^3 + 3 \cdot (1-t)^2 \cdot t + 3 \cdot (1-t) \cdot t^2 + t^3
\end{align*} \]</LaTeX> \end{align*} \]</p>
<p>I know what you're thinking: that doesn't look too simple, but if we remove <i>t</i> and <p>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:</p> add in "times one", things suddenly look pretty easy. Check out these binomial terms:</p>
<LaTeX>\[ \begin{align*} <p>\[ \begin{align*}
linear &= \hskip{2.5em} 1 + 1 \\ linear &= \hskip{2.5em} 1 + 1 \\
square &= \hskip{1.7em} 1 + 2 + 1\\ square &= \hskip{1.7em} 1 + 2 + 1\\
cubic &= \hskip{0.85em} 1 + 3 + 3 + 1\\ cubic &= \hskip{0.85em} 1 + 3 + 3 + 1\\
hypercubic &= 1 + 4 + 6 + 4 + 1 hypercubic &= 1 + 4 + 6 + 4 + 1
\end{align*} \]</LaTeX> \end{align*} \]</p>
<p>Notice that 2 is the same as 1+1, and 3 is 2+1 and 1+2, and 6 is 3+3... As you <p>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 can see, each time we go up a dimension, we simply start and end with 1, and everything
@@ -126,23 +125,23 @@ var Explanation = React.createClass({
if we rename <i>(1-t)</i> to <i>a</i> and <i>t</i> to <i>b</i>, and remove the weights 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:</p> for a moment, we get this:</p>
<LaTeX>\[ \begin{align*} <p>\[ \begin{align*}
linear &= BLUE[a] + RED[b] \\ linear &= BLUE[a] + RED[b] \\
square &= BLUE[a] \cdot BLUE[a] + BLUE[a] \cdot RED[b] + RED[b] \cdot 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]\\ 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*} \]</LaTeX> \end{align*} \]</p>
<p>It's basically just a sum of "every combination of <i>a</i> and <i>b</i>", progressively <p>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 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 too. So now you know binomial polynomials, and just for completeness I'm going to show
you the generic function for this:</p> you the generic function for this:</p>
<LaTeX>\[ <p>\[
Bézier(n,t) = \sum_{i=0}^{n} Bézier(n,t) = \sum_{i=0}^{n}
\underset{binomial\ term}{\underbrace{\binom{n}{i}}} \underset{binomial\ term}{\underbrace{\binom{n}{i}}}
\cdot\ \cdot\
\underset{polynomial\ term}{\underbrace{(1-t)^{n-i} \cdot t^{i}}} \underset{polynomial\ term}{\underbrace{(1-t)^{n-i} \cdot t^{i}}}
\]</LaTeX> \]</p>
<p>And that's the full description for Bézier curves. Σ in this function indicates that this is <p>And that's the full description for Bézier curves. Σ in this function indicates that this is
a series of additions (using the variable listed below the Σ, starting at ...=&lt;value&gt; and ending a series of additions (using the variable listed below the Σ, starting at ...=&lt;value&gt; and ending

41
components/sections/matrix/index.js
View File

@@ -1,6 +1,5 @@
var React = require("react"); var React = require("react");
var SectionHeader = require("../../SectionHeader.jsx"); var SectionHeader = require("../../SectionHeader.jsx");
var LaTeX = require("../../LaTeX.jsx");
var Matrix = React.createClass({ var Matrix = React.createClass({
statics: { statics: {
@@ -16,85 +15,85 @@ var Matrix = React.createClass({
as a polynomial basis function, the weight matrix, and the actual coordinates as matrix. 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 :</p> Let's look at what this means for the cubic curve :</p>
<LaTeX>\[ <p>\[
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
\]</LaTeX> \]</p>
<p>Disregarding our actual coordinates for a moment, we have:</p> <p>Disregarding our actual coordinates for a moment, we have:</p>
<LaTeX>\[ <p>\[
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
\]</LaTeX> \]</p>
<p>We can write this as a sum of four expressions:</p> <p>We can write this as a sum of four expressions:</p>
<LaTeX>\[ <p>\[
\begin{matrix} \begin{matrix}
... & = & (1-t)^3 \\ ... & = & (1-t)^3 \\
& + & 3 \cdot (1-t)^2 \cdot t \\ & + & 3 \cdot (1-t)^2 \cdot t \\
& + & 3 \cdot (1-t) \cdot t^2 \\ & + & 3 \cdot (1-t) \cdot t^2 \\
& + & t^3 \\ & + & t^3 \\
\end{matrix} \end{matrix}
\]</LaTeX> \]</p>
<p>And we can expand these expressions:</p> <p>And we can expand these expressions:</p>
<LaTeX>\[ <p>\[
\begin{matrix} \begin{matrix}
... & = & (1-t) \cdot (1-t) \cdot (1-t) & = & -t^3 + 3 \cdot t^2 - 3 \cdot t + 1 \\ ... & = & (1-t) \cdot (1-t) \cdot (1-t) & = & -t^3 + 3 \cdot t^2 - 3 \cdot t + 1 \\
& + & 3 \cdot (1-t) \cdot (1-t) \cdot t & = & 3 \cdot t^3 - 6 \cdot t^2 + 3 \cdot t \\ & + & 3 \cdot (1-t) \cdot (1-t) \cdot t & = & 3 \cdot t^3 - 6 \cdot t^2 + 3 \cdot t \\
& + & 3 \cdot (1-t) \cdot t \cdot t & = & -3 \cdot t^3 + 3 \cdot t^2 \\ & + & 3 \cdot (1-t) \cdot t \cdot t & = & -3 \cdot t^3 + 3 \cdot t^2 \\
& + & t \cdot t \cdot t & = & t^3 \\ & + & t \cdot t \cdot t & = & t^3 \\
\end{matrix} \end{matrix}
\]</LaTeX> \]</p>
<p>Furthermore, we can make all the 1 and 0 factors explicit:</p> <p>Furthermore, we can make all the 1 and 0 factors explicit:</p>
<LaTeX>\[ <p>\[
\begin{matrix} \begin{matrix}
... & = & -1 \cdot t^3 + 3 \cdot t^2 - 3 \cdot t + 1 \\ ... & = & -1 \cdot t^3 + 3 \cdot t^2 - 3 \cdot t + 1 \\
& + & +3 \cdot t^3 - 6 \cdot t^2 + 3 \cdot t + 0 \\ & + & +3 \cdot t^3 - 6 \cdot t^2 + 3 \cdot t + 0 \\
& + & -3 \cdot t^3 + 3 \cdot t^2 + 0 \cdot t + 0 \\ & + & -3 \cdot t^3 + 3 \cdot t^2 + 0 \cdot t + 0 \\
& + & +1 \cdot t^3 + 0 \cdot t^2 + 0 \cdot t + 0 \\ & + & +1 \cdot t^3 + 0 \cdot t^2 + 0 \cdot t + 0 \\
\end{matrix} \end{matrix}
\]</LaTeX> \]</p>
<p>And <em>that</em>, we can view as a series of four matrix operations:</p> <p>And <em>that</em>, we can view as a series of four matrix operations:</p>
<LaTeX>\[ <p>\[
\begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}-1 \\ 3 \\ -3 \\ 1\end{bmatrix} \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}-1 \\ 3 \\ -3 \\ 1\end{bmatrix}
+ \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}3 \\ -6 \\ 3 \\ 0\end{bmatrix} + \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}3 \\ -6 \\ 3 \\ 0\end{bmatrix}
+ \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}-3 \\ 3 \\ 0 \\ 0\end{bmatrix} + \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}-3 \\ 3 \\ 0 \\ 0\end{bmatrix}
+ \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}1 \\ 0 \\ 0 \\ 0\end{bmatrix} + \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}1 \\ 0 \\ 0 \\ 0\end{bmatrix}
\]</LaTeX> \]</p>
<p>If we compact this into a single matrix operation, we get:</p> <p>If we compact this into a single matrix operation, we get:</p>
<LaTeX>\[ <p>\[
\begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix} \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}
-1 & 3 & -3 & 1 \\ -1 & 3 & -3 & 1 \\
3 & -6 & 3 & 0 \\ 3 & -6 & 3 & 0 \\
-3 & 3 & 0 & 0 \\ -3 & 3 & 0 & 0 \\
1 & 0 & 0 & 0 1 & 0 & 0 & 0
\end{bmatrix} \end{bmatrix}
\]</LaTeX> \]</p>
<p>This kind of polynomial basis representation is generally written with the bases in <p>This kind of polynomial basis representation is generally written with the bases in
increasing order, which means we need to flip our <em>t</em> matrix horizontally, and our increasing order, which means we need to flip our <em>t</em> matrix horizontally, and our
big "mixing" matrix upside down:</p> big "mixing" matrix upside down:</p>
<LaTeX>\[ <p>\[
\begin{bmatrix}1 & t & t^2 & t^3\end{bmatrix} \cdot \begin{bmatrix} \begin{bmatrix}1 & t & t^2 & t^3\end{bmatrix} \cdot \begin{bmatrix}
1 & 0 & 0 & 0 \\ 1 & 0 & 0 & 0 \\
-3 & 3 & 0 & 0 \\ -3 & 3 & 0 & 0 \\
3 & -6 & 3 & 0 \\ 3 & -6 & 3 & 0 \\
-1 & 3 & -3 & 1 -1 & 3 & -3 & 1
\end{bmatrix} \end{bmatrix}
\]</LaTeX> \]</p>
<p>And then finally, we can add in our original coordinates as a single third matrix:</p> <p>And then finally, we can add in our original coordinates as a single third matrix:</p>
<LaTeX>\[ <p>\[
B(t) = \begin{bmatrix} B(t) = \begin{bmatrix}
1 & t & t^2 & t^3 1 & t & t^2 & t^3
\end{bmatrix} \end{bmatrix}
@@ -109,11 +108,11 @@ var Matrix = React.createClass({
\begin{bmatrix} \begin{bmatrix}
P_1 \\ P_2 \\ P_3 \\ P_4 P_1 \\ P_2 \\ P_3 \\ P_4
\end{bmatrix} \end{bmatrix}
\]</LaTeX> \]</p>
<p>We can perform the same trick for the quadratic curve, in which case we end up with:</p> <p>We can perform the same trick for the quadratic curve, in which case we end up with:</p>
<LaTeX>\[ <p>\[
B(t) = \begin{bmatrix} B(t) = \begin{bmatrix}
1 & t & t^2 1 & t & t^2
\end{bmatrix} \end{bmatrix}
@@ -127,7 +126,7 @@ var Matrix = React.createClass({
\begin{bmatrix} \begin{bmatrix}
P_1 \\ P_2 \\ P_3 P_1 \\ P_2 \\ P_3
\end{bmatrix} \end{bmatrix}
\]</LaTeX> \]</p>
<p>If we plug in a <em>t</em> value, and then multiply the matrices, we will <p>If we plug in a <em>t</em> value, and then multiply the matrices, we will
get exactly the same values as when we evaluate the original polynomial function, get exactly the same values as when we evaluate the original polynomial function,

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

@@ -1,7 +1,6 @@
var React = require("react"); var React = require("react");
var Graphic = require("../../Graphic.jsx"); var Graphic = require("../../Graphic.jsx");
var SectionHeader = require("../../SectionHeader.jsx"); var SectionHeader = require("../../SectionHeader.jsx");
var LaTeX = require("../../LaTeX.jsx");
var Whatis = React.createClass({ var Whatis = React.createClass({
@@ -35,7 +34,7 @@ var Whatis = React.createClass({
distance away from the first point (and thus 80% the distance away from the second point) then we distance away from the first point (and thus 80% the distance away from the second point) then we
can compute that really easily:</p> can compute that really easily:</p>
<LaTeX>\[ <p>\[
Given \left ( Given \left (
\begin{align} \begin{align}
p_1 &= some\ point \\ p_1 &= some\ point \\
@@ -45,7 +44,7 @@ var Whatis = React.createClass({
\end{align} \end{align}
\right ),\ our\ new\ point = p_1 + distance \cdot ratio \right ),\ our\ new\ point = p_1 + distance \cdot ratio
\]</LaTeX> \]</p>
<p>So let's look at that in action: the following graphic is interactive in that you can use your <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 '+' and '-' keys to increase or decrease the interpolation distance, to see what happens. We start