figured out how to reuse sketches with data-attribute parameters

2025-08-30 03:30:34 +02:00 · 2020-08-26 21:56:58 -07:00
parent bf88ba4e4c eb997e6455
commit 94a98120ae
93 changed files with 5805 additions and 24390 deletions
--- a/docs/chapters/control/content.en-GB.md
+++ b/docs/chapters/control/content.en-GB.md
@@ -5,15 +5,15 @@ Bézier curves are, like all "splines", interpolation functions. This means that
 The following graphs show the interpolation functions for quadratic and cubic curves, with "S" being the strength of a point's contribution to the total sum of the Bézier function. Click-and-drag to see the interpolation percentages for each curve-defining point at a specific <i>t</i> value.

 <div class="figure">
-  <graphics-element title="Quadratic interpolations" src="./lerp-quadratic.js">
+  <graphics-element title="Quadratic interpolations" src="./lerp.js" data-degree="3">
    <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
  </graphics-element>

-  <graphics-element title="Cubic interpolations" src="./lerp-cubic.js">
+  <graphics-element title="Cubic interpolations" src="./lerp.js" data-degree="4">
    <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
  </graphics-element>

-  <graphics-element title="15th degree interpolations" src="./lerp-fifteenth.js">
+  <graphics-element title="15th degree interpolations" src="./lerp.js" data-degree="15">
    <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
  </graphics-element>
 </div>
--- a/docs/chapters/control/content.ja-JP.md
+++ b/docs/chapters/control/content.ja-JP.md
@@ -5,15 +5,15 @@
 下のグラフは、2次ベジエ曲線や3次ベジエ曲線の補間関数を表しています。ここでSは、ベジエ関数全体に対しての、その点の寄与の大きさを示します。ある<i>t</i>において、ベジエ曲線を定義する各点の補間率がどのようになっているのか、クリックドラッグをして確かめてみてください。

 <div class="figure">
-  <graphics-element title="2次の補間" src="./lerp-quadratic.js">
+  <graphics-element title="2次の補間" src="./lerp.js" data-degree="3">
    <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
  </graphics-element>

-  <graphics-element title="3次の補間" src="./lerp-cubic.js">
+  <graphics-element title="3次の補間" src="./lerp.js" data-degree="4">
    <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
  </graphics-element>

-  <graphics-element title="15次の補間" src="./lerp-fifteenth.js">
+  <graphics-element title="15次の補間" src="./lerp.js" data-degree="15">
    <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
  </graphics-element>
 </div>
--- a/docs/chapters/control/content.zh-CN.md
+++ b/docs/chapters/control/content.zh-CN.md
@@ -5,15 +5,15 @@
 下面的图形显示了二次曲线和三次曲线的差值方程，“S”代表了点对贝塞尔方程总和的贡献。点击拖动点来看看在特定的<i>t</i>值时，每个曲线定义的点的插值百分比。

 <div class="figure">
-  <graphics-element title="二次插值" src="./lerp-quadratic.js">
+  <graphics-element title="二次插值" src="./lerp.js" data-degree="3">
    <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
  </graphics-element>

-  <graphics-element title="三次插值" src="./lerp-cubic.js">
+  <graphics-element title="三次插值" src="./lerp.js" data-degree="4">
    <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
  </graphics-element>

-  <graphics-element title="15次插值" src="./lerp-fifteenth.js">
+  <graphics-element title="15次插值" src="./lerp.js" data-degree="15">
    <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
  </graphics-element>
 </div>
--- a/docs/chapters/control/lerp-cubic.js
+++ b/docs/chapters/control/lerp-cubic.js
@@ -1,56 +0,0 @@
-setup() {
-    const w = this.width,
-          h = this.height;
-
-    this.f = [
-        t => ({ x: t * w, y: h * (1-t) ** 3 }),
-        t => ({ x: t * w, y: h * 3 * (1-t) ** 2 * t }),
-        t => ({ x: t * w, y: h * 3 * (1-t) * t ** 2 }),
-        t => ({ x: t * w, y: h * t ** 3})
-    ];
-
-    this.s = this.f.map(f => plot(f) );
-    setSlider(`.slide-control`, `position`, 0);
-}
-
-draw() {
-    resetTransform();
-    clear();
-    setFill(`black`);
-    setStroke(`black`);
-
-    scale(0.8, 0.9);
-    translate(40,20);
-    drawAxes(`t`, 0, 1, `S`, `0%`, `100%`);
-
-    noFill();
-
-    this.s.forEach(s => {
-        setStroke( randomColor() );
-        drawShape(s);
-    })
-
-    this.drawHighlight();
-}
-
-drawHighlight() {
-    let c = screenToWorld({
-        x: map(this.position, 0, 1, -10, this.width + 10),
-        y: this.height/2
-    });
-
-    if (c.x < 0) return;
-    if (c.x > this.width) return;
-
-    noStroke();
-    setFill(`rgba(255,0,0,0.3)`);
-    rect(c.x - 2, 0, 5, this.height);
-
-    const p = this.f.map(f => f(c.x / this.width));
-
-    setFill(`black`);
-    p.forEach(p => {
-        circle(p.x, p.y, 3);
-        text(`${ round(100 * p.y/this.height) }%`, p.x + 10, p.y);
-    });
-}
--- a/docs/chapters/control/lerp-quadratic.js
+++ b/docs/chapters/control/lerp-quadratic.js
@@ -1,56 +0,0 @@
-setup() {
-    const w = this.width,
-          h = this.height;
-
-    this.f = [
-        t => ({ x: t * w, y: h * (1-t) ** 2 }),
-        t => ({ x: t * w, y: h * 2 * (1-t) * t }),
-        t => ({ x: t * w, y: h * t ** 2 })
-    ];
-
-    this.s = this.f.map(f => plot(f) );
-    setSlider(`.slide-control`, `position`, 0);
-}
-
-
-draw() {
-    resetTransform();
-    clear();
-    setFill(`black`);
-    setStroke(`black`);
-
-    scale(0.8, 0.9);
-    translate(40,20);
-    drawAxes(`t`, 0, 1, `S`, `0%`, `100%`);
-
-    noFill();
-
-    this.s.forEach(s => {
-        setStroke( randomColor() );
-        drawShape(s);
-    })
-
-    this.drawHighlight();
-}
-
-drawHighlight() {
-    let c = screenToWorld({
-        x: map(this.position, 0, 1, -10, this.width + 10),
-        y: this.height/2
-    });
-
-    if (c.x < 0) return;
-    if (c.x > this.width) return;
-
-    noStroke();
-    setFill(`rgba(255,0,0,0.3)`);
-    rect(c.x - 2, 0, 5, this.height);
-
-    const p = this.f.map(f => f(c.x / this.width));
-
-    setFill(`black`);
-    p.forEach(p => {
-        circle(p.x, p.y, 3);
-        text(`${ round(100 * p.y/this.height) }%`, p.x + 10, p.y);
-    });
-}
--- a/docs/chapters/control/lerp-fifteenth.js
+++ b/docs/chapters/control/lerp-fifteenth.js
@@ -1,7 +1,33 @@
 setup() {
-    this.degree = 15;
-    this.triangle = [[1], [1,1]];
-    this.generate();
+    const w = this.width,
+          h = this.height;
+
+    const degree = this.getParameter(`degree`, 3);
+
+    if (degree === 3) {
+        this.f = [
+            t => ({ x: t * w, y: h * (1-t) ** 2 }),
+            t => ({ x: t * w, y: h * 2 * (1-t) * t }),
+            t => ({ x: t * w, y: h * t ** 2 })
+        ];
+    } else if (degree === 4) {
+        this.f = [
+            t => ({ x: t * w, y: h * (1-t) ** 3 }),
+            t => ({ x: t * w, y: h * 3 * (1-t) ** 2 * t }),
+            t => ({ x: t * w, y: h * 3 * (1-t) * t ** 2 }),
+            t => ({ x: t * w, y: h * t ** 3})
+        ];
+    } else {
+        this.triangle = [[1], [1,1]];
+        this.f = [...new Array(degree + 1)].map((_,i) => {
+            return t => ({
+                x: t * w,
+                y: h * this.binomial(degree,i) * (1-t) ** (degree-i) * t ** (i)
+            });
+        });
+    }
+
+    this.s = this.f.map(f => plot(f, 0, 1, degree*4) );
    setSlider(`.slide-control`, `position`, 0)
 }

@@ -17,21 +43,6 @@ binomial(n,k) {
    return this.triangle[n][k];
 }

-generate() {
-    const w = this.width,
-          h = this.height,
-          d = this.degree;
-
-    this.f = [...new Array(d+1)].map((_,i) => {
-        return t => ({
-            x: t * w,
-            y: h * this.binomial(d,i) * (1-t) ** (d-i) * t ** (i)
-        });
-    });
-
-    this.s = this.f.map(f => plot(f, 0, 1, d*4) );
-}
-
 draw() {
    resetTransform();
    clear();