diff --git a/chapters/extended/content.en-GB.md b/chapters/extended/content.en-GB.md
index f126cf5c..eed33368 100644
--- a/chapters/extended/content.en-GB.md
+++ b/chapters/extended/content.en-GB.md
@@ -22,7 +22,7 @@ In the case of Bézier curves, extending the interval simply makes our curve "ke
The following two graphics show you Bézier curves rendered "the usual way", as well as the curves they "lie on" if we were to extend the `t` values much further. As you can see, there's a lot more "shape" hidden in the rest of the curve, and we can model those parts by moving the curve points around.
-
-
+
+
In fact, there are curves used in graphics design and computer modelling that do the opposite of Bézier curves; rather than fixing the interval, and giving you freedom to choose the coordinates, they fix the coordinates, but give you freedom over the interval. A great example of this is the ["Spiro" curve](http://levien.com/phd/phd.html), which is a curve based on part of a [Cornu Spiral, also known as Euler's Spiral](https://en.wikipedia.org/wiki/Euler_spiral). It's a very aesthetically pleasing curve and you'll find it in quite a few graphics packages like [FontForge](https://fontforge.github.io) and [Inkscape](https://inkscape.org). It has even been used in font design, for example for the Inconsolata typeface.
diff --git a/chapters/extended/content.ja-JP.md b/chapters/extended/content.ja-JP.md
index ea28be7b..ba1d1a0d 100644
--- a/chapters/extended/content.ja-JP.md
+++ b/chapters/extended/content.ja-JP.md
@@ -22,7 +22,7 @@
下の2つの図は「いつもの方法」で描いたベジエ曲線ですが、これと一緒に、`t`の値をずっと先まで広げた場合の「延びた」ベジエ曲線も表示しています。見てわかるように、曲線の残りの部分には多くの「かたち」が隠れています。そして曲線の点を動かせば、その部分の形状も変わります。
-
-
+
+
実際に、グラフィックデザインやコンピュータモデリングで使われている曲線の中には、座標が固定されていて、区間は自由に動かせるような曲線があります。これは、区間が固定されていて、座標を自由に動かすことのできるベジエ曲線とは反対になっています。すばらしい例が[「Spiro」曲線](http://levien.com/phd/phd.html)で、これは[オイラー螺旋とも呼ばれるクロソイド曲線](https://ja.wikipedia.org/wiki/クロソイド曲線)の一部分に基づいた曲線です。非常に美しく心地よい曲線で、[FontForge](https://fontforge.github.io)や[Inkscape](https://inkscape.org/ja/)など多くのグラフィックアプリに実装されており、フォントデザインにも利用されています（Inconsolataフォントなど）。
diff --git a/chapters/extended/content.zh-CN.md b/chapters/extended/content.zh-CN.md
index bae7ee60..edb92175 100644
--- a/chapters/extended/content.zh-CN.md
+++ b/chapters/extended/content.zh-CN.md
@@ -22,7 +22,7 @@
下面两个图形给你展示了以“普通方式”来渲染的贝塞尔曲线，以及如果我们扩大`t`值时它们所“位于”的曲线。如你所见，曲线的剩余部分隐藏了很多“形状”，我们可以通过移动曲线的点来建模这部分。
-
-
+
+
实际上，图形设计和计算机建模中还用了一些和贝塞尔曲线相反的曲线，这些曲线没有固定区间和自由的坐标，相反，它们固定座标但给你自由的区间。["Spiro"曲线](http://levien.com/phd/phd.html)就是一个很好的例子，它的构造是基于[羊角螺线,也就是欧拉螺线](https://zh.wikipedia.org/wiki/%E7%BE%8A%E8%A7%92%E8%9E%BA%E7%BA%BF)的一部分。这是在美学上很令人满意的曲线，你可以在一些图形包中看到它，比如[FontForge](https://fontforge.github.io)和[Inkscape](https://inkscape.org)，它也被用在一些字体设计中（比如Inconsolata字体）。
diff --git a/chapters/extended/cubic.js b/chapters/extended/cubic.js
new file mode 100644
index 00000000..0b0fac71
--- /dev/null
+++ b/chapters/extended/cubic.js
@@ -0,0 +1,36 @@
+setup() {
+ this.curve = Bezier.defaultCubic(this);
+ setMovable(this.curve.points);
+}
+
+draw() {
+ const curve = this.curve;
+
+ clear();
+ curve.drawCurve();
+ curve.drawSkeleton();
+
+ let step=0.05, min=-10, max=10;
+ let pt = curve.get(min - step), pn;
+
+ setStroke(`lightgrey`);
+
+ for (let t=min; t<=step; t+=step) {
+ pn = curve.get(t);
+ line(pt.x, pt.y, pn.x, pn.y);
+ pt = pn;
+ }
+
+ pt = curve.get(1);
+ for (let t=1+step; t<=max; t+=step) {
+ pn = curve.get(t);
+ line(pt.x, pt.y, pn.x, pn.y);
+ pt = pn;
+ }
+
+ curve.drawPoints();
+}
+
+onMouseMove() {
+ redraw();
+}
diff --git a/chapters/extended/handler.js b/chapters/extended/handler.js
deleted file mode 100644
index 8798e8a9..00000000
--- a/chapters/extended/handler.js
+++ /dev/null
@@ -1,34 +0,0 @@
-module.exports = {
- setupQuadratic: function(api) {
- var curve = new api.Bezier(70, 155, 20, 110, 100,75);
- api.setCurve(curve);
- },
-
- setupCubic: function(api) {
- var curve = new api.Bezier(60,105, 75,30, 215,115, 140,160);
- api.setCurve(curve);
- },
-
- draw: function(api, curve) {
- api.reset();
- api.drawSkeleton(curve);
- api.drawCurve(curve);
- api.setColor("lightgrey");
-
- var t, step=0.05, min=-10;
- var pt = curve.get(min - step), pn;
- for (t=min; t<=step; t+=step) {
- pn = curve.get(t);
- api.drawLine(pt, pn);
- pt = pn;
- }
-
- pt = curve.get(1);
- var max = 10;
- for (t=1+step; t<=max; t+=step) {
- pn = curve.get(t);
- api.drawLine(pt, pn);
- pt = pn;
- }
- }
-};
diff --git a/chapters/extended/index.js b/chapters/extended/index.js
deleted file mode 100644
index a919abbf..00000000
--- a/chapters/extended/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var handler = require("./handler.js");
-var generateBase = require("../../generate-base");
-module.exports = generateBase("extended", handler);
\ No newline at end of file
diff --git a/chapters/extended/quadratic.js b/chapters/extended/quadratic.js
new file mode 100644
index 00000000..f37d3941
--- /dev/null
+++ b/chapters/extended/quadratic.js
@@ -0,0 +1,36 @@
+setup() {
+ this.curve = Bezier.defaultQuadratic(this);
+ setMovable(this.curve.points);
+}
+
+draw() {
+ const curve = this.curve;
+
+ clear();
+ curve.drawCurve();
+ curve.drawSkeleton();
+
+ let step=0.05, min=-10, max=10;
+ let pt = curve.get(min - step), pn;
+
+ setStroke(`lightgrey`);
+
+ for (let t=min; t<=step; t+=step) {
+ pn = curve.get(t);
+ line(pt.x, pt.y, pn.x, pn.y);
+ pt = pn;
+ }
+
+ pt = curve.get(1);
+ for (let t=1+step; t<=max; t+=step) {
+ pn = curve.get(t);
+ line(pt.x, pt.y, pn.x, pn.y);
+ pt = pn;
+ }
+
+ curve.drawPoints();
+}
+
+onMouseMove() {
+ redraw();
+}
diff --git a/chapters/weightcontrol/content.en-GB.md b/chapters/weightcontrol/content.en-GB.md
index 0b0c494d..aa8b3861 100644
--- a/chapters/weightcontrol/content.en-GB.md
+++ b/chapters/weightcontrol/content.en-GB.md
@@ -14,9 +14,13 @@ The function for rational Bézier curves has two more terms:
Rational\ Bézier(n,t) = \frac{ \sum_{i=0}^{n} \binom{n}{i} \cdot (1-t)^{n-i} \cdot t^{i} \cdot w_i \cdot BLUE[ratio_i] }{ BLUE[ \sum_{i=0}^{n} \binom{n}{i} \cdot (1-t)^{n-i} \cdot t^{i} \cdot ratio_i ] }
\]
-In this, the first new term represents the ratio for each coordinate, as a multiplication factor. If our ratio values are [1, 0.5, 0.5, 1] then ratio0 = 1, ratio1 = 0.5, and so on. The second term then corrects for all those multiplications by dividing the total value by the "basis" value of the Bézier curve, i.e. the value we get by computing the curve without any weighting (but _with_ ratios):
+In this, the first new term represents an additional weight for each coordinate. For example, if our ratio values are [1, 0.5, 0.5, 1] then ratio0 = 1, ratio1 = 0.5, and so on, and is effectively identical as if we were just using different weight. So far, nothing too special.
-So what does this actually do? Let's look at the effect of "rationalising" our Bézier curves by interacting with the curve and ratios. The following graphic shows the curve from the previous section, enriched with ratio factors: the closer to zero we set one or more terms, the less relative influence the associated coordinate exerts on the curve (and of course the higher we set them, the more influence they have).
+However, the second new term is what makes the difference: every point on the curve isn't just a "double weighted" point, it is a _fraction_ of the "doubly weighted" value we compute by introducing that ratio. When computing points on the curve, we compute the "normal" Bézier value and then _divide_ that by the Bézier value for the curve that only uses ratios, not weights.
+
+This does something unexpected: it turns our polynomial into something that _isn't_ a polynomial anymore. It is now a kind of curve that is a super class of the polynomials, and can do some really cool things that Bézier curves can't do "on their own", such as perfectly describing circles (which we'll see in a later section is literally impossible using standard Bézier curves).
+
+But the best way to show what this does is to do literally that: let's look at the effect of "rationalising" our Bézier curves using an interactive graphic for a rationalised curves. The following graphic shows the Bézier curve from the previous section, "enriched" with ratio factors for each coordinate. The closer to zero we set one or more terms, the less relative influence the associated coordinate exerts on the curve (and of course the higher we set them, the more influence they have). Try to change the values and see how it affects what gets drawn:
ratio 1 1.0
diff --git a/images/chapters/extended/1fe3b1a82239206cf84cfb5c40501e86.png b/images/chapters/extended/1fe3b1a82239206cf84cfb5c40501e86.png
new file mode 100644
index 00000000..3b671388
Binary files /dev/null and b/images/chapters/extended/1fe3b1a82239206cf84cfb5c40501e86.png differ
diff --git a/images/chapters/extended/3953e70caad4d8af3d0d9fb3b99fcdb4.png b/images/chapters/extended/3953e70caad4d8af3d0d9fb3b99fcdb4.png
new file mode 100644
index 00000000..4117bfa9
Binary files /dev/null and b/images/chapters/extended/3953e70caad4d8af3d0d9fb3b99fcdb4.png differ
diff --git a/images/chapters/extended/478e2ee26117a091261fb504d66780c2.png b/images/chapters/extended/478e2ee26117a091261fb504d66780c2.png
new file mode 100644
index 00000000..4117bfa9
Binary files /dev/null and b/images/chapters/extended/478e2ee26117a091261fb504d66780c2.png differ
diff --git a/images/chapters/extended/74a3ba53c0d1a79938bd2b1b8d57497d.png b/images/chapters/extended/74a3ba53c0d1a79938bd2b1b8d57497d.png
new file mode 100644
index 00000000..ff7c4e9c
Binary files /dev/null and b/images/chapters/extended/74a3ba53c0d1a79938bd2b1b8d57497d.png differ
diff --git a/images/chapters/extended/90028fd96e5bdf547a0dd356bb56ea61.png b/images/chapters/extended/90028fd96e5bdf547a0dd356bb56ea61.png
new file mode 100644
index 00000000..3b671388
Binary files /dev/null and b/images/chapters/extended/90028fd96e5bdf547a0dd356bb56ea61.png differ
diff --git a/index.html b/index.html
index e2363630..7b3f3438 100644
--- a/index.html
+++ b/index.html
@@ -1087,23 +1087,39 @@ function Bezier(3,t,w[]):
loading="lazy"
/>
- In this, the first new term represents the ratio for each
- coordinate, as a multiplication factor. If our ratio values are [1,
- 0.5, 0.5, 1] then ratio0 = 1,
- ratio1 = 0.5, and so on. The second term
- then corrects for all those multiplications by dividing the total
- value by the "basis" value of the Bézier curve, i.e. the value we
- get by computing the curve without any weighting (but
- with ratios):
+ In this, the first new term represents an additional weight for each
+ coordinate. For example, if our ratio values are [1, 0.5, 0.5, 1]
+ then ratio0 = 1,
+ ratio1 = 0.5, and so on, and is effectively
+ identical as if we were just using different weight. So far, nothing
+ too special.
- So what does this actually do? Let's look at the effect of
- "rationalising" our Bézier curves by interacting with the curve and
- ratios. The following graphic shows the curve from the previous
- section, enriched with ratio factors: the closer to zero we set one
- or more terms, the less relative influence the associated coordinate
- exerts on the curve (and of course the higher we set them, the more
- influence they have).
+ However, the second new term is what makes the difference: every
+ point on the curve isn't just a "double weighted" point, it is a
+ fraction of the "doubly weighted" value we compute by
+ introducing that ratio. When computing points on the curve, we
+ compute the "normal" Bézier value and then divide that by
+ the Bézier value for the curve that only uses ratios, not weights.
+
+
+ This does something unexpected: it turns our polynomial into
+ something that isn't a polynomial anymore. It is now a kind
+ of curve that is a super class of the polynomials, and can do some
+ really cool things that Bézier curves can't do "on their own", such
+ as perfectly describing circles (which we'll see in a later section
+ is literally impossible using standard Bézier curves).
+
+
+ But the best way to show what this does is to do literally that:
+ let's look at the effect of "rationalising" our Bézier curves using
+ an interactive graphic for a rationalised curves. The following
+ graphic shows the Bézier curve from the previous section, "enriched"
+ with ratio factors for each coordinate. The closer to zero we set
+ one or more terms, the less relative influence the associated
+ coordinate exerts on the curve (and of course the higher we set
+ them, the more influence they have). Try to change the values and
+ see how it affects what gets drawn:
In fact, there are curves used in graphics design and computer
diff --git a/ja-JP/index.html b/ja-JP/index.html
index ac2494a0..1e161d8b 100644
--- a/ja-JP/index.html
+++ b/ja-JP/index.html
@@ -817,23 +817,39 @@ function Bezier(3,t,w[]):
loading="lazy"
/>
- In this, the first new term represents the ratio for each
- coordinate, as a multiplication factor. If our ratio values are [1,
- 0.5, 0.5, 1] then ratio0 = 1,
- ratio1 = 0.5, and so on. The second term
- then corrects for all those multiplications by dividing the total
- value by the "basis" value of the Bézier curve, i.e. the value we
- get by computing the curve without any weighting (but
- with ratios):
+ In this, the first new term represents an additional weight for each
+ coordinate. For example, if our ratio values are [1, 0.5, 0.5, 1]
+ then ratio0 = 1,
+ ratio1 = 0.5, and so on, and is effectively
+ identical as if we were just using different weight. So far, nothing
+ too special.
- So what does this actually do? Let's look at the effect of
- "rationalising" our Bézier curves by interacting with the curve and
- ratios. The following graphic shows the curve from the previous
- section, enriched with ratio factors: the closer to zero we set one
- or more terms, the less relative influence the associated coordinate
- exerts on the curve (and of course the higher we set them, the more
- influence they have).
+ However, the second new term is what makes the difference: every
+ point on the curve isn't just a "double weighted" point, it is a
+ fraction of the "doubly weighted" value we compute by
+ introducing that ratio. When computing points on the curve, we
+ compute the "normal" Bézier value and then divide that by
+ the Bézier value for the curve that only uses ratios, not weights.
+
+
+ This does something unexpected: it turns our polynomial into
+ something that isn't a polynomial anymore. It is now a kind
+ of curve that is a super class of the polynomials, and can do some
+ really cool things that Bézier curves can't do "on their own", such
+ as perfectly describing circles (which we'll see in a later section
+ is literally impossible using standard Bézier curves).
+
+
+ But the best way to show what this does is to do literally that:
+ let's look at the effect of "rationalising" our Bézier curves using
+ an interactive graphic for a rationalised curves. The following
+ graphic shows the Bézier curve from the previous section, "enriched"
+ with ratio factors for each coordinate. The closer to zero we set
+ one or more terms, the less relative influence the associated
+ coordinate exerts on the curve (and of course the higher we set
+ them, the more influence they have). Try to change the values and
+ see how it affects what gets drawn:
- In this, the first new term represents the ratio for each
- coordinate, as a multiplication factor. If our ratio values are [1,
- 0.5, 0.5, 1] then ratio0 = 1,
- ratio1 = 0.5, and so on. The second term
- then corrects for all those multiplications by dividing the total
- value by the "basis" value of the Bézier curve, i.e. the value we
- get by computing the curve without any weighting (but
- with ratios):
+ In this, the first new term represents an additional weight for each
+ coordinate. For example, if our ratio values are [1, 0.5, 0.5, 1]
+ then ratio0 = 1,
+ ratio1 = 0.5, and so on, and is effectively
+ identical as if we were just using different weight. So far, nothing
+ too special.
- So what does this actually do? Let's look at the effect of
- "rationalising" our Bézier curves by interacting with the curve and
- ratios. The following graphic shows the curve from the previous
- section, enriched with ratio factors: the closer to zero we set one
- or more terms, the less relative influence the associated coordinate
- exerts on the curve (and of course the higher we set them, the more
- influence they have).
+ However, the second new term is what makes the difference: every
+ point on the curve isn't just a "double weighted" point, it is a
+ fraction of the "doubly weighted" value we compute by
+ introducing that ratio. When computing points on the curve, we
+ compute the "normal" Bézier value and then divide that by
+ the Bézier value for the curve that only uses ratios, not weights.
+
+
+ This does something unexpected: it turns our polynomial into
+ something that isn't a polynomial anymore. It is now a kind
+ of curve that is a super class of the polynomials, and can do some
+ really cool things that Bézier curves can't do "on their own", such
+ as perfectly describing circles (which we'll see in a later section
+ is literally impossible using standard Bézier curves).
+
+
+ But the best way to show what this does is to do literally that:
+ let's look at the effect of "rationalising" our Bézier curves using
+ an interactive graphic for a rationalised curves. The following
+ graphic shows the Bézier curve from the previous section, "enriched"
+ with ratio factors for each coordinate. The closer to zero we set
+ one or more terms, the less relative influence the associated
+ coordinate exerts on the curve (and of course the higher we set
+ them, the more influence they have). Try to change the values and
+ see how it affects what gets drawn:
+ Scripts are disabled. Showing fallback image.
+ 
+ Scripts are disabled. Showing fallback image.
+