### 如何实现de Casteljau算法
@@ -48,7 +52,3 @@ function drawCurve(points[], t):
以上算法做了什么？如果参数points列表只有一个点， 就画出一个点。如果有多个点，就生成以t为比例的一系列点（例如，以上算法中的"标记点"），然后为新的点列表调用绘制函数。
-
-我们通过实际操作来观察这个过程。在以下的图表中，移动鼠标来改变用de Casteljau算法计算得到的曲线点，左右移动鼠标，可以实时看到曲线是如何生成的。
-
-
diff --git a/chapters/decasteljau/decasteljau.js b/chapters/decasteljau/decasteljau.js
new file mode 100644
index 00000000..a3dc0360
--- /dev/null
+++ b/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();
+}
diff --git a/chapters/decasteljau/handler.js b/chapters/decasteljau/handler.js
deleted file mode 100644
index 6cf34631..00000000
--- a/chapters/decasteljau/handler.js
+++ /dev/null
@@ -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});
- }
- }
-};
diff --git a/chapters/decasteljau/index.js b/chapters/decasteljau/index.js
deleted file mode 100644
index 8861f3ca..00000000
--- a/chapters/decasteljau/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("decasteljau", handler);
\ No newline at end of file
diff --git a/chapters/derivatives/index.js b/chapters/derivatives/index.js
deleted file mode 100644
index f00f8392..00000000
--- a/chapters/derivatives/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-var generateBase = require("../../generate-base");
-module.exports = generateBase("derivatives");
\ No newline at end of file
diff --git a/chapters/extremities/index.js b/chapters/extremities/index.js
deleted file mode 100644
index 1c3cd965..00000000
--- a/chapters/extremities/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("extremities", handler);
\ No newline at end of file
diff --git a/chapters/flattening/index.js b/chapters/flattening/index.js
deleted file mode 100644
index 112e5a31..00000000
--- a/chapters/flattening/index.js
+++ /dev/null
@@ -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));
\ No newline at end of file
diff --git a/chapters/graduatedoffset/index.js b/chapters/graduatedoffset/index.js
deleted file mode 100644
index 051f8a72..00000000
--- a/chapters/graduatedoffset/index.js
+++ /dev/null
@@ -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));
\ No newline at end of file
diff --git a/chapters/inflections/index.js b/chapters/inflections/index.js
deleted file mode 100644
index a28eed56..00000000
--- a/chapters/inflections/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("inflections", handler);
\ No newline at end of file
diff --git a/chapters/intersections/index.js b/chapters/intersections/index.js
deleted file mode 100644
index f32256bb..00000000
--- a/chapters/intersections/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("intersections", handler);
\ No newline at end of file
diff --git a/chapters/matrix/index.js b/chapters/matrix/index.js
deleted file mode 100644
index 7d212430..00000000
--- a/chapters/matrix/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-var generateBase = require("../../generate-base");
-module.exports = generateBase("matrix");
\ No newline at end of file
diff --git a/chapters/matrixsplit/index.js b/chapters/matrixsplit/index.js
deleted file mode 100644
index c38d5464..00000000
--- a/chapters/matrixsplit/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-var generateBase = require("../../generate-base");
-module.exports = generateBase("matrixsplit");
\ No newline at end of file
diff --git a/chapters/moulding/index.js b/chapters/moulding/index.js
deleted file mode 100644
index 086e4053..00000000
--- a/chapters/moulding/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("moulding", handler);
\ No newline at end of file
diff --git a/chapters/offsetting/index.js b/chapters/offsetting/index.js
deleted file mode 100644
index c006bed0..00000000
--- a/chapters/offsetting/index.js
+++ /dev/null
@@ -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));
\ No newline at end of file
diff --git a/chapters/pointcurves/index.js b/chapters/pointcurves/index.js
deleted file mode 100644
index a65c15f2..00000000
--- a/chapters/pointcurves/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("pointcurves", handler);
\ No newline at end of file
diff --git a/chapters/pointvectors/index.js b/chapters/pointvectors/index.js
deleted file mode 100644
index 7528b1f4..00000000
--- a/chapters/pointvectors/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("pointvectors", handler);
\ No newline at end of file
diff --git a/chapters/pointvectors3d/index.js b/chapters/pointvectors3d/index.js
deleted file mode 100644
index e54c6616..00000000
--- a/chapters/pointvectors3d/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("pointvectors3d", handler);
\ No newline at end of file
diff --git a/chapters/polybezier/index.js b/chapters/polybezier/index.js
deleted file mode 100644
index 9aeb5a1e..00000000
--- a/chapters/polybezier/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("polybezier", handler);
\ No newline at end of file
diff --git a/chapters/preface/index.js b/chapters/preface/index.js
deleted file mode 100644
index 05dcdb47..00000000
--- a/chapters/preface/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-var generateBase = require("../../generate-base");
-module.exports = generateBase("preface");
\ No newline at end of file
diff --git a/chapters/projections/index.js b/chapters/projections/index.js
deleted file mode 100644
index 057ae4d3..00000000
--- a/chapters/projections/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("projections", handler);
\ No newline at end of file
diff --git a/chapters/reordering/index.js b/chapters/reordering/index.js
deleted file mode 100644
index 1e32a75a..00000000
--- a/chapters/reordering/index.js
+++ /dev/null
@@ -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));
\ No newline at end of file
diff --git a/chapters/shapes/index.js b/chapters/shapes/index.js
deleted file mode 100644
index 95b63766..00000000
--- a/chapters/shapes/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("shapes", handler);
\ No newline at end of file
diff --git a/chapters/splitting/index.js b/chapters/splitting/index.js
deleted file mode 100644
index d77ea8b5..00000000
--- a/chapters/splitting/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("splitting", handler);
\ No newline at end of file
diff --git a/chapters/tightbounds/index.js b/chapters/tightbounds/index.js
deleted file mode 100644
index 1d5b97f6..00000000
--- a/chapters/tightbounds/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("tightbounds", handler);
\ No newline at end of file
diff --git a/chapters/tracing/index.js b/chapters/tracing/index.js
deleted file mode 100644
index 3db2a68c..00000000
--- a/chapters/tracing/index.js
+++ /dev/null
@@ -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));
\ No newline at end of file
diff --git a/chapters/weightcontrol/index.js b/chapters/weightcontrol/index.js
deleted file mode 100644
index e01d60c3..00000000
--- a/chapters/weightcontrol/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("weightcontrol", handler);
\ No newline at end of file
diff --git a/chapters/yforx/index.js b/chapters/yforx/index.js
deleted file mode 100644
index 4d03caf4..00000000
--- a/chapters/yforx/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("yforx", handler);
\ No newline at end of file
diff --git a/images/chapters/decasteljau/2ed0e7bb629970f59960d07f32281374.png b/images/chapters/decasteljau/2ed0e7bb629970f59960d07f32281374.png
new file mode 100644
index 00000000..07dab402
Binary files /dev/null and b/images/chapters/decasteljau/2ed0e7bb629970f59960d07f32281374.png differ
diff --git a/images/chapters/decasteljau/393938684e6cc709b10e8911092848ee.png b/images/chapters/decasteljau/393938684e6cc709b10e8911092848ee.png
new file mode 100644
index 00000000..fac86e03
Binary files /dev/null and b/images/chapters/decasteljau/393938684e6cc709b10e8911092848ee.png differ
diff --git a/images/chapters/decasteljau/425ee92efb13c790f63f8b3821327d3b.png b/images/chapters/decasteljau/425ee92efb13c790f63f8b3821327d3b.png
new file mode 100644
index 00000000..19e750b4
Binary files /dev/null and b/images/chapters/decasteljau/425ee92efb13c790f63f8b3821327d3b.png differ
diff --git a/images/chapters/decasteljau/5f3b714d4a4178ffa186ec59b059ca78.png b/images/chapters/decasteljau/5f3b714d4a4178ffa186ec59b059ca78.png
new file mode 100644
index 00000000..fac86e03
Binary files /dev/null and b/images/chapters/decasteljau/5f3b714d4a4178ffa186ec59b059ca78.png differ
diff --git a/index.html b/index.html
index 7b3f3438..ec3dd4d3 100644
--- a/index.html
+++ b/index.html
@@ -1494,6 +1494,30 @@ function RationalBezier(3,t,w[],r[]):
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.
+
+
+
+ 
+ Scripts are disabled. Showing fallback image.
+
+
How to implement de Casteljau's algorithm
@@ -1532,18 +1556,6 @@ function RationalBezier(3,t,w[],r[]):
for this new list.
-
-
- 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}/>
-
diff --git a/ja-JP/index.html b/ja-JP/index.html
index 1e161d8b..728c3497 100644
--- a/ja-JP/index.html
+++ b/ja-JP/index.html
@@ -1162,6 +1162,26 @@ function RationalBezier(3,t,w[],r[]):
1本の直線になるまで繰り返します。その直線上のtの点は、元の曲線上でtとなる点に一致しています。
+
+ 下の図にマウスを乗せると、この様子を実際に見ることができます。ド・カステリョのアルゴリズムによって曲線上の点を明示的に計算していますが、マウスを動かすと求める点が変わります。マウスカーソルを左から右へ（もちろん、右から左へでも）動かせば、このアルゴリズムによって曲線が生成される様子がわかります。
+
+
+
+
+ Scripts are disabled. Showing fallback image.
+
+
ド・カステリョのアルゴリズムの実装方法
いま説明したアルゴリズムを実装すると、以下のようになります。
@@ -1190,15 +1210,6 @@ function RationalBezier(3,t,w[],r[]):
さて、これは何をしているのでしょう？関数に渡す点のリストが長さ1であれば、点を1つ描きます。それ以外であれば、比率
tの位置の点（すなわち、さきほどの説明に出てきた「印」）のリストを作り、そしてこの新しいリストを引数にして関数を呼び出します。
-
-
- 下の図にマウスを乗せると、この様子を実際に見ることができます。ド・カステリョのアルゴリズムによって曲線上の点を明示的に計算していますが、マウスを動かすと求める点が変わります。マウスカーソルを左から右へ（もちろん、右から左へでも）動かせば、このアルゴリズムによって曲線が生成される様子がわかります。
-
- ![]( "ド・カステリョのアルゴリズムで曲線をたどる")
diff --git a/lib/custom-element/api/types/bezier.js b/lib/custom-element/api/types/bezier.js
index 56ed79f2..404d0821 100644
--- a/lib/custom-element/api/types/bezier.js
+++ b/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 };
diff --git a/zh-CN/index.html b/zh-CN/index.html
index c6a1e6db..5bccd8ad 100644
--- a/zh-CN/index.html
+++ b/zh-CN/index.html
@@ -1126,6 +1126,27 @@ function RationalBezier(3,t,w[],r[]):
重复这些步骤，直到剩下一条线。这条线段上的t点就是原始曲线在t处的点。
+
+ 我们通过实际操作来观察这个过程。在以下的图表中，移动鼠标来改变用de
+ Casteljau算法计算得到的曲线点，左右移动鼠标，可以实时看到曲线是如何生成的。
+
+
+
+
+ Scripts are disabled. Showing fallback image.
+
+
如何实现de Casteljau算法
让我们使用刚才描述过的算法，并实现它：
@@ -1155,15 +1176,6 @@ function RationalBezier(3,t,w[],r[]):
就画出一个点。如果有多个点，就生成以
t为比例的一系列点（例如，以上算法中的"标记点"），然后为新的点列表调用绘制函数。
-
-
- 我们通过实际操作来观察这个过程。在以下的图表中，移动鼠标来改变用de
- Casteljau算法计算得到的曲线点，左右移动鼠标，可以实时看到曲线是如何生成的。
-
-
- <Graphictitle="用de Casteljau算法来遍历曲线" setup={this.setup}
- draw={this.draw}/>
-