mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-08-30 19:50:01 +02:00
making things a bit more uniform
This commit is contained in:
Pomax
@@ -10,11 +10,107 @@ var Whatis = React.createClass({
|
||||
};
|
||||
},
|
||||
|
||||
interpolation: require("./interpolation"),
|
||||
setup: function(api) {
|
||||
api.setPanelCount(3);
|
||||
var curve = api.getDefaultQuadratic();
|
||||
api.setCurve(curve);
|
||||
api.step = 25;
|
||||
},
|
||||
|
||||
componentWillMount: function() {
|
||||
this.setup = this.interpolation.setup.bind(this);
|
||||
this.draw = this.interpolation.draw.bind(this);
|
||||
draw: function(api, curve) {
|
||||
var dim = api.getPanelWidth(),
|
||||
pts = curve.points,
|
||||
p1 = pts[0],
|
||||
p2=pts[1],
|
||||
p3 = pts[2],
|
||||
p1e, p2e, m, t, i,
|
||||
offset = {x:0, y:0};
|
||||
|
||||
api.reset();
|
||||
|
||||
api.setColor("black");
|
||||
api.setFill("black");
|
||||
api.drawSkeleton(curve, offset);
|
||||
api.text("First linear interpolation at "+api.step+"% steps", {x:5, y:15}, offset);
|
||||
|
||||
offset.x += dim;
|
||||
api.drawLine({x:0, y:0}, {x:0, y:this.dim}, offset);
|
||||
api.drawSkeleton(curve, offset);
|
||||
api.text("Second interpolation at "+api.step+"% steps", {x:5, y:15}, offset);
|
||||
|
||||
offset.x += dim;
|
||||
api.drawLine({x:0, y:0}, {x:0, y:this.dim}, offset);
|
||||
api.drawSkeleton(curve, offset);
|
||||
api.text("Curve points generated this way", {x:5, y:15}, offset);
|
||||
|
||||
api.setColor("lightgrey");
|
||||
for(var t=1,d=20,v,tvp; t<d; t++) {
|
||||
v = t/d;
|
||||
tvp = curve.get(v);
|
||||
api.drawCircle(tvp,2,offset);
|
||||
}
|
||||
|
||||
for(i = 3*api.step; i>0; i -= api.step) {
|
||||
t = i/100;
|
||||
if (t>1) continue;
|
||||
api.setRandomColor();
|
||||
|
||||
p1e = {
|
||||
x: p1.x + t * (p2.x - p1.x),
|
||||
y: p1.y + t * (p2.y - p1.y)
|
||||
};
|
||||
|
||||
p2e = {
|
||||
x: p2.x + t * (p3.x - p2.x),
|
||||
y: p2.y + t * (p3.y - p2.y)
|
||||
};
|
||||
|
||||
m = {
|
||||
x: p1e.x + t * (p2e.x - p1e.x),
|
||||
y: p1e.y + t * (p2e.y - p1e.y)
|
||||
}
|
||||
|
||||
offset = {x:0, y:0};
|
||||
api.drawCircle(p1e,3, offset);
|
||||
api.drawCircle(p2e,3, offset);
|
||||
api.setWeight(0.5);
|
||||
api.drawLine(p1e, p2e, offset);
|
||||
api.setWeight(1.5);
|
||||
api.drawLine(p1, p1e, offset);
|
||||
api.drawLine(p2, p2e, offset);
|
||||
api.setWeight(1);
|
||||
|
||||
offset.x += dim;
|
||||
api.drawCircle(p1e,3, offset);
|
||||
api.drawCircle(p2e,3, offset);
|
||||
api.setWeight(0.5);
|
||||
api.drawLine(p1e, p2e, offset);
|
||||
api.setWeight(1.5);
|
||||
api.drawLine(p1e, m, offset);
|
||||
api.setWeight(1);
|
||||
api.drawCircle(m,3,offset);
|
||||
|
||||
offset.x += dim;
|
||||
api.drawCircle(m,3,offset);
|
||||
|
||||
api.text(i+"%, or t = " + api.utils.round(t,2), {x: m.x + 10 + offset.x, y: m.y + 10 + offset.y});
|
||||
}
|
||||
},
|
||||
|
||||
values: {
|
||||
"38": 1, // up arrow
|
||||
"40": -1, // down arrow
|
||||
},
|
||||
|
||||
onKeyDown: function(e, api) {
|
||||
var v = this.values[e.keyCode];
|
||||
if(v) {
|
||||
e.preventDefault();
|
||||
api.step += v;
|
||||
if (api.step < 1) {
|
||||
api.step = 1;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
render: function() {
|
||||
@@ -54,7 +150,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 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} onKeyDown={this.onKeyDown}/>
|
||||
|
||||
<p>And that brings us to the complicated maths: calculus.</p>
|
||||
|
||||
|
||||
@@ -1,157 +0,0 @@
|
||||
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.text("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.text("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.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.setFill("black");
|
||||
|
||||
sketch.drawCircle(m,3);
|
||||
sketch.drawCircle(m2,3);
|
||||
sketch.drawCircle(m3,3);
|
||||
|
||||
var offset = {x:10, y:5};
|
||||
sketch.text("20%, or t = 0.2", {x: m.x + offset.x, y: m.y + offset.y});
|
||||
sketch.text("40%, or t = 0.4", {x:m2.x + offset.x, y:m2.y + offset.y});
|
||||
sketch.text("60%, or t = 0.6", {x:m3.x + offset.x, y:m3.y + offset.y});
|
||||
|
||||
sketch.text("Curve points generated this way", {x:5, y:15});
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user