mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-08-29 19:20:39 +02:00
figured out how to reuse sketches with data-attribute parameters
This commit is contained in:
@@ -1,14 +1,20 @@
|
||||
let curve;
|
||||
|
||||
setup() {
|
||||
const curve = this.curve = Bezier.defaultCubic(this);
|
||||
curve.points[2].x = 210;
|
||||
setMovable(curve.points);
|
||||
let type = getParameter(`type`, `quadratic`);
|
||||
if (type === `quadratic`) {
|
||||
curve = Bezier.defaultQuadratic(this);
|
||||
} else {
|
||||
curve = Bezier.defaultCubic(this);
|
||||
curve.points[2].x = 210;
|
||||
}
|
||||
setMovable(curve.points);
|
||||
}
|
||||
|
||||
draw() {
|
||||
resetTransform();
|
||||
clear();
|
||||
const dim = this.height;
|
||||
const curve = this.curve;
|
||||
curve.drawSkeleton();
|
||||
curve.drawCurve();
|
||||
curve.drawPoints();
|
||||
@@ -21,8 +27,9 @@ draw() {
|
||||
translate(40,20);
|
||||
drawAxes(`t`, 0, 1, `X`, 0, dim, dim, dim);
|
||||
|
||||
let pcount = curve.points.length;
|
||||
new Bezier(this, curve.points.map((p,i) => ({
|
||||
x: (i/3) * dim,
|
||||
x: (i/(pcount-1)) * dim,
|
||||
y: p.x
|
||||
}))).drawCurve();
|
||||
|
||||
@@ -36,11 +43,7 @@ draw() {
|
||||
drawAxes(`t`, 0,1, `Y`, 0, dim, dim, dim);
|
||||
|
||||
new Bezier(this, curve.points.map((p,i) => ({
|
||||
x: (i/3) * dim,
|
||||
x: (i/(pcount-1)) * dim,
|
||||
y: p.y
|
||||
}))).drawCurve();
|
||||
}
|
||||
|
||||
onMouseMove() {
|
||||
redraw();
|
||||
}
|
@@ -8,5 +8,6 @@ Let's look at how a parametric Bézier curve "splits up" into two normal functio
|
||||
|
||||
If you move points in a curve sideways, you should only see the middle graph change; likewise, moving points vertically should only show a change in the right graph.
|
||||
|
||||
<graphics-element title="Quadratic Bézier curve components" width="825" src="./quadratic.js"></graphics-element>
|
||||
<graphics-element title="Cubic Bézier curve components" width="825" src="./cubic.js"></graphics-element>
|
||||
<graphics-element title="Quadratic Bézier curve components" width="825" src="./components.js" data-type="quadratic"></graphics-element>
|
||||
|
||||
<graphics-element title="Cubic Bézier curve components" width="825" src="./components.js" data-type="cubic"></graphics-element>
|
||||
|
@@ -1,46 +0,0 @@
|
||||
setup() {
|
||||
const curve = this.curve = Bezier.defaultQuadratic(this);
|
||||
curve.points[2].x = 210;
|
||||
setMovable(curve.points);
|
||||
}
|
||||
|
||||
draw() {
|
||||
resetTransform();
|
||||
clear();
|
||||
const dim = this.height;
|
||||
const curve = this.curve;
|
||||
curve.drawSkeleton();
|
||||
curve.drawCurve();
|
||||
curve.drawPoints();
|
||||
|
||||
translate(dim, 0);
|
||||
setStroke(`black`);
|
||||
line(0,0,0,dim);
|
||||
|
||||
scale(0.8, 0.9);
|
||||
translate(40,20);
|
||||
drawAxes(`t`, 0, 1, `X`, 0, dim, dim, dim);
|
||||
|
||||
new Bezier(this, curve.points.map((p,i) => ({
|
||||
x: (i/2) * dim,
|
||||
y: p.x
|
||||
}))).drawCurve();
|
||||
|
||||
resetTransform();
|
||||
translate(2*dim, 0);
|
||||
setStroke(`black`);
|
||||
line(0,0,0,dim);
|
||||
|
||||
scale(0.8, 0.9);
|
||||
translate(40,20);
|
||||
drawAxes(`t`, 0,1, `Y`, 0, dim, dim, dim);
|
||||
|
||||
new Bezier(this, curve.points.map((p,i) => ({
|
||||
x: (i/2) * dim,
|
||||
y: p.y
|
||||
}))).drawCurve();
|
||||
}
|
||||
|
||||
onMouseMove() {
|
||||
redraw();
|
||||
}
|
Reference in New Issue
Block a user