mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-08-30 03:30:34 +02:00
making things a bit more uniform
This commit is contained in:
Pomax
@@ -1,36 +0,0 @@
|
||||
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.text("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);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -5,15 +5,60 @@ var SectionHeader = require("../../SectionHeader.jsx");
|
||||
var Explanation = React.createClass({
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
title: "The basics of Bézier curves"
|
||||
title: "The mathematics of Bézier curves"
|
||||
};
|
||||
},
|
||||
|
||||
circle: require("./circle"),
|
||||
values: {
|
||||
"38": 0.1, // up arrow
|
||||
"40": -0.1, // down arrow
|
||||
},
|
||||
|
||||
componentWillMount: function() {
|
||||
this.setup = this.circle.setup.bind(this);
|
||||
this.draw = this.circle.draw.bind(this);
|
||||
onKeyDown: function(e, api) {
|
||||
var v = this.values[e.keyCode];
|
||||
if(v) {
|
||||
e.preventDefault();
|
||||
api.step += v;
|
||||
if (api.step < 0.1) {
|
||||
api.step = 0.1;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
setup: function(api) {
|
||||
api.step = 5;
|
||||
},
|
||||
|
||||
draw: function(api, curve) {
|
||||
var dim = api.getPanelWidth(),
|
||||
w = dim,
|
||||
h = dim,
|
||||
w2 = w/2,
|
||||
h2 = h/2,
|
||||
w4 = w2/2,
|
||||
h4 = h2/2;
|
||||
|
||||
api.reset();
|
||||
api.setColor("black");
|
||||
api.drawLine({x:0,y:h2},{x:w,y:h2});
|
||||
api.drawLine({x:w2,y:0},{x:w2,y:h});
|
||||
|
||||
var offset = {x:w2, y:h2};
|
||||
for(var t=0, p; t<=api.step; t+=0.1) {
|
||||
p = {
|
||||
x: w4 * Math.cos(t),
|
||||
y: h4 * Math.sin(t)
|
||||
};
|
||||
api.drawPoint(p, offset);
|
||||
var modulo = t % 1;
|
||||
if(modulo<0.05 || modulo> 0.95) {
|
||||
api.text("t = " + Math.round(t), {
|
||||
x: offset.x + 1.25 * w4 * Math.cos(t) - 10,
|
||||
y: offset.y + 1.25 * h4 * Math.sin(t) + 5
|
||||
});
|
||||
api.drawCircle(p, 2, offset);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
render: function() {
|
||||
@@ -78,9 +123,10 @@ var Explanation = React.createClass({
|
||||
which we can use as (<i>x</i>,<i>y</i>) coordinates in a graph. The above set of functions,
|
||||
for instance, generates points on a circle: We can range <i>t</i> from negative to positive
|
||||
infinity, and the resulting (<i>x</i>,<i>y</i>) coordinates will always lie on a circle with
|
||||
radius 1 around the origin (0,0). If we plot it for <i>t</i> from 0 to 5, we get this:</p>
|
||||
radius 1 around the origin (0,0). If we plot it for <i>t</i> from 0 to 5, we get this (use
|
||||
your up and down cursor keys to change the plot end value):</p>
|
||||
|
||||
<Graphic preset="empty" title="A (partial) circle: x=sin(t), y=cos(t)" setup={this.setup} draw={this.draw}/>
|
||||
<Graphic preset="empty" title="A (partial) circle: x=sin(t), y=cos(t)" static={true} setup={this.setup} draw={this.draw} onKeyDown={this.onKeyDown}/>
|
||||
|
||||
<p>Bézier curves are (one in many classes of) parametric functions, and are characterised
|
||||
by using the same base function for all its dimensions. Unlike the above example,
|
||||
|
||||
@@ -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