info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-09-09 08:00:41 +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

21
docs/chapters/boundingbox/quadratic.js → docs/chapters/boundingbox/bbox.js
View File

@@ -1,26 +1,33 @@
let curve;
setup() {
this.curve = Bezier.defaultQuadratic(this);
setMovable(this.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() {
clear();
const curve = this.curve;
curve.drawSkeleton();
curve.drawCurve();
curve.drawPoints();
noFill();
let minx = Number.MAX_SAFE_INTEGER,
miny = minx,
maxx = Number.MIN_SAFE_INTEGER,
maxy = maxx;
maxy = maxx,
extrema = curve.extrema();
noFill();
setStroke(`red`);
let extrema = curve.extrema();
[0, ...extrema.x, ...extrema.y, 1].forEach(t => {
let p = curve.get(t);
if (p.x < minx) minx = p.x;

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

@@ -10,7 +10,9 @@ If we have the extremities, and the start/end points, a simple for-loop that tes
Applying this approach to our previous root finding, we get the following [axis-aligned bounding boxes](https://en.wikipedia.org/wiki/Bounding_volume#Common_types) (with all curve extremity points shown on the curve):
<graphics-element title="Quadratic Bézier bounding box" src="./quadratic.js"></graphics-element>
<graphics-element title="Cubic Bézier bounding box" src="./cubic.js"></graphics-element>
<div class="figure">
<graphics-element title="Quadratic Bézier bounding box" src="./bbox.js" data-type="quadratic"></graphics-element>
<graphics-element title="Cubic Bézier bounding box" src="./bbox.js" data-type="cubic"></graphics-element>
</div>
We can construct even nicer boxes by aligning them along our curve, rather than along the x- and y-axis, but in order to do so we first need to look at how aligning works.

41
docs/chapters/boundingbox/cubic.js
View File

@@ -1,41 +0,0 @@
setup() {
const curve = this.curve = Bezier.defaultCubic(this);
curve.points[2].x = 210;
setMovable(curve.points);
}
draw() {
clear();
const curve = this.curve;
curve.drawSkeleton();
curve.drawCurve();
curve.drawPoints();
noFill();
let minx = Number.MAX_SAFE_INTEGER,
miny = minx,
maxx = Number.MIN_SAFE_INTEGER,
maxy = maxx;
setStroke(`red`);
let extrema = curve.extrema();
[0, ...extrema.x, ...extrema.y, 1].forEach(t => {
let p = curve.get(t);
if (p.x < minx) minx = p.x;
if (p.x > maxx) maxx = p.x;
if (p.y < miny) miny = p.y;
if (p.y > maxy) maxy = p.y;
if (t > 0 && t< 1) circle(p.x, p.y, 3);
});
setStroke(`#0F0`);
rect(minx, miny, maxx - minx, maxy - miny);
}
onMouseMove() {
redraw();
}