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

better sketched, packing

Browse Source
This commit is contained in:
Pomax
2015-12-20 22:34:32 -08:00
parent 2e0a7c68d5
commit 719b0b09af
12 changed files with 452 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
components/sections/explanation/circle.js Normal file
View File

@@ -0,0 +1,36 @@
module.exports = {
setup: function(sketch) {
},
draw: function(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);
}
}
}
};

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

@@ -4,13 +4,11 @@ var SectionHeader = require("../../SectionHeader.jsx");
var LaTeX = require("../../LaTeX.jsx");
var Explanation = React.createClass({
circle: require("./circle"),
setup: function(api) {
},
draw: function(api, curve) {
componentWillMount: function() {
this.setup = this.circle.setup.bind(this);
this.draw = this.circle.draw.bind(this);
},
render: function() {

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

@@ -3,86 +3,13 @@ var Graphic = require("../../Graphic.jsx");
var SectionHeader = require("../../SectionHeader.jsx");
var LaTeX = require("../../LaTeX.jsx");
var Whatis = React.createClass({
interpolation: require("./interpolation"),
setup: function(api) {
this.offset = 20;
var curve = api.getDefaultQuadratic();
api.setPanelCount(3);
api.setCurve(curve);
this.dim = api.getPanelWidth();
},
draw: function(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() {
this.setup = this.interpolation.setup.bind(this);
this.draw = this.interpolation.draw.bind(this);
},
render: function() {
@@ -119,7 +46,7 @@ var Whatis = React.createClass({
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>
<Graphic preset="threepanel" title="Linear Interpolation leading to Bézier curves" setup={this.setup} draw={this.draw}/>
<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

143
components/sections/whatis/interpolation.js Normal file
View File

@@ -0,0 +1,143 @@
module.exports = {
setup: function(sketch) {
this.offset = 20;
var curve = sketch.getDefaultQuadratic();
sketch.setPanelCount(3);
sketch.setCurve(curve);
this.dim = sketch.getPanelWidth();
},
draw: function(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});
}
};