figured out how to reuse sketches with data-attribute parameters

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

@@ -5,11 +5,11 @@ We can also simplify the drawing process by "sampling" the curve at certain poin
 We can do this is by saying "we want X segments", and then sampling the curve at intervals that are spaced such that we end up with the number of segments we wanted. The advantage of this method is that it's fast: instead of evaluating 100 or even 1000 curve coordinates, we can sample a much lower number and still end up with a curve that sort-of-kind-of looks good enough. The disadvantage of course is that we lose the precision of working with "the real curve", so we usually can't use the flattened for for doing true intersection detection, or curvature alignment.
 
 <div class="figure">
-  <graphics-element title="Flattening a quadratic curve" src="./quadratic.js">
+  <graphics-element title="Flattening a quadratic curve" src="./flatten.js" data-type="quadratic">
     <input type="range" min="1" max="16" step="1" value="4" class="slide-control">
   </graphics-element>
 
-  <graphics-element title="Flattening a cubic curve" src="./cubic.js">
+  <graphics-element title="Flattening a cubic curve" src="./flatten.js" data-type="cubic">
     <input type="range" min="1" max="24" step="1" value="8" class="slide-control">
   </graphics-element>
 </div>

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

@@ -5,11 +5,11 @@
 例えば「X個の線分がほしい」場合には、分割数がそうなるようにサンプリング間隔を選び、曲線をサンプリングします。この方法の利点は速さです。曲線の座標を100個だの1000個だの計算するのではなく、ずっと少ない回数のサンプリングでも、十分きれいに見えるような曲線を作ることができるのです。欠点はもちろん、「本物の曲線」に比べて精度が損なわれてしまうことです。したがって、交点の検出や曲線の位置揃えを正しく行いたい場合には、平坦化した曲線は普通利用できません。
 
 <div class="figure">
-  <graphics-element title="2次ベジエ曲線の平坦化" src="./quadratic.js">
+  <graphics-element title="2次ベジエ曲線の平坦化" src="./flatten.js" data-type="quadratic">
     <input type="range" min="1" max="16" step="1" value="4" class="slide-control">
   </graphics-element>
 
-  <graphics-element title="3次ベジエ曲線の平坦化" src="./cubic.js">
+  <graphics-element title="3次ベジエ曲線の平坦化" src="./flatten.js" data-type="cubic">
     <input type="range" min="1" max="24" step="1" value="8" class="slide-control">
   </graphics-element>
 </div>

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

@@ -5,11 +5,11 @@
 我们可以先确定“想要X个分段”，然后在间隔的地方采样曲线，得到一定数量的分段。这种方法的优点是速度很快：比起遍历100甚至1000个曲线坐标，我们可以采样比较少的点，仍然得到看起来足够好的曲线。这么做的缺点是，我们失去了“真正的曲线”的精度，因此不能用此方法来做真实的相交检测或曲率对齐。
 
 <div class="figure">
-  <graphics-element title="拉平一条二次曲线" src="./quadratic.js">
+  <graphics-element title="拉平一条二次曲线" src="./flatten.js" data-type="quadratic">
     <input type="range" min="1" max="16" step="1" value="4" class="slide-control">
   </graphics-element>
 
-  <graphics-element title="拉平一条三次曲线" src="./cubic.js">
+  <graphics-element title="拉平一条三次曲线" src="./flatten.js" data-type="cubic">
     <input type="range" min="1" max="24" step="1" value="8" class="slide-control">
   </graphics-element>
 </div>

docs/chapters/flattening/cubic.js

@@ -1,28 +0,0 @@
-setup() {
-  this.curve = Bezier.defaultCubic(this);
-  setMovable(this.curve.points);
-  setSlider(`.slide-control`, `steps`, 8);
-}
-
-draw() {
-  clear();
-
-  this.curve.drawSkeleton();
-
-  noFill();
-  start();
-   for(let i=0, e=this.steps; i<=e; i++) {
-    let p = this.curve.get(i/e);
-    vertex(p.x, p.y);
-  }
-  end();
-
-  this.curve.drawPoints();
-
-  setFill(`black`);
-  text(`Flattened to ${this.steps} segments`, 10, 15);
-}
-
-onMouseMove() {
-  redraw();
-}

docs/chapters/flattening/flatten.js

@@ -0,0 +1,27 @@
+let curve;
+
+setup() {
+  const type = getParameter(`type`, `quadratic`);
+  curve = (type === `quadratic`) ? Bezier.defaultQuadratic(this) : Bezier.defaultCubic(this);
+  setMovable(curve.points);
+  setSlider(`.slide-control`, `steps`, (type === `quadratic`) ? 4 : 8);
+}
+
+draw() {
+  clear();
+
+  curve.drawSkeleton();
+
+  noFill();
+  start();
+  for(let i=0, e=this.steps; i<=e; i++) {
+    let p = curve.get(i/e);
+    vertex(p.x, p.y);
+  }
+  end();
+
+  curve.drawPoints();
+
+  setFill(`black`);
+  text(`Flattened to ${this.steps} segments`, 10, 15);
+}

docs/chapters/flattening/quadratic.js

@@ -1,28 +0,0 @@
-setup() {
-  this.curve = Bezier.defaultQuadratic(this);
-  setMovable(this.curve.points);
-  setSlider(`.slide-control`, `steps`, 4);
-}
-
-draw() {
-  clear();
-
-  this.curve.drawSkeleton();
-
-  noFill();
-  start();
-   for(let i=0, e=this.steps; i<=e; i++) {
-    let p = this.curve.get(i/e);
-    vertex(p.x, p.y);
-  }
-  end();
-
-  this.curve.drawPoints();
-
-  setFill(`black`);
-  text(`Flattened to ${this.steps} segments`, 10, 15);
-}
-
-onMouseMove() {
-  redraw();
-}