mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-08-26 17:54:52 +02:00
build fix for news
This commit is contained in:
Pomax
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
170
docs/index.html
170
docs/index.html
@@ -31,7 +31,7 @@
|
||||
<meta property="og:locale" content="en-GB" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-22T11:58:20+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-23T03:29:44+00:00" />
|
||||
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
|
||||
<meta property="og:section" content="Bézier Curves" />
|
||||
<meta property="og:tag" content="Bézier Curves" />
|
||||
@@ -461,14 +461,14 @@
|
||||
<graphics-element title="A quadratic Bézier curve" width="275" height="275" src="./chapters/introduction/quadratic.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\introduction\54e9ec0600ac436b0e6f0c6b5005cf03.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/introduction/54e9ec0600ac436b0e6f0c6b5005cf03.png" loading="lazy" />
|
||||
<label>A quadratic Bézier curve</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
<graphics-element title="A cubic Bézier curve" width="275" height="275" src="./chapters/introduction/cubic.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\introduction\8d158a13e9a86969b99c64057644cbc6.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/introduction/8d158a13e9a86969b99c64057644cbc6.png" loading="lazy" />
|
||||
<label>A cubic Bézier curve</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -509,7 +509,7 @@
|
||||
<graphics-element title="Linear Interpolation leading to Bézier curves" width="825" height="275" src="./chapters/whatis/interpolation.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\whatis\524dd296e96c0fe2281fb95146f8ea65.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/whatis/524dd296e96c0fe2281fb95146f8ea65.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="10" max="90" step="1" value="25" class="slide-control" />
|
||||
@@ -580,7 +580,7 @@
|
||||
<graphics-element title="A (partial) circle: x=sin(t), y=cos(t)" width="275" height="275" src="./chapters/explanation/circle.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\explanation\959762e39ae32407e914a687d804ff3a.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/explanation/959762e39ae32407e914a687d804ff3a.png" loading="lazy" />
|
||||
<label>A (partial) circle: x=sin(t), y=cos(t)</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="10" step="0.1" value="5" class="slide-control" />
|
||||
@@ -748,7 +748,7 @@ function Bezier(3,t):
|
||||
<graphics-element title="Quadratic interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\control\f700cd59e6021b0e06b819105ec931da.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/control/f700cd59e6021b0e06b819105ec931da.png" loading="lazy" />
|
||||
<label>Quadratic interpolations</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
|
||||
@@ -757,7 +757,7 @@ function Bezier(3,t):
|
||||
<graphics-element title="Cubic interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\control\4b206c16ccf8a06a0834fe9e5254560c.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/control/4b206c16ccf8a06a0834fe9e5254560c.png" loading="lazy" />
|
||||
<label>Cubic interpolations</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
|
||||
@@ -766,7 +766,7 @@ function Bezier(3,t):
|
||||
<graphics-element title="15th degree interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="15">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\control\be82cd31c4892a8f0582b1b5285231d9.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/control/be82cd31c4892a8f0582b1b5285231d9.png" loading="lazy" />
|
||||
<label>15th degree interpolations</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
|
||||
@@ -794,7 +794,7 @@ function Bezier(3,t):
|
||||
<graphics-element title="Our cubic Bézier curve" width="275" height="275" src="./chapters/control/../introduction/cubic.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\introduction\8d158a13e9a86969b99c64057644cbc6.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/control/8d158a13e9a86969b99c64057644cbc6.png" loading="lazy" />
|
||||
<label>Our cubic Bézier curve</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -878,7 +878,7 @@ function Bezier(3,t,w[]):
|
||||
<graphics-element title="Our rational cubic Bézier curve" width="275" height="275" src="./chapters/weightcontrol/rational.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\weightcontrol\3d71e2b9373684eebcb0dc8563f70b18.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/weightcontrol/3d71e2b9373684eebcb0dc8563f70b18.png" loading="lazy" />
|
||||
<label>Our rational cubic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0.01" max="2" value="1" step="0.01" class="ratio-1" />
|
||||
@@ -975,7 +975,7 @@ function RationalBezier(3,t,w[],r[]):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\extended\37948bde4bf0d25bde85f172bf55b9fb.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/extended/37948bde4bf0d25bde85f172bf55b9fb.png" loading="lazy" />
|
||||
<label>Quadratic infinite interval Bézier curve</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -988,7 +988,7 @@ function RationalBezier(3,t,w[],r[]):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\extended\2d17acb381ebdd28f0ff43be00d723c4.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/extended/2d17acb381ebdd28f0ff43be00d723c4.png" loading="lazy" />
|
||||
<label>Cubic infinite interval Bézier curve</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -1092,7 +1092,7 @@ function RationalBezier(3,t,w[],r[]):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\decasteljau\df92f529841f39decf9ad62b0967855a.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/decasteljau/df92f529841f39decf9ad62b0967855a.png" loading="lazy" />
|
||||
<label>Traversing a curve using de Casteljau's algorithm</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
|
||||
@@ -1156,7 +1156,7 @@ function RationalBezier(3,t,w[],r[]):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\flattening\6813bfc608aea11df1dda444b9f18123.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/flattening/6813bfc608aea11df1dda444b9f18123.png" loading="lazy" />
|
||||
<label>Flattening a quadratic curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="1" max="16" step="1" value="4" class="slide-control" />
|
||||
@@ -1165,7 +1165,7 @@ function RationalBezier(3,t,w[],r[]):
|
||||
<graphics-element title="Flattening a cubic curve" width="275" height="275" src="./chapters/flattening/flatten.js" data-type="cubic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\flattening\0e0e4a2ee46bd89bcfde9f75cfe43292.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/flattening/0e0e4a2ee46bd89bcfde9f75cfe43292.png" loading="lazy" />
|
||||
<label>Flattening a cubic curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="1" max="24" step="1" value="8" class="slide-control" />
|
||||
@@ -1212,7 +1212,7 @@ function RationalBezier(3,t,w[],r[]):
|
||||
<graphics-element title="Splitting a curve" width="825" height="275" src="./chapters/splitting/splitting.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\splitting\fce5eb16dfcd103797c5e17bd77f1437.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/splitting/fce5eb16dfcd103797c5e17bd77f1437.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.5" class="slide-control" />
|
||||
@@ -1648,7 +1648,7 @@ function drawCurve(points[], t):
|
||||
<graphics-element title="A variable-order Bézier curve" width="275" height="275" src="./chapters/reordering/reorder.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\reordering\c4874e1205aabe624e5504abe154eae9.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/reordering/c4874e1205aabe624e5504abe154eae9.png" loading="lazy" />
|
||||
<label>A variable-order Bézier curve</label>
|
||||
</fallback-image>
|
||||
<button class="raise">raise</button>
|
||||
@@ -1927,7 +1927,7 @@ function drawCurve(points[], t):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\pointvectors\f1b4e81d22f4c44d4618b0f55a1a88c5.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/pointvectors/f1b4e81d22f4c44d4618b0f55a1a88c5.png" loading="lazy" />
|
||||
<label>Quadratic Bézier tangents and normals</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -1940,7 +1940,7 @@ function drawCurve(points[], t):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\pointvectors\5863bd013ad6594f63f8dfa51ff4adc0.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/pointvectors/5863bd013ad6594f63f8dfa51ff4adc0.png" loading="lazy" />
|
||||
<label>Cubic Bézier tangents and normals</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -2014,7 +2014,7 @@ function drawCurve(points[], t):
|
||||
<graphics-element title="Some known and unknown vectors" width="350" height="300" src="./chapters/pointvectors3d/frenet.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="350px" height="300px" src="images\chapters\pointvectors3d\11c1da2357004bb51cf0c591fc492115.png" loading="lazy" />
|
||||
<img width="350px" height="300px" src="./images/chapters/pointvectors3d/11c1da2357004bb51cf0c591fc492115.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
|
||||
@@ -2126,7 +2126,7 @@ function drawCurve(points[], t):
|
||||
<graphics-element title="Some known and unknown vectors" width="350" height="300" src="./chapters/pointvectors3d/rotation-minimizing.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="350px" height="300px" src="images\chapters\pointvectors3d\f4a2fa1e0204c890b2bff07228ba678d.png" loading="lazy" />
|
||||
<img width="350px" height="300px" src="./images/chapters/pointvectors3d/f4a2fa1e0204c890b2bff07228ba678d.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
|
||||
@@ -2175,7 +2175,7 @@ function drawCurve(points[], t):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\components\1e6e38f6403dbe4c8b80295a94fc6748.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/components/1e6e38f6403dbe4c8b80295a94fc6748.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -2189,7 +2189,7 @@ function drawCurve(points[], t):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\components\348694339257428a260144da4bbf80fc.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/components/348694339257428a260144da4bbf80fc.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
</section>
|
||||
@@ -2489,7 +2489,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\extremities\fd68347a917c9b703ff8005287ac6ca4.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/extremities/fd68347a917c9b703ff8005287ac6ca4.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -2503,7 +2503,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\extremities\fbfe9464c9653f5efcd04411e683faf9.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/extremities/fbfe9464c9653f5efcd04411e683faf9.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
</section>
|
||||
@@ -2540,14 +2540,14 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\boundingbox\12ec4a5039de2e2cc06611db5e826282.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/boundingbox/12ec4a5039de2e2cc06611db5e826282.png" loading="lazy" />
|
||||
<label>Quadratic Bézier bounding box</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
<graphics-element title="Cubic Bézier bounding box" width="275" height="275" src="./chapters/boundingbox/bbox.js" data-type="cubic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\boundingbox\daad01218ba430e2355d151811aa971b.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/boundingbox/daad01218ba430e2355d151811aa971b.png" loading="lazy" />
|
||||
<label>Cubic Bézier bounding box</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -2595,7 +2595,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
<graphics-element title="Aligning a quadratic curve" width="550" height="275" src="./chapters/aligning/aligning.js" data-type="quadratic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="550px" height="275px" src="images\chapters\aligning\28cc0f129fa0c028a1addd702e99f162.png" loading="lazy" />
|
||||
<img width="550px" height="275px" src="./images/chapters/aligning/28cc0f129fa0c028a1addd702e99f162.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -2603,7 +2603,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
<graphics-element title="Aligning a cubic curve" width="550" height="275" src="./chapters/aligning/aligning.js" data-type="cubic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="550px" height="275px" src="images\chapters\aligning\9a6755a1e31a990e8f072a6da98f811a.png" loading="lazy" />
|
||||
<img width="550px" height="275px" src="./images/chapters/aligning/9a6755a1e31a990e8f072a6da98f811a.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
</section>
|
||||
@@ -2628,14 +2628,14 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\tightbounds\ed91133976018ec032d9115344debb36.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/tightbounds/ed91133976018ec032d9115344debb36.png" loading="lazy" />
|
||||
<label>Aligning a quadratic curve</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
<graphics-element title="Aligning a cubic curve" width="275" height="275" src="./chapters/tightbounds/tightbounds.js" data-type="cubic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\tightbounds\9ee5abc64b3fba71e284c70539279d74.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/tightbounds/9ee5abc64b3fba71e284c70539279d74.png" loading="lazy" />
|
||||
<label>Aligning a cubic curve</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -2769,7 +2769,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
<graphics-element title="Finding cubic Bézier curve inflections" width="275" height="275" src="./chapters/inflections/inflection.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\inflections\726ece45630c43be14589c51f1606bd7.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/inflections/726ece45630c43be14589c51f1606bd7.png" loading="lazy" />
|
||||
<label>Finding cubic Bézier curve inflections</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -2803,7 +2803,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
<graphics-element title="The canonical curve map" width="400" height="400" src="./chapters/canonical/canonical.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\canonical\c086e72bd8aaeab37436515ab251b2df.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/canonical/c086e72bd8aaeab37436515ab251b2df.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -2995,7 +2995,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
<graphics-element title="A cubic curve mapped to canonical form" width="800" height="400" src="./chapters/canonical/interactive.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="800px" height="400px" src="images\chapters\canonical\83fe2473e20ea68b768765129ee44ae4.png" loading="lazy" />
|
||||
<img width="800px" height="400px" src="./images/chapters/canonical/83fe2473e20ea68b768765129ee44ae4.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
</section>
|
||||
@@ -3026,7 +3026,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="550px" height="275px" src="images\chapters\yforx\e469af5bf27a2c27d1dd6fc62a78ac27.png" loading="lazy" />
|
||||
<img width="550px" height="275px" src="./images/chapters/yforx/e469af5bf27a2c27d1dd6fc62a78ac27.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" class="slide-control" />
|
||||
@@ -3073,7 +3073,7 @@ y = curve.get(t).y</code></pre>
|
||||
<graphics-element title="Finding By(t), by finding t for a given x" width="275" height="275" src="./chapters/yforx/yforx.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\yforx\2fc5c57e5d1ed0eaa1655edc31026252.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/yforx/2fc5c57e5d1ed0eaa1655edc31026252.png" loading="lazy" />
|
||||
<label>Finding By(t), by finding t for a given x</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" class="slide-control" />
|
||||
@@ -3135,21 +3135,21 @@ y = curve.get(t).y</code></pre>
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arclength\56533f47e73ad9fea08fa9bb3f597d49.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arclength/56533f47e73ad9fea08fa9bb3f597d49.png" loading="lazy" />
|
||||
<label>A function's approximated integral</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
<graphics-element title="A better approximation" width="275" height="275" src="./chapters/arclength/draw-slices.js" data-steps="24">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arclength\5ce02cbdbc47585c588f2656d5161a32.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arclength/5ce02cbdbc47585c588f2656d5161a32.png" loading="lazy" />
|
||||
<label>A better approximation</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
<graphics-element title="An even better approximation" width="275" height="275" src="./chapters/arclength/draw-slices.js" data-steps="99">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arclength\fe2663b205d14c157a5a02bfbbd55987.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arclength/fe2663b205d14c157a5a02bfbbd55987.png" loading="lazy" />
|
||||
<label>An even better approximation</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3223,7 +3223,7 @@ y = curve.get(t).y</code></pre>
|
||||
<graphics-element title="Arc length for a Bézier curve" width="275" height="275" src="./chapters/arclength/arclength.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arclength\fa4c587126e8097206b88d9ea51974ca.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arclength/fa4c587126e8097206b88d9ea51974ca.png" loading="lazy" />
|
||||
<label>Arc length for a Bézier curve</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3252,7 +3252,7 @@ y = curve.get(t).y</code></pre>
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arclengthapprox\3fc083ea7bdcc6b021560f2f2491f8aa.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arclengthapprox/3fc083ea7bdcc6b021560f2f2491f8aa.png" loading="lazy" />
|
||||
<label>Approximate quadratic curve arc length</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="2" max="24" step="1" value="4" class="slide-control" />
|
||||
@@ -3267,7 +3267,7 @@ y = curve.get(t).y</code></pre>
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arclengthapprox\537260c4aa9e98ffdea7c8120afbd427.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arclengthapprox/537260c4aa9e98ffdea7c8120afbd427.png" loading="lazy" />
|
||||
<label>Approximate cubic curve arc length</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="2" max="32" step="1" value="8" class="slide-control" />
|
||||
@@ -3382,7 +3382,7 @@ y = curve.get(t).y</code></pre>
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\curvature\2398b098e6ac9da9dc109239b49715ed.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/curvature/2398b098e6ac9da9dc109239b49715ed.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -3406,7 +3406,7 @@ y = curve.get(t).y</code></pre>
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\curvature\595e2f3790ef8034631e1cbb0df9c6f6.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/curvature/595e2f3790ef8034631e1cbb0df9c6f6.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="2" step="0.0005" value="0" class="slide-control" />
|
||||
@@ -3438,7 +3438,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">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="550px" height="275px" src="images\chapters\tracing\d6239520389637a3c42e76ee44d86c41.png" loading="lazy" />
|
||||
<img width="550px" height="275px" src="./images/chapters/tracing/d6239520389637a3c42e76ee44d86c41.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -3457,7 +3457,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">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\tracing\1cd7304fb8d044835bfbc305ca5e5d10.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/tracing/1cd7304fb8d044835bfbc305ca5e5d10.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="2" max="24" step="1" value="8" class="slide-control" />
|
||||
@@ -3507,7 +3507,7 @@ y = curve.get(t).y</code></pre>
|
||||
<graphics-element title="Line/line intersections" width="275" height="275" src="./chapters/intersections/line-line.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\b3f61036d8dc9888a6a64a1171583dd1.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/intersections/b3f61036d8dc9888a6a64a1171583dd1.png" loading="lazy" />
|
||||
<label>Line/line intersections</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3556,7 +3556,7 @@ lli = function(line1, line2):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\9b70fb7b03f082882515e55c0a1eacff.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/intersections/9b70fb7b03f082882515e55c0a1eacff.png" loading="lazy" />
|
||||
<label>Quadratic curve/line intersections</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3569,7 +3569,7 @@ lli = function(line1, line2):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\7196d3dec75d53f5df9d9c832ac3c493.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/intersections/7196d3dec75d53f5df9d9c832ac3c493.png" loading="lazy" />
|
||||
<label>Cubic curve/line intersections</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3637,7 +3637,7 @@ lli = function(line1, line2):
|
||||
<graphics-element title="Curve/curve intersections" width="825" height="275" src="./chapters/curveintersection/curve-curve.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\curveintersection\b155682162a5b6da6d40c7b531164a7e.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/curveintersection/b155682162a5b6da6d40c7b531164a7e.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<button class="next">Advance one step</button>
|
||||
@@ -3686,7 +3686,7 @@ lli = function(line1, line2):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\abc\7a69dd4350ddda5701712e1d3b46b863.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/abc/7a69dd4350ddda5701712e1d3b46b863.png" loading="lazy" />
|
||||
<label>Projections in a quadratic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.5" class="slide-control" />
|
||||
@@ -3701,7 +3701,7 @@ lli = function(line1, line2):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\abc\eeec7cf16fb22c666e0143a3a030731f.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/abc/eeec7cf16fb22c666e0143a3a030731f.png" loading="lazy" />
|
||||
<label>Projections in a cubic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.5" class="slide-control" />
|
||||
@@ -3813,7 +3813,7 @@ lli = function(line1, line2):
|
||||
<graphics-element title="Fitting a quadratic Bézier curve" width="275" height="275" src="./chapters/pointcurves/quadratic.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\pointcurves\067a3df30e32708fc0d13f8eb78c0b05.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/pointcurves/067a3df30e32708fc0d13f8eb78c0b05.png" loading="lazy" />
|
||||
<label>Fitting a quadratic Bézier curve</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3833,7 +3833,7 @@ lli = function(line1, line2):
|
||||
<graphics-element title="Finding a circle through three points" width="275" height="275" src="./chapters/pointcurves/circle.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\pointcurves\43875f6ad588bfd04cdb65b591a62052.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/pointcurves/43875f6ad588bfd04cdb65b591a62052.png" loading="lazy" />
|
||||
<label>Finding a circle through three points</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3889,7 +3889,7 @@ lli = function(line1, line2):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\pointcurves\75f7b5b31e98444e13f17e5c3e5b7322.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/pointcurves/75f7b5b31e98444e13f17e5c3e5b7322.png" loading="lazy" />
|
||||
<label>Finding the cubic e₁ and e₂ given three points </label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3904,7 +3904,7 @@ lli = function(line1, line2):
|
||||
<graphics-element title="Fitting a quadratic Bézier curve" width="275" height="275" src="./chapters/pointcurves/cubic.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\pointcurves\eab6ea46fa93030e03ec0ef7deb571dc.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/pointcurves/eab6ea46fa93030e03ec0ef7deb571dc.png" loading="lazy" />
|
||||
<label>Fitting a quadratic Bézier curve</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3975,7 +3975,7 @@ for (coordinate, index) in LUT:
|
||||
<graphics-element title="Projecting a point onto a Bézier curve" width="400" height="400" src="./chapters/projections/project.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\projections\3cc334d0ebc01cc5352e23ed47bc5414.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/projections/3cc334d0ebc01cc5352e23ed47bc5414.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
</section>
|
||||
@@ -4006,7 +4006,7 @@ for (coordinate, index) in LUT:
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\molding\aefb177e5532a9f995b9d88e85582c68.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/molding/aefb177e5532a9f995b9d88e85582c68.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -4025,7 +4025,7 @@ for (coordinate, index) in LUT:
|
||||
<graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\molding\834af194de17a5eb2c1920773ab904e3.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/molding/834af194de17a5eb2c1920773ab904e3.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -4049,7 +4049,7 @@ for (coordinate, index) in LUT:
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\molding\cdf7515d133cbf41ffbaea8c488e0924.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/molding/cdf7515d133cbf41ffbaea8c488e0924.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="10" max="200" step="1" value="100" class="slide-control" />
|
||||
@@ -4389,7 +4389,7 @@ for (coordinate, index) in LUT:
|
||||
<graphics-element title="Fitting a Bézier curve" width="550" height="275" src="./chapters/curvefitting/curve-fitting.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="550px" height="275px" src="images\chapters\curvefitting\798f3d7151dfb2887c7881a08e65cdd3.png" loading="lazy" />
|
||||
<img width="550px" height="275px" src="./images/chapters/curvefitting/798f3d7151dfb2887c7881a08e65cdd3.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<button class="toggle">toggle</button>
|
||||
@@ -4421,7 +4421,7 @@ for (coordinate, index) in LUT:
|
||||
<graphics-element title="A Catmull-Rom curve" width="275" height="275" src="./chapters/catmullconv/catmull-rom.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\catmullconv\aa46749b9469341d9249ca452390d875.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/catmullconv/aa46749b9469341d9249ca452390d875.png" loading="lazy" />
|
||||
<label>A Catmull-Rom curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0.1" max="1" step="0.01" value="0.5" class="slide-control tension" />
|
||||
@@ -4795,7 +4795,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\41522a397171423e8a465dc8c74f6e87.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/41522a397171423e8a465dc8c74f6e87.png" loading="lazy" />
|
||||
<label>Unlinked quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4809,7 +4809,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\6fb33629373d7a731b6ac3f5365cb9f0.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/6fb33629373d7a731b6ac3f5365cb9f0.png" loading="lazy" />
|
||||
<label>Unlinked cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4841,7 +4841,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\db04f805f42bdc9a1b7ec4d6b401d853.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/db04f805f42bdc9a1b7ec4d6b401d853.png" loading="lazy" />
|
||||
<label>Connected quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4855,7 +4855,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\fe41b628f46f7035d151a8210d30111f.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/fe41b628f46f7035d151a8210d30111f.png" loading="lazy" />
|
||||
<label>Connected cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4884,7 +4884,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\777f3814965c39ec3cdbb13eab0c4eeb.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/777f3814965c39ec3cdbb13eab0c4eeb.png" loading="lazy" />
|
||||
<label>Angularly connected quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4898,7 +4898,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\f6c55cbc66333b6630939f67fc20e086.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/f6c55cbc66333b6630939f67fc20e086.png" loading="lazy" />
|
||||
<label>Angularly connected cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4922,7 +4922,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\b3aebf7803f4430187c249a891095062.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/b3aebf7803f4430187c249a891095062.png" loading="lazy" />
|
||||
<label>Standard connected quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4936,7 +4936,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\1b94c6ada011bd8e50330e31a851a62e.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/1b94c6ada011bd8e50330e31a851a62e.png" loading="lazy" />
|
||||
<label>Standard connected cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -5094,7 +5094,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\offsetting\03b8e0849e7c8ba64d8c076f47fe2ec7.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/offsetting/03b8e0849e7c8ba64d8c076f47fe2ec7.png" loading="lazy" />
|
||||
<label>Offsetting a quadratic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
|
||||
@@ -5109,7 +5109,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\offsetting\4c4738b6bf9f83eded12d680a29e337b.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/offsetting/4c4738b6bf9f83eded12d680a29e337b.png" loading="lazy" />
|
||||
<label>Offsetting a cubic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
|
||||
@@ -5161,7 +5161,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\graduatedoffset\8cc724d5343c65685d88c92b2d069a2a.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/graduatedoffset/8cc724d5343c65685d88c92b2d069a2a.png" loading="lazy" />
|
||||
<label>Offsetting a quadratic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
|
||||
@@ -5176,7 +5176,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\graduatedoffset\17bf62e05a1fc3387b0c210f2decff45.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/graduatedoffset/17bf62e05a1fc3387b0c210f2decff45.png" loading="lazy" />
|
||||
<label>Offsetting a cubic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
|
||||
@@ -5214,7 +5214,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="Quadratic Bézier arc approximation" width="400" height="400" src="./chapters/circles/arc-approximation.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\circles\08ca09aacb271735e063e7e8d941a195.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/circles/08ca09aacb271735e063e7e8d941a195.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control" />
|
||||
@@ -5339,7 +5339,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="Cubic Bézier arc approximation" width="400" height="400" src="./chapters/circles_cubic/arc-approximation.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\circles_cubic\ecacec0eb2bbe72e14b9008d854fbb06.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/circles_cubic/ecacec0eb2bbe72e14b9008d854fbb06.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control" />
|
||||
@@ -5573,7 +5573,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="Cubic Bézier circle approximation" width="340" height="300" src="./chapters/circles_cubic/circle.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="340px" height="300px" src="images\chapters\circles_cubic\63f35fb58d3571200ac6ccea0384b9d7.png" loading="lazy" />
|
||||
<img width="340px" height="300px" src="./images/chapters/circles_cubic/63f35fb58d3571200ac6ccea0384b9d7.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
</section>
|
||||
@@ -5652,7 +5652,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="First arc approximation of a Bézier curve" width="275" height="275" src="./chapters/arcapproximation/arc.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arcapproximation\7c9cce8142fa3e85bb124520f40645ff.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arcapproximation/7c9cce8142fa3e85bb124520f40645ff.png" loading="lazy" />
|
||||
<label>First arc approximation of a Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0.1" max="5" step="0.1" value="0.5" class="slide-control" />
|
||||
@@ -5667,7 +5667,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="Arc approximation of a Bézier curve" width="275" height="275" src="./chapters/arcapproximation/arcs.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arcapproximation\da76341b841df1af8a39f797e85dfe3c.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arcapproximation/da76341b841df1af8a39f797e85dfe3c.png" loading="lazy" />
|
||||
<label>Arc approximation of a Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0.1" max="5" step="0.1" value="0.5" class="slide-control" />
|
||||
@@ -5712,7 +5712,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="A B-Spline example" width="600" height="300" src="./chapters/bsplines/basic.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="600px" height="300px" src="images\chapters\bsplines\fe3a8ca5706f286d916e36699e237e51.png" loading="lazy" />
|
||||
<img width="600px" height="300px" src="./images/chapters/bsplines/fe3a8ca5706f286d916e36699e237e51.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -5734,7 +5734,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="The components of a B-Spline " width="600" height="300" src="./chapters/bsplines/basic.js" data-show-curves="true">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="600px" height="300px" src="images\chapters\bsplines\41167c64c51386414c6e62f0b45e6295.png" loading="lazy" />
|
||||
<img width="600px" height="300px" src="./images/chapters/bsplines/41167c64c51386414c6e62f0b45e6295.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<!-- basis curve highlighter goes here -->
|
||||
@@ -5905,7 +5905,7 @@ for(let L = 1; L <= order; L++) {
|
||||
<graphics-element title="A uniform B-Spline" width="400" height="400" src="./chapters/bsplines/uniform.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\bsplines\48a30189e74658737b3a8b28bb816f8a.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/bsplines/48a30189e74658737b3a8b28bb816f8a.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<!-- knot sliders go here -->
|
||||
@@ -5930,7 +5930,7 @@ for(let L = 1; L <= order; L++) {
|
||||
<graphics-element title="A reduced uniform B-Spline" width="400" height="400" src="./chapters/bsplines/reduced.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\bsplines\ceaef2fbee05a58aa11835925403b4cd.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/bsplines/ceaef2fbee05a58aa11835925403b4cd.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<!-- knot sliders go here -->
|
||||
@@ -5951,7 +5951,7 @@ for(let L = 1; L <= order; L++) {
|
||||
<graphics-element title="An open, uniform B-Spline" width="400" height="400" src="./chapters/bsplines/uniform.js" data-open="true">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\bsplines\0215dc106e4ad51afe043c0176a595f6.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/bsplines/0215dc106e4ad51afe043c0176a595f6.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<!-- knot sliders go here -->
|
||||
@@ -5974,7 +5974,7 @@ for(let L = 1; L <= order; L++) {
|
||||
<graphics-element title="A (closed) rational, uniform B-Spline" width="400" height="400" src="./chapters/bsplines/rational-uniform.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\bsplines\0d9c2186423466a32bb8fbd187409f82.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/bsplines/0d9c2186423466a32bb8fbd187409f82.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<!-- knot sliders go here -->
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
<meta property="og:locale" content="ja-JP" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-22T11:58:20+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-23T03:29:44+00:00" />
|
||||
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
|
||||
<meta property="og:section" content="Bézier Curves" />
|
||||
<meta property="og:tag" content="Bézier Curves" />
|
||||
@@ -435,14 +435,14 @@
|
||||
<graphics-element title="2次のベジエ曲線" width="275" height="275" src="./chapters/introduction/quadratic.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\introduction\54e9ec0600ac436b0e6f0c6b5005cf03.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/introduction/54e9ec0600ac436b0e6f0c6b5005cf03.png" loading="lazy" />
|
||||
<label>2次のベジエ曲線</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
<graphics-element title="3次のベジエ曲線" width="275" height="275" src="./chapters/introduction/cubic.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\introduction\8d158a13e9a86969b99c64057644cbc6.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/introduction/8d158a13e9a86969b99c64057644cbc6.png" loading="lazy" />
|
||||
<label>3次のベジエ曲線</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -476,7 +476,7 @@
|
||||
<graphics-element title="Linear Interpolation leading to Bézier curves" width="825" height="275" src="./chapters/whatis/interpolation.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\whatis\524dd296e96c0fe2281fb95146f8ea65.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/whatis/524dd296e96c0fe2281fb95146f8ea65.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="10" max="90" step="1" value="25" class="slide-control" />
|
||||
@@ -527,7 +527,7 @@
|
||||
<graphics-element title="（部分）円 x=sin(t), y=cos(t)" width="275" height="275" src="./chapters/explanation/circle.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\explanation\959762e39ae32407e914a687d804ff3a.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/explanation/959762e39ae32407e914a687d804ff3a.png" loading="lazy" />
|
||||
<label>（部分）円 x=sin(t), y=cos(t)</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="10" step="0.1" value="5" class="slide-control" />
|
||||
@@ -669,7 +669,7 @@ function Bezier(3,t):
|
||||
<graphics-element title="2次の補間" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\control\f700cd59e6021b0e06b819105ec931da.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/control/f700cd59e6021b0e06b819105ec931da.png" loading="lazy" />
|
||||
<label>2次の補間</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
|
||||
@@ -678,7 +678,7 @@ function Bezier(3,t):
|
||||
<graphics-element title="3次の補間" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\control\4b206c16ccf8a06a0834fe9e5254560c.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/control/4b206c16ccf8a06a0834fe9e5254560c.png" loading="lazy" />
|
||||
<label>3次の補間</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
|
||||
@@ -687,7 +687,7 @@ function Bezier(3,t):
|
||||
<graphics-element title="15次の補間" width="275" height="275" src="./chapters/control/lerp.js" data-degree="15">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\control\be82cd31c4892a8f0582b1b5285231d9.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/control/be82cd31c4892a8f0582b1b5285231d9.png" loading="lazy" />
|
||||
<label>15次の補間</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
|
||||
@@ -786,7 +786,7 @@ function Bezier(3,t,w[]):
|
||||
<graphics-element title="Our rational cubic Bézier curve" width="275" height="275" src="./chapters/weightcontrol/rational.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\weightcontrol\3d71e2b9373684eebcb0dc8563f70b18.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/weightcontrol/3d71e2b9373684eebcb0dc8563f70b18.png" loading="lazy" />
|
||||
<label>Our rational cubic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0.01" max="2" value="1" step="0.01" class="ratio-1" />
|
||||
@@ -867,14 +867,14 @@ function RationalBezier(3,t,w[],r[]):
|
||||
<graphics-element title="無限区間の2次ベジエ曲線" width="275" height="275" src="./chapters/extended/extended.js" data-type="quadratic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\extended\37948bde4bf0d25bde85f172bf55b9fb.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/extended/37948bde4bf0d25bde85f172bf55b9fb.png" loading="lazy" />
|
||||
<label>無限区間の2次ベジエ曲線</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
<graphics-element title="無限区間の3次ベジエ曲線" width="275" height="275" src="./chapters/extended/extended.js" data-type="cubic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\extended\2d17acb381ebdd28f0ff43be00d723c4.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/extended/2d17acb381ebdd28f0ff43be00d723c4.png" loading="lazy" />
|
||||
<label>無限区間の3次ベジエ曲線</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -964,7 +964,7 @@ function RationalBezier(3,t,w[],r[]):
|
||||
<graphics-element title="ド・カステリョのアルゴリズムで曲線をたどる" width="275" height="275" src="./chapters/decasteljau/decasteljau.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\decasteljau\df92f529841f39decf9ad62b0967855a.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/decasteljau/df92f529841f39decf9ad62b0967855a.png" loading="lazy" />
|
||||
<label>ド・カステリョのアルゴリズムで曲線をたどる</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
|
||||
@@ -1014,7 +1014,7 @@ function RationalBezier(3,t,w[],r[]):
|
||||
<graphics-element title="2次ベジエ曲線の平坦化" width="275" height="275" src="./chapters/flattening/flatten.js" data-type="quadratic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\flattening\6813bfc608aea11df1dda444b9f18123.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/flattening/6813bfc608aea11df1dda444b9f18123.png" loading="lazy" />
|
||||
<label>2次ベジエ曲線の平坦化</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="1" max="16" step="1" value="4" class="slide-control" />
|
||||
@@ -1023,7 +1023,7 @@ function RationalBezier(3,t,w[],r[]):
|
||||
<graphics-element title="3次ベジエ曲線の平坦化" width="275" height="275" src="./chapters/flattening/flatten.js" data-type="cubic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\flattening\0e0e4a2ee46bd89bcfde9f75cfe43292.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/flattening/0e0e4a2ee46bd89bcfde9f75cfe43292.png" loading="lazy" />
|
||||
<label>3次ベジエ曲線の平坦化</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="1" max="24" step="1" value="8" class="slide-control" />
|
||||
@@ -1065,7 +1065,7 @@ function RationalBezier(3,t,w[],r[]):
|
||||
<graphics-element title="曲線の分割" width="825" height="275" src="./chapters/splitting/splitting.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\splitting\fce5eb16dfcd103797c5e17bd77f1437.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/splitting/fce5eb16dfcd103797c5e17bd77f1437.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.5" class="slide-control" />
|
||||
@@ -1484,7 +1484,7 @@ function drawCurve(points[], t):
|
||||
<graphics-element title="A variable-order Bézier curve" width="275" height="275" src="./chapters/reordering/reorder.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\reordering\c4874e1205aabe624e5504abe154eae9.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/reordering/c4874e1205aabe624e5504abe154eae9.png" loading="lazy" />
|
||||
<label>A variable-order Bézier curve</label>
|
||||
</fallback-image>
|
||||
<button class="raise">raise</button>
|
||||
@@ -1763,7 +1763,7 @@ function drawCurve(points[], t):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\pointvectors\f1b4e81d22f4c44d4618b0f55a1a88c5.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/pointvectors/f1b4e81d22f4c44d4618b0f55a1a88c5.png" loading="lazy" />
|
||||
<label>Quadratic Bézier tangents and normals</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -1776,7 +1776,7 @@ function drawCurve(points[], t):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\pointvectors\5863bd013ad6594f63f8dfa51ff4adc0.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/pointvectors/5863bd013ad6594f63f8dfa51ff4adc0.png" loading="lazy" />
|
||||
<label>Cubic Bézier tangents and normals</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -1850,7 +1850,7 @@ function drawCurve(points[], t):
|
||||
<graphics-element title="Some known and unknown vectors" width="350" height="300" src="./chapters/pointvectors3d/frenet.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="350px" height="300px" src="images\chapters\pointvectors3d\11c1da2357004bb51cf0c591fc492115.png" loading="lazy" />
|
||||
<img width="350px" height="300px" src="./images/chapters/pointvectors3d/11c1da2357004bb51cf0c591fc492115.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
|
||||
@@ -1962,7 +1962,7 @@ function drawCurve(points[], t):
|
||||
<graphics-element title="Some known and unknown vectors" width="350" height="300" src="./chapters/pointvectors3d/rotation-minimizing.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="350px" height="300px" src="images\chapters\pointvectors3d\f4a2fa1e0204c890b2bff07228ba678d.png" loading="lazy" />
|
||||
<img width="350px" height="300px" src="./images/chapters/pointvectors3d/f4a2fa1e0204c890b2bff07228ba678d.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
|
||||
@@ -2011,7 +2011,7 @@ function drawCurve(points[], t):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\components\1e6e38f6403dbe4c8b80295a94fc6748.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/components/1e6e38f6403dbe4c8b80295a94fc6748.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -2025,7 +2025,7 @@ function drawCurve(points[], t):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\components\348694339257428a260144da4bbf80fc.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/components/348694339257428a260144da4bbf80fc.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
</section>
|
||||
@@ -2325,7 +2325,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\extremities\fd68347a917c9b703ff8005287ac6ca4.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/extremities/fd68347a917c9b703ff8005287ac6ca4.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -2339,7 +2339,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\extremities\fbfe9464c9653f5efcd04411e683faf9.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/extremities/fbfe9464c9653f5efcd04411e683faf9.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
</section>
|
||||
@@ -2376,14 +2376,14 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\boundingbox\12ec4a5039de2e2cc06611db5e826282.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/boundingbox/12ec4a5039de2e2cc06611db5e826282.png" loading="lazy" />
|
||||
<label>Quadratic Bézier bounding box</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
<graphics-element title="Cubic Bézier bounding box" width="275" height="275" src="./chapters/boundingbox/bbox.js" data-type="cubic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\boundingbox\daad01218ba430e2355d151811aa971b.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/boundingbox/daad01218ba430e2355d151811aa971b.png" loading="lazy" />
|
||||
<label>Cubic Bézier bounding box</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -2431,7 +2431,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
<graphics-element title="Aligning a quadratic curve" width="550" height="275" src="./chapters/aligning/aligning.js" data-type="quadratic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="550px" height="275px" src="images\chapters\aligning\28cc0f129fa0c028a1addd702e99f162.png" loading="lazy" />
|
||||
<img width="550px" height="275px" src="./images/chapters/aligning/28cc0f129fa0c028a1addd702e99f162.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -2439,7 +2439,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
<graphics-element title="Aligning a cubic curve" width="550" height="275" src="./chapters/aligning/aligning.js" data-type="cubic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="550px" height="275px" src="images\chapters\aligning\9a6755a1e31a990e8f072a6da98f811a.png" loading="lazy" />
|
||||
<img width="550px" height="275px" src="./images/chapters/aligning/9a6755a1e31a990e8f072a6da98f811a.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
</section>
|
||||
@@ -2464,14 +2464,14 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\tightbounds\ed91133976018ec032d9115344debb36.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/tightbounds/ed91133976018ec032d9115344debb36.png" loading="lazy" />
|
||||
<label>Aligning a quadratic curve</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
<graphics-element title="Aligning a cubic curve" width="275" height="275" src="./chapters/tightbounds/tightbounds.js" data-type="cubic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\tightbounds\9ee5abc64b3fba71e284c70539279d74.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/tightbounds/9ee5abc64b3fba71e284c70539279d74.png" loading="lazy" />
|
||||
<label>Aligning a cubic curve</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -2605,7 +2605,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
<graphics-element title="Finding cubic Bézier curve inflections" width="275" height="275" src="./chapters/inflections/inflection.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\inflections\726ece45630c43be14589c51f1606bd7.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/inflections/726ece45630c43be14589c51f1606bd7.png" loading="lazy" />
|
||||
<label>Finding cubic Bézier curve inflections</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -2639,7 +2639,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
<graphics-element title="The canonical curve map" width="400" height="400" src="./chapters/canonical/canonical.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\canonical\c086e72bd8aaeab37436515ab251b2df.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/canonical/c086e72bd8aaeab37436515ab251b2df.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -2831,7 +2831,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
<graphics-element title="A cubic curve mapped to canonical form" width="800" height="400" src="./chapters/canonical/interactive.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="800px" height="400px" src="images\chapters\canonical\83fe2473e20ea68b768765129ee44ae4.png" loading="lazy" />
|
||||
<img width="800px" height="400px" src="./images/chapters/canonical/83fe2473e20ea68b768765129ee44ae4.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
</section>
|
||||
@@ -2862,7 +2862,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="550px" height="275px" src="images\chapters\yforx\e469af5bf27a2c27d1dd6fc62a78ac27.png" loading="lazy" />
|
||||
<img width="550px" height="275px" src="./images/chapters/yforx/e469af5bf27a2c27d1dd6fc62a78ac27.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" class="slide-control" />
|
||||
@@ -2909,7 +2909,7 @@ y = curve.get(t).y</code></pre>
|
||||
<graphics-element title="Finding By(t), by finding t for a given x" width="275" height="275" src="./chapters/yforx/yforx.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\yforx\2fc5c57e5d1ed0eaa1655edc31026252.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/yforx/2fc5c57e5d1ed0eaa1655edc31026252.png" loading="lazy" />
|
||||
<label>Finding By(t), by finding t for a given x</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" class="slide-control" />
|
||||
@@ -2971,21 +2971,21 @@ y = curve.get(t).y</code></pre>
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arclength\56533f47e73ad9fea08fa9bb3f597d49.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arclength/56533f47e73ad9fea08fa9bb3f597d49.png" loading="lazy" />
|
||||
<label>A function's approximated integral</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
<graphics-element title="A better approximation" width="275" height="275" src="./chapters/arclength/draw-slices.js" data-steps="24">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arclength\5ce02cbdbc47585c588f2656d5161a32.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arclength/5ce02cbdbc47585c588f2656d5161a32.png" loading="lazy" />
|
||||
<label>A better approximation</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
<graphics-element title="An even better approximation" width="275" height="275" src="./chapters/arclength/draw-slices.js" data-steps="99">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arclength\fe2663b205d14c157a5a02bfbbd55987.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arclength/fe2663b205d14c157a5a02bfbbd55987.png" loading="lazy" />
|
||||
<label>An even better approximation</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3059,7 +3059,7 @@ y = curve.get(t).y</code></pre>
|
||||
<graphics-element title="Arc length for a Bézier curve" width="275" height="275" src="./chapters/arclength/arclength.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arclength\fa4c587126e8097206b88d9ea51974ca.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arclength/fa4c587126e8097206b88d9ea51974ca.png" loading="lazy" />
|
||||
<label>Arc length for a Bézier curve</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3088,7 +3088,7 @@ y = curve.get(t).y</code></pre>
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arclengthapprox\3fc083ea7bdcc6b021560f2f2491f8aa.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arclengthapprox/3fc083ea7bdcc6b021560f2f2491f8aa.png" loading="lazy" />
|
||||
<label>Approximate quadratic curve arc length</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="2" max="24" step="1" value="4" class="slide-control" />
|
||||
@@ -3103,7 +3103,7 @@ y = curve.get(t).y</code></pre>
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arclengthapprox\537260c4aa9e98ffdea7c8120afbd427.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arclengthapprox/537260c4aa9e98ffdea7c8120afbd427.png" loading="lazy" />
|
||||
<label>Approximate cubic curve arc length</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="2" max="32" step="1" value="8" class="slide-control" />
|
||||
@@ -3218,7 +3218,7 @@ y = curve.get(t).y</code></pre>
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\curvature\2398b098e6ac9da9dc109239b49715ed.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/curvature/2398b098e6ac9da9dc109239b49715ed.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -3242,7 +3242,7 @@ y = curve.get(t).y</code></pre>
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\curvature\595e2f3790ef8034631e1cbb0df9c6f6.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/curvature/595e2f3790ef8034631e1cbb0df9c6f6.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="2" step="0.0005" value="0" class="slide-control" />
|
||||
@@ -3274,7 +3274,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">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="550px" height="275px" src="images\chapters\tracing\d6239520389637a3c42e76ee44d86c41.png" loading="lazy" />
|
||||
<img width="550px" height="275px" src="./images/chapters/tracing/d6239520389637a3c42e76ee44d86c41.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -3293,7 +3293,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">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\tracing\1cd7304fb8d044835bfbc305ca5e5d10.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/tracing/1cd7304fb8d044835bfbc305ca5e5d10.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="2" max="24" step="1" value="8" class="slide-control" />
|
||||
@@ -3343,7 +3343,7 @@ y = curve.get(t).y</code></pre>
|
||||
<graphics-element title="Line/line intersections" width="275" height="275" src="./chapters/intersections/line-line.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\b3f61036d8dc9888a6a64a1171583dd1.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/intersections/b3f61036d8dc9888a6a64a1171583dd1.png" loading="lazy" />
|
||||
<label>Line/line intersections</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3392,7 +3392,7 @@ lli = function(line1, line2):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\9b70fb7b03f082882515e55c0a1eacff.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/intersections/9b70fb7b03f082882515e55c0a1eacff.png" loading="lazy" />
|
||||
<label>Quadratic curve/line intersections</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3405,7 +3405,7 @@ lli = function(line1, line2):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\7196d3dec75d53f5df9d9c832ac3c493.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/intersections/7196d3dec75d53f5df9d9c832ac3c493.png" loading="lazy" />
|
||||
<label>Cubic curve/line intersections</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3473,7 +3473,7 @@ lli = function(line1, line2):
|
||||
<graphics-element title="Curve/curve intersections" width="825" height="275" src="./chapters/curveintersection/curve-curve.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\curveintersection\b155682162a5b6da6d40c7b531164a7e.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/curveintersection/b155682162a5b6da6d40c7b531164a7e.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<button class="next">Advance one step</button>
|
||||
@@ -3522,7 +3522,7 @@ lli = function(line1, line2):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\abc\7a69dd4350ddda5701712e1d3b46b863.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/abc/7a69dd4350ddda5701712e1d3b46b863.png" loading="lazy" />
|
||||
<label>Projections in a quadratic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.5" class="slide-control" />
|
||||
@@ -3537,7 +3537,7 @@ lli = function(line1, line2):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\abc\eeec7cf16fb22c666e0143a3a030731f.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/abc/eeec7cf16fb22c666e0143a3a030731f.png" loading="lazy" />
|
||||
<label>Projections in a cubic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.5" class="slide-control" />
|
||||
@@ -3649,7 +3649,7 @@ lli = function(line1, line2):
|
||||
<graphics-element title="Fitting a quadratic Bézier curve" width="275" height="275" src="./chapters/pointcurves/quadratic.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\pointcurves\067a3df30e32708fc0d13f8eb78c0b05.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/pointcurves/067a3df30e32708fc0d13f8eb78c0b05.png" loading="lazy" />
|
||||
<label>Fitting a quadratic Bézier curve</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3669,7 +3669,7 @@ lli = function(line1, line2):
|
||||
<graphics-element title="Finding a circle through three points" width="275" height="275" src="./chapters/pointcurves/circle.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\pointcurves\43875f6ad588bfd04cdb65b591a62052.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/pointcurves/43875f6ad588bfd04cdb65b591a62052.png" loading="lazy" />
|
||||
<label>Finding a circle through three points</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3725,7 +3725,7 @@ lli = function(line1, line2):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\pointcurves\75f7b5b31e98444e13f17e5c3e5b7322.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/pointcurves/75f7b5b31e98444e13f17e5c3e5b7322.png" loading="lazy" />
|
||||
<label>Finding the cubic e₁ and e₂ given three points </label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3740,7 +3740,7 @@ lli = function(line1, line2):
|
||||
<graphics-element title="Fitting a quadratic Bézier curve" width="275" height="275" src="./chapters/pointcurves/cubic.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\pointcurves\eab6ea46fa93030e03ec0ef7deb571dc.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/pointcurves/eab6ea46fa93030e03ec0ef7deb571dc.png" loading="lazy" />
|
||||
<label>Fitting a quadratic Bézier curve</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3811,7 +3811,7 @@ for (coordinate, index) in LUT:
|
||||
<graphics-element title="Projecting a point onto a Bézier curve" width="400" height="400" src="./chapters/projections/project.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\projections\3cc334d0ebc01cc5352e23ed47bc5414.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/projections/3cc334d0ebc01cc5352e23ed47bc5414.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
</section>
|
||||
@@ -3842,7 +3842,7 @@ for (coordinate, index) in LUT:
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\molding\aefb177e5532a9f995b9d88e85582c68.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/molding/aefb177e5532a9f995b9d88e85582c68.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -3861,7 +3861,7 @@ for (coordinate, index) in LUT:
|
||||
<graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\molding\834af194de17a5eb2c1920773ab904e3.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/molding/834af194de17a5eb2c1920773ab904e3.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -3885,7 +3885,7 @@ for (coordinate, index) in LUT:
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\molding\cdf7515d133cbf41ffbaea8c488e0924.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/molding/cdf7515d133cbf41ffbaea8c488e0924.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="10" max="200" step="1" value="100" class="slide-control" />
|
||||
@@ -4225,7 +4225,7 @@ for (coordinate, index) in LUT:
|
||||
<graphics-element title="Fitting a Bézier curve" width="550" height="275" src="./chapters/curvefitting/curve-fitting.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="550px" height="275px" src="images\chapters\curvefitting\798f3d7151dfb2887c7881a08e65cdd3.png" loading="lazy" />
|
||||
<img width="550px" height="275px" src="./images/chapters/curvefitting/798f3d7151dfb2887c7881a08e65cdd3.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<button class="toggle">toggle</button>
|
||||
@@ -4257,7 +4257,7 @@ for (coordinate, index) in LUT:
|
||||
<graphics-element title="A Catmull-Rom curve" width="275" height="275" src="./chapters/catmullconv/catmull-rom.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\catmullconv\aa46749b9469341d9249ca452390d875.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/catmullconv/aa46749b9469341d9249ca452390d875.png" loading="lazy" />
|
||||
<label>A Catmull-Rom curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0.1" max="1" step="0.01" value="0.5" class="slide-control tension" />
|
||||
@@ -4631,7 +4631,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\41522a397171423e8a465dc8c74f6e87.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/41522a397171423e8a465dc8c74f6e87.png" loading="lazy" />
|
||||
<label>Unlinked quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4645,7 +4645,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\6fb33629373d7a731b6ac3f5365cb9f0.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/6fb33629373d7a731b6ac3f5365cb9f0.png" loading="lazy" />
|
||||
<label>Unlinked cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4677,7 +4677,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\db04f805f42bdc9a1b7ec4d6b401d853.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/db04f805f42bdc9a1b7ec4d6b401d853.png" loading="lazy" />
|
||||
<label>Connected quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4691,7 +4691,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\fe41b628f46f7035d151a8210d30111f.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/fe41b628f46f7035d151a8210d30111f.png" loading="lazy" />
|
||||
<label>Connected cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4720,7 +4720,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\777f3814965c39ec3cdbb13eab0c4eeb.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/777f3814965c39ec3cdbb13eab0c4eeb.png" loading="lazy" />
|
||||
<label>Angularly connected quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4734,7 +4734,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\f6c55cbc66333b6630939f67fc20e086.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/f6c55cbc66333b6630939f67fc20e086.png" loading="lazy" />
|
||||
<label>Angularly connected cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4758,7 +4758,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\b3aebf7803f4430187c249a891095062.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/b3aebf7803f4430187c249a891095062.png" loading="lazy" />
|
||||
<label>Standard connected quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4772,7 +4772,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\1b94c6ada011bd8e50330e31a851a62e.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/1b94c6ada011bd8e50330e31a851a62e.png" loading="lazy" />
|
||||
<label>Standard connected cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4930,7 +4930,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\offsetting\03b8e0849e7c8ba64d8c076f47fe2ec7.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/offsetting/03b8e0849e7c8ba64d8c076f47fe2ec7.png" loading="lazy" />
|
||||
<label>Offsetting a quadratic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
|
||||
@@ -4945,7 +4945,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\offsetting\4c4738b6bf9f83eded12d680a29e337b.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/offsetting/4c4738b6bf9f83eded12d680a29e337b.png" loading="lazy" />
|
||||
<label>Offsetting a cubic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
|
||||
@@ -4997,7 +4997,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\graduatedoffset\8cc724d5343c65685d88c92b2d069a2a.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/graduatedoffset/8cc724d5343c65685d88c92b2d069a2a.png" loading="lazy" />
|
||||
<label>Offsetting a quadratic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
|
||||
@@ -5012,7 +5012,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\graduatedoffset\17bf62e05a1fc3387b0c210f2decff45.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/graduatedoffset/17bf62e05a1fc3387b0c210f2decff45.png" loading="lazy" />
|
||||
<label>Offsetting a cubic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
|
||||
@@ -5050,7 +5050,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="Quadratic Bézier arc approximation" width="400" height="400" src="./chapters/circles/arc-approximation.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\circles\08ca09aacb271735e063e7e8d941a195.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/circles/08ca09aacb271735e063e7e8d941a195.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control" />
|
||||
@@ -5175,7 +5175,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="Cubic Bézier arc approximation" width="400" height="400" src="./chapters/circles_cubic/arc-approximation.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\circles_cubic\ecacec0eb2bbe72e14b9008d854fbb06.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/circles_cubic/ecacec0eb2bbe72e14b9008d854fbb06.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control" />
|
||||
@@ -5409,7 +5409,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="Cubic Bézier circle approximation" width="340" height="300" src="./chapters/circles_cubic/circle.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="340px" height="300px" src="images\chapters\circles_cubic\63f35fb58d3571200ac6ccea0384b9d7.png" loading="lazy" />
|
||||
<img width="340px" height="300px" src="./images/chapters/circles_cubic/63f35fb58d3571200ac6ccea0384b9d7.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
</section>
|
||||
@@ -5488,7 +5488,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="First arc approximation of a Bézier curve" width="275" height="275" src="./chapters/arcapproximation/arc.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arcapproximation\7c9cce8142fa3e85bb124520f40645ff.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arcapproximation/7c9cce8142fa3e85bb124520f40645ff.png" loading="lazy" />
|
||||
<label>First arc approximation of a Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0.1" max="5" step="0.1" value="0.5" class="slide-control" />
|
||||
@@ -5503,7 +5503,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="Arc approximation of a Bézier curve" width="275" height="275" src="./chapters/arcapproximation/arcs.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arcapproximation\da76341b841df1af8a39f797e85dfe3c.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arcapproximation/da76341b841df1af8a39f797e85dfe3c.png" loading="lazy" />
|
||||
<label>Arc approximation of a Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0.1" max="5" step="0.1" value="0.5" class="slide-control" />
|
||||
@@ -5548,7 +5548,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="A B-Spline example" width="600" height="300" src="./chapters/bsplines/basic.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="600px" height="300px" src="images\chapters\bsplines\fe3a8ca5706f286d916e36699e237e51.png" loading="lazy" />
|
||||
<img width="600px" height="300px" src="./images/chapters/bsplines/fe3a8ca5706f286d916e36699e237e51.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -5570,7 +5570,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="The components of a B-Spline " width="600" height="300" src="./chapters/bsplines/basic.js" data-show-curves="true">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="600px" height="300px" src="images\chapters\bsplines\41167c64c51386414c6e62f0b45e6295.png" loading="lazy" />
|
||||
<img width="600px" height="300px" src="./images/chapters/bsplines/41167c64c51386414c6e62f0b45e6295.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<!-- basis curve highlighter goes here -->
|
||||
@@ -5741,7 +5741,7 @@ for(let L = 1; L <= order; L++) {
|
||||
<graphics-element title="A uniform B-Spline" width="400" height="400" src="./chapters/bsplines/uniform.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\bsplines\48a30189e74658737b3a8b28bb816f8a.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/bsplines/48a30189e74658737b3a8b28bb816f8a.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<!-- knot sliders go here -->
|
||||
@@ -5766,7 +5766,7 @@ for(let L = 1; L <= order; L++) {
|
||||
<graphics-element title="A reduced uniform B-Spline" width="400" height="400" src="./chapters/bsplines/reduced.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\bsplines\ceaef2fbee05a58aa11835925403b4cd.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/bsplines/ceaef2fbee05a58aa11835925403b4cd.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<!-- knot sliders go here -->
|
||||
@@ -5787,7 +5787,7 @@ for(let L = 1; L <= order; L++) {
|
||||
<graphics-element title="An open, uniform B-Spline" width="400" height="400" src="./chapters/bsplines/uniform.js" data-open="true">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\bsplines\0215dc106e4ad51afe043c0176a595f6.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/bsplines/0215dc106e4ad51afe043c0176a595f6.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<!-- knot sliders go here -->
|
||||
@@ -5810,7 +5810,7 @@ for(let L = 1; L <= order; L++) {
|
||||
<graphics-element title="A (closed) rational, uniform B-Spline" width="400" height="400" src="./chapters/bsplines/rational-uniform.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\bsplines\0d9c2186423466a32bb8fbd187409f82.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/bsplines/0d9c2186423466a32bb8fbd187409f82.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<!-- knot sliders go here -->
|
||||
|
||||
@@ -231,6 +231,7 @@ The following is the list of API functions that can be used to draw... whatever
|
||||
|
||||
- `this.width` the width of the graphic
|
||||
- `this.height` the height of the graphic
|
||||
- `this.frame` the current frame (i.e. the number of times `draw()` has run)
|
||||
- `this.panelWidth` the width of a single panel in the graphic, only meaningful in conjunction with `setPanelWidth` (see below)
|
||||
- `this.parameters` the collection of externally passed parameters (via HTML: `data-...` attributes, via JS: a key/value object)
|
||||
- `this.cursor` represents the current mouse/touch cursor state
|
||||
|
||||
@@ -77,6 +77,7 @@ class BaseAPI {
|
||||
this.addListeners();
|
||||
this.setSize(width, height);
|
||||
this.currentPoint = false;
|
||||
this.frame = 0;
|
||||
this.setup();
|
||||
this.draw();
|
||||
}
|
||||
@@ -175,7 +176,6 @@ class BaseAPI {
|
||||
this.stopEvent(evt);
|
||||
this.cursor.down = false;
|
||||
this.cursor.move = false;
|
||||
this.getCursorCoords(evt);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -244,6 +244,7 @@ class BaseAPI {
|
||||
* This is the draw (loop) function.
|
||||
*/
|
||||
draw() {
|
||||
this.frame++;
|
||||
// console.log(`draw`);
|
||||
}
|
||||
|
||||
|
||||
@@ -107,11 +107,15 @@ class GraphicsAPI extends BaseAPI {
|
||||
for (let i = 0, e = this.movable.length, p; i < e; i++) {
|
||||
p = this.movable[i];
|
||||
if (new Vector(p).dist(this.cursor) <= 5) {
|
||||
this.setCursor(this.HAND);
|
||||
if (this.canvas.style.cursor !== `none`) {
|
||||
this.setCursor(this.HAND);
|
||||
}
|
||||
return; // NOTE: this is a return, not a break!
|
||||
}
|
||||
}
|
||||
this.setCursor(this.POINTER);
|
||||
if (this.canvas.style.cursor !== `none`) {
|
||||
this.setCursor(this.POINTER);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
<meta property="og:locale" content="en-GB" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:published_time" content="2020-09-18T12:00:00+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-22T11:58:20+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-23T03:29:44+00:00" />
|
||||
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
|
||||
<meta property="og:section" content="Bézier Curves" />
|
||||
<meta property="og:tag" content="Bézier Curves" />
|
||||
@@ -142,13 +142,33 @@
|
||||
<li>Essentially reinventing (a limited form of) Processing.js</li>
|
||||
<li>Writing a custom build system, because I'm exhausted with Webpack and hope to never use it again.</li>
|
||||
<li>Using modern ES module code that runs in both the browser and Node.js.</li>
|
||||
<li>Chapter content written as easy to read and write markdown format.</li>
|
||||
<li>
|
||||
Chapter content written as easy to read and write markdown format: <a href="./news/2020-09-18.md">view this blog post's source file</a>.
|
||||
</li>
|
||||
<li>A custom <code><graphics-element></code> element that turns a <code>src="blah.js"</code> into an interactive canvas graphic...</li>
|
||||
<li>...with that same source code being read in and run by Node.js <em>on a canvas</em> to generate fallback images.</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<graphics-element title="An example graphic" width="275" height="275" src="./news/example.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="./images/news/2020-09-18.html/b465a1526a406578c9806a9985e2dbd0.png" loading="lazy" />
|
||||
<label>An example graphic</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
</blockquote>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
Real LaTeX code, that gets compiled into optimized SVG using <code>xelatex</code>, <code>pdfcrop</code>, <code>pdf2svg</code>, and
|
||||
<code>svgo</code>.
|
||||
<code>svgo</code>:
|
||||
</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<img class="LaTeX SVG" src="./images/news/2020-09-18.html/24b6ead799277b0d73687d2fc5532a84.svg" width="401px" height="97px" loading="lazy" />
|
||||
</blockquote>
|
||||
|
||||
<ul>
|
||||
<li>"Lazy loaded everything", so that you get what you need, only when or even just before you need it.</li>
|
||||
<li>Localized content based on a simple filenaming scheme.</li>
|
||||
<li>Nicely formatted HTML, CSS, and JS thanks to <code>prettier</code>.</li>
|
||||
|
||||
@@ -13,10 +13,26 @@ To give a bit of a teaser, some of the things I'll be writing about:
|
||||
- Essentially reinventing (a limited form of) Processing.js
|
||||
- Writing a custom build system, because I'm exhausted with Webpack and hope to never use it again.
|
||||
- Using modern ES module code that runs in both the browser and Node.js.
|
||||
- Chapter content written as easy to read and write markdown format.
|
||||
- A custom `<graphics-element>` element that turns a `src="blah.js"` into an interactive canvas graphic...
|
||||
- Chapter content written as easy to read and write markdown format: <a href="./news/2020-09-18.md">view this blog post's source file</a>.
|
||||
- A custom `<graphics-element>` element that turns a `src="blah.js"` into an interactive canvas graphic...
|
||||
- ...with that same source code being read in and run by Node.js _on a canvas_ to generate fallback images.
|
||||
- Real LaTeX code, that gets compiled into optimized SVG using `xelatex`, `pdfcrop`, `pdf2svg`, and `svgo`.
|
||||
|
||||
<blockquote>
|
||||
<graphics-element title="An example graphic" src="./example.js"></graphics-element>
|
||||
</blockquote>
|
||||
|
||||
- Real LaTeX code, that gets compiled into optimized SVG using `xelatex`, `pdfcrop`, `pdf2svg`, and `svgo`:
|
||||
|
||||
<blockquote>
|
||||
\[
|
||||
\begin{aligned}
|
||||
B(t)_{cubic} &= \sum^{n=3}_{k=0}{\ P_{{}_k} \binom{n}{k}(1-t)^{n-k}t^k} \\
|
||||
\\
|
||||
&= P_{{}_0} (1-t)^3 + 3 P_{{}_1}(1-t)^2t + 3P_{{}_2}(1-t)t^2 + P_{{}_3} t^3
|
||||
\end{aligned}
|
||||
\]
|
||||
</blockquote>
|
||||
|
||||
- "Lazy loaded everything", so that you get what you need, only when or even just before you need it.
|
||||
- Localized content based on a simple filenaming scheme.
|
||||
- Nicely formatted HTML, CSS, and JS thanks to `prettier`.
|
||||
|
||||
33
docs/news/example.js
Normal file
33
docs/news/example.js
Normal file
@@ -0,0 +1,33 @@
|
||||
let bg = `pink`;
|
||||
|
||||
setup() {
|
||||
setGrid(30, `red`);
|
||||
setCursor(`none`);
|
||||
setTextStroke(`white`, 4);
|
||||
setFontSize(18);
|
||||
}
|
||||
|
||||
draw() {
|
||||
clear(bg);
|
||||
setColor(`#30F0D0`);
|
||||
circle(this.cursor.x, this.cursor.y, 5);
|
||||
setColor(`black`);
|
||||
text(`Frame ${this.frame}`, this.width/2, this.height/2, CENTER);
|
||||
}
|
||||
|
||||
onMouseDown() {
|
||||
bg = 'salmon';
|
||||
redraw();
|
||||
}
|
||||
|
||||
onMouseMove() {
|
||||
if(this.cursor.down) {
|
||||
bg = 'orange';
|
||||
}
|
||||
redraw();
|
||||
}
|
||||
|
||||
onMouseUp() {
|
||||
bg = 'pink';
|
||||
redraw();
|
||||
}
|
||||
@@ -27,10 +27,27 @@
|
||||
<li>Essentially reinventing (a limited form of) Processing.js</li>
|
||||
<li>Writing a custom build system, because I'm exhausted with Webpack and hope to never use it again.</li>
|
||||
<li>Using modern ES module code that runs in both the browser and Node.js.</li>
|
||||
<li>Chapter content written as easy to read and write markdown format.</li>
|
||||
<li>Chapter content written as easy to read and write markdown format: <a href="./news/2020-09-18.md">view this blog post's source file</a>.</li>
|
||||
<li>A custom <code>&lt;graphics-element&gt;</code> element that turns a <code>src="blah.js"</code> into an interactive canvas graphic...</li>
|
||||
<li>...with that same source code being read in and run by Node.js <em>on a canvas</em> to generate fallback images.</li>
|
||||
<li>Real LaTeX code, that gets compiled into optimized SVG using <code>xelatex</code>, <code>pdfcrop</code>, <code>pdf2svg</code>, and <code>svgo</code>.</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<graphics-element title="An example graphic" width="275" height="275" src="./news/example.js" >
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="./images/news/2020-09-18.html/b465a1526a406578c9806a9985e2dbd0.png" loading="lazy">
|
||||
<label>An example graphic</label>
|
||||
</fallback-image></graphics-element>
|
||||
</blockquote>
|
||||
|
||||
<ul>
|
||||
<li>Real LaTeX code, that gets compiled into optimized SVG using <code>xelatex</code>, <code>pdfcrop</code>, <code>pdf2svg</code>, and <code>svgo</code>:</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<img class="LaTeX SVG" src="./images/news/2020-09-18.html/24b6ead799277b0d73687d2fc5532a84.svg" width="401px" height="97px" loading="lazy">
|
||||
</blockquote>
|
||||
|
||||
<ul>
|
||||
<li>"Lazy loaded everything", so that you get what you need, only when or even just before you need it.</li>
|
||||
<li>Localized content based on a simple filenaming scheme.</li>
|
||||
<li>Nicely formatted HTML, CSS, and JS thanks to <code>prettier</code>.</li>
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
<meta property="og:locale" content="zh-CN" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-22T11:58:20+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-23T03:29:44+00:00" />
|
||||
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
|
||||
<meta property="og:section" content="Bézier Curves" />
|
||||
<meta property="og:tag" content="Bézier Curves" />
|
||||
@@ -418,14 +418,14 @@
|
||||
<graphics-element title="二次贝塞尔曲线" width="275" height="275" src="./chapters/introduction/quadratic.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\introduction\54e9ec0600ac436b0e6f0c6b5005cf03.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/introduction/54e9ec0600ac436b0e6f0c6b5005cf03.png" loading="lazy" />
|
||||
<label>二次贝塞尔曲线</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
<graphics-element title="三次贝塞尔曲线" width="275" height="275" src="./chapters/introduction/cubic.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\introduction\8d158a13e9a86969b99c64057644cbc6.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/introduction/8d158a13e9a86969b99c64057644cbc6.png" loading="lazy" />
|
||||
<label>三次贝塞尔曲线</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -456,7 +456,7 @@
|
||||
<graphics-element title="Linear Interpolation leading to Bézier curves" width="825" height="275" src="./chapters/whatis/interpolation.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\whatis\524dd296e96c0fe2281fb95146f8ea65.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/whatis/524dd296e96c0fe2281fb95146f8ea65.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="10" max="90" step="1" value="25" class="slide-control" />
|
||||
@@ -503,7 +503,7 @@
|
||||
<graphics-element title="(一部分的)圆: x=sin(t), y=cos(t)" width="275" height="275" src="./chapters/explanation/circle.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\explanation\959762e39ae32407e914a687d804ff3a.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/explanation/959762e39ae32407e914a687d804ff3a.png" loading="lazy" />
|
||||
<label>(一部分的)圆: x=sin(t), y=cos(t)</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="10" step="0.1" value="5" class="slide-control" />
|
||||
@@ -639,7 +639,7 @@ function Bezier(3,t):
|
||||
<graphics-element title="二次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\control\f700cd59e6021b0e06b819105ec931da.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/control/f700cd59e6021b0e06b819105ec931da.png" loading="lazy" />
|
||||
<label>二次插值</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
|
||||
@@ -648,7 +648,7 @@ function Bezier(3,t):
|
||||
<graphics-element title="三次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\control\4b206c16ccf8a06a0834fe9e5254560c.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/control/4b206c16ccf8a06a0834fe9e5254560c.png" loading="lazy" />
|
||||
<label>三次插值</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
|
||||
@@ -657,7 +657,7 @@ function Bezier(3,t):
|
||||
<graphics-element title="15次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="15">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\control\be82cd31c4892a8f0582b1b5285231d9.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/control/be82cd31c4892a8f0582b1b5285231d9.png" loading="lazy" />
|
||||
<label>15次插值</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
|
||||
@@ -752,7 +752,7 @@ function Bezier(3,t,w[]):
|
||||
<graphics-element title="Our rational cubic Bézier curve" width="275" height="275" src="./chapters/weightcontrol/rational.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\weightcontrol\3d71e2b9373684eebcb0dc8563f70b18.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/weightcontrol/3d71e2b9373684eebcb0dc8563f70b18.png" loading="lazy" />
|
||||
<label>Our rational cubic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0.01" max="2" value="1" step="0.01" class="ratio-1" />
|
||||
@@ -829,14 +829,14 @@ function RationalBezier(3,t,w[],r[]):
|
||||
<graphics-element title="二次无限区间贝塞尔曲线" width="275" height="275" src="./chapters/extended/extended.js" data-type="quadratic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\extended\37948bde4bf0d25bde85f172bf55b9fb.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/extended/37948bde4bf0d25bde85f172bf55b9fb.png" loading="lazy" />
|
||||
<label>二次无限区间贝塞尔曲线</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
<graphics-element title="三次无限区间贝塞尔曲线" width="275" height="275" src="./chapters/extended/extended.js" data-type="cubic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\extended\2d17acb381ebdd28f0ff43be00d723c4.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/extended/2d17acb381ebdd28f0ff43be00d723c4.png" loading="lazy" />
|
||||
<label>三次无限区间贝塞尔曲线</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -919,7 +919,7 @@ function RationalBezier(3,t,w[],r[]):
|
||||
<graphics-element title="用de Casteljau算法来遍历曲线" width="275" height="275" src="./chapters/decasteljau/decasteljau.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\decasteljau\df92f529841f39decf9ad62b0967855a.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/decasteljau/df92f529841f39decf9ad62b0967855a.png" loading="lazy" />
|
||||
<label>用de Casteljau算法来遍历曲线</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
|
||||
@@ -968,7 +968,7 @@ function RationalBezier(3,t,w[],r[]):
|
||||
<graphics-element title="拉平一条二次曲线" width="275" height="275" src="./chapters/flattening/flatten.js" data-type="quadratic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\flattening\6813bfc608aea11df1dda444b9f18123.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/flattening/6813bfc608aea11df1dda444b9f18123.png" loading="lazy" />
|
||||
<label>拉平一条二次曲线</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="1" max="16" step="1" value="4" class="slide-control" />
|
||||
@@ -977,7 +977,7 @@ function RationalBezier(3,t,w[],r[]):
|
||||
<graphics-element title="拉平一条三次曲线" width="275" height="275" src="./chapters/flattening/flatten.js" data-type="cubic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\flattening\0e0e4a2ee46bd89bcfde9f75cfe43292.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/flattening/0e0e4a2ee46bd89bcfde9f75cfe43292.png" loading="lazy" />
|
||||
<label>拉平一条三次曲线</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="1" max="24" step="1" value="8" class="slide-control" />
|
||||
@@ -1021,7 +1021,7 @@ function RationalBezier(3,t,w[],r[]):
|
||||
<graphics-element title="分割一条曲线" width="825" height="275" src="./chapters/splitting/splitting.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\splitting\fce5eb16dfcd103797c5e17bd77f1437.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/splitting/fce5eb16dfcd103797c5e17bd77f1437.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.5" class="slide-control" />
|
||||
@@ -1456,7 +1456,7 @@ function drawCurve(points[], t):
|
||||
<graphics-element title="A variable-order Bézier curve" width="275" height="275" src="./chapters/reordering/reorder.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\reordering\c4874e1205aabe624e5504abe154eae9.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/reordering/c4874e1205aabe624e5504abe154eae9.png" loading="lazy" />
|
||||
<label>A variable-order Bézier curve</label>
|
||||
</fallback-image>
|
||||
<button class="raise">raise</button>
|
||||
@@ -1735,7 +1735,7 @@ function drawCurve(points[], t):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\pointvectors\f1b4e81d22f4c44d4618b0f55a1a88c5.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/pointvectors/f1b4e81d22f4c44d4618b0f55a1a88c5.png" loading="lazy" />
|
||||
<label>Quadratic Bézier tangents and normals</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -1748,7 +1748,7 @@ function drawCurve(points[], t):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\pointvectors\5863bd013ad6594f63f8dfa51ff4adc0.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/pointvectors/5863bd013ad6594f63f8dfa51ff4adc0.png" loading="lazy" />
|
||||
<label>Cubic Bézier tangents and normals</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -1822,7 +1822,7 @@ function drawCurve(points[], t):
|
||||
<graphics-element title="Some known and unknown vectors" width="350" height="300" src="./chapters/pointvectors3d/frenet.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="350px" height="300px" src="images\chapters\pointvectors3d\11c1da2357004bb51cf0c591fc492115.png" loading="lazy" />
|
||||
<img width="350px" height="300px" src="./images/chapters/pointvectors3d/11c1da2357004bb51cf0c591fc492115.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
|
||||
@@ -1934,7 +1934,7 @@ function drawCurve(points[], t):
|
||||
<graphics-element title="Some known and unknown vectors" width="350" height="300" src="./chapters/pointvectors3d/rotation-minimizing.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="350px" height="300px" src="images\chapters\pointvectors3d\f4a2fa1e0204c890b2bff07228ba678d.png" loading="lazy" />
|
||||
<img width="350px" height="300px" src="./images/chapters/pointvectors3d/f4a2fa1e0204c890b2bff07228ba678d.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
|
||||
@@ -1983,7 +1983,7 @@ function drawCurve(points[], t):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\components\1e6e38f6403dbe4c8b80295a94fc6748.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/components/1e6e38f6403dbe4c8b80295a94fc6748.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -1997,7 +1997,7 @@ function drawCurve(points[], t):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\components\348694339257428a260144da4bbf80fc.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/components/348694339257428a260144da4bbf80fc.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
</section>
|
||||
@@ -2297,7 +2297,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\extremities\fd68347a917c9b703ff8005287ac6ca4.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/extremities/fd68347a917c9b703ff8005287ac6ca4.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -2311,7 +2311,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\extremities\fbfe9464c9653f5efcd04411e683faf9.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/extremities/fbfe9464c9653f5efcd04411e683faf9.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
</section>
|
||||
@@ -2348,14 +2348,14 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\boundingbox\12ec4a5039de2e2cc06611db5e826282.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/boundingbox/12ec4a5039de2e2cc06611db5e826282.png" loading="lazy" />
|
||||
<label>Quadratic Bézier bounding box</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
<graphics-element title="Cubic Bézier bounding box" width="275" height="275" src="./chapters/boundingbox/bbox.js" data-type="cubic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\boundingbox\daad01218ba430e2355d151811aa971b.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/boundingbox/daad01218ba430e2355d151811aa971b.png" loading="lazy" />
|
||||
<label>Cubic Bézier bounding box</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -2403,7 +2403,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
<graphics-element title="Aligning a quadratic curve" width="550" height="275" src="./chapters/aligning/aligning.js" data-type="quadratic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="550px" height="275px" src="images\chapters\aligning\28cc0f129fa0c028a1addd702e99f162.png" loading="lazy" />
|
||||
<img width="550px" height="275px" src="./images/chapters/aligning/28cc0f129fa0c028a1addd702e99f162.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -2411,7 +2411,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
<graphics-element title="Aligning a cubic curve" width="550" height="275" src="./chapters/aligning/aligning.js" data-type="cubic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="550px" height="275px" src="images\chapters\aligning\9a6755a1e31a990e8f072a6da98f811a.png" loading="lazy" />
|
||||
<img width="550px" height="275px" src="./images/chapters/aligning/9a6755a1e31a990e8f072a6da98f811a.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
</section>
|
||||
@@ -2436,14 +2436,14 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\tightbounds\ed91133976018ec032d9115344debb36.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/tightbounds/ed91133976018ec032d9115344debb36.png" loading="lazy" />
|
||||
<label>Aligning a quadratic curve</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
<graphics-element title="Aligning a cubic curve" width="275" height="275" src="./chapters/tightbounds/tightbounds.js" data-type="cubic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\tightbounds\9ee5abc64b3fba71e284c70539279d74.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/tightbounds/9ee5abc64b3fba71e284c70539279d74.png" loading="lazy" />
|
||||
<label>Aligning a cubic curve</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -2577,7 +2577,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
<graphics-element title="Finding cubic Bézier curve inflections" width="275" height="275" src="./chapters/inflections/inflection.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\inflections\726ece45630c43be14589c51f1606bd7.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/inflections/726ece45630c43be14589c51f1606bd7.png" loading="lazy" />
|
||||
<label>Finding cubic Bézier curve inflections</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -2611,7 +2611,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
<graphics-element title="The canonical curve map" width="400" height="400" src="./chapters/canonical/canonical.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\canonical\c086e72bd8aaeab37436515ab251b2df.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/canonical/c086e72bd8aaeab37436515ab251b2df.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -2803,7 +2803,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
<graphics-element title="A cubic curve mapped to canonical form" width="800" height="400" src="./chapters/canonical/interactive.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="800px" height="400px" src="images\chapters\canonical\83fe2473e20ea68b768765129ee44ae4.png" loading="lazy" />
|
||||
<img width="800px" height="400px" src="./images/chapters/canonical/83fe2473e20ea68b768765129ee44ae4.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
</section>
|
||||
@@ -2834,7 +2834,7 @@ function getCubicRoots(pa, pb, pc, pd) {
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="550px" height="275px" src="images\chapters\yforx\e469af5bf27a2c27d1dd6fc62a78ac27.png" loading="lazy" />
|
||||
<img width="550px" height="275px" src="./images/chapters/yforx/e469af5bf27a2c27d1dd6fc62a78ac27.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" class="slide-control" />
|
||||
@@ -2881,7 +2881,7 @@ y = curve.get(t).y</code></pre>
|
||||
<graphics-element title="Finding By(t), by finding t for a given x" width="275" height="275" src="./chapters/yforx/yforx.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\yforx\2fc5c57e5d1ed0eaa1655edc31026252.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/yforx/2fc5c57e5d1ed0eaa1655edc31026252.png" loading="lazy" />
|
||||
<label>Finding By(t), by finding t for a given x</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" class="slide-control" />
|
||||
@@ -2943,21 +2943,21 @@ y = curve.get(t).y</code></pre>
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arclength\56533f47e73ad9fea08fa9bb3f597d49.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arclength/56533f47e73ad9fea08fa9bb3f597d49.png" loading="lazy" />
|
||||
<label>A function's approximated integral</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
<graphics-element title="A better approximation" width="275" height="275" src="./chapters/arclength/draw-slices.js" data-steps="24">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arclength\5ce02cbdbc47585c588f2656d5161a32.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arclength/5ce02cbdbc47585c588f2656d5161a32.png" loading="lazy" />
|
||||
<label>A better approximation</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
<graphics-element title="An even better approximation" width="275" height="275" src="./chapters/arclength/draw-slices.js" data-steps="99">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arclength\fe2663b205d14c157a5a02bfbbd55987.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arclength/fe2663b205d14c157a5a02bfbbd55987.png" loading="lazy" />
|
||||
<label>An even better approximation</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3031,7 +3031,7 @@ y = curve.get(t).y</code></pre>
|
||||
<graphics-element title="Arc length for a Bézier curve" width="275" height="275" src="./chapters/arclength/arclength.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arclength\fa4c587126e8097206b88d9ea51974ca.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arclength/fa4c587126e8097206b88d9ea51974ca.png" loading="lazy" />
|
||||
<label>Arc length for a Bézier curve</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3060,7 +3060,7 @@ y = curve.get(t).y</code></pre>
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arclengthapprox\3fc083ea7bdcc6b021560f2f2491f8aa.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arclengthapprox/3fc083ea7bdcc6b021560f2f2491f8aa.png" loading="lazy" />
|
||||
<label>Approximate quadratic curve arc length</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="2" max="24" step="1" value="4" class="slide-control" />
|
||||
@@ -3075,7 +3075,7 @@ y = curve.get(t).y</code></pre>
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arclengthapprox\537260c4aa9e98ffdea7c8120afbd427.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arclengthapprox/537260c4aa9e98ffdea7c8120afbd427.png" loading="lazy" />
|
||||
<label>Approximate cubic curve arc length</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="2" max="32" step="1" value="8" class="slide-control" />
|
||||
@@ -3190,7 +3190,7 @@ y = curve.get(t).y</code></pre>
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\curvature\2398b098e6ac9da9dc109239b49715ed.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/curvature/2398b098e6ac9da9dc109239b49715ed.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -3214,7 +3214,7 @@ y = curve.get(t).y</code></pre>
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\curvature\595e2f3790ef8034631e1cbb0df9c6f6.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/curvature/595e2f3790ef8034631e1cbb0df9c6f6.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="2" step="0.0005" value="0" class="slide-control" />
|
||||
@@ -3246,7 +3246,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">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="550px" height="275px" src="images\chapters\tracing\d6239520389637a3c42e76ee44d86c41.png" loading="lazy" />
|
||||
<img width="550px" height="275px" src="./images/chapters/tracing/d6239520389637a3c42e76ee44d86c41.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -3265,7 +3265,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">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\tracing\1cd7304fb8d044835bfbc305ca5e5d10.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/tracing/1cd7304fb8d044835bfbc305ca5e5d10.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="2" max="24" step="1" value="8" class="slide-control" />
|
||||
@@ -3315,7 +3315,7 @@ y = curve.get(t).y</code></pre>
|
||||
<graphics-element title="Line/line intersections" width="275" height="275" src="./chapters/intersections/line-line.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\b3f61036d8dc9888a6a64a1171583dd1.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/intersections/b3f61036d8dc9888a6a64a1171583dd1.png" loading="lazy" />
|
||||
<label>Line/line intersections</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3364,7 +3364,7 @@ lli = function(line1, line2):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\9b70fb7b03f082882515e55c0a1eacff.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/intersections/9b70fb7b03f082882515e55c0a1eacff.png" loading="lazy" />
|
||||
<label>Quadratic curve/line intersections</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3377,7 +3377,7 @@ lli = function(line1, line2):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\intersections\7196d3dec75d53f5df9d9c832ac3c493.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/intersections/7196d3dec75d53f5df9d9c832ac3c493.png" loading="lazy" />
|
||||
<label>Cubic curve/line intersections</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3445,7 +3445,7 @@ lli = function(line1, line2):
|
||||
<graphics-element title="Curve/curve intersections" width="825" height="275" src="./chapters/curveintersection/curve-curve.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\curveintersection\b155682162a5b6da6d40c7b531164a7e.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/curveintersection/b155682162a5b6da6d40c7b531164a7e.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<button class="next">Advance one step</button>
|
||||
@@ -3494,7 +3494,7 @@ lli = function(line1, line2):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\abc\7a69dd4350ddda5701712e1d3b46b863.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/abc/7a69dd4350ddda5701712e1d3b46b863.png" loading="lazy" />
|
||||
<label>Projections in a quadratic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.5" class="slide-control" />
|
||||
@@ -3509,7 +3509,7 @@ lli = function(line1, line2):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\abc\eeec7cf16fb22c666e0143a3a030731f.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/abc/eeec7cf16fb22c666e0143a3a030731f.png" loading="lazy" />
|
||||
<label>Projections in a cubic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0" max="1" step="0.01" value="0.5" class="slide-control" />
|
||||
@@ -3621,7 +3621,7 @@ lli = function(line1, line2):
|
||||
<graphics-element title="Fitting a quadratic Bézier curve" width="275" height="275" src="./chapters/pointcurves/quadratic.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\pointcurves\067a3df30e32708fc0d13f8eb78c0b05.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/pointcurves/067a3df30e32708fc0d13f8eb78c0b05.png" loading="lazy" />
|
||||
<label>Fitting a quadratic Bézier curve</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3641,7 +3641,7 @@ lli = function(line1, line2):
|
||||
<graphics-element title="Finding a circle through three points" width="275" height="275" src="./chapters/pointcurves/circle.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\pointcurves\43875f6ad588bfd04cdb65b591a62052.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/pointcurves/43875f6ad588bfd04cdb65b591a62052.png" loading="lazy" />
|
||||
<label>Finding a circle through three points</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3697,7 +3697,7 @@ lli = function(line1, line2):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\pointcurves\75f7b5b31e98444e13f17e5c3e5b7322.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/pointcurves/75f7b5b31e98444e13f17e5c3e5b7322.png" loading="lazy" />
|
||||
<label>Finding the cubic e₁ and e₂ given three points </label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3712,7 +3712,7 @@ lli = function(line1, line2):
|
||||
<graphics-element title="Fitting a quadratic Bézier curve" width="275" height="275" src="./chapters/pointcurves/cubic.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\pointcurves\eab6ea46fa93030e03ec0ef7deb571dc.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/pointcurves/eab6ea46fa93030e03ec0ef7deb571dc.png" loading="lazy" />
|
||||
<label>Fitting a quadratic Bézier curve</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -3783,7 +3783,7 @@ for (coordinate, index) in LUT:
|
||||
<graphics-element title="Projecting a point onto a Bézier curve" width="400" height="400" src="./chapters/projections/project.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\projections\3cc334d0ebc01cc5352e23ed47bc5414.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/projections/3cc334d0ebc01cc5352e23ed47bc5414.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
</section>
|
||||
@@ -3814,7 +3814,7 @@ for (coordinate, index) in LUT:
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\molding\aefb177e5532a9f995b9d88e85582c68.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/molding/aefb177e5532a9f995b9d88e85582c68.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -3833,7 +3833,7 @@ for (coordinate, index) in LUT:
|
||||
<graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\molding\834af194de17a5eb2c1920773ab904e3.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/molding/834af194de17a5eb2c1920773ab904e3.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -3857,7 +3857,7 @@ for (coordinate, index) in LUT:
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="825px" height="275px" src="images\chapters\molding\cdf7515d133cbf41ffbaea8c488e0924.png" loading="lazy" />
|
||||
<img width="825px" height="275px" src="./images/chapters/molding/cdf7515d133cbf41ffbaea8c488e0924.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="10" max="200" step="1" value="100" class="slide-control" />
|
||||
@@ -4197,7 +4197,7 @@ for (coordinate, index) in LUT:
|
||||
<graphics-element title="Fitting a Bézier curve" width="550" height="275" src="./chapters/curvefitting/curve-fitting.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="550px" height="275px" src="images\chapters\curvefitting\798f3d7151dfb2887c7881a08e65cdd3.png" loading="lazy" />
|
||||
<img width="550px" height="275px" src="./images/chapters/curvefitting/798f3d7151dfb2887c7881a08e65cdd3.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<button class="toggle">toggle</button>
|
||||
@@ -4229,7 +4229,7 @@ for (coordinate, index) in LUT:
|
||||
<graphics-element title="A Catmull-Rom curve" width="275" height="275" src="./chapters/catmullconv/catmull-rom.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\catmullconv\aa46749b9469341d9249ca452390d875.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/catmullconv/aa46749b9469341d9249ca452390d875.png" loading="lazy" />
|
||||
<label>A Catmull-Rom curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0.1" max="1" step="0.01" value="0.5" class="slide-control tension" />
|
||||
@@ -4603,7 +4603,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\41522a397171423e8a465dc8c74f6e87.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/41522a397171423e8a465dc8c74f6e87.png" loading="lazy" />
|
||||
<label>Unlinked quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4617,7 +4617,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\6fb33629373d7a731b6ac3f5365cb9f0.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/6fb33629373d7a731b6ac3f5365cb9f0.png" loading="lazy" />
|
||||
<label>Unlinked cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4649,7 +4649,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\db04f805f42bdc9a1b7ec4d6b401d853.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/db04f805f42bdc9a1b7ec4d6b401d853.png" loading="lazy" />
|
||||
<label>Connected quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4663,7 +4663,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\fe41b628f46f7035d151a8210d30111f.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/fe41b628f46f7035d151a8210d30111f.png" loading="lazy" />
|
||||
<label>Connected cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4692,7 +4692,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\777f3814965c39ec3cdbb13eab0c4eeb.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/777f3814965c39ec3cdbb13eab0c4eeb.png" loading="lazy" />
|
||||
<label>Angularly connected quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4706,7 +4706,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\f6c55cbc66333b6630939f67fc20e086.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/f6c55cbc66333b6630939f67fc20e086.png" loading="lazy" />
|
||||
<label>Angularly connected cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4730,7 +4730,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\b3aebf7803f4430187c249a891095062.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/b3aebf7803f4430187c249a891095062.png" loading="lazy" />
|
||||
<label>Standard connected quadratic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4744,7 +4744,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\polybezier\1b94c6ada011bd8e50330e31a851a62e.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/polybezier/1b94c6ada011bd8e50330e31a851a62e.png" loading="lazy" />
|
||||
<label>Standard connected cubic poly-Bézier</label>
|
||||
</fallback-image></graphics-element
|
||||
>
|
||||
@@ -4902,7 +4902,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\offsetting\03b8e0849e7c8ba64d8c076f47fe2ec7.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/offsetting/03b8e0849e7c8ba64d8c076f47fe2ec7.png" loading="lazy" />
|
||||
<label>Offsetting a quadratic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
|
||||
@@ -4917,7 +4917,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\offsetting\4c4738b6bf9f83eded12d680a29e337b.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/offsetting/4c4738b6bf9f83eded12d680a29e337b.png" loading="lazy" />
|
||||
<label>Offsetting a cubic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
|
||||
@@ -4969,7 +4969,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\graduatedoffset\8cc724d5343c65685d88c92b2d069a2a.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/graduatedoffset/8cc724d5343c65685d88c92b2d069a2a.png" loading="lazy" />
|
||||
<label>Offsetting a quadratic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
|
||||
@@ -4984,7 +4984,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
>
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\graduatedoffset\17bf62e05a1fc3387b0c210f2decff45.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/graduatedoffset/17bf62e05a1fc3387b0c210f2decff45.png" loading="lazy" />
|
||||
<label>Offsetting a cubic Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
|
||||
@@ -5022,7 +5022,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="Quadratic Bézier arc approximation" width="400" height="400" src="./chapters/circles/arc-approximation.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\circles\08ca09aacb271735e063e7e8d941a195.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/circles/08ca09aacb271735e063e7e8d941a195.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control" />
|
||||
@@ -5147,7 +5147,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="Cubic Bézier arc approximation" width="400" height="400" src="./chapters/circles_cubic/arc-approximation.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\circles_cubic\ecacec0eb2bbe72e14b9008d854fbb06.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/circles_cubic/ecacec0eb2bbe72e14b9008d854fbb06.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control" />
|
||||
@@ -5381,7 +5381,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="Cubic Bézier circle approximation" width="340" height="300" src="./chapters/circles_cubic/circle.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="340px" height="300px" src="images\chapters\circles_cubic\63f35fb58d3571200ac6ccea0384b9d7.png" loading="lazy" />
|
||||
<img width="340px" height="300px" src="./images/chapters/circles_cubic/63f35fb58d3571200ac6ccea0384b9d7.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
</section>
|
||||
@@ -5460,7 +5460,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="First arc approximation of a Bézier curve" width="275" height="275" src="./chapters/arcapproximation/arc.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arcapproximation\7c9cce8142fa3e85bb124520f40645ff.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arcapproximation/7c9cce8142fa3e85bb124520f40645ff.png" loading="lazy" />
|
||||
<label>First arc approximation of a Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0.1" max="5" step="0.1" value="0.5" class="slide-control" />
|
||||
@@ -5475,7 +5475,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="Arc approximation of a Bézier curve" width="275" height="275" src="./chapters/arcapproximation/arcs.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="275px" height="275px" src="images\chapters\arcapproximation\da76341b841df1af8a39f797e85dfe3c.png" loading="lazy" />
|
||||
<img width="275px" height="275px" src="./images/chapters/arcapproximation/da76341b841df1af8a39f797e85dfe3c.png" loading="lazy" />
|
||||
<label>Arc approximation of a Bézier curve</label>
|
||||
</fallback-image>
|
||||
<input type="range" min="0.1" max="5" step="0.1" value="0.5" class="slide-control" />
|
||||
@@ -5520,7 +5520,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="A B-Spline example" width="600" height="300" src="./chapters/bsplines/basic.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="600px" height="300px" src="images\chapters\bsplines\fe3a8ca5706f286d916e36699e237e51.png" loading="lazy" />
|
||||
<img width="600px" height="300px" src="./images/chapters/bsplines/fe3a8ca5706f286d916e36699e237e51.png" loading="lazy" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
|
||||
@@ -5542,7 +5542,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="The components of a B-Spline " width="600" height="300" src="./chapters/bsplines/basic.js" data-show-curves="true">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="600px" height="300px" src="images\chapters\bsplines\41167c64c51386414c6e62f0b45e6295.png" loading="lazy" />
|
||||
<img width="600px" height="300px" src="./images/chapters/bsplines/41167c64c51386414c6e62f0b45e6295.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<!-- basis curve highlighter goes here -->
|
||||
@@ -5713,7 +5713,7 @@ for(let L = 1; L <= order; L++) {
|
||||
<graphics-element title="A uniform B-Spline" width="400" height="400" src="./chapters/bsplines/uniform.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\bsplines\48a30189e74658737b3a8b28bb816f8a.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/bsplines/48a30189e74658737b3a8b28bb816f8a.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<!-- knot sliders go here -->
|
||||
@@ -5738,7 +5738,7 @@ for(let L = 1; L <= order; L++) {
|
||||
<graphics-element title="A reduced uniform B-Spline" width="400" height="400" src="./chapters/bsplines/reduced.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\bsplines\ceaef2fbee05a58aa11835925403b4cd.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/bsplines/ceaef2fbee05a58aa11835925403b4cd.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<!-- knot sliders go here -->
|
||||
@@ -5759,7 +5759,7 @@ for(let L = 1; L <= order; L++) {
|
||||
<graphics-element title="An open, uniform B-Spline" width="400" height="400" src="./chapters/bsplines/uniform.js" data-open="true">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\bsplines\0215dc106e4ad51afe043c0176a595f6.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/bsplines/0215dc106e4ad51afe043c0176a595f6.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<!-- knot sliders go here -->
|
||||
@@ -5782,7 +5782,7 @@ for(let L = 1; L <= order; L++) {
|
||||
<graphics-element title="A (closed) rational, uniform B-Spline" width="400" height="400" src="./chapters/bsplines/rational-uniform.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="400px" height="400px" src="images\chapters\bsplines\0d9c2186423466a32bb8fbd187409f82.png" loading="lazy" />
|
||||
<img width="400px" height="400px" src="./images/chapters/bsplines/0d9c2186423466a32bb8fbd187409f82.png" loading="lazy" />
|
||||
<label></label>
|
||||
</fallback-image>
|
||||
<!-- knot sliders go here -->
|
||||
|
||||
@@ -3,7 +3,8 @@ import fs from "fs-extra";
|
||||
import path from "path";
|
||||
import paths from "../project-paths.js";
|
||||
import nunjucks from "nunjucks";
|
||||
import convert from "./markdown/convert.js";
|
||||
import LocaleStrings from "../locale-strings.js";
|
||||
import { convertMarkDown } from "./markdown/convert-markdown.js";
|
||||
|
||||
nunjucks.configure(paths.html, { autoescape: false });
|
||||
|
||||
@@ -15,8 +16,9 @@ const locale = `en-GB`;
|
||||
*/
|
||||
async function createNewsPages() {
|
||||
const start = Date.now();
|
||||
const localeStrings = new LocaleStrings();
|
||||
const files = await getNewsFiles();
|
||||
const details = files.filter((f) => !f.includes(`draft`)).map((file) => generatePost(file));
|
||||
const details = await Promise.all(files.filter((f) => !f.includes(`draft`)).map((file) => generatePost(file, localeStrings)));
|
||||
console.log(`Processing News posts took ${(Date.now() - start) / 1000}s`);
|
||||
generateNewsIndex(details);
|
||||
generateRSSFeed(details);
|
||||
@@ -37,7 +39,7 @@ function getNewsFiles() {
|
||||
/**
|
||||
* ...docs go here...
|
||||
*/
|
||||
function generatePost(file) {
|
||||
async function generatePost(file, localeStrings) {
|
||||
// get the post, and the data its filename implies
|
||||
const filename = path.basename(file).replace(`.md`, `.html`);
|
||||
const postDate = filename.replace(`.html`, ``);
|
||||
@@ -45,7 +47,17 @@ function generatePost(file) {
|
||||
const dateString = new Date(postDate).toUTCString().substring(0, 16);
|
||||
|
||||
// split off the post's title
|
||||
let post = convert(data);
|
||||
let post = await convertMarkDown(
|
||||
{
|
||||
imagepath: path.join(paths.images, `news`, filename),
|
||||
modulepubdir: `./news/`,
|
||||
file: file,
|
||||
id: filename,
|
||||
},
|
||||
localeStrings,
|
||||
data
|
||||
);
|
||||
|
||||
const title = post.substring(post.indexOf(`<h1>`) + 4, post.indexOf(`</h1>`));
|
||||
post = post.replace(`<h1>${title}</h1>`, ``);
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@ import paths from "../../project-paths.js";
|
||||
import { createHash } from "crypto";
|
||||
import { execSync } from "child_process";
|
||||
import cleanUp from "./cleanup.js";
|
||||
import toPOSIX from "../../to-posix.js";
|
||||
|
||||
/**
|
||||
* This converts a latex block into a .svg file by running it through
|
||||
@@ -15,18 +16,18 @@ import cleanUp from "./cleanup.js";
|
||||
* so that the document won't constantly reflow as it loads images
|
||||
* in.
|
||||
*/
|
||||
export default async function latexToSVG(latex, chapter, localeStrings, block) {
|
||||
export default async function latexToSVG(latex, pathdata, localeStrings, block) {
|
||||
const { imagepath, id } = pathdata;
|
||||
latex = colorPreProcess(latex);
|
||||
|
||||
const locale = localeStrings.getCurrentLocale();
|
||||
const hash = createHash(`md5`).update(latex).digest(`hex`);
|
||||
|
||||
const TeXfilename = path.join(paths.temp, `${hash}.tex`);
|
||||
const chapterDir = path.join(paths.images, `chapters`, chapter);
|
||||
fs.ensureDirSync(chapterDir);
|
||||
fs.ensureDirSync(imagepath);
|
||||
|
||||
const SVGfilename = path.join(chapterDir, `${hash}.svg`);
|
||||
const srcURL = `./images/chapters/${chapter}/${hash}.svg`;
|
||||
const SVGfilename = path.join(imagepath, `${hash}.svg`);
|
||||
const srcURL = `./${toPOSIX(path.relative(paths.public, SVGfilename))}`;
|
||||
|
||||
if (!fs.existsSync(SVGfilename)) {
|
||||
// There is no SVG graphic for the LaTeX code yet, so we need to generate
|
||||
@@ -80,7 +81,7 @@ export default async function latexToSVG(latex, chapter, localeStrings, block) {
|
||||
|
||||
// Finally: run the conversion
|
||||
try {
|
||||
process.stdout.write(`- running xelatex for block [${chapter}:${locale}:${block}] (${hash}.tex): `);
|
||||
process.stdout.write(`- running xelatex for block [${id}:${locale}:${block}] (${hash}.tex): `);
|
||||
runCmd(commands.xetex, hash);
|
||||
|
||||
process.stdout.write(` - cropping PDF to document content: `);
|
||||
|
||||
@@ -8,11 +8,11 @@ nunjucks.configure(".", { autoescape: false });
|
||||
/**
|
||||
* ...docs go here...
|
||||
*/
|
||||
async function convertMarkDown(chapter, localeStrings, markdown) {
|
||||
async function convertMarkDown(pathdata, localeStrings, markdown) {
|
||||
try {
|
||||
markdown = await preprocessGraphicsElement(chapter, localeStrings, markdown);
|
||||
markdown = await preprocessGraphicsElement(pathdata, localeStrings, markdown);
|
||||
} catch (e) {
|
||||
console.error(`Unrecoverable error in ${chapter}:${localeStrings.currentLocale}.`);
|
||||
console.error(`Unrecoverable error in ${pathdata.file}.`);
|
||||
console.error(e);
|
||||
process.exit(1);
|
||||
}
|
||||
@@ -21,7 +21,11 @@ async function convertMarkDown(chapter, localeStrings, markdown) {
|
||||
// uniquely named templating variables, referencing keys in the `latex` array.
|
||||
const { data, latex } = extractLaTeX(markdown);
|
||||
|
||||
await Promise.all(Object.keys(latex).map(async (key, pos) => (latex[key] = await latexToSVG(latex[key], chapter, localeStrings, pos + 1))));
|
||||
await Promise.all(
|
||||
Object.keys(latex).map(async (key, pos) => {
|
||||
latex[key] = await latexToSVG(latex[key], pathdata, localeStrings, pos + 1);
|
||||
})
|
||||
);
|
||||
|
||||
let converted = convert(data);
|
||||
return nunjucks.renderString(converted, latex);
|
||||
|
||||
@@ -4,6 +4,7 @@ import { createHash } from "crypto";
|
||||
import { generateGraphicsModule } from "./generate-graphics-module.js";
|
||||
import paths from "../../project-paths.js";
|
||||
import getModulePath from "../../get-module-path.js";
|
||||
import toPosix from "../../to-posix.js";
|
||||
|
||||
const thisModuleDir = getModulePath(import.meta.url);
|
||||
|
||||
@@ -17,7 +18,7 @@ const thisModuleDir = getModulePath(import.meta.url);
|
||||
* @param {Number} h The sketch height in pixels
|
||||
*/
|
||||
async function generateFallbackImage(
|
||||
chapter,
|
||||
pathdata,
|
||||
localeStrings,
|
||||
src,
|
||||
w,
|
||||
@@ -25,6 +26,7 @@ async function generateFallbackImage(
|
||||
dataset = {} // Abstracted from the <graphics-element .... data-name="value"> markup
|
||||
) {
|
||||
const locale = localeStrings.getCurrentLocale();
|
||||
const { imagepath } = pathdata;
|
||||
|
||||
// Get the sketch code
|
||||
const sourcePath = path.join(paths.chapters, `..`, src);
|
||||
@@ -40,18 +42,18 @@ async function generateFallbackImage(
|
||||
// or not we should generate an image or whether we already did that previously.
|
||||
const hash = createHash(`md5`).update(code).update(JSON.stringify(dataset)).digest(`hex`);
|
||||
|
||||
if (locale !== localeStrings.getDefaultLocale()) return hash;
|
||||
fs.ensureDirSync(imagepath);
|
||||
const filePath = path.join(imagepath, `${hash}.png`);
|
||||
const imgUrl = `./${toPosix(path.relative(paths.public, filePath))}`;
|
||||
|
||||
const destPath = path.dirname(path.join(paths.images, src));
|
||||
fs.ensureDirSync(destPath);
|
||||
if (locale !== localeStrings.getDefaultLocale()) return imgUrl;
|
||||
|
||||
const filePath = path.join(destPath, `${hash}.png`);
|
||||
if (fs.existsSync(filePath)) return hash;
|
||||
if (fs.existsSync(filePath)) return imgUrl;
|
||||
|
||||
// If we get here, we need to actually run the magic: convert
|
||||
// this to a valid JS module code and write this to a temporary
|
||||
// file so we can import it.
|
||||
const nodeCode = generateGraphicsModule(chapter, code, w, h, dataset);
|
||||
const nodeCode = generateGraphicsModule(pathdata, code, w, h, dataset);
|
||||
const codeFile = `./nodecode.${Date.now()}.${Math.random()}.js`;
|
||||
const modulePath = path.join(paths.temp, codeFile);
|
||||
fs.writeFileSync(modulePath, nodeCode, `utf8`);
|
||||
@@ -78,7 +80,7 @@ async function generateFallbackImage(
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
return hash;
|
||||
return imgUrl;
|
||||
}
|
||||
|
||||
export default generateFallbackImage;
|
||||
|
||||
@@ -3,6 +3,7 @@ import path from "path";
|
||||
import paths from "../../project-paths.js";
|
||||
import splitCodeSections from "../../../docs/js/custom-element/lib/split-code-sections.js";
|
||||
import performCodeSurgery from "../../../docs/js/custom-element/lib/perform-code-surgery.js";
|
||||
import toPosix from "../../to-posix.js";
|
||||
|
||||
// Get all the values we need to ensure our generated graphics code knows
|
||||
// where it lives, and where it can find all its dependencies
|
||||
@@ -18,8 +19,6 @@ const GRAPHICS_API_LOCATION = path
|
||||
|
||||
const IMPORT_GLOBALS_FROM_GRAPHICS_API = `${API_IMPORTS} from "${GRAPHICS_API_LOCATION}"`;
|
||||
|
||||
const RELATIVE_IMPORT_LOCATION = path.relative(paths.temp, paths.chapters).split(path.sep).join(path.posix.sep);
|
||||
|
||||
/**
|
||||
* Node does not have a native canvas available, so we need to shim a number
|
||||
* of objects and functions to ensure it can generate a "first load" snapshot
|
||||
@@ -38,10 +37,13 @@ const canvasBuilder = function canvasBuilder(w, h) {
|
||||
/**
|
||||
* ...docs go here...
|
||||
*/
|
||||
function generateGraphicsModule(chapter, code, width, height, dataset) {
|
||||
function generateGraphicsModule(pathdata, code, width, height, dataset) {
|
||||
const { file } = pathdata;
|
||||
const relativeWriteDir = toPosix(path.relative(paths.temp, path.dirname(file)));
|
||||
|
||||
// step 1: fix the imports
|
||||
code = code.replace(/(import .+? from) "([^"]+)"/g, (_, main, group) => {
|
||||
return `${main} "${RELATIVE_IMPORT_LOCATION}/${chapter}/${group}"`;
|
||||
return `${main} "${relativeWriteDir}/${group}"`;
|
||||
});
|
||||
|
||||
// step 2: split up the code into "global" vs. "class" code
|
||||
|
||||
@@ -18,7 +18,8 @@ function formDataSet(data) {
|
||||
/**
|
||||
* ...docs go here...
|
||||
*/
|
||||
async function preprocessGraphicsElement(chapter, localeStrings, markdown) {
|
||||
async function preprocessGraphicsElement(pathdata, localeStrings, markdown) {
|
||||
const { modulepubdir, imagepath, file, id } = pathdata;
|
||||
const translate = localeStrings.translate;
|
||||
|
||||
let pos = -1,
|
||||
@@ -57,18 +58,19 @@ async function preprocessGraphicsElement(chapter, localeStrings, markdown) {
|
||||
|
||||
let src = terms[3];
|
||||
|
||||
if (src.indexOf(`../`) === 0) src = `./chapters/${chapter}/${src}`;
|
||||
if (src.indexOf(`../`) === 0) src = `${modulepubdir}${src}`;
|
||||
else {
|
||||
if (src[0] !== `.`) src = `./${src}`;
|
||||
src = src.replace(`./`, `./chapters/${chapter}/`);
|
||||
src = src.replace(`./`, `${modulepubdir}`);
|
||||
}
|
||||
|
||||
// ======================================
|
||||
// this is super fancy functionality:
|
||||
// ======================================
|
||||
|
||||
let imageHash = await generateFallbackImage(
|
||||
chapter,
|
||||
// Note: this is a URL relative to the public dir, **not** a file system location.
|
||||
let imgUrl = await generateFallbackImage(
|
||||
pathdata,
|
||||
localeStrings,
|
||||
src,
|
||||
width,
|
||||
@@ -77,9 +79,6 @@ async function preprocessGraphicsElement(chapter, localeStrings, markdown) {
|
||||
formDataSet(remainder.trim())
|
||||
);
|
||||
|
||||
// Note: this is a URL, _not_ a file system location.
|
||||
let imgUrl = path.join(path.dirname(src.replace(`./`, `./images/`)), `${imageHash}.png`);
|
||||
|
||||
const replacement = `width="${width}" height="${height}" src="${src}" ${remainder}>
|
||||
<fallback-image>
|
||||
<span class="view-source">${translate`disabledMessage`}</span>
|
||||
|
||||
@@ -39,7 +39,16 @@ async function processLocale(locale, localeStrings, chapterFiles) {
|
||||
localeFiles.map(async (file) => {
|
||||
const chapter = file.match(/chapters\/([^/]+)\/content./)[1];
|
||||
const markdown = fs.readFileSync(file).toString("utf8");
|
||||
chapters[chapter] = await convertMarkDown(chapter, localeStrings, markdown);
|
||||
chapters[chapter] = await convertMarkDown(
|
||||
{
|
||||
imagepath: path.join(paths.images, `chapters`, chapter),
|
||||
modulepubdir: `./chapters/${chapter}/`,
|
||||
file: file,
|
||||
id: chapter,
|
||||
},
|
||||
localeStrings,
|
||||
markdown
|
||||
);
|
||||
})
|
||||
);
|
||||
|
||||
|
||||
@@ -67,7 +67,7 @@ const localeStringData = {
|
||||
// =============================
|
||||
|
||||
class LocaleStrings {
|
||||
constructor(locale) {
|
||||
constructor(locale = `en-GB`) {
|
||||
this.currentLocale = locale;
|
||||
const strings = (this.strings = {});
|
||||
|
||||
|
||||
5
src/to-posix.js
Normal file
5
src/to-posix.js
Normal file
@@ -0,0 +1,5 @@
|
||||
import path from "path";
|
||||
|
||||
export default function toPOSIX(pathstring) {
|
||||
return pathstring.split(path.sep).join(path.posix.sep);
|
||||
}
|
||||
Reference in New Issue
Block a user