diff --git a/docs/chapters/aligning/cubic.js b/docs/chapters/aligning/aligning.js similarity index 65% rename from docs/chapters/aligning/cubic.js rename to docs/chapters/aligning/aligning.js index 006f6365..4cc0d4e4 100644 --- a/docs/chapters/aligning/cubic.js +++ b/docs/chapters/aligning/aligning.js @@ -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); } diff --git a/docs/chapters/aligning/content.en-GB.md b/docs/chapters/aligning/content.en-GB.md index 0282abb2..8c1ac60c 100644 --- a/docs/chapters/aligning/content.en-GB.md +++ b/docs/chapters/aligning/content.en-GB.md @@ -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: - - +
+ + +
diff --git a/docs/chapters/aligning/quadratic.js b/docs/chapters/aligning/quadratic.js deleted file mode 100644 index 63de9458..00000000 --- a/docs/chapters/aligning/quadratic.js +++ /dev/null @@ -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); -} diff --git a/docs/chapters/arclength/draw-slices.js b/docs/chapters/arclength/draw-slices.js index 4a157ea8..aec3ccb2 100644 --- a/docs/chapters/arclength/draw-slices.js +++ b/docs/chapters/arclength/draw-slices.js @@ -1,5 +1,5 @@ setup() { - this.steps = getParameter(`steps`, 10); + this.steps = this.parameters.steps ?? 10; } draw() { diff --git a/docs/chapters/arclengthapprox/approximate.js b/docs/chapters/arclengthapprox/approximate.js index 801131ff..0516f958 100644 --- a/docs/chapters/arclengthapprox/approximate.js +++ b/docs/chapters/arclengthapprox/approximate.js @@ -1,7 +1,7 @@ let curve; setup() { - let type = getParameter(`type`, `quadratic`); + let type = this.parameters.type ?? `quadratic`; curve = (type === `quadratic`) ? Bezier.defaultQuadratic(this) : Bezier.defaultCubic(this); setMovable(curve.points); setSlider(`.slide-control`, `steps`, type === `quadratic` ? 4 : 8); diff --git a/docs/chapters/boundingbox/bbox.js b/docs/chapters/boundingbox/bbox.js index 727aeac6..e47d084b 100644 --- a/docs/chapters/boundingbox/bbox.js +++ b/docs/chapters/boundingbox/bbox.js @@ -1,7 +1,7 @@ let curve; setup() { - let type = getParameter(`type`, `quadratic`); + let type = this.parameters.type ?? `quadratic`; if (type === `quadratic`) { curve = Bezier.defaultQuadratic(this); } else { diff --git a/docs/chapters/components/components.js b/docs/chapters/components/components.js index ce0d64f9..38fb5e48 100644 --- a/docs/chapters/components/components.js +++ b/docs/chapters/components/components.js @@ -1,7 +1,7 @@ let curve; setup() { - let type = getParameter(`type`, `quadratic`); + let type = this.parameters.type ?? `quadratic`; if (type === `quadratic`) { curve = Bezier.defaultQuadratic(this); } else { diff --git a/docs/chapters/control/lerp.js b/docs/chapters/control/lerp.js index 3152dcd4..64b69f91 100644 --- a/docs/chapters/control/lerp.js +++ b/docs/chapters/control/lerp.js @@ -2,7 +2,7 @@ setup() { const w = this.width, h = this.height; - const degree = this.getParameter(`degree`, 3); + const degree = this.parameters.degree ?? 3; if (degree === 3) { this.f = [ diff --git a/docs/chapters/extended/extended.js b/docs/chapters/extended/extended.js index 88676033..ab8118bd 100644 --- a/docs/chapters/extended/extended.js +++ b/docs/chapters/extended/extended.js @@ -1,7 +1,7 @@ let curve; setup() { - const type = this.getParameter(`type`, `quadratic`); + const type = this.parameters.type ?? `quadratic`; curve = (type === `quadratic`) ? Bezier.defaultQuadratic(this) : Bezier.defaultCubic(this); setMovable(curve.points); } diff --git a/docs/chapters/extremities/extremities.js b/docs/chapters/extremities/extremities.js index ce4dd17e..ab683fe1 100644 --- a/docs/chapters/extremities/extremities.js +++ b/docs/chapters/extremities/extremities.js @@ -1,7 +1,7 @@ let curve; setup() { - const type = this.getParameter(`type`, `quadratic`); + const type = this.parameters.type ?? `quadratic`; if (type === `quadratic`) { curve = Bezier.defaultQuadratic(this); } else { diff --git a/docs/chapters/flattening/flatten.js b/docs/chapters/flattening/flatten.js index db5ab602..66292fa2 100644 --- a/docs/chapters/flattening/flatten.js +++ b/docs/chapters/flattening/flatten.js @@ -1,7 +1,7 @@ let curve; setup() { - const type = getParameter(`type`, `quadratic`); + const type = this.parameters.type ?? `quadratic`; curve = (type === `quadratic`) ? Bezier.defaultQuadratic(this) : Bezier.defaultCubic(this); setMovable(curve.points); setSlider(`.slide-control`, `steps`, (type === `quadratic`) ? 4 : 8); diff --git a/docs/chapters/tightbounds/tightbounds.js b/docs/chapters/tightbounds/tightbounds.js index 6382a591..46496607 100644 --- a/docs/chapters/tightbounds/tightbounds.js +++ b/docs/chapters/tightbounds/tightbounds.js @@ -1,7 +1,7 @@ let curve; setup() { - const type = this.type = getParameter(`type`, `quadratic`); + const type = this.parameters.type ?? `quadratic`; curve = (type === `quadratic`) ? Bezier.defaultQuadratic(this) : Bezier.defaultCubic(this); setMovable(curve.points); } @@ -62,7 +62,7 @@ translatePoints(points) { rotatePoints(points) { // rotate so that last point is (...,0) - let last = this.type === `quadratic` ? 2 : 3; + let last = points.length - 1; let dx = points[last].x; let dy = points[last].y; let a = atan2(dy, dx); diff --git a/docs/images/chapters/aligning/2a6c6fb5527e3c00c683136a74075810.png b/docs/images/chapters/aligning/2a6c6fb5527e3c00c683136a74075810.png deleted file mode 100644 index 28ffec23..00000000 Binary files a/docs/images/chapters/aligning/2a6c6fb5527e3c00c683136a74075810.png and /dev/null differ diff --git a/docs/images/chapters/aligning/2bac71234aed2bca2686fdbce7dd78d8.png b/docs/images/chapters/aligning/2bac71234aed2bca2686fdbce7dd78d8.png new file mode 100644 index 00000000..bb829d24 Binary files /dev/null and b/docs/images/chapters/aligning/2bac71234aed2bca2686fdbce7dd78d8.png differ diff --git a/docs/images/chapters/aligning/117193f78662930b6cfb204d40263796.png b/docs/images/chapters/aligning/ed3e2ad3961fbf9e9e5bc951f1d79302.png similarity index 100% rename from docs/images/chapters/aligning/117193f78662930b6cfb204d40263796.png rename to docs/images/chapters/aligning/ed3e2ad3961fbf9e9e5bc951f1d79302.png diff --git a/docs/images/chapters/arclength/0d7138b99f5986332a050a8479eefa57.png b/docs/images/chapters/arclength/0d7138b99f5986332a050a8479eefa57.png new file mode 100644 index 00000000..d56ea5a1 Binary files /dev/null and b/docs/images/chapters/arclength/0d7138b99f5986332a050a8479eefa57.png differ diff --git a/docs/images/chapters/arclength/0e2627e80066b53966050764aec146ac.png b/docs/images/chapters/arclength/0e2627e80066b53966050764aec146ac.png deleted file mode 100644 index 256c5a83..00000000 Binary files a/docs/images/chapters/arclength/0e2627e80066b53966050764aec146ac.png and /dev/null differ diff --git a/docs/images/chapters/arclength/457d2450a6a7f786328e2282d6613cf1.png b/docs/images/chapters/arclength/457d2450a6a7f786328e2282d6613cf1.png deleted file mode 100644 index ef63bc85..00000000 Binary files a/docs/images/chapters/arclength/457d2450a6a7f786328e2282d6613cf1.png and /dev/null differ diff --git a/docs/images/chapters/arclength/475547c773a7279dc037c9ced2c8c6dc.png b/docs/images/chapters/arclength/475547c773a7279dc037c9ced2c8c6dc.png new file mode 100644 index 00000000..dde58d80 Binary files /dev/null and b/docs/images/chapters/arclength/475547c773a7279dc037c9ced2c8c6dc.png differ diff --git a/docs/images/chapters/arclength/580c33f599b70de44b17c546098508aa.png b/docs/images/chapters/arclength/580c33f599b70de44b17c546098508aa.png new file mode 100644 index 00000000..7ecf5fa7 Binary files /dev/null and b/docs/images/chapters/arclength/580c33f599b70de44b17c546098508aa.png differ diff --git a/docs/images/chapters/arclength/72c05323cfc7d739acad1cd969be7b72.png b/docs/images/chapters/arclength/72c05323cfc7d739acad1cd969be7b72.png deleted file mode 100644 index 5a779189..00000000 Binary files a/docs/images/chapters/arclength/72c05323cfc7d739acad1cd969be7b72.png and /dev/null differ diff --git a/docs/images/chapters/arclengthapprox/e617047054199de6b96eb910db73b3ee.png b/docs/images/chapters/arclengthapprox/a040f6b7c7c33ada25ecfd1060726545.png similarity index 100% rename from docs/images/chapters/arclengthapprox/e617047054199de6b96eb910db73b3ee.png rename to docs/images/chapters/arclengthapprox/a040f6b7c7c33ada25ecfd1060726545.png diff --git a/docs/images/chapters/arclengthapprox/2fefae0125551f8f8b899f14daf07960.png b/docs/images/chapters/arclengthapprox/c270144cc41e4ebc4b0b2331473530fa.png similarity index 100% rename from docs/images/chapters/arclengthapprox/2fefae0125551f8f8b899f14daf07960.png rename to docs/images/chapters/arclengthapprox/c270144cc41e4ebc4b0b2331473530fa.png diff --git a/docs/images/chapters/boundingbox/3e26118e0f37de916bb52f17850ccdc3.png b/docs/images/chapters/boundingbox/e2c621442e98e2cd20af7efe1cfb041f.png similarity index 100% rename from docs/images/chapters/boundingbox/3e26118e0f37de916bb52f17850ccdc3.png rename to docs/images/chapters/boundingbox/e2c621442e98e2cd20af7efe1cfb041f.png diff --git a/docs/images/chapters/boundingbox/797277014fb93e37fd47f8f2fcdb3b89.png b/docs/images/chapters/boundingbox/f8989a62ebec9d6f123291c146caab5b.png similarity index 100% rename from docs/images/chapters/boundingbox/797277014fb93e37fd47f8f2fcdb3b89.png rename to docs/images/chapters/boundingbox/f8989a62ebec9d6f123291c146caab5b.png diff --git a/docs/images/chapters/components/168ec97a7e9ba5793ad9d2e619f71cb3.png b/docs/images/chapters/components/35d69b33228ae64221385047177b67a5.png similarity index 100% rename from docs/images/chapters/components/168ec97a7e9ba5793ad9d2e619f71cb3.png rename to docs/images/chapters/components/35d69b33228ae64221385047177b67a5.png diff --git a/docs/images/chapters/components/c3df5265111b12dabee757a22b474d29.png b/docs/images/chapters/components/f7490a1c523d4dc8772b621b4a61fdd4.png similarity index 100% rename from docs/images/chapters/components/c3df5265111b12dabee757a22b474d29.png rename to docs/images/chapters/components/f7490a1c523d4dc8772b621b4a61fdd4.png diff --git a/docs/images/chapters/control/ee31748e196d3be41c675b05200a7f76.png b/docs/images/chapters/control/44242f6a6be718bea46292369d509520.png similarity index 100% rename from docs/images/chapters/control/ee31748e196d3be41c675b05200a7f76.png rename to docs/images/chapters/control/44242f6a6be718bea46292369d509520.png diff --git a/docs/images/chapters/control/75888dd88efe5e9c041fefd8b05975f3.png b/docs/images/chapters/control/62d7ef11f60acde82868424364a477e8.png similarity index 100% rename from docs/images/chapters/control/75888dd88efe5e9c041fefd8b05975f3.png rename to docs/images/chapters/control/62d7ef11f60acde82868424364a477e8.png diff --git a/docs/images/chapters/control/66333ae5bfbcb51d424e5670ab53262e.png b/docs/images/chapters/control/9331dd83c72b233190eaca1cfcc169db.png similarity index 100% rename from docs/images/chapters/control/66333ae5bfbcb51d424e5670ab53262e.png rename to docs/images/chapters/control/9331dd83c72b233190eaca1cfcc169db.png diff --git a/docs/images/chapters/extended/c6ac50057ea7e251a5bf11737878a23a.png b/docs/images/chapters/extended/391a61142c56b79260680aefb08cd9c4.png similarity index 100% rename from docs/images/chapters/extended/c6ac50057ea7e251a5bf11737878a23a.png rename to docs/images/chapters/extended/391a61142c56b79260680aefb08cd9c4.png diff --git a/docs/images/chapters/extended/97a1ceb81980368d08d8d2f2e8719936.png b/docs/images/chapters/extended/baeceec6e1587794b8b275a90d5d85e9.png similarity index 100% rename from docs/images/chapters/extended/97a1ceb81980368d08d8d2f2e8719936.png rename to docs/images/chapters/extended/baeceec6e1587794b8b275a90d5d85e9.png diff --git a/docs/images/chapters/extremities/308bb36c8390ecfca6eed0cccfeec73b.png b/docs/images/chapters/extremities/05ff4df8b73ba25dffeb42f768e0e9c4.png similarity index 100% rename from docs/images/chapters/extremities/308bb36c8390ecfca6eed0cccfeec73b.png rename to docs/images/chapters/extremities/05ff4df8b73ba25dffeb42f768e0e9c4.png diff --git a/docs/images/chapters/extremities/2be56b901cc023ece52f001d770893f8.png b/docs/images/chapters/extremities/6d246f1c53e40bd5156ef50c4046db51.png similarity index 100% rename from docs/images/chapters/extremities/2be56b901cc023ece52f001d770893f8.png rename to docs/images/chapters/extremities/6d246f1c53e40bd5156ef50c4046db51.png diff --git a/docs/images/chapters/flattening/a6cd214a7f8725430d2bb99a9da385f2.png b/docs/images/chapters/flattening/3deec756c96e53127cd1d615c61043ae.png similarity index 100% rename from docs/images/chapters/flattening/a6cd214a7f8725430d2bb99a9da385f2.png rename to docs/images/chapters/flattening/3deec756c96e53127cd1d615c61043ae.png diff --git a/docs/images/chapters/flattening/a77519c299fce1ce95c84a1e5f7c0478.png b/docs/images/chapters/flattening/e2bb7113d5cda2e3fd29bbc54fbe8841.png similarity index 100% rename from docs/images/chapters/flattening/a77519c299fce1ce95c84a1e5f7c0478.png rename to docs/images/chapters/flattening/e2bb7113d5cda2e3fd29bbc54fbe8841.png diff --git a/docs/images/chapters/reordering/387f931043aabd6c467985c568482636.png b/docs/images/chapters/reordering/387f931043aabd6c467985c568482636.png index 644d0b42..bb2201ff 100644 Binary files a/docs/images/chapters/reordering/387f931043aabd6c467985c568482636.png and b/docs/images/chapters/reordering/387f931043aabd6c467985c568482636.png differ diff --git a/docs/images/chapters/tightbounds/e087b9e9822e65dcc4ff7673db10e91c.png b/docs/images/chapters/tightbounds/419415bee6ffd7598c035c42de09a94f.png similarity index 100% rename from docs/images/chapters/tightbounds/e087b9e9822e65dcc4ff7673db10e91c.png rename to docs/images/chapters/tightbounds/419415bee6ffd7598c035c42de09a94f.png diff --git a/docs/images/chapters/tightbounds/ed626d23d5f258a3f599e881b5f12aad.png b/docs/images/chapters/tightbounds/ccc77ae1f57d7dd7ce4d5397fe1b140b.png similarity index 100% rename from docs/images/chapters/tightbounds/ed626d23d5f258a3f599e881b5f12aad.png rename to docs/images/chapters/tightbounds/ccc77ae1f57d7dd7ce4d5397fe1b140b.png diff --git a/docs/index.html b/docs/index.html index 250561a6..884ebdaa 100644 --- a/docs/index.html +++ b/docs/index.html @@ -328,7 +328,7 @@ function Bezier(3,t):
- + Scripts are disabled. Showing fallback image. @@ -336,7 +336,7 @@ function Bezier(3,t): - + Scripts are disabled. Showing fallback image. @@ -344,7 +344,7 @@ function Bezier(3,t): - + Scripts are disabled. Showing fallback image. @@ -462,12 +462,12 @@ function RationalBezier(3,t,w[],r[]):
- + Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image.
@@ -560,7 +560,7 @@ function RationalBezier(3,t,w[],r[]):
- + Scripts are disabled. Showing fallback image. @@ -568,7 +568,7 @@ function RationalBezier(3,t,w[],r[]): - + Scripts are disabled. Showing fallback image. @@ -928,13 +928,13 @@ treated as a sequence of three (elementary) shear operations. When we combine th

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.

- + Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. @@ -1070,14 +1070,14 @@ function getCubicRoots(pa, pb, pc, pd) {

So now that we know how to do root finding, we can determine the first and second derivative roots for our Bézier curves, and show those roots overlaid on the previous graphics. For the quadratic curve, that means just the first derivative, in red:

- + Scripts are disabled. Showing fallback image.

And for cubic curves, that means first and second derivatives, in red and purple respectively:

- + Scripts are disabled. Showing fallback image. @@ -1095,12 +1095,12 @@ function getCubicRoots(pa, pb, pc, pd) {
- + Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image.
@@ -1120,16 +1120,18 @@ function getCubicRoots(pa, pb, pc, pd) {

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:

- +
+ - + Scripts are disabled. Showing fallback image. - + - + Scripts are disabled. Showing fallback image. +
@@ -1139,12 +1141,12 @@ function getCubicRoots(pa, pb, pc, pd) {
- + Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image.
@@ -1322,17 +1324,17 @@ y = curve.get(t).y
- + Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image.
@@ -1368,7 +1370,7 @@ y = curve.get(t).y - + Scripts are disabled. Showing fallback image. @@ -1376,7 +1378,7 @@ y = curve.get(t).y - + Scripts are disabled. Showing fallback image. diff --git a/docs/ja-JP/index.html b/docs/ja-JP/index.html index 243a4323..73192be4 100644 --- a/docs/ja-JP/index.html +++ b/docs/ja-JP/index.html @@ -330,7 +330,7 @@ function Bezier(3,t):
- + Scripts are disabled. Showing fallback image. @@ -338,7 +338,7 @@ function Bezier(3,t): - + Scripts are disabled. Showing fallback image. @@ -346,7 +346,7 @@ function Bezier(3,t): - + Scripts are disabled. Showing fallback image. @@ -460,12 +460,12 @@ function RationalBezier(3,t,w[],r[]):
- + Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image.
@@ -557,7 +557,7 @@ function RationalBezier(3,t,w[],r[]):
- + Scripts are disabled. Showing fallback image. @@ -565,7 +565,7 @@ function RationalBezier(3,t,w[],r[]): - + Scripts are disabled. Showing fallback image. @@ -925,13 +925,13 @@ treated as a sequence of three (elementary) shear operations. When we combine th

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.

- + Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. @@ -1067,14 +1067,14 @@ function getCubicRoots(pa, pb, pc, pd) {

So now that we know how to do root finding, we can determine the first and second derivative roots for our Bézier curves, and show those roots overlaid on the previous graphics. For the quadratic curve, that means just the first derivative, in red:

- + Scripts are disabled. Showing fallback image.

And for cubic curves, that means first and second derivatives, in red and purple respectively:

- + Scripts are disabled. Showing fallback image. @@ -1092,12 +1092,12 @@ function getCubicRoots(pa, pb, pc, pd) {
- + Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image.
@@ -1117,16 +1117,18 @@ function getCubicRoots(pa, pb, pc, pd) {

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:

- +
+ - + Scripts are disabled. Showing fallback image. - + - + Scripts are disabled. Showing fallback image. +
@@ -1136,12 +1138,12 @@ function getCubicRoots(pa, pb, pc, pd) {
- + Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image.
@@ -1319,17 +1321,17 @@ y = curve.get(t).y
- + Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image.
@@ -1365,7 +1367,7 @@ y = curve.get(t).y - + Scripts are disabled. Showing fallback image. @@ -1373,7 +1375,7 @@ y = curve.get(t).y - + Scripts are disabled. Showing fallback image. diff --git a/docs/js/custom-element/api/base-api.js b/docs/js/custom-element/api/base-api.js index 4aa8d157..f400f1d0 100644 --- a/docs/js/custom-element/api/base-api.js +++ b/docs/js/custom-element/api/base-api.js @@ -1,5 +1,3 @@ -import { hatch } from "./util/hatchery.js"; - /** * The base API class, responsible for such things as setting up canvas event * handling, method accumulation, custom element binding, etc. etc. @@ -65,7 +63,17 @@ class BaseAPI { this.dataset = {}; } } - this.HATCHING = hatch(canvasBuildFunction); + this.parameters = Object.fromEntries( + Object.entries(this.dataset) + .map((pair) => { + let v = pair[1]; + if (v === `null` || v === `undefined`) return []; + let d = parseFloat(v); + // evaluate "string is number" using == rather than === + return [pair[0], v == d ? d : v]; + }) + .filter((v) => v.length) + ); this.addListeners(); this.setSize(width, height); this.currentPoint = false; diff --git a/docs/js/custom-element/api/graphics-api.js b/docs/js/custom-element/api/graphics-api.js index 8c89a678..f55a0930 100644 --- a/docs/js/custom-element/api/graphics-api.js +++ b/docs/js/custom-element/api/graphics-api.js @@ -138,19 +138,6 @@ class GraphicsAPI extends BaseAPI { points.forEach((p) => this.movable.push(p)); } - /** - * Get a parameter specified via data-attribute - */ - getParameter(name, fallback) { - let val = this.dataset[name]; - if (val) { - let asFloat = parseFloat(val); - if (val == asFloat) return asFloat; - return val; - } - return fallback; - } - /** * Set up a slider to control a named, numerical property in the sketch. * diff --git a/docs/js/custom-element/api/util/hatchery.js b/docs/js/custom-element/api/util/hatchery.js deleted file mode 100644 index a5a01006..00000000 --- a/docs/js/custom-element/api/util/hatchery.js +++ /dev/null @@ -1,111 +0,0 @@ -const HATCHING = []; - -/** - * Build hatching patterns. These are built fully unrolled, - * mostly because they're small and there's no actual benefit - * to abstracting the drawing for only six patterns. - */ -function hatch(canvasBuildFunction) { - if (HATCHING.length > 0) { - return HATCHING; - } - - let cvs, - ctx, - w = 9, - h = 9; - - if (canvasBuildFunction) { - let b = canvasBuildFunction(w, h); - cvs = b.canvas; - ctx = b.ctx; - } else { - cvs = document.createElement("canvas"); - cvs.width = w; - cvs.height = h; - ctx = cvs.getContext(`2d`); - } - - ctx.fillStyle = `#0000FF30`; - ctx.lineWidth = 1; - - const paint = (x, y) => ctx.fillRect(x, y, 1, 1); - - // pattern: \ - ctx.clearRect(0, 0, w, h); - paint(0, 0); - paint(1, 1); - paint(2, 2); - paint(3, 3); - paint(4, 4); - paint(5, 5); - paint(6, 6); - paint(7, 7); - paint(8, 8); - HATCHING.push(ctx.createPattern(cvs, "repeat")); - - // pattern: / - ctx.clearRect(0, 0, w, h); - paint(0, 8); - paint(1, 7); - paint(2, 6); - paint(3, 5); - paint(4, 4); - paint(5, 3); - paint(6, 2); - paint(7, 1); - paint(8, 0); - HATCHING.push(ctx.createPattern(cvs, "repeat")); - - // pattern: x (without clearing, because we can overlay) - paint(0, 0); - paint(1, 1); - paint(2, 2); - paint(3, 3); - paint(5, 5); - paint(6, 6); - paint(7, 7); - paint(8, 8); - HATCHING.push(ctx.createPattern(cvs, "repeat")); - - // pattern: | - ctx.clearRect(0, 0, w, h); - paint(4, 0); - paint(4, 1); - paint(4, 2); - paint(4, 3); - paint(4, 4); - paint(4, 5); - paint(4, 6); - paint(4, 7); - paint(4, 8); - HATCHING.push(ctx.createPattern(cvs, "repeat")); - - // pattern: - - ctx.clearRect(0, 0, w, h); - paint(0, 4); - paint(1, 4); - paint(2, 4); - paint(3, 4); - paint(4, 4); - paint(5, 4); - paint(6, 4); - paint(7, 4); - paint(8, 4); - HATCHING.push(ctx.createPattern(cvs, "repeat")); - - // pattern: + (without clearing, because we can overlap) - paint(4, 0); - paint(4, 1); - paint(4, 2); - paint(4, 3); - paint(4, 5); - paint(4, 6); - paint(4, 7); - paint(4, 8); - HATCHING.push(ctx.createPattern(cvs, "repeat")); - - return HATCHING; -} - -export { hatch }; diff --git a/docs/zh-CN/index.html b/docs/zh-CN/index.html index 504df1b1..b32f00f4 100644 --- a/docs/zh-CN/index.html +++ b/docs/zh-CN/index.html @@ -324,7 +324,7 @@ function Bezier(3,t):
- + Scripts are disabled. Showing fallback image. @@ -332,7 +332,7 @@ function Bezier(3,t): - + Scripts are disabled. Showing fallback image. @@ -340,7 +340,7 @@ function Bezier(3,t): - + Scripts are disabled. Showing fallback image. @@ -454,12 +454,12 @@ function RationalBezier(3,t,w[],r[]):
- + Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image.
@@ -551,7 +551,7 @@ function RationalBezier(3,t,w[],r[]):
- + Scripts are disabled. Showing fallback image. @@ -559,7 +559,7 @@ function RationalBezier(3,t,w[],r[]): - + Scripts are disabled. Showing fallback image. @@ -919,13 +919,13 @@ treated as a sequence of three (elementary) shear operations. When we combine th

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.

- + Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. @@ -1061,14 +1061,14 @@ function getCubicRoots(pa, pb, pc, pd) {

So now that we know how to do root finding, we can determine the first and second derivative roots for our Bézier curves, and show those roots overlaid on the previous graphics. For the quadratic curve, that means just the first derivative, in red:

- + Scripts are disabled. Showing fallback image.

And for cubic curves, that means first and second derivatives, in red and purple respectively:

- + Scripts are disabled. Showing fallback image. @@ -1086,12 +1086,12 @@ function getCubicRoots(pa, pb, pc, pd) {
- + Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image.
@@ -1111,16 +1111,18 @@ function getCubicRoots(pa, pb, pc, pd) {

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:

- +
+ - + Scripts are disabled. Showing fallback image. - + - + Scripts are disabled. Showing fallback image. +
@@ -1130,12 +1132,12 @@ function getCubicRoots(pa, pb, pc, pd) {
- + Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image.
@@ -1313,17 +1315,17 @@ y = curve.get(t).y
- + Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image.
@@ -1359,7 +1361,7 @@ y = curve.get(t).y - + Scripts are disabled. Showing fallback image. @@ -1367,7 +1369,7 @@ y = curve.get(t).y - + Scripts are disabled. Showing fallback image. diff --git a/package-lock.json b/package-lock.json index 5a7a5b4a..cf212758 100644 --- a/package-lock.json +++ b/package-lock.json @@ -630,9 +630,9 @@ "dev": true }, "eventemitter3": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.4.tgz", - "integrity": "sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ==", + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", + "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==", "dev": true }, "file-type": { @@ -667,9 +667,9 @@ } }, "follow-redirects": { - "version": "1.12.1", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.12.1.tgz", - "integrity": "sha512-tmRv0AVuR7ZyouUHLeNSiO6pqulF7dYa3s19c6t+wz9LD69/uSzdMxJ2S91nTI9U3rt/IldxpzMOFejp6f0hjg==", + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz", + "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==", "dev": true }, "fs-extra": { @@ -826,9 +826,8 @@ } }, "http-server": { - "version": "0.12.3", - "resolved": "https://registry.npmjs.org/http-server/-/http-server-0.12.3.tgz", - "integrity": "sha512-be0dKG6pni92bRjq0kvExtj/NrrAd28/8fCXkaI/4piTwQMSDSLMhWyW0NI1V+DBI3aa1HMlQu46/HjVLfmugA==", + "version": "git://github.com/Pomax/http-server.git#ff289661cd759f871c041e8890e1bd4af6c57bdc", + "from": "git://github.com/Pomax/http-server.git#patch-1", "dev": true, "requires": { "basic-auth": "^1.0.3", @@ -1081,9 +1080,9 @@ } }, "lodash": { - "version": "4.17.19", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz", - "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==", + "version": "4.17.20", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz", + "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==", "dev": true }, "lodash.debounce": { diff --git a/package.json b/package.json index 7c49ff64..fc83ba5f 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "lint:tools": "prettier \"./src/**/*.js\" --write", "lint:lib": "prettier \"./docs/js/**/*.js\" --write", "pretty": "echo not running `prettier \"./docs/**/index.html\" --write` as it increases filesize by 30%", - "server": "cd docs && http-server -p 8000 --cors", + "server": "cd docs && http-server -e -p 8000 --cors", "watch": "run-p watch:*", "watch:chapters": "chokidar \"./docs/chapters/**/*.*\" -c \"npm run build\"", "watch:customelement": "chokidar \"./docs/js/custom-element/**/*.js\" -c \"npm run build\"", @@ -46,7 +46,7 @@ "chokidar-cli": "^2.1.0", "fs-extra": "^9.0.1", "glob": "^7.1.6", - "http-server": "^0.12.3", + "http-server": "git://github.com/Pomax/http-server#patch-1", "marked": "^1.1.1", "npm-run-all": "^4.1.5", "nunjucks": "^3.2.2",