info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-13 20:24:16 +02:00
Code Issues Releases Wiki Activity

code comments

Browse Source
This commit is contained in:
Pomax
2020-09-19 22:51:19 -07:00
parent 4c0e71cd4a
commit d77d3649b6
27 changed files with 97 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/chapters/curveintersection/curve-curve.js
View File

@@ -56,7 +56,7 @@ draw() {
text(`${this.finals.length} intersections found.`, this.panelWidth/2, this.height - 10, CENTER); text(`${this.finals.length} intersections found.`, this.panelWidth/2, this.height - 10, CENTER);
} }
// panel 3: intersections // panel 3: the (already known) intersections
nextPanel(); nextPanel();
this.drawIntersections(); this.drawIntersections();
} }
@@ -73,7 +73,7 @@ drawIteration() {
const s1 = pair[0].split(0.5); const s1 = pair[0].split(0.5);
const s2 = pair[1].split(0.5); const s2 = pair[1].split(0.5);
// cross check // cross check to see if we need to keep any of the pairs
if (s1.left.overlaps(s2.left)) { this.pairs.push([ s1.left, s2.left ]); } if (s1.left.overlaps(s2.left)) { this.pairs.push([ s1.left, s2.left ]); }
if (s1.left.overlaps(s2.right)) { this.pairs.push([ s1.left, s2.right ]); } if (s1.left.overlaps(s2.right)) { this.pairs.push([ s1.left, s2.right ]); }
if (s1.right.overlaps(s2.left)) { this.pairs.push([ s1.right, s2.left ]); } if (s1.right.overlaps(s2.left)) { this.pairs.push([ s1.right, s2.left ]); }
@@ -81,10 +81,12 @@ drawIteration() {
}); });
} }
// if we have no pairs left, the next button should not be clickable anymore.
if (!this.pairs.length && next) { if (!this.pairs.length && next) {
next.disabled = true; next.disabled = true;
} }
// draw any curves we have in our pairs list
this.pairs.forEach(pair => { this.pairs.forEach(pair => {
pair.forEach(b => { pair.forEach(b => {
let curve = new Bezier(this, b.points); let curve = new Bezier(this, b.points);
@@ -93,6 +95,7 @@ drawIteration() {
}) })
}); });
// and draw any "finals" as established intersections at this point.
setStroke(`red`); setStroke(`red`);
this.finals.forEach(pair => { this.finals.forEach(pair => {
let p = pair[0].get(0.5); let p = pair[0].get(0.5);

3
docs/chapters/intersections/curve-line.js
View File

@@ -23,12 +23,15 @@ draw() {
this.drawLine(...line); this.drawLine(...line);
// To find our intersections, we align the curve to our line,
// so that all we need to do now is find the roots for the curve.
const [p1, p2] = line; const [p1, p2] = line;
const aligned = utils.align(curve.points, {p1,p2}); const aligned = utils.align(curve.points, {p1,p2});
const nB = new Bezier(this, aligned); const nB = new Bezier(this, aligned);
const roots = utils.roots(nB.points); const roots = utils.roots(nB.points);
const coords = roots.map(t => curve.get(t)); const coords = roots.map(t => curve.get(t));
// done: any roots we find are intersections on our original curve.
if (roots.length) { if (roots.length) {
roots.forEach((t,i) => { roots.forEach((t,i) => {
var p = coords[i]; var p = coords[i];

18
docs/chapters/intersections/line-line.js
View File

@@ -1,11 +1,13 @@
let Point = Vector, points = []; let Point = Vector, points = [];
setup() { setup() {
points.push(new Point(50,50)); points = [
points.push(new Point(150,110)); new Point(50,50),
points.push(new Point(50,250)); new Point(150,110),
points.push(new Point(170,170)); new Point(50,250),
setMovable(points); new Point(170,170),
];
setMovable(points);
} }
draw() { draw() {
@@ -16,6 +18,9 @@ draw() {
this.drawLine(p1,p2); this.drawLine(p1,p2);
this.drawLine(p3,p4); this.drawLine(p3,p4);
// compute the line/line intesection: note that this does NOT
// mean the line *segments* intersect, just that the lines,
// which are infinitely long, intersect.
const p = this.lli( const p = this.lli(
p1.x, p1.y, p1.x, p1.y,
p2.x, p2.y, p2.x, p2.y,
@@ -23,6 +28,7 @@ draw() {
p4.x, p4.y p4.x, p4.y
); );
// if there is an intersection, is that point on both line *segments*?
if (p) { if (p) {
if (this.onLine(p, p1, p2) && this.onLine(p, p3, p4)) { if (this.onLine(p, p1, p2) && this.onLine(p, p3, p4)) {
setColor(`lime`); setColor(`lime`);
@@ -44,6 +50,7 @@ drawLine(p1, p2) {
circle(p2.x, p2.y, 2); circle(p2.x, p2.y, 2);
} }
// The line/line intersection code can be found all over the web.
lli(x1, y1, x2, y2, x3, y3, x4, y4) { lli(x1, y1, x2, y2, x3, y3, x4, y4) {
const nx = (x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4), const nx = (x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4),
ny = (x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4), ny = (x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4),
@@ -52,6 +59,7 @@ lli(x1, y1, x2, y2, x3, y3, x4, y4) {
return { x: nx / d, y: ny / d }; return { x: nx / d, y: ny / d };
} }
// is point p on the line p1--p2?
onLine(p, p1, p2) { onLine(p, p1, p2) {
const mx = min(p1.x, p2.x), const mx = min(p1.x, p2.x),
my = min(p1.y, p2.y), my = min(p1.y, p2.y),

6
docs/chapters/offsetting/offsetting.js
View File

@@ -17,16 +17,19 @@ draw() {
curve.drawSkeleton(); curve.drawSkeleton();
// First, reduce our curves into a set of simple sections
var reduced = this.reduce(curve); var reduced = this.reduce(curve);
reduced.forEach(c => { reduced.forEach(c => {
setStroke(randomColor() ); setStroke(randomColor() );
this.drawCurve(c); this.drawCurve(c);
circle(c.points[0].x, c.points[0].y, 2); circle(c.points[0].x, c.points[0].y, 2);
}); });
var last = reduced.slice(-1)[0]; var last = reduced.slice(-1)[0];
let p = last.points[3] ?? last.points[2]; let p = last.points[3] ?? last.points[2];
circle(p.x, p.y, 3); circle(p.x, p.y, 3);
// then, we can offset each simple curve by projective scaling
setStroke(`#FF000050`); setStroke(`#FF000050`);
var offset = curve.offset(this.distance); var offset = curve.offset(this.distance);
offset.forEach(c => { offset.forEach(c => {
@@ -38,6 +41,7 @@ draw() {
p = last.points[3] ?? last.points[2]; p = last.points[3] ?? last.points[2];
circle(p.x, p.y, 3); circle(p.x, p.y, 3);
// on both sides, so we need to offset by -distance, too.
setStroke(`#0000FF50`); setStroke(`#0000FF50`);
var offset = curve.offset(-this.distance); var offset = curve.offset(-this.distance);
offset.forEach(c => { offset.forEach(c => {
@@ -116,3 +120,5 @@ reduce(curve) {
return pass2; return pass2;
} }
// TODO: duplicate the offset code from utils.js? It's *a lot* of code, though...

9
docs/chapters/polybezier/poly.js
View File

@@ -71,6 +71,9 @@ draw() {
movePointsQuadratic(i, link) { movePointsQuadratic(i, link) {
const l = points.length; const l = points.length;
// Logic for "conventional" moving of an on-curve point,
// moving its associated control points, too.
if (link === `conventional` && i%2 === 0) { if (link === `conventional` && i%2 === 0) {
let ppl = points[(l+i-3)%l]; let ppl = points[(l+i-3)%l];
let pl = points[(l+i-1)%l]; let pl = points[(l+i-1)%l];
@@ -91,6 +94,8 @@ movePointsQuadratic(i, link) {
} }
} }
// Moving a control points moves literally every
// other control points, too.
if (i%2 === 1) { if (i%2 === 1) {
let c1 = points[(l+i-2)%l]; let c1 = points[(l+i-2)%l];
let p1 = points[(l+i-1)%l]; let p1 = points[(l+i-1)%l];
@@ -127,6 +132,9 @@ movePointsQuadratic(i, link) {
movePointsCubic(i, link) { movePointsCubic(i, link) {
const l = points.length; const l = points.length;
// Logic for "conventional" moving of an on-curve point,
// moving its associated control points, too.
if (link === `conventional` && i%3 === 0) { if (link === `conventional` && i%3 === 0) {
let left = points[(l+i-1)%l]; let left = points[(l+i-1)%l];
left.x += this.cursor.diff.x; left.x += this.cursor.diff.x;
@@ -137,6 +145,7 @@ movePointsCubic(i, link) {
right.y += this.cursor.diff.y; right.y += this.cursor.diff.y;
} }
// Moving a control points moves the control "across its on-curve point".
if (i%3 > 0) { if (i%3 > 0) {
let c, p; let c, p;
if (i%3 === 1) { if (i%3 === 1) {

8
docs/chapters/tracing/distance-function.js
View File

@@ -28,11 +28,15 @@ draw() {
plotDistanceFunction(w, h, len) { plotDistanceFunction(w, h, len) {
noFill(); noFill();
// There is no way we're capturing the distance function as a nice
// easy function, so instead we're going to do the next best thing:
// sample the curve at a number of points, and then construct the
// function plot as we walk from one sample to the next.
let LUT = curve.getLUT(this.steps * 10); let LUT = curve.getLUT(this.steps * 10);
let d = 0;
start(); start();
vertex(0,0); vertex(0,0);
for(let i=1, e=LUT.length, p1, p2; i<e; i++) { for(let i=1, e=LUT.length, p1, p2, d=0; i<e; i++) {
p1 = LUT[i-1]; p1 = LUT[i-1];
p2 = LUT[i]; p2 = LUT[i];
d += dist(p1.x, p1.y, p2.x, p2.y); d += dist(p1.x, p1.y, p2.x, p2.y);

3
docs/chapters/tracing/tracing.js
View File

@@ -23,9 +23,12 @@ draw() {
scale(0.85); scale(0.85);
translate(30,30); translate(30,30);
// This first part is the same as the previous graphic
setFill(`black`); setFill(`black`);
drawAxes("t", 0, 1, "d", 0, len|0, w, h); drawAxes("t", 0, 1, "d", 0, len|0, w, h);
let LUT = this.plotDistanceFunction(w, h, len); let LUT = this.plotDistanceFunction(w, h, len);
// but this part is new.
this.drawPlotIntervals(w, h, LUT); this.drawPlotIntervals(w, h, LUT);
resetTransform(); resetTransform();

0
docs/images/chapters/curveintersection/e1f4f4dba7a338d342559bcfb0ea8e02.png → docs/images/chapters/curveintersection/b155682162a5b6da6d40c7b531164a7e.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

0
docs/images/chapters/intersections/4a762fb56468c342c72756a76d134f05.png → docs/images/chapters/intersections/7196d3dec75d53f5df9d9c832ac3c493.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

0
docs/images/chapters/intersections/7003a384ec371217af2b225ae65872e7.png → docs/images/chapters/intersections/9b70fb7b03f082882515e55c0a1eacff.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

0
docs/images/chapters/intersections/cab1799841eedd1dcd1cd81b6045f40f.png → docs/images/chapters/intersections/b3f61036d8dc9888a6a64a1171583dd1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

0
docs/images/chapters/offsetting/768094c3c47d3888cf81e7a1d20d2eab.png → docs/images/chapters/offsetting/03b8e0849e7c8ba64d8c076f47fe2ec7.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

0
docs/images/chapters/offsetting/1ad78f9f9d001278c491b0f2be5cc8ea.png → docs/images/chapters/offsetting/4c4738b6bf9f83eded12d680a29e337b.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

0
docs/images/chapters/polybezier/adc3b55c9956849ec86ecffcd8864d8a.png → docs/images/chapters/polybezier/1b94c6ada011bd8e50330e31a851a62e.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

0
docs/images/chapters/polybezier/044f65dd588b0210499add16ea50a23d.png → docs/images/chapters/polybezier/41522a397171423e8a465dc8c74f6e87.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.7 KiB

After

Width:  |  Height:  |  Size: 9.7 KiB

0
docs/images/chapters/polybezier/b7dfe772ac90d762f48772b691a9070f.png → docs/images/chapters/polybezier/6fb33629373d7a731b6ac3f5365cb9f0.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

0
docs/images/chapters/polybezier/17a6ffbfffaa9046ad165ca880d9030d.png → docs/images/chapters/polybezier/777f3814965c39ec3cdbb13eab0c4eeb.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.7 KiB

After

Width:  |  Height:  |  Size: 9.7 KiB

0
docs/images/chapters/polybezier/a1a3aabd22c0221beb38403a4532ea86.png → docs/images/chapters/polybezier/b3aebf7803f4430187c249a891095062.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.7 KiB

After

Width:  |  Height:  |  Size: 9.7 KiB

0
docs/images/chapters/polybezier/b492c486c25f17a95c690e235b8ad483.png → docs/images/chapters/polybezier/db04f805f42bdc9a1b7ec4d6b401d853.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.7 KiB

After

Width:  |  Height:  |  Size: 9.7 KiB

0
docs/images/chapters/polybezier/b810f02639a79cf7f8ae416d7185614d.png → docs/images/chapters/polybezier/f6c55cbc66333b6630939f67fc20e086.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

0
docs/images/chapters/polybezier/babb27083b805c7c77bb93cfecbefb2b.png → docs/images/chapters/polybezier/fe41b628f46f7035d151a8210d30111f.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

0
docs/images/chapters/tracing/09cfa54ec3709d54efdce78832e42367.png → docs/images/chapters/tracing/1cd7304fb8d044835bfbc305ca5e5d10.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

0
docs/images/chapters/tracing/52f815cefe99dabc47ca83d0b97b61fc.png → docs/images/chapters/tracing/d6239520389637a3c42e76ee44d86c41.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

34
docs/index.html
View File

@@ -31,7 +31,7 @@
<meta property="og:locale" content="en-GB" /> <meta property="og:locale" content="en-GB" />
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" /> <meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
<meta property="og:updated_time" content="2020-09-20T01:33:33+00:00" /> <meta property="og:updated_time" content="2020-09-20T05:43:12+00:00" />
<meta property="og:author" content="Mike 'Pomax' Kamermans" /> <meta property="og:author" content="Mike 'Pomax' Kamermans" />
<meta property="og:section" content="Bézier Curves" /> <meta property="og:section" content="Bézier Curves" />
<meta property="og:tag" content="Bézier Curves" /> <meta property="og:tag" content="Bézier Curves" />
@@ -3439,7 +3439,7 @@ y = curve.get(t).y</code></pre>
<graphics-element title="The t-for-distance function" width="550" height="275" src="./chapters/tracing/distance-function.js"> <graphics-element title="The t-for-distance function" width="550" height="275" src="./chapters/tracing/distance-function.js">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="550px" height="275px" src="images\chapters\tracing\52f815cefe99dabc47ca83d0b97b61fc.png" loading="lazy" /> <img width="550px" height="275px" src="images\chapters\tracing\d6239520389637a3c42e76ee44d86c41.png" loading="lazy" />
<label></label> </fallback-image <label></label> </fallback-image
></graphics-element> ></graphics-element>
@@ -3458,7 +3458,7 @@ y = curve.get(t).y</code></pre>
<graphics-element title="Fixed-interval coloring a curve" width="825" height="275" src="./chapters/tracing/tracing.js"> <graphics-element title="Fixed-interval coloring a curve" width="825" height="275" src="./chapters/tracing/tracing.js">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="images\chapters\tracing\09cfa54ec3709d54efdce78832e42367.png" loading="lazy" /> <img width="825px" height="275px" src="images\chapters\tracing\1cd7304fb8d044835bfbc305ca5e5d10.png" loading="lazy" />
<label></label> <label></label>
</fallback-image> </fallback-image>
<input type="range" min="2" max="24" step="1" value="8" class="slide-control" /> <input type="range" min="2" max="24" step="1" value="8" class="slide-control" />
@@ -3508,7 +3508,7 @@ y = curve.get(t).y</code></pre>
<graphics-element title="Line/line intersections" width="275" height="275" src="./chapters/intersections/line-line.js"> <graphics-element title="Line/line intersections" width="275" height="275" src="./chapters/intersections/line-line.js">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\intersections\cab1799841eedd1dcd1cd81b6045f40f.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\intersections\b3f61036d8dc9888a6a64a1171583dd1.png" loading="lazy" />
<label>Line/line intersections</label> <label>Line/line intersections</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -3557,7 +3557,7 @@ lli = function(line1, line2):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\intersections\7003a384ec371217af2b225ae65872e7.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\intersections\9b70fb7b03f082882515e55c0a1eacff.png" loading="lazy" />
<label>Quadratic curve/line intersections</label> <label>Quadratic curve/line intersections</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -3570,7 +3570,7 @@ lli = function(line1, line2):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\intersections\4a762fb56468c342c72756a76d134f05.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\intersections\7196d3dec75d53f5df9d9c832ac3c493.png" loading="lazy" />
<label>Cubic curve/line intersections</label> <label>Cubic curve/line intersections</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -3638,7 +3638,7 @@ lli = function(line1, line2):
<graphics-element title="Curve/curve intersections" width="825" height="275" src="./chapters/curveintersection/curve-curve.js"> <graphics-element title="Curve/curve intersections" width="825" height="275" src="./chapters/curveintersection/curve-curve.js">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="images\chapters\curveintersection\e1f4f4dba7a338d342559bcfb0ea8e02.png" loading="lazy" /> <img width="825px" height="275px" src="images\chapters\curveintersection\b155682162a5b6da6d40c7b531164a7e.png" loading="lazy" />
<label></label> <label></label>
</fallback-image> </fallback-image>
<button class="next">Advance one step</button> <button class="next">Advance one step</button>
@@ -4796,7 +4796,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\044f65dd588b0210499add16ea50a23d.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\41522a397171423e8a465dc8c74f6e87.png" loading="lazy" />
<label>Unlinked quadratic poly-Bézier</label> <label>Unlinked quadratic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4810,7 +4810,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\babb27083b805c7c77bb93cfecbefb2b.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\6fb33629373d7a731b6ac3f5365cb9f0.png" loading="lazy" />
<label>Unlinked cubic poly-Bézier</label> <label>Unlinked cubic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4842,7 +4842,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\b492c486c25f17a95c690e235b8ad483.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\db04f805f42bdc9a1b7ec4d6b401d853.png" loading="lazy" />
<label>Connected quadratic poly-Bézier</label> <label>Connected quadratic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4856,7 +4856,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\adc3b55c9956849ec86ecffcd8864d8a.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\fe41b628f46f7035d151a8210d30111f.png" loading="lazy" />
<label>Connected cubic poly-Bézier</label> <label>Connected cubic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4885,7 +4885,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\17a6ffbfffaa9046ad165ca880d9030d.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\777f3814965c39ec3cdbb13eab0c4eeb.png" loading="lazy" />
<label>Angularly connected quadratic poly-Bézier</label> <label>Angularly connected quadratic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4899,7 +4899,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\b7dfe772ac90d762f48772b691a9070f.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\f6c55cbc66333b6630939f67fc20e086.png" loading="lazy" />
<label>Angularly connected cubic poly-Bézier</label> <label>Angularly connected cubic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4923,7 +4923,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\a1a3aabd22c0221beb38403a4532ea86.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\b3aebf7803f4430187c249a891095062.png" loading="lazy" />
<label>Standard connected quadratic poly-Bézier</label> <label>Standard connected quadratic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4937,7 +4937,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\b810f02639a79cf7f8ae416d7185614d.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\1b94c6ada011bd8e50330e31a851a62e.png" loading="lazy" />
<label>Standard connected cubic poly-Bézier</label> <label>Standard connected cubic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -5095,7 +5095,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\offsetting\768094c3c47d3888cf81e7a1d20d2eab.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\offsetting\03b8e0849e7c8ba64d8c076f47fe2ec7.png" loading="lazy" />
<label>Offsetting a quadratic Bézier curve</label> <label>Offsetting a quadratic Bézier curve</label>
</fallback-image> </fallback-image>
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" /> <input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
@@ -5110,7 +5110,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\offsetting\1ad78f9f9d001278c491b0f2be5cc8ea.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\offsetting\4c4738b6bf9f83eded12d680a29e337b.png" loading="lazy" />
<label>Offsetting a cubic Bézier curve</label> <label>Offsetting a cubic Bézier curve</label>
</fallback-image> </fallback-image>
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" /> <input type="range" min="5" max="50" step="1" value="20" class="slide-control" />

34
docs/ja-JP/index.html
View File

@@ -33,7 +33,7 @@
<meta property="og:locale" content="ja-JP" /> <meta property="og:locale" content="ja-JP" />
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" /> <meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
<meta property="og:updated_time" content="2020-09-20T01:33:33+00:00" /> <meta property="og:updated_time" content="2020-09-20T05:43:12+00:00" />
<meta property="og:author" content="Mike 'Pomax' Kamermans" /> <meta property="og:author" content="Mike 'Pomax' Kamermans" />
<meta property="og:section" content="Bézier Curves" /> <meta property="og:section" content="Bézier Curves" />
<meta property="og:tag" content="Bézier Curves" /> <meta property="og:tag" content="Bézier Curves" />
@@ -3275,7 +3275,7 @@ y = curve.get(t).y</code></pre>
<graphics-element title="The t-for-distance function" width="550" height="275" src="./chapters/tracing/distance-function.js"> <graphics-element title="The t-for-distance function" width="550" height="275" src="./chapters/tracing/distance-function.js">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="550px" height="275px" src="images\chapters\tracing\52f815cefe99dabc47ca83d0b97b61fc.png" loading="lazy" /> <img width="550px" height="275px" src="images\chapters\tracing\d6239520389637a3c42e76ee44d86c41.png" loading="lazy" />
<label></label> </fallback-image <label></label> </fallback-image
></graphics-element> ></graphics-element>
@@ -3294,7 +3294,7 @@ y = curve.get(t).y</code></pre>
<graphics-element title="Fixed-interval coloring a curve" width="825" height="275" src="./chapters/tracing/tracing.js"> <graphics-element title="Fixed-interval coloring a curve" width="825" height="275" src="./chapters/tracing/tracing.js">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="images\chapters\tracing\09cfa54ec3709d54efdce78832e42367.png" loading="lazy" /> <img width="825px" height="275px" src="images\chapters\tracing\1cd7304fb8d044835bfbc305ca5e5d10.png" loading="lazy" />
<label></label> <label></label>
</fallback-image> </fallback-image>
<input type="range" min="2" max="24" step="1" value="8" class="slide-control" /> <input type="range" min="2" max="24" step="1" value="8" class="slide-control" />
@@ -3344,7 +3344,7 @@ y = curve.get(t).y</code></pre>
<graphics-element title="Line/line intersections" width="275" height="275" src="./chapters/intersections/line-line.js"> <graphics-element title="Line/line intersections" width="275" height="275" src="./chapters/intersections/line-line.js">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\intersections\cab1799841eedd1dcd1cd81b6045f40f.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\intersections\b3f61036d8dc9888a6a64a1171583dd1.png" loading="lazy" />
<label>Line/line intersections</label> <label>Line/line intersections</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -3393,7 +3393,7 @@ lli = function(line1, line2):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\intersections\7003a384ec371217af2b225ae65872e7.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\intersections\9b70fb7b03f082882515e55c0a1eacff.png" loading="lazy" />
<label>Quadratic curve/line intersections</label> <label>Quadratic curve/line intersections</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -3406,7 +3406,7 @@ lli = function(line1, line2):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\intersections\4a762fb56468c342c72756a76d134f05.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\intersections\7196d3dec75d53f5df9d9c832ac3c493.png" loading="lazy" />
<label>Cubic curve/line intersections</label> <label>Cubic curve/line intersections</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -3474,7 +3474,7 @@ lli = function(line1, line2):
<graphics-element title="Curve/curve intersections" width="825" height="275" src="./chapters/curveintersection/curve-curve.js"> <graphics-element title="Curve/curve intersections" width="825" height="275" src="./chapters/curveintersection/curve-curve.js">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="images\chapters\curveintersection\e1f4f4dba7a338d342559bcfb0ea8e02.png" loading="lazy" /> <img width="825px" height="275px" src="images\chapters\curveintersection\b155682162a5b6da6d40c7b531164a7e.png" loading="lazy" />
<label></label> <label></label>
</fallback-image> </fallback-image>
<button class="next">Advance one step</button> <button class="next">Advance one step</button>
@@ -4632,7 +4632,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\044f65dd588b0210499add16ea50a23d.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\41522a397171423e8a465dc8c74f6e87.png" loading="lazy" />
<label>Unlinked quadratic poly-Bézier</label> <label>Unlinked quadratic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4646,7 +4646,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\babb27083b805c7c77bb93cfecbefb2b.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\6fb33629373d7a731b6ac3f5365cb9f0.png" loading="lazy" />
<label>Unlinked cubic poly-Bézier</label> <label>Unlinked cubic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4678,7 +4678,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\b492c486c25f17a95c690e235b8ad483.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\db04f805f42bdc9a1b7ec4d6b401d853.png" loading="lazy" />
<label>Connected quadratic poly-Bézier</label> <label>Connected quadratic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4692,7 +4692,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\adc3b55c9956849ec86ecffcd8864d8a.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\fe41b628f46f7035d151a8210d30111f.png" loading="lazy" />
<label>Connected cubic poly-Bézier</label> <label>Connected cubic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4721,7 +4721,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\17a6ffbfffaa9046ad165ca880d9030d.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\777f3814965c39ec3cdbb13eab0c4eeb.png" loading="lazy" />
<label>Angularly connected quadratic poly-Bézier</label> <label>Angularly connected quadratic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4735,7 +4735,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\b7dfe772ac90d762f48772b691a9070f.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\f6c55cbc66333b6630939f67fc20e086.png" loading="lazy" />
<label>Angularly connected cubic poly-Bézier</label> <label>Angularly connected cubic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4759,7 +4759,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\a1a3aabd22c0221beb38403a4532ea86.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\b3aebf7803f4430187c249a891095062.png" loading="lazy" />
<label>Standard connected quadratic poly-Bézier</label> <label>Standard connected quadratic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4773,7 +4773,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\b810f02639a79cf7f8ae416d7185614d.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\1b94c6ada011bd8e50330e31a851a62e.png" loading="lazy" />
<label>Standard connected cubic poly-Bézier</label> <label>Standard connected cubic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4931,7 +4931,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\offsetting\768094c3c47d3888cf81e7a1d20d2eab.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\offsetting\03b8e0849e7c8ba64d8c076f47fe2ec7.png" loading="lazy" />
<label>Offsetting a quadratic Bézier curve</label> <label>Offsetting a quadratic Bézier curve</label>
</fallback-image> </fallback-image>
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" /> <input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
@@ -4946,7 +4946,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\offsetting\1ad78f9f9d001278c491b0f2be5cc8ea.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\offsetting\4c4738b6bf9f83eded12d680a29e337b.png" loading="lazy" />
<label>Offsetting a cubic Bézier curve</label> <label>Offsetting a cubic Bézier curve</label>
</fallback-image> </fallback-image>
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" /> <input type="range" min="5" max="50" step="1" value="20" class="slide-control" />

2
docs/news/2020-09-18.html
View File

@@ -27,7 +27,7 @@
<meta property="og:locale" content="en-GB" /> <meta property="og:locale" content="en-GB" />
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
<meta property="og:published_time" content="2020-09-18T12:00:00+00:00" /> <meta property="og:published_time" content="2020-09-18T12:00:00+00:00" />
<meta property="og:updated_time" content="2020-09-20T01:33:33+00:00" /> <meta property="og:updated_time" content="2020-09-20T05:43:12+00:00" />
<meta property="og:author" content="Mike 'Pomax' Kamermans" /> <meta property="og:author" content="Mike 'Pomax' Kamermans" />
<meta property="og:section" content="Bézier Curves" /> <meta property="og:section" content="Bézier Curves" />
<meta property="og:tag" content="Bézier Curves" /> <meta property="og:tag" content="Bézier Curves" />

34
docs/zh-CN/index.html
View File

@@ -33,7 +33,7 @@
<meta property="og:locale" content="zh-CN" /> <meta property="og:locale" content="zh-CN" />
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" /> <meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
<meta property="og:updated_time" content="2020-09-20T01:33:33+00:00" /> <meta property="og:updated_time" content="2020-09-20T05:43:12+00:00" />
<meta property="og:author" content="Mike 'Pomax' Kamermans" /> <meta property="og:author" content="Mike 'Pomax' Kamermans" />
<meta property="og:section" content="Bézier Curves" /> <meta property="og:section" content="Bézier Curves" />
<meta property="og:tag" content="Bézier Curves" /> <meta property="og:tag" content="Bézier Curves" />
@@ -3247,7 +3247,7 @@ y = curve.get(t).y</code></pre>
<graphics-element title="The t-for-distance function" width="550" height="275" src="./chapters/tracing/distance-function.js"> <graphics-element title="The t-for-distance function" width="550" height="275" src="./chapters/tracing/distance-function.js">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="550px" height="275px" src="images\chapters\tracing\52f815cefe99dabc47ca83d0b97b61fc.png" loading="lazy" /> <img width="550px" height="275px" src="images\chapters\tracing\d6239520389637a3c42e76ee44d86c41.png" loading="lazy" />
<label></label> </fallback-image <label></label> </fallback-image
></graphics-element> ></graphics-element>
@@ -3266,7 +3266,7 @@ y = curve.get(t).y</code></pre>
<graphics-element title="Fixed-interval coloring a curve" width="825" height="275" src="./chapters/tracing/tracing.js"> <graphics-element title="Fixed-interval coloring a curve" width="825" height="275" src="./chapters/tracing/tracing.js">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="images\chapters\tracing\09cfa54ec3709d54efdce78832e42367.png" loading="lazy" /> <img width="825px" height="275px" src="images\chapters\tracing\1cd7304fb8d044835bfbc305ca5e5d10.png" loading="lazy" />
<label></label> <label></label>
</fallback-image> </fallback-image>
<input type="range" min="2" max="24" step="1" value="8" class="slide-control" /> <input type="range" min="2" max="24" step="1" value="8" class="slide-control" />
@@ -3316,7 +3316,7 @@ y = curve.get(t).y</code></pre>
<graphics-element title="Line/line intersections" width="275" height="275" src="./chapters/intersections/line-line.js"> <graphics-element title="Line/line intersections" width="275" height="275" src="./chapters/intersections/line-line.js">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\intersections\cab1799841eedd1dcd1cd81b6045f40f.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\intersections\b3f61036d8dc9888a6a64a1171583dd1.png" loading="lazy" />
<label>Line/line intersections</label> <label>Line/line intersections</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -3365,7 +3365,7 @@ lli = function(line1, line2):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\intersections\7003a384ec371217af2b225ae65872e7.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\intersections\9b70fb7b03f082882515e55c0a1eacff.png" loading="lazy" />
<label>Quadratic curve/line intersections</label> <label>Quadratic curve/line intersections</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -3378,7 +3378,7 @@ lli = function(line1, line2):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\intersections\4a762fb56468c342c72756a76d134f05.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\intersections\7196d3dec75d53f5df9d9c832ac3c493.png" loading="lazy" />
<label>Cubic curve/line intersections</label> <label>Cubic curve/line intersections</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -3446,7 +3446,7 @@ lli = function(line1, line2):
<graphics-element title="Curve/curve intersections" width="825" height="275" src="./chapters/curveintersection/curve-curve.js"> <graphics-element title="Curve/curve intersections" width="825" height="275" src="./chapters/curveintersection/curve-curve.js">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="825px" height="275px" src="images\chapters\curveintersection\e1f4f4dba7a338d342559bcfb0ea8e02.png" loading="lazy" /> <img width="825px" height="275px" src="images\chapters\curveintersection\b155682162a5b6da6d40c7b531164a7e.png" loading="lazy" />
<label></label> <label></label>
</fallback-image> </fallback-image>
<button class="next">Advance one step</button> <button class="next">Advance one step</button>
@@ -4604,7 +4604,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\044f65dd588b0210499add16ea50a23d.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\41522a397171423e8a465dc8c74f6e87.png" loading="lazy" />
<label>Unlinked quadratic poly-Bézier</label> <label>Unlinked quadratic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4618,7 +4618,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\babb27083b805c7c77bb93cfecbefb2b.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\6fb33629373d7a731b6ac3f5365cb9f0.png" loading="lazy" />
<label>Unlinked cubic poly-Bézier</label> <label>Unlinked cubic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4650,7 +4650,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\b492c486c25f17a95c690e235b8ad483.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\db04f805f42bdc9a1b7ec4d6b401d853.png" loading="lazy" />
<label>Connected quadratic poly-Bézier</label> <label>Connected quadratic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4664,7 +4664,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\adc3b55c9956849ec86ecffcd8864d8a.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\fe41b628f46f7035d151a8210d30111f.png" loading="lazy" />
<label>Connected cubic poly-Bézier</label> <label>Connected cubic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4693,7 +4693,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\17a6ffbfffaa9046ad165ca880d9030d.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\777f3814965c39ec3cdbb13eab0c4eeb.png" loading="lazy" />
<label>Angularly connected quadratic poly-Bézier</label> <label>Angularly connected quadratic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4707,7 +4707,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\b7dfe772ac90d762f48772b691a9070f.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\f6c55cbc66333b6630939f67fc20e086.png" loading="lazy" />
<label>Angularly connected cubic poly-Bézier</label> <label>Angularly connected cubic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4731,7 +4731,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\a1a3aabd22c0221beb38403a4532ea86.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\b3aebf7803f4430187c249a891095062.png" loading="lazy" />
<label>Standard connected quadratic poly-Bézier</label> <label>Standard connected quadratic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4745,7 +4745,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\polybezier\b810f02639a79cf7f8ae416d7185614d.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\polybezier\1b94c6ada011bd8e50330e31a851a62e.png" loading="lazy" />
<label>Standard connected cubic poly-Bézier</label> <label>Standard connected cubic poly-Bézier</label>
</fallback-image></graphics-element </fallback-image></graphics-element
> >
@@ -4903,7 +4903,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\offsetting\768094c3c47d3888cf81e7a1d20d2eab.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\offsetting\03b8e0849e7c8ba64d8c076f47fe2ec7.png" loading="lazy" />
<label>Offsetting a quadratic Bézier curve</label> <label>Offsetting a quadratic Bézier curve</label>
</fallback-image> </fallback-image>
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" /> <input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
@@ -4918,7 +4918,7 @@ for p = 1 to points.length-3 (inclusive):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="images\chapters\offsetting\1ad78f9f9d001278c491b0f2be5cc8ea.png" loading="lazy" /> <img width="275px" height="275px" src="images\chapters\offsetting\4c4738b6bf9f83eded12d680a29e337b.png" loading="lazy" />
<label>Offsetting a cubic Bézier curve</label> <label>Offsetting a cubic Bézier curve</label>
</fallback-image> </fallback-image>
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" /> <input type="range" min="5" max="50" step="1" value="20" class="slide-control" />