From 719b0b09afea7e352658638ecf4564a0c5ed8fef Mon Sep 17 00:00:00 2001 From: Pomax Date: Sun, 20 Dec 2015 22:34:32 -0800 Subject: [PATCH] better sketched, packing --- .gitignore | 1 + article.js | 350 ++++++++++++------ components/Graphic.jsx | 24 +- components/sections/explanation/circle.js | 36 ++ components/sections/explanation/index.js | 10 +- components/sections/whatis/index.js | 85 +---- components/sections/whatis/interpolation.js | 143 +++++++ .../7d3b28205544712db60d1bb7973f10f3.png | Bin .../a82c213aa38c43ee54e3b86ba5bdb987.gif | Bin lib/latex-loader.js | 2 +- lib/pre-loader.js | 2 +- webpack.config.js | 2 +- 12 files changed, 452 insertions(+), 203 deletions(-) create mode 100644 components/sections/explanation/circle.js create mode 100644 components/sections/whatis/interpolation.js rename 7d3b28205544712db60d1bb7973f10f3.png => images/packed/7d3b28205544712db60d1bb7973f10f3.png (100%) rename a82c213aa38c43ee54e3b86ba5bdb987.gif => images/packed/a82c213aa38c43ee54e3b86ba5bdb987.gif (100%) diff --git a/.gitignore b/.gitignore index 3c3629e6..15de3902 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ node_modules +data diff --git a/article.js b/article.js index 2a9e8f40..0dceebaa 100644 --- a/article.js +++ b/article.js @@ -56,7 +56,7 @@ var React = __webpack_require__(2); var ReactDOM = __webpack_require__(159); var Article = __webpack_require__(160); - var style = __webpack_require__(172); + var style = __webpack_require__(174); ReactDOM.render(React.createElement(Article, null), document.getElementById("article")); @@ -19696,7 +19696,7 @@ preface: __webpack_require__(162), introduction: __webpack_require__(163), whatis: __webpack_require__(168), - explanation: __webpack_require__(171) + explanation: __webpack_require__(172) }; /* @@ -19947,8 +19947,11 @@ cx: 0, cy: 0, mp: { x: 0, y: 0 }, + offset: { x: 0, y: 0 }, + lpts: [], render: function render() { + var href = "data:text/plain," + this.props.code; return React.createElement( "figure", null, @@ -20115,6 +20118,18 @@ } this.ctx.strokeStyle = "black"; this.drawPoints(pts, offset); + this.drawCoordinates(curve, offset); + }, + + drawCoordinates: function drawCoordinates(curve, offset) { + var _this2 = this; + + offset = offset || { x: 0, y: 0 }; + var pts = curve.points; + this.setFill("black"); + pts.forEach(function (p) { + _this2.drawText("(" + p.x + "," + p.y + ")", { x: p.x + 5, y: p.y + 10 }); + }); }, drawCurve: function drawCurve(curve, offset) { @@ -20146,12 +20161,7 @@ }, drawPoint: function drawPoint(p, offset) { - offset = offset || { x: 0, y: 0 }; - var ox = offset.x + this.offset.x; - var oy = offset.y + this.offset.y; - this.ctx.beginPath(); - this.ctx.arc(p.x + ox, p.y + oy, 5, 0, 2 * Math.PI); - this.ctx.stroke(); + this.drawCircle(p, 1, offset); }, drawPoints: function drawPoints(points, offset) { @@ -21435,86 +21445,11 @@ var Whatis = React.createClass({ displayName: "Whatis", - setup: function setup(api) { - this.offset = 20; - var curve = api.getDefaultQuadratic(); - api.setPanelCount(3); - api.setCurve(curve); - this.dim = api.getPanelWidth(); - }, + interpolation: __webpack_require__(171), - draw: function draw(api, curve) { - var pts = curve.points; - var p1 = pts[0], - p2 = pts[1], - p3 = pts[2]; - var p1e = { - x: p1.x + 0.2 * (p2.x - p1.x), - y: p1.y + 0.2 * (p2.y - p1.y) - }; - - var p2e = { - x: p2.x + 0.2 * (p3.x - p2.x), - y: p2.y + 0.2 * (p3.y - p2.y) - }; - - var m = { - x: p1e.x + 0.2 * (p2e.x - p1e.x), - y: p1e.y + 0.2 * (p2e.y - p1e.y) - }; - - api.reset(); - - api.setColor("black"); - api.setFill("black"); - api.drawSkeleton(curve); - api.drawCurve(curve); - - // draw 20% off-start points and struts - api.setColor("blue"); - api.setWeight(2); - - api.drawLine(p1, p1e); - api.drawLine(p2, p2e); - api.drawCircle(p1e, 3); - api.drawCircle(p2e, 3); - - api.drawText("linear interpolation distance: " + this.offset + "%", { x: 5, y: 15 }); - api.drawText("linear interpolation between the first set of points", { x: 5, y: this.dim - 5 }); - - // next panel - api.setColor("black"); - api.setWeight(1); - api.setOffset({ x: this.dim, y: 0 }); - api.drawLine({ x: 0, y: 0 }, { x: 0, y: this.dim }); - - api.drawSkeleton(curve); - api.drawCurve(curve); - - api.setColor("lightgrey"); - api.drawLine(p1e, p2e); - api.drawCircle(p1e, 3); - api.drawCircle(p2e, 3); - - api.setColor("blue"); - api.setWeight(2); - api.drawLine(p1e, m); - api.drawCircle(m, 3); - - api.drawText("same linear interpolation distance: " + this.offset + "%", { x: 5, y: 15 }); - api.drawText("linear interpolation between the second set of points", { x: 5, y: this.dim - 5 }); - - // next panel - api.setColor("black"); - api.setWeight(1); - api.setOffset({ x: 2 * this.dim, y: 0 }); - api.drawLine({ x: 0, y: 0 }, { x: 0, y: this.dim }); - - api.drawSkeleton(curve); - api.drawCurve(curve); - api.drawCircle(m, 3); - - api.drawText("the second interpolation turns out to be a curve point!", { x: 5, y: this.dim - 5 }); + componentWillMount: function componentWillMount() { + this.setup = this.interpolation.setup.bind(this); + this.draw = this.interpolation.draw.bind(this); }, render: function render() { @@ -21570,7 +21505,7 @@ null, "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:" ), - React.createElement(Graphic, { preset: "threepanel", title: "Linear Interpolation leading to Bézier curves", setup: this.setup, draw: this.draw }), + React.createElement(Graphic, { title: "Linear Interpolation leading to Bézier curves", setup: this.setup, draw: this.draw }), React.createElement( "p", null, @@ -21799,6 +21734,158 @@ /***/ }, /* 171 */ +/***/ function(module, exports) { + + "use strict"; + + module.exports = { + + setup: function setup(sketch) { + this.offset = 20; + var curve = sketch.getDefaultQuadratic(); + sketch.setPanelCount(3); + sketch.setCurve(curve); + this.dim = sketch.getPanelWidth(); + }, + + draw: function draw(sketch, curve) { + var pts = curve.points; + var p1 = pts[0], + p2 = pts[1], + p3 = pts[2]; + + var p1e = { + x: p1.x + 0.2 * (p2.x - p1.x), + y: p1.y + 0.2 * (p2.y - p1.y) + }; + + var p2e = { + x: p2.x + 0.2 * (p3.x - p2.x), + y: p2.y + 0.2 * (p3.y - p2.y) + }; + + var m = { + x: p1e.x + 0.2 * (p2e.x - p1e.x), + y: p1e.y + 0.2 * (p2e.y - p1e.y) + }; + + var p1e2 = { + x: p1.x + 0.4 * (p2.x - p1.x), + y: p1.y + 0.4 * (p2.y - p1.y) + }; + + var p2e2 = { + x: p2.x + 0.4 * (p3.x - p2.x), + y: p2.y + 0.4 * (p3.y - p2.y) + }; + + var m2 = { + x: p1e2.x + 0.4 * (p2e2.x - p1e2.x), + y: p1e2.y + 0.4 * (p2e2.y - p1e2.y) + }; + + var p1e3 = { + x: p1.x + 0.6 * (p2.x - p1.x), + y: p1.y + 0.6 * (p2.y - p1.y) + }; + + var p2e3 = { + x: p2.x + 0.6 * (p3.x - p2.x), + y: p2.y + 0.6 * (p3.y - p2.y) + }; + + var m3 = { + x: p1e3.x + 0.6 * (p2e3.x - p1e3.x), + y: p1e3.y + 0.6 * (p2e3.y - p1e3.y) + }; + + sketch.reset(); + + sketch.setColor("black"); + sketch.setFill("black"); + sketch.drawSkeleton(curve); + sketch.drawCurve(curve); + + // draw 20% off-start points and struts + sketch.setWeight(2); + + sketch.setColor("blue"); + sketch.drawLine(p1, p1e); + sketch.drawLine(p2, p2e); + sketch.drawCircle(p1e, 3); + sketch.drawCircle(p2e, 3); + + sketch.setColor("red"); + sketch.drawLine(p1e, p1e2); + sketch.drawLine(p2e, p2e2); + sketch.drawCircle(p1e2, 3); + sketch.drawCircle(p2e2, 3); + + sketch.setColor("green"); + sketch.drawLine(p1e2, p1e3); + sketch.drawLine(p2e2, p2e3); + sketch.drawCircle(p1e3, 3); + sketch.drawCircle(p2e3, 3); + + sketch.drawText("First linear interpolation at 20% / 40% / 60%", { x: 5, y: 15 }); + + // next panel + sketch.setColor("black"); + sketch.setWeight(1); + sketch.setOffset({ x: this.dim + 0.5, y: 0 }); + sketch.drawLine({ x: 0, y: 0 }, { x: 0, y: this.dim }); + + sketch.drawSkeleton(curve); + sketch.drawCurve(curve); + + sketch.setColor("rgb(100,100,200)"); + sketch.drawLine(p1e, p2e); + sketch.drawCircle(p1e, 3); + sketch.drawCircle(p2e, 3); + + sketch.setColor("rgb(200,100,100)"); + sketch.drawLine(p1e2, p2e2); + sketch.drawCircle(p1e2, 3); + sketch.drawCircle(p2e2, 3); + + sketch.setColor("rgb(100,200,100)"); + sketch.drawLine(p1e3, p2e3); + sketch.drawCircle(p1e3, 3); + sketch.drawCircle(p2e3, 3); + + sketch.setColor("blue"); + sketch.setWeight(2); + sketch.drawLine(p1e, m); + sketch.drawCircle(m, 3); + + sketch.setColor("red"); + sketch.drawLine(p1e2, m2); + sketch.drawCircle(m2, 3); + + sketch.setColor("green"); + sketch.drawLine(p1e3, m3); + sketch.drawCircle(m3, 3); + + sketch.drawText("Second interpolation at 20% / 40% / 60%", { x: 5, y: 15 }); + + // next panel + sketch.setColor("black"); + sketch.setWeight(1); + sketch.setOffset({ x: 2 * this.dim + 0.5, y: 0 }); + sketch.drawLine({ x: 0, y: 0 }, { x: 0, y: this.dim }); + + sketch.drawSkeleton(curve); + sketch.drawCurve(curve); + 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 }); + } + }; + +/***/ }, +/* 172 */ /***/ function(module, exports, __webpack_require__) { "use strict"; @@ -21811,9 +21898,12 @@ var Explanation = React.createClass({ displayName: "Explanation", - setup: function setup(api) {}, + circle: __webpack_require__(173), - draw: function draw(api, curve) {}, + componentWillMount: function componentWillMount() { + this.setup = this.circle.setup.bind(this); + this.draw = this.circle.draw.bind(this); + }, render: function render() { return React.createElement( @@ -22694,16 +22784,58 @@ module.exports = Explanation; /***/ }, -/* 172 */ +/* 173 */ +/***/ function(module, exports) { + + "use strict"; + + module.exports = { + setup: function setup(sketch) {}, + + draw: function draw(sketch, curve) { + var dim = sketch.getPanelWidth(), + w = dim, + h = dim, + w2 = w / 2, + h2 = h / 2, + w4 = w2 / 2, + h4 = h2 / 2; + + sketch.reset(); + sketch.setColor("black"); + sketch.drawLine({ x: 0, y: h2 }, { x: w, y: h2 }); + sketch.drawLine({ x: w2, y: 0 }, { x: w2, y: h }); + + var offset = { x: w2, y: h2 }; + for (var t = 0, p; t <= 5; t += 0.1) { + p = { + x: w4 * Math.cos(t), + y: h4 * Math.sin(t) + }; + sketch.drawPoint(p, offset); + var modulo = t % 1; + if (modulo < 0.05 || modulo > 0.95) { + sketch.drawText("t = " + Math.round(t), { + x: offset.x + 1.25 * w4 * Math.cos(t) - 10, + y: offset.y + 1.25 * h4 * Math.sin(t) + 5 + }); + sketch.drawCircle(p, 2, offset); + } + } + } + }; + +/***/ }, +/* 174 */ /***/ function(module, exports, __webpack_require__) { // style-loader: Adds some css to the DOM by adding a