this rename is absolutely stupid

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

@@ -0,0 +1,10 @@
+# A lightning introduction
+
+Let's start with the good stuff: when we're talking about Bézier curves, we're talking about the things that you can see in the following graphics. They run from some start point to some end point, with their curvature influenced by one or more "intermediate" control points. Now, because all the graphics on this page are interactive, go manipulate those curves a bit: click-drag the points, and see how their shape changes based on what you do.
+
+<div class="figure">
+  <graphics-element title="A quadratic Bézier curve" src="./quadratic.js"></graphics-element>
+  <graphics-element title="A cubic Bézier curve" src="./cubic.js"></graphics-element>
+</div>
+
+These curves are used a lot in computer aided design and computer aided manufacturing (CAD/CAM) applications, as well as in graphic design programs like Adobe Illustrator and Photoshop, Inkscape, GIMP, etc. and in graphic technologies like scalable vector graphics (SVG) and OpenType fonts (TTF/OTF). A lot of things use Bézier curves, so if you want to learn more about them... prepare to get your learn on!

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

@@ -0,0 +1,10 @@
+# バッとした導入
+
+まずは良い例から始めましょう。ベジエ曲線というのは、下の図に表示されているもののことです。ベジエ曲線はある始点からある終点へと延びており、その曲率は1個以上の「中間」制御点に左右されています。さて、このページの図はどれもインタラクティブになっていますので、ここで曲線をちょっと操作してみましょう。点をドラッグしたとき、曲線の形がそれに応じてどう変化するのか、確かめてみてください。
+
+<div class="figure">
+  <graphics-element title="2次のベジエ曲線" src="./quadratic.js"></graphics-element>
+  <graphics-element title="3次のベジエ曲線" src="./cubic.js"></graphics-element>
+</div>
+
+ベジエ曲線は、CAD（computer aided designやCAM（computer aided manufacturing）のアプリケーションで多用されています。もちろん、Adobe Illustrator・Photoshop・Inkscape・Gimp などのグラフィックデザインアプリケーションや、SVG（scalable vector graphics）・OpenTypeフォント（otf/ttf）のようなグラフィック技術でも利用されています。ベジエ曲線はたくさんのものに使われていますので、これについてもっと詳しく学びたいのであれば……さあ、準備しましょう！

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

@@ -0,0 +1,10 @@
+# 简单介绍
+
+让我们有个好的开始：当我们在谈论贝塞尔曲线的时候，所指的就是你在如下图像看到的东西。它们从某些起点开始，到终点结束，并且受到一个或多个的“中间”控制点的影响。本页面上的图形都是可交互的，你可以拖动这些点，看看这些形状在你的操作下会怎么变化。
+
+<div class="figure">
+  <graphics-element title="二次贝塞尔曲线" src="./quadratic.js"></graphics-element>
+  <graphics-element title="三次贝塞尔曲线" src="./cubic.js"></graphics-element>
+</div>
+
+这些曲线在计算机辅助设计和计算机辅助制造应用（CAD/CAM）中用的很多。在图形设计软件中也常用到，像Adobe Illustrator, Photoshop, Inkscape, Gimp等等。还可以应用在一些图形技术中，像矢量图形（SVG）和OpenType字体（ttf/otf）。许多东西都用到贝塞尔曲线，如果你想更了解它们...准备好继续往下学吧！

docs/chapters/introduction/cubic.js

@@ -0,0 +1,16 @@
+setup() {
+  this.curve = Bezier.defaultCubic(this);
+  setMovable(this.curve.points);
+}
+
+draw() {
+  clear();
+  const curve = this.curve;
+  curve.drawSkeleton();
+  curve.drawCurve();
+  curve.drawPoints();
+}
+
+onMouseMove() {
+  redraw();
+}

docs/chapters/introduction/quadratic.js

@@ -0,0 +1,16 @@
+setup() {
+  this.curve = Bezier.defaultQuadratic(this);
+  setMovable(this.curve.points);
+}
+
+draw() {
+  clear();
+  const curve = this.curve;
+  curve.drawSkeleton();
+  curve.drawCurve();
+  curve.drawPoints();
+}
+
+onMouseMove() {
+  redraw();
+}