1
0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-30 19:50:01 +02:00

error-only for http-server, better parameter parsing for sketch markup

This commit is contained in:
Pomax
2020-08-27 11:36:17 -07:00
parent 46f94282e1
commit b2314a4f87
47 changed files with 130 additions and 293 deletions

View File

@@ -1,14 +1,17 @@
let curve;
setup() {
this.curve = Bezier.defaultCubic(this);
setMovable(this.curve.points);
const type = this.parameters.type ?? `quadratic`;
curve = (type === `quadratic`) ? Bezier.defaultQuadratic(this) : Bezier.defaultCubic(this);
setMovable(curve.points);
}
draw() {
resetTransform();
clear();
this.curve.drawSkeleton();
this.curve.drawCurve();
this.curve.drawPoints();
curve.drawSkeleton();
curve.drawCurve();
curve.drawPoints();
translate(this.width/2, 0);
line(0,0,0,this.height);
@@ -16,7 +19,7 @@ draw() {
this.drawRTCurve(
this.rotatePoints(
this.translatePoints(
this.curve.points
curve.points
)
)
);
@@ -35,8 +38,9 @@ translatePoints(points) {
rotatePoints(points) {
// rotate so that last point is (...,0)
let dx = points[3].x;
let dy = points[3].y;
let degree = curve.points.length - 1;
let dx = points[degree].x;
let dy = points[degree].y;
let a = atan2(dy, dx);
return points.map(v => {
return {
@@ -47,6 +51,7 @@ rotatePoints(points) {
}
drawRTCurve(points) {
let degree = curve.points.length - 1;
let ncurve = new Bezier(this, points);
translate(60, this.height/2);
setStroke(`grey`);
@@ -55,5 +60,5 @@ drawRTCurve(points) {
ncurve.drawCurve();
setFill(`black`);
text(`(0,0)`, 5,15);
text(`(${points[3].x|0},0)`, points[3].x, -5, CENTER);
text(`(${points[degree].x|0},0)`, points[degree].x, -5, CENTER);
}

View File

@@ -40,5 +40,7 @@ If we drop all the zero-terms, this gives us:
We can see that our original curve definition has been simplified considerably. The following graphics illustrate the result of aligning our example curves to the x-axis, with the cubic case using the coordinates that were just used in the example formulae:
<graphics-element title="Aligning a quadratic curve" width="550" src="./quadratic.js"></graphics-element>
<graphics-element title="Aligning a cubic curve" width="550" src="./cubic.js"></graphics-element>
<div class="figure">
<graphics-element title="Aligning a quadratic curve" width="550" src="./aligning.js" data-type="quadratic"></graphics-element>
<graphics-element title="Aligning a cubic curve" width="550" src="./aligning.js" data-type="cubic"></graphics-element>
</div>

View File

@@ -1,59 +0,0 @@
setup() {
this.curve = Bezier.defaultQuadratic(this);
setMovable(this.curve.points);
}
draw() {
resetTransform();
clear();
this.curve.drawSkeleton();
this.curve.drawCurve();
this.curve.drawPoints();
translate(this.width/2, 0);
line(0,0,0,this.height);
this.drawRTCurve(
this.rotatePoints(
this.translatePoints(
this.curve.points
)
)
);
}
translatePoints(points) {
// translate to (0,0)
let m = points[0];
return points.map(v => {
return {
x: v.x - m.x,
y: v.y - m.y
}
});
}
rotatePoints(points) {
// rotate so that last point is (...,0)
let dx = points[2].x;
let dy = points[2].y;
let a = atan2(dy, dx);
return points.map(v => {
return {
x: v.x * cos(-a) - v.y * sin(-a),
y: v.x * sin(-a) + v.y * cos(-a)
};
});
}
drawRTCurve(points) {
let ncurve = new Bezier(this, points);
translate(10, this.height/2);
setStroke(`grey`);
line(0,-this.height,0,this.height);
line(-10,0,this.width,0);
ncurve.drawCurve();
setFill(`black`);
text(`(0,0)`, 5,15);
text(`(${points[2].x|0},0)`, points[2].x, 15, CENTER);
}