this rename is absolutely stupid

docs/chapters/extended/content.en-GB.md

@@ -0,0 +1,28 @@
+# The Bézier interval [0,1]
+
+Now that we know the mathematics behind Bézier curves, there's one curious thing that you may have noticed: they always run from `t=0` to `t=1`. Why that particular interval?
+
+It all has to do with how we run from "the start" of our curve to "the end" of our curve. If we have a value that is a mixture of two other values, then the general formula for this is:
+
+\[
+  mixture = a \cdot value_1 + b \cdot value_2
+\]
+
+The obvious start and end values here need to be `a=1, b=0`, so that the mixed value is 100% value 1, and 0% value 2, and `a=0, b=1`, so that the mixed value is 0% value 1 and 100% value 2. Additionally, we don't want "a" and "b" to be independent: if they are, then we could just pick whatever values we like, and end up with a mixed value that is, for example, 100% value 1 **and** 100% value 2. In principle that's fine, but for Bézier curves we always want mixed values *between* the start and end point, so we need to make sure we can never set "a" and "b" to some values that lead to a mix value that sums to more than 100%. And that's easy:
+
+\[
+  m = a \cdot value_1 + (1 - a) \cdot value_2
+\]
+
+With this we can guarantee that we never sum above 100%. By restricting `a` to values in the interval [0,1], we will always be somewhere between our two values (inclusively), and we will always sum to a 100% mix.
+
+But... what if we use this form, which is based on the assumption that we will only ever use values between 0 and 1, and instead use values outside of that interval? Do things go horribly wrong? Well... not really, but we get to "see more".
+
+In the case of Bézier curves, extending the interval simply makes our curve "keep going". Bézier curves are simply segments of some polynomial curve, so if we pick a wider interval we simply get to see more of the curve. So what do they look like?
+
+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.
+
+<graphics-element title="Quadratic infinite interval Bézier curve" src="./quadratic.js"></graphics-element>
+<graphics-element title="Cubic infinite interval Bézier curve" src="./cubic.js"></graphics-element>
+
+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.

docs/chapters/extended/content.ja-JP.md

@@ -0,0 +1,28 @@
+# ベジエ曲線の区間 [0,1]
+
+ここまでの説明で、ベジエ曲線の裏側にある数学がわかりました。しかし、気づいているかもしれませんが、ひとつ引っかかる点があります。ベジエ曲線はいつも`t=0`から`t=1`の間を動いていますが、どうしてこの特定の区間なのでしょう？
+
+このことは、曲線の「始点」から曲線の「終点」までどうやって動かすか、ということにすべて関係しています。2つの値を混ぜ合わせて1つの値をつくる場合、一般の式は次のようになります。
+
+\[
+  混ぜ合わさった値 = a \cdot 値_1 + b \cdot 値_2
+\]
+
+明らかに、始点では`a=1, b=0`とする必要があります。こうすれば、値1が100%、値2が0%で混ぜ合わさるからです。また、終点では`a=0, b=1`とする必要があります。こうすれば、値1が0%、値2が100%で混ぜ合わさります。これに加えて、`a`と`b`を独立にしておきたくはありません。独立になっている場合、何でも好きな値にすることできますが、こうすると例えば「値1が100%**かつ**値2が100%」のようなことが可能になってしまいます。これはこれで原則としてはかまいませんが、ベジエ曲線の場合は混ぜ合わさった値が常に始点と終点の*間*になってほしいのです。というわけで、混ぜ合わせの和が100%を決して超えないように、`a`と`b`の値を設定する必要があります。これは次のようにすれば簡単です。
+
+\[
+  混ぜ合わさった値 = a \cdot 値_1 + (1 - a) \cdot 値_2
+\]
+
+こうすれば、和が100%を超えることはないと保証できます。`a`の値を区間[0,1]に制限してしまえば、混ぜ合わさった値は常に2つの値の間のどこか（両端を含む）になり、また和は常に100%になります。
+
+しかし……この式を0と1の間の値だけで使うのではなく、もし仮にこの区間の外の値で使うとしたら、どうなるのでしょう？めちゃくちゃになってしまうのでしょうか？……実はそうではありません。「その先」が見えるのです。
+
+ベジエ曲線の場合、区間を広げると曲線は単純に「そのまま延びて」いきます。ベジエ曲線はある多項式曲線の一部分にすぎませんので、単純に区間を広くとればとるほど、曲線のより多くの部分が現れるようになります。では、どのように見えるのでしょうか？
+
+下の2つの図は「いつもの方法」で描いたベジエ曲線ですが、これと一緒に、`t`の値をずっと先まで広げた場合の「延びた」ベジエ曲線も表示しています。見てわかるように、曲線の残りの部分には多くの「かたち」が隠れています。そして曲線の点を動かせば、その部分の形状も変わります。
+
+<graphics-element title="無限区間の2次ベジエ曲線" src="./quadratic.js"></graphics-element>
+<graphics-element title="無限区間の3次ベジエ曲線" src="./cubic.js"></graphics-element>
+
+実際に、グラフィックデザインやコンピュータモデリングで使われている曲線の中には、座標が固定されていて、区間は自由に動かせるような曲線があります。これは、区間が固定されていて、座標を自由に動かすことのできるベジエ曲線とは反対になっています。すばらしい例が[「Spiro」曲線](http://levien.com/phd/phd.html)で、これは[オイラー螺旋とも呼ばれるクロソイド曲線](https://ja.wikipedia.org/wiki/クロソイド曲線)の一部分に基づいた曲線です。非常に美しく心地よい曲線で、[FontForge](https://fontforge.github.io)や[Inkscape](https://inkscape.org/ja/)など多くのグラフィックアプリに実装されており、フォントデザインにも利用されています（Inconsolataフォントなど）。

docs/chapters/extended/content.zh-CN.md

@@ -0,0 +1,28 @@
+# 贝塞尔区间[0,1]
+
+既然我们知道了贝塞尔曲线背后的数学原理，你可能会注意到一件奇怪的事：它们都是从`t=0`到`t=1`。为什么是这个特殊区间？
+
+这一切都与我们如何从曲线的“起点”变化到曲线“终点”有关。如果有一个值是另外两个值的混合，一般方程如下：
+
+\[
+  mixture = a \cdot value_1 + b \cdot value_2
+\]
+
+很显然，起始值需要`a=1, b=0`，混合值就为100%的value 1和0%的value 2。终点值需要`a=0, b=1`，则混合值是0%的value 1和100%的value 2。另外，我们不想让“a”和“b”是互相独立的:如果它们是互相独立的话，我们可以任意选出自己喜欢的值，并得到混合值，比如说100%的value1和100%的value2。原则上这是可以的，但是对于贝塞尔曲线来说，我们通常想要的是起始值和终点值*之间*的混合值，所以要确保我们不会设置一些“a”和"b"而导致混合值超过100%。这很简单：
+
+\[
+  m = a \cdot value_1 + (1 - a) \cdot value_2
+\]
+
+用这个式子我们可以保证相加的值永远不会超过100%。通过将`a`限制在区间[0，1],我们将会一直处于这两个值之间（包括这两个端点），并且相加为100%。
+
+但是...如果我们没有假定只使用0到1之间的数，而是用一些区间外的值呢，事情会变得很糟糕吗？好吧...不全是，我们接下来看看。
+
+对于贝塞尔曲线的例子，扩展区间只会使我们的曲线“保持延伸”。贝塞尔曲线是多项式曲线上简单的片段，如果我们选一个更大的区间，会看到曲线更多部分。它们看起来是什么样的呢？
+
+下面两个图形给你展示了以“普通方式”来渲染的贝塞尔曲线，以及如果我们扩大`t`值时它们所“位于”的曲线。如你所见，曲线的剩余部分隐藏了很多“形状”，我们可以通过移动曲线的点来建模这部分。
+
+<graphics-element title="二次无限区间贝塞尔曲线" src="./quadratic.js"></graphics-element>
+<graphics-element title="三次无限区间贝塞尔曲线" src="./cubic.js"></graphics-element>
+
+实际上，图形设计和计算机建模中还用了一些和贝塞尔曲线相反的曲线，这些曲线没有固定区间和自由的坐标，相反，它们固定座标但给你自由的区间。["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字体）。

docs/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(`skyblue`);
+
+    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();
+}

docs/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(`skyblue`);
+
+    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();
+}