info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-31 03:59:58 +02:00
Code Issues Releases Wiki Activity

figured out how to reuse sketches with data-attribute parameters

Browse Source
This commit is contained in:
Pomax
2020-08-26 21:56:58 -07:00
parent bf88ba4e4c eb997e6455
commit 94a98120ae
93 changed files with 5805 additions and 24390 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/chapters/tightbounds/content.en-GB.md
View File

@@ -4,7 +4,9 @@ With our knowledge of bounding boxes, and curve alignment, We can now form the "
We now have nice tight bounding boxes for our curves:
<graphics-element title="Aligning a quadratic curve" src="./quadratic.js"></graphics-element>
<graphics-element title="Aligning a cubic curve" src="./cubic.js"></graphics-element>
<div class="figure">
<graphics-element title="Aligning a quadratic curve" src="./tightbounds.js" data-type="quadratic"></graphics-element>
<graphics-element title="Aligning a cubic curve" src="./tightbounds.js" data-type="cubic"></graphics-element>
</div>
These are, strictly speaking, not necessarily the tightest possible bounding boxes. It is possible to compute the optimal bounding box by determining which spanning lines we need to effect a minimal box area, but because of the parametric nature of Bézier curves this is actually a rather costly operation, and the gain in bounding precision is often not worth it.

74
docs/chapters/tightbounds/quadratic.js
View File

@@ -1,74 +0,0 @@
setup() {
this.curve = Bezier.defaultQuadratic(this);
setMovable(this.curve.points);
}
draw() {
const curve = this.curve;
clear();
curve.drawSkeleton();
curve.drawCurve();
curve.drawPoints();
let translated = this.translatePoints(curve.points);
let rotated = this.rotatePoints(translated);
let rtcurve = new Bezier(this, rotated);
let extrema = rtcurve.extrema();
let minx = Number.MAX_SAFE_INTEGER,
miny = minx,
maxx = Number.MIN_SAFE_INTEGER,
maxy = maxx;
setStroke(`red`);
[0, ...extrema.x, ...extrema.y, 1].forEach(t => {
let p = curve.get(t);
let rtp = rtcurve.get(t);
if (rtp.x < minx) minx = rtp.x;
if (rtp.x > maxx) maxx = rtp.x;
if (rtp.y < miny) miny = rtp.y;
if (rtp.y > maxy) maxy = rtp.y;
if (t > 0 && t< 1) circle(p.x, p.y, 3);
});
noFill();
setStroke(`#0F0`);
let tx = curve.points[0].x;
let ty = curve.points[0].y;
let a = rotated[0].a;
start();
vertex(tx + minx * cos(a) - miny * sin(a), ty + minx * sin(a) + miny * cos(a));
vertex(tx + maxx * cos(a) - miny * sin(a), ty + maxx * sin(a) + miny * cos(a));
vertex(tx + maxx * cos(a) - maxy * sin(a), ty + maxx * sin(a) + maxy * cos(a));
vertex(tx + minx * cos(a) - maxy * sin(a), ty + minx * sin(a) + maxy * cos(a));
end(true);
}
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 {
a: a,
x: v.x * cos(-a) - v.y * sin(-a),
y: v.x * sin(-a) + v.y * cos(-a)
};
});
}

13
docs/chapters/tightbounds/cubic.js → docs/chapters/tightbounds/tightbounds.js
View File

@@ -1,12 +1,12 @@
let curve;
setup() {
const curve = this.curve = Bezier.defaultCubic(this);
curve.points[2].x = 210;
const type = this.type = getParameter(`type`, `quadratic`);
curve = (type === `quadratic`) ? Bezier.defaultQuadratic(this) : Bezier.defaultCubic(this);
setMovable(curve.points);
}
draw() {
const curve = this.curve;
clear();
curve.drawSkeleton();
curve.drawCurve();
@@ -62,8 +62,9 @@ translatePoints(points) {
rotatePoints(points) {
// rotate so that last point is (...,0)
let dx = points[3].x;
let dy = points[3].y;
let last = this.type === `quadratic` ? 2 : 3;
let dx = points[last].x;
let dy = points[last].y;
let a = atan2(dy, dx);
return points.map(v => {
return {