decasteljau

chapters/abc/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("abc", handler);

chapters/aligning/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("aligning", handler);

chapters/arcapproximation/index.js

@@ -1,4 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-var keyHandling = require("../../decorators/keyhandling-decorator.jsx");
-module.exports = keyHandling(generateBase("arcapproximation", handler));

chapters/arclength/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("arclength", handler);

chapters/arclengthapprox/index.js

@@ -1,4 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-var keyHandling = require("../../decorators/keyhandling-decorator.jsx");
-module.exports = keyHandling(generateBase("arclengthapprox", handler));

chapters/boundingbox/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("boundingbox", handler);

chapters/bsplines/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("bsplines", handler);

chapters/canonical/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("canonical", handler);

chapters/catmullconv/index.js

@@ -1,2 +0,0 @@
-var generateBase = require("../../generate-base");
-module.exports = generateBase("catmullconv");

chapters/catmullmoulding/index.js

@@ -1,4 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-var keyHandling = require("../../decorators/keyhandling-decorator.jsx");
-module.exports = keyHandling(generateBase("catmullmoulding", handler));

chapters/circles/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("circles", handler);

chapters/circles_cubic/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("circles_cubic", handler);

chapters/comments/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("comments", handler);

chapters/components/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("components", handler);

chapters/curvature/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("curvature", handler);

chapters/curvefitting/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("curvefitting", handler);

chapters/curveintersection/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("curveintersection", handler);

chapters/decasteljau/content.en-GB.md

@@ -13,6 +13,10 @@ Rather than using our calculus function to find `x/y` values for `t`, let's do t
 - Place markers, form lines, place markers, etc.
 - Repeat this until you have only one line left. The point `t` on that line coincides with the original curve point at `t`.
 
+To see this in action, mouse-over the following sketch. Moving the mouse changes which curve point is explicitly evaluated using de Casteljau's algorithm, moving the cursor left-to-right (or, of course, right-to-left), shows you how a curve is generated using this approach.
+
+<graphics-element title="Traversing a curve using de Casteljau's algorithm" src="./decasteljau.js"></graphics-element>
+
 <div class="howtocode">
 
 ### How to implement de Casteljau's algorithm
@@ -49,6 +53,3 @@ So what does this do? This draws a point, if the passed list of points is only 1
 
 </div>
 
-To see this in action, mouse-over the following sketch. Moving the mouse changes which curve point is explicitly evaluated using de Casteljau's algorithm, moving the cursor left-to-right (or, of course, right-to-left), shows you how a curve is generated using this approach.
-
-<Graphictitle="Traversing a curve using de Casteljau's algorithm" setup={this.setup} draw={this.draw}/>

chapters/decasteljau/content.ja-JP.md

@@ -13,6 +13,10 @@
 - 印をつけ、直線で結び、印をつけ、……
 - 1本の直線になるまで繰り返します。その直線上の`t`の点は、元の曲線上で`t`となる点に一致しています。
 
+下の図にマウスを乗せると、この様子を実際に見ることができます。ド・カステリョのアルゴリズムによって曲線上の点を明示的に計算していますが、マウスを動かすと求める点が変わります。マウスカーソルを左から右へ（もちろん、右から左へでも）動かせば、このアルゴリズムによって曲線が生成される様子がわかります。
+
+<graphics-element title="ド・カステリョのアルゴリズムで曲線をたどる" src="./decasteljau.js"></graphics-element>
+
 <div class="howtocode">
 
 ### ド・カステリョのアルゴリズムの実装方法
@@ -48,7 +52,3 @@ function drawCurve(points[], t):
 さて、これは何をしているのでしょう？関数に渡す点のリストが長さ1であれば、点を1つ描きます。それ以外であれば、比率<i>t</i>の位置の点（すなわち、さきほどの説明に出てきた「印」）のリストを作り、そしてこの新しいリストを引数にして関数を呼び出します。
 
 </div>
-
-下の図にマウスを乗せると、この様子を実際に見ることができます。ド・カステリョのアルゴリズムによって曲線上の点を明示的に計算していますが、マウスを動かすと求める点が変わります。マウスカーソルを左から右へ（もちろん、右から左へでも）動かせば、このアルゴリズムによって曲線が生成される様子がわかります。
-
-<Graphic title="ド・カステリョのアルゴリズムで曲線をたどる" setup={this.setup} draw={this.draw}/>

chapters/decasteljau/content.zh-CN.md

@@ -13,6 +13,10 @@
 - 取记号，连线，取记号，等等。
 - 重复这些步骤，直到剩下一条线。这条线段上的`t`点就是原始曲线在`t`处的点。
 
+我们通过实际操作来观察这个过程。在以下的图表中，移动鼠标来改变用de Casteljau算法计算得到的曲线点，左右移动鼠标，可以实时看到曲线是如何生成的。
+
+<graphics-element title="用de Casteljau算法来遍历曲线" src="./decasteljau.js"></graphics-element>
+
 <div class="howtocode">
 
 ### 如何实现de Casteljau算法
@@ -48,7 +52,3 @@ function drawCurve(points[], t):
 以上算法做了什么？如果参数points列表只有一个点， 就画出一个点。如果有多个点，就生成以<i>t</i>为比例的一系列点（例如，以上算法中的"标记点"），然后为新的点列表调用绘制函数。
 
 </div>
-
-我们通过实际操作来观察这个过程。在以下的图表中，移动鼠标来改变用de Casteljau算法计算得到的曲线点，左右移动鼠标，可以实时看到曲线是如何生成的。
-
-<Graphictitle="用de Casteljau算法来遍历曲线" setup={this.setup} draw={this.draw}/>

chapters/decasteljau/decasteljau.js

@@ -0,0 +1,30 @@
+let curve;
+
+setup() {
+  curve = new Bezier(this, 90, 200, 25, 100, 220, 40, 210, 240);
+  setMovable(curve.points);
+}
+
+draw() {
+  clear();
+  curve.drawSkeleton();
+  curve.drawCurve();
+
+  setStroke("rgb(200,100,100)");
+
+  let dim = this.height;
+  let t = this.cursor.x / dim;
+  curve.drawStruts(t);
+  curve.drawPoints();
+
+  let p = curve.get(t);
+  circle(p.x, p.y, 5);
+
+  let perc = (t*100)|0;
+  t = perc/100;
+  text(`Sequential interpolation for ${perc}% (t=${t})`, 10, 15);
+}
+
+onMouseMove() {
+  redraw();
+}

chapters/decasteljau/handler.js

@@ -1,36 +0,0 @@
-module.exports = {
-  setup: function(api) {
-    var points = [
-      {x: 90, y:110},
-      {x: 25, y: 40},
-      {x:230, y: 40},
-      {x:150, y:240}
-    ];
-    api.setCurve(new api.Bezier(points));
-  },
-
-  draw: function(api, curve) {
-    api.reset();
-    api.drawSkeleton(curve);
-    api.drawCurve(curve);
-
-    if (api.hover) {
-      api.setColor("rgb(200,100,100)");
-      var dim = api.getPanelWidth();
-      var t = api.hover.x / dim;
-      var hull = api.drawHull(curve, t);
-
-      for(var i=4; i<=8; i++) {
-        api.drawCircle(hull[i],3);
-      }
-
-      var p = curve.get(t);
-      api.drawCircle(p, 5);
-      api.setFill("black");
-      api.drawCircle(p, 3);
-      var perc = (t*100)|0;
-      t = perc/100;
-      api.text("Sequential interpolation for "+perc+"% (t="+t+")", {x: 10, y:15});
-    }
-  }
-};

chapters/decasteljau/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("decasteljau", handler);

chapters/derivatives/index.js

@@ -1,2 +0,0 @@
-var generateBase = require("../../generate-base");
-module.exports = generateBase("derivatives");

chapters/extremities/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("extremities", handler);

chapters/flattening/index.js

@@ -1,4 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-var keyHandling = require("../../decorators/keyhandling-decorator.jsx");
-module.exports = keyHandling(generateBase("flattening", handler));

chapters/graduatedoffset/index.js

@@ -1,4 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-var keyHandling = require("../../decorators/keyhandling-decorator.jsx");
-module.exports = keyHandling(generateBase("graduatedoffset", handler));

chapters/inflections/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("inflections", handler);

chapters/intersections/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("intersections", handler);

chapters/matrix/index.js

@@ -1,2 +0,0 @@
-var generateBase = require("../../generate-base");
-module.exports = generateBase("matrix");

chapters/matrixsplit/index.js

@@ -1,2 +0,0 @@
-var generateBase = require("../../generate-base");
-module.exports = generateBase("matrixsplit");

chapters/moulding/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("moulding", handler);

chapters/offsetting/index.js

@@ -1,4 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-var keyHandling = require("../../decorators/keyhandling-decorator.jsx");
-module.exports = keyHandling(generateBase("offsetting", handler));

chapters/pointcurves/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("pointcurves", handler);

chapters/pointvectors/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("pointvectors", handler);

chapters/pointvectors3d/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("pointvectors3d", handler);

chapters/polybezier/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("polybezier", handler);

chapters/preface/index.js

@@ -1,2 +0,0 @@
-var generateBase = require("../../generate-base");
-module.exports = generateBase("preface");

chapters/projections/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("projections", handler);

chapters/reordering/index.js

@@ -1,4 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-var keyHandling = require("../../decorators/keyhandling-decorator.jsx");
-module.exports = keyHandling(generateBase("reordering", handler));

chapters/shapes/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("shapes", handler);

chapters/splitting/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("splitting", handler);

chapters/tightbounds/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("tightbounds", handler);

chapters/tracing/index.js

@@ -1,4 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-var keyHandling = require("../../decorators/keyhandling-decorator.jsx");
-module.exports = keyHandling(generateBase("tracing", handler));

chapters/weightcontrol/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("weightcontrol", handler);

chapters/yforx/index.js

@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("yforx", handler);

index.html

@@ -1494,6 +1494,30 @@ function RationalBezier(3,t,w[],r[]):
               point at <code>t</code>.
             </li>
           </ul>
+          <p>
+            To see this in action, mouse-over the following sketch. Moving the
+            mouse changes which curve point is explicitly evaluated using de
+            Casteljau's algorithm, moving the cursor left-to-right (or, of
+            course, right-to-left), shows you how a curve is generated using
+            this approach.
+          </p>
+          <graphics-element
+            title="Traversing a curve using de Casteljau's algorithm"
+            width="275"
+            height="275"
+            src="./chapters/decasteljau/decasteljau.js"
+          >
+            <fallback-image>
+              <img
+                width="275px"
+                height="275px"
+                src="images\chapters\decasteljau\425ee92efb13c790f63f8b3821327d3b.png"
+                loading="lazy"
+              />
+              Scripts are disabled. Showing fallback image.
+            </fallback-image></graphics-element
+          >
+
           <div class="howtocode">
             <h3>How to implement de Casteljau's algorithm</h3>
             <p>
@@ -1532,18 +1556,6 @@ function RationalBezier(3,t,w[],r[]):
               for this new list.
             </p>
           </div>
-
-          <p>
-            To see this in action, mouse-over the following sketch. Moving the
-            mouse changes which curve point is explicitly evaluated using de
-            Casteljau's algorithm, moving the cursor left-to-right (or, of
-            course, right-to-left), shows you how a curve is generated using
-            this approach.
-          </p>
-          <p>
-            &lt;Graphictitle="Traversing a curve using de Casteljau's algorithm"
-            setup={this.setup} draw={this.draw}/&gt;
-          </p>
         </section>
         <section id="flattening">
           <h1><a href="#flattening">Simplified drawing</a></h1>

ja-JP/index.html

@@ -1162,6 +1162,26 @@ function RationalBezier(3,t,w[],r[]):
               1本の直線になるまで繰り返します。その直線上の<code>t</code>の点は、元の曲線上で<code>t</code>となる点に一致しています。
             </li>
           </ul>
+          <p>
+            下の図にマウスを乗せると、この様子を実際に見ることができます。ド・カステリョのアルゴリズムによって曲線上の点を明示的に計算していますが、マウスを動かすと求める点が変わります。マウスカーソルを左から右へ（もちろん、右から左へでも）動かせば、このアルゴリズムによって曲線が生成される様子がわかります。
+          </p>
+          <graphics-element
+            title="ド・カステリョのアルゴリズムで曲線をたどる"
+            width="275"
+            height="275"
+            src="./chapters/decasteljau/decasteljau.js"
+          >
+            <fallback-image>
+              <img
+                width="275px"
+                height="275px"
+                src="images\chapters\decasteljau\425ee92efb13c790f63f8b3821327d3b.png"
+                loading="lazy"
+              />
+              Scripts are disabled. Showing fallback image.
+            </fallback-image></graphics-element
+          >
+
           <div class="howtocode">
             <h3>ド・カステリョのアルゴリズムの実装方法</h3>
             <p>いま説明したアルゴリズムを実装すると、以下のようになります。</p>
@@ -1190,15 +1210,6 @@ function RationalBezier(3,t,w[],r[]):
               さて、これは何をしているのでしょう？関数に渡す点のリストが長さ1であれば、点を1つ描きます。それ以外であれば、比率<i>t</i>の位置の点（すなわち、さきほどの説明に出てきた「印」）のリストを作り、そしてこの新しいリストを引数にして関数を呼び出します。
             </p>
           </div>
-
-          <p>
-            下の図にマウスを乗せると、この様子を実際に見ることができます。ド・カステリョのアルゴリズムによって曲線上の点を明示的に計算していますが、マウスを動かすと求める点が変わります。マウスカーソルを左から右へ（もちろん、右から左へでも）動かせば、このアルゴリズムによって曲線が生成される様子がわかります。
-          </p>
-          <Graphic
-            title="ド・カステリョのアルゴリズムで曲線をたどる"
-            setup="{this.setup}"
-            draw="{this.draw}"
-          />
         </section>
         <section id="flattening">
           <h1><a href="#flattening">簡略化した描画</a></h1>

lib/custom-element/api/types/bezier.js

@@ -1,3 +1,4 @@
+import { Vector } from "./vector.js";
 import { Bezier as Original } from "../../lib/bezierjs/bezier.js";
 
 /**
@@ -124,6 +125,34 @@ class Bezier extends Original {
     ctx.stroke();
     ctx.restoreStyle();
   }
+
+  drawStruts(t) {
+    const p = this.points.map((p) => new Vector(p));
+    const mt = 1 - t;
+
+    const api = this.api;
+    const ctx = api.ctx;
+    ctx.cacheStyle();
+    api.noFill();
+
+    let s = 0;
+    let n = p.length + 1;
+    while (--n > 1) {
+      let list = p.slice(s, s + n);
+      api.start();
+      for (let i = 0, e = list.length - 1; i < e; i++) {
+        let pt = list[i + 1].subtract(list[i + 1].subtract(list[i]).scale(mt));
+        p.push(pt);
+        api.vertex(pt.x, pt.y);
+        api.circle(pt.x, pt.y, 5);
+      }
+      api.end();
+      s += n;
+    }
+    ctx.restoreStyle();
+
+    return p;
+  }
 }
 
 export { Bezier };

zh-CN/index.html

@@ -1126,6 +1126,27 @@ function RationalBezier(3,t,w[],r[]):
               重复这些步骤，直到剩下一条线。这条线段上的<code>t</code>点就是原始曲线在<code>t</code>处的点。
             </li>
           </ul>
+          <p>
+            我们通过实际操作来观察这个过程。在以下的图表中，移动鼠标来改变用de
+            Casteljau算法计算得到的曲线点，左右移动鼠标，可以实时看到曲线是如何生成的。
+          </p>
+          <graphics-element
+            title="用de Casteljau算法来遍历曲线"
+            width="275"
+            height="275"
+            src="./chapters/decasteljau/decasteljau.js"
+          >
+            <fallback-image>
+              <img
+                width="275px"
+                height="275px"
+                src="images\chapters\decasteljau\425ee92efb13c790f63f8b3821327d3b.png"
+                loading="lazy"
+              />
+              Scripts are disabled. Showing fallback image.
+            </fallback-image></graphics-element
+          >
+
           <div class="howtocode">
             <h3>如何实现de Casteljau算法</h3>
             <p>让我们使用刚才描述过的算法，并实现它：</p>
@@ -1155,15 +1176,6 @@ function RationalBezier(3,t,w[],r[]):
               就画出一个点。如果有多个点，就生成以<i>t</i>为比例的一系列点（例如，以上算法中的"标记点"），然后为新的点列表调用绘制函数。
             </p>
           </div>
-
-          <p>
-            我们通过实际操作来观察这个过程。在以下的图表中，移动鼠标来改变用de
-            Casteljau算法计算得到的曲线点，左右移动鼠标，可以实时看到曲线是如何生成的。
-          </p>
-          <p>
-            &lt;Graphictitle="用de Casteljau算法来遍历曲线" setup={this.setup}
-            draw={this.draw}/&gt;
-          </p>
         </section>
         <section id="flattening">
           <h1><a href="#flattening">简化绘图</a></h1>