info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-09-02 12:54:23 +02:00
Code Issues Releases Wiki Activity

error-only for http-server, better parameter parsing for sketch markup

Browse Source
This commit is contained in:
Pomax
2020-08-27 11:36:17 -07:00
parent 46f94282e1
commit b2314a4f87
47 changed files with 130 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -324,7 +324,7 @@ function Bezier(3,t):
<div class="figure">
<graphics-element title="二次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3">
<fallback-image>
<img width="275px" height="275px" src="images\chapters\control\75888dd88efe5e9c041fefd8b05975f3.png" loading="lazy">
<img width="275px" height="275px" src="images\chapters\control\62d7ef11f60acde82868424364a477e8.png" loading="lazy">
Scripts are disabled. Showing fallback image.
</fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -332,7 +332,7 @@ function Bezier(3,t):
<graphics-element title="三次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4">
<fallback-image>
<img width="275px" height="275px" src="images\chapters\control\66333ae5bfbcb51d424e5670ab53262e.png" loading="lazy">
<img width="275px" height="275px" src="images\chapters\control\9331dd83c72b233190eaca1cfcc169db.png" loading="lazy">
Scripts are disabled. Showing fallback image.
</fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -340,7 +340,7 @@ function Bezier(3,t):
<graphics-element title="15次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="15">
<fallback-image>
<img width="275px" height="275px" src="images\chapters\control\ee31748e196d3be41c675b05200a7f76.png" loading="lazy">
<img width="275px" height="275px" src="images\chapters\control\44242f6a6be718bea46292369d509520.png" loading="lazy">
Scripts are disabled. Showing fallback image.
</fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -454,12 +454,12 @@ function RationalBezier(3,t,w[],r[]):
<div class="figure">
<graphics-element title="二次无限区间贝塞尔曲线" width="275" height="275" src="./chapters/extended/extended.js" data-type="quadratic">
<fallback-image>
<img width="275px" height="275px" src="images\chapters\extended\c6ac50057ea7e251a5bf11737878a23a.png" loading="lazy">
<img width="275px" height="275px" src="images\chapters\extended\391a61142c56b79260680aefb08cd9c4.png" loading="lazy">
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element>
<graphics-element title="三次无限区间贝塞尔曲线" width="275" height="275" src="./chapters/extended/extended.js" data-type="cubic">
<fallback-image>
<img width="275px" height="275px" src="images\chapters\extended\97a1ceb81980368d08d8d2f2e8719936.png" loading="lazy">
<img width="275px" height="275px" src="images\chapters\extended\baeceec6e1587794b8b275a90d5d85e9.png" loading="lazy">
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element>
</div>
@@ -551,7 +551,7 @@ function RationalBezier(3,t,w[],r[]):
<div class="figure">
<graphics-element title="拉平一条二次曲线" width="275" height="275" src="./chapters/flattening/flatten.js" data-type="quadratic">
<fallback-image>
<img width="275px" height="275px" src="images\chapters\flattening\a6cd214a7f8725430d2bb99a9da385f2.png" loading="lazy">
<img width="275px" height="275px" src="images\chapters\flattening\3deec756c96e53127cd1d615c61043ae.png" loading="lazy">
Scripts are disabled. Showing fallback image.
</fallback-image>
<input type="range" min="1" max="16" step="1" value="4" class="slide-control">
@@ -559,7 +559,7 @@ function RationalBezier(3,t,w[],r[]):
<graphics-element title="拉平一条三次曲线" width="275" height="275" src="./chapters/flattening/flatten.js" data-type="cubic">
<fallback-image>
<img width="275px" height="275px" src="images\chapters\flattening\a77519c299fce1ce95c84a1e5f7c0478.png" loading="lazy">
<img width="275px" height="275px" src="images\chapters\flattening\e2bb7113d5cda2e3fd29bbc54fbe8841.png" loading="lazy">
Scripts are disabled. Showing fallback image.
</fallback-image>
<input type="range" min="1" max="24" step="1" value="8" class="slide-control">
@@ -919,13 +919,13 @@ treated as a sequence of three (elementary) shear operations. When we combine th
<p>If you move points in a curve sideways, you should only see the middle graph change; likewise, moving points vertically should only show a change in the right graph.</p>
<graphics-element title="Quadratic Bézier curve components" width="825" height="275" src="./chapters/components/components.js" data-type="quadratic">
<fallback-image>
<img width="825px" height="275px" src="images\chapters\components\c3df5265111b12dabee757a22b474d29.png" loading="lazy">
<img width="825px" height="275px" src="images\chapters\components\f7490a1c523d4dc8772b621b4a61fdd4.png" loading="lazy">
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element>
<graphics-element title="Cubic Bézier curve components" width="825" height="275" src="./chapters/components/components.js" data-type="cubic">
<fallback-image>
<img width="825px" height="275px" src="images\chapters\components\168ec97a7e9ba5793ad9d2e619f71cb3.png" loading="lazy">
<img width="825px" height="275px" src="images\chapters\components\35d69b33228ae64221385047177b67a5.png" loading="lazy">
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element>
@@ -1061,14 +1061,14 @@ function getCubicRoots(pa, pb, pc, pd) {
<p>So now that we know how to do root finding, we can determine the first and second derivative roots for our Bézier curves, and show those roots overlaid on the previous graphics. For the quadratic curve, that means just the first derivative, in red:</p>
<graphics-element title="Quadratic Bézier curve extremities" width="825" height="275" src="./chapters/extremities/extremities.js" data-type="quadratic">
<fallback-image>
<img width="825px" height="275px" src="images\chapters\extremities\2be56b901cc023ece52f001d770893f8.png" loading="lazy">
<img width="825px" height="275px" src="images\chapters\extremities\6d246f1c53e40bd5156ef50c4046db51.png" loading="lazy">
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element>
<p>And for cubic curves, that means first and second derivatives, in red and purple respectively:</p>
<graphics-element title="Cubic Bézier curve extremities" width="825" height="275" src="./chapters/extremities/extremities.js" data-type="cubic">
<fallback-image>
<img width="825px" height="275px" src="images\chapters\extremities\308bb36c8390ecfca6eed0cccfeec73b.png" loading="lazy">
<img width="825px" height="275px" src="images\chapters\extremities\05ff4df8b73ba25dffeb42f768e0e9c4.png" loading="lazy">
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element>
@@ -1086,12 +1086,12 @@ function getCubicRoots(pa, pb, pc, pd) {
<div class="figure">
<graphics-element title="Quadratic Bézier bounding box" width="275" height="275" src="./chapters/boundingbox/bbox.js" data-type="quadratic">
<fallback-image>
<img width="275px" height="275px" src="images\chapters\boundingbox\3e26118e0f37de916bb52f17850ccdc3.png" loading="lazy">
<img width="275px" height="275px" src="images\chapters\boundingbox\e2c621442e98e2cd20af7efe1cfb041f.png" loading="lazy">
Scripts are disabled. Showing fallback image.
</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>
<img width="275px" height="275px" src="images\chapters\boundingbox\797277014fb93e37fd47f8f2fcdb3b89.png" loading="lazy">
<img width="275px" height="275px" src="images\chapters\boundingbox\f8989a62ebec9d6f123291c146caab5b.png" loading="lazy">
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element>
</div>
@@ -1111,16 +1111,18 @@ function getCubicRoots(pa, pb, pc, pd) {
<p>If we drop all the zero-terms, this gives us:</p>
<img class="LaTeX SVG" src="./images/chapters/aligning/c78b203ff33e5c1606728b552505d61c.svg" width="397px" height="40px" loading="lazy">
<p>We can see that our original curve definition has been simplified considerably. The following graphics illustrate the result of aligning our example curves to the x-axis, with the cubic case using the coordinates that were just used in the example formulae:</p>
<graphics-element title="Aligning a quadratic curve" width="550" height="275" src="./chapters/aligning/quadratic.js" >
<div class="figure">
<graphics-element title="Aligning a quadratic curve" width="550" height="275" src="./chapters/aligning/aligning.js" data-type="quadratic">
<fallback-image>
<img width="550px" height="275px" src="images\chapters\aligning\2a6c6fb5527e3c00c683136a74075810.png" loading="lazy">
<img width="550px" height="275px" src="images\chapters\aligning\2bac71234aed2bca2686fdbce7dd78d8.png" loading="lazy">
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element>
<graphics-element title="Aligning a cubic curve" width="550" height="275" src="./chapters/aligning/cubic.js" >
<graphics-element title="Aligning a cubic curve" width="550" height="275" src="./chapters/aligning/aligning.js" data-type="cubic">
<fallback-image>
<img width="550px" height="275px" src="images\chapters\aligning\117193f78662930b6cfb204d40263796.png" loading="lazy">
<img width="550px" height="275px" src="images\chapters\aligning\ed3e2ad3961fbf9e9e5bc951f1d79302.png" loading="lazy">
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element>
</div>
</section>
<section id="tightbounds">
@@ -1130,12 +1132,12 @@ function getCubicRoots(pa, pb, pc, pd) {
<div class="figure">
<graphics-element title="Aligning a quadratic curve" width="275" height="275" src="./chapters/tightbounds/tightbounds.js" data-type="quadratic">
<fallback-image>
<img width="275px" height="275px" src="images\chapters\tightbounds\ed626d23d5f258a3f599e881b5f12aad.png" loading="lazy">
<img width="275px" height="275px" src="images\chapters\tightbounds\ccc77ae1f57d7dd7ce4d5397fe1b140b.png" loading="lazy">
Scripts are disabled. Showing fallback image.
</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>
<img width="275px" height="275px" src="images\chapters\tightbounds\e087b9e9822e65dcc4ff7673db10e91c.png" loading="lazy">
<img width="275px" height="275px" src="images\chapters\tightbounds\419415bee6ffd7598c035c42de09a94f.png" loading="lazy">
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element>
</div>
@@ -1313,17 +1315,17 @@ y = curve.get(t).y</code></pre>
<div class="figure">
<graphics-element title="A function's approximated integral" width="275" height="275" src="./chapters/arclength/draw-slices.js" data-steps="10">
<fallback-image>
<img width="275px" height="275px" src="images\chapters\arclength\0e2627e80066b53966050764aec146ac.png" loading="lazy">
<img width="275px" height="275px" src="images\chapters\arclength\580c33f599b70de44b17c546098508aa.png" loading="lazy">
Scripts are disabled. Showing fallback image.
</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>
<img width="275px" height="275px" src="images\chapters\arclength\457d2450a6a7f786328e2282d6613cf1.png" loading="lazy">
<img width="275px" height="275px" src="images\chapters\arclength\0d7138b99f5986332a050a8479eefa57.png" loading="lazy">
Scripts are disabled. Showing fallback image.
</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>
<img width="275px" height="275px" src="images\chapters\arclength\72c05323cfc7d739acad1cd969be7b72.png" loading="lazy">
<img width="275px" height="275px" src="images\chapters\arclength\475547c773a7279dc037c9ced2c8c6dc.png" loading="lazy">
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element>
</div>
@@ -1359,7 +1361,7 @@ y = curve.get(t).y</code></pre>
<graphics-element title="Approximate quadratic curve arc length" width="275" height="275" src="./chapters/arclengthapprox/approximate.js" data-type="quadratic">
<fallback-image>
<img width="275px" height="275px" src="images\chapters\arclengthapprox\e617047054199de6b96eb910db73b3ee.png" loading="lazy">
<img width="275px" height="275px" src="images\chapters\arclengthapprox\a040f6b7c7c33ada25ecfd1060726545.png" loading="lazy">
Scripts are disabled. Showing fallback image.
</fallback-image>
<input type="range" min="1" max="24" step="1" value="4" class="slide-control">
@@ -1367,7 +1369,7 @@ y = curve.get(t).y</code></pre>
<graphics-element title="Approximate cubic curve arc length" width="275" height="275" src="./chapters/arclengthapprox/approximate.js" data-type="cubic">
<fallback-image>
<img width="275px" height="275px" src="images\chapters\arclengthapprox\2fefae0125551f8f8b899f14daf07960.png" loading="lazy">
<img width="275px" height="275px" src="images\chapters\arclengthapprox\c270144cc41e4ebc4b0b2331473530fa.png" loading="lazy">
Scripts are disabled. Showing fallback image.
</fallback-image>
<input type="range" min="1" max="32" step="1" value="8" class="slide-control">