1
0
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:
Pomax
2020-08-26 21:56:58 -07:00
93 changed files with 5805 additions and 24390 deletions

View File

@@ -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();
}

View File

@@ -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>

View File

@@ -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();
}