datasets for sketches

docs/chapters/arclength/arclength.js

@@ -0,0 +1,6 @@
+setup() {
+}
+
+draw() {
+    clear();
+}

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

@@ -41,9 +41,9 @@ So we turn to numerical approaches again. The method we'll look at here is the [
 In plain text: an integral function can always be treated as the sum of an (infinite) number of (infinitely thin) rectangular strips sitting "under" the function's plotted graph. To illustrate this idea, the following graph shows the integral for a sinusoid function. The more strips we use (and of course the more we use, the thinner they get) the closer we get to the true area under the curve, and thus the better the approximation:
 
 <div class="figure">
-  <Graphic inline={true} static={true} title="A function's approximated integral" setup={this.setup} draw={this.drawCoarseIntegral}/>
-  <Graphic inline={true} static={true} title="A better approximation" setup={this.setup} draw={this.drawFineIntegral}/>
-  <Graphic inline={true} static={true} title="An even better approximation" setup={this.setup} draw={this.drawSuperFineIntegral}/>
+  <graphics-element title="A function's approximated integral" src="./draw-slices.js" data-steps="10"></graphics-element>
+  <graphics-element title="A better approximation" src="./draw-slices.js" data-steps="24"></graphics-element>
+  <graphics-element title="An even better approximation" src="./draw-slices.js" data-steps="99"></graphics-element>
 </div>
 
 Now, infinitely many terms to sum and infinitely thin rectangles are not something that computers can work with, so instead we're going to approximate the infinite summation by using a sum of a finite number of "just thin" rectangular strips. As long as we use a high enough number of thin enough rectangular strips, this will give us an approximation that is pretty close to what the real value is.
@@ -100,4 +100,4 @@ We can program that pretty easily, provided we have that *f(t)* available, which
 
 If we use the Legendre-Gauss values for our *C* values (thickness for each strip) and *t* values (location of each strip), we can determine the approximate length of a Bézier curve by computing the Legendre-Gauss sum. The following graphic shows a cubic curve, with its computed lengths; Go ahead and change the curve, to see how its length changes. One thing worth trying is to see if you can make a straight line, and see if the length matches what you'd expect. What if you form a line with the control points on the outside, and the start/end points on the inside?
 
-<Graphic title="Arc length for a Bézier curve" setup={this.setupCurve} draw={this.drawCurve}/>
+<graphics-element title="Arc length for a Bézier curve" src="./arclength.js"></graphics-element>

docs/chapters/arclength/draw-slices.js

@@ -0,0 +1,45 @@
+setup() {
+    this.steps = getParameter(`steps`, 10);
+}
+
+draw() {
+    clear();
+
+    const w = this.width;
+    const h = this.height;
+    const a = h/3;
+
+    let trueArea = (4 * a).toFixed(2);
+    let computedArea = this.drawSlices(w, h, a, this.steps).toFixed(2);
+
+    setStroke(`black`);
+    line(0, h/2, w, h/2);
+
+    noFill();
+    setStroke(`black`);
+    start();
+    for(let i=0, f=TAU/w; i<w; i++) {
+        vertex(i, sin(i*f) * a + h/2);
+    }
+    end();
+
+    setFill(`black`);
+    text(`Approximating with ${this.steps} strips: ${computedArea} (true area: ${trueArea}`, w/2, h-10, CENTER);
+}
+
+drawSlices(w, h, a, n) {
+    if (n < 50) setStroke(`white`);
+
+    let area = 0;
+    let step = w/n;
+    for(let i=0, f=TAU/w, c, y; i<w; i += step) {
+        c = `rgba(150,150,255,${0.4 + 0.3 * random()}`;
+        if (n > 50) setStroke(c);
+        setFill(c);
+        y = sin((i+step/2) * f) * a;
+        rect(i, h/2, step, y);
+        area += abs(step * f * y);
+    }
+
+    return area;
+}

docs/js/custom-element/api/base-api.js

@@ -38,10 +38,17 @@ class BaseAPI {
   /**
    *
    */
-  constructor(uid, width = 200, height = 200, canvasBuildFunction) {
+  constructor(
+    uid,
+    width = 200,
+    height = 200,
+    canvasBuildFunction, // Only used during image generation, not used in the browser
+    customDataSet //      "                                               "
+  ) {
     if (uid) {
       this.element = window[uid];
       delete window[uid];
+      this.dataset = this.element.dataset;
     }
     if (canvasBuildFunction) {
       const { canvas, ctx } = canvasBuildFunction(width, height);
@@ -51,6 +58,13 @@ class BaseAPI {
     } else {
       this.canvas = document.createElement(`canvas`);
     }
+    if (!this.dataset) {
+      if (customDataSet) {
+        this.dataset = customDataSet;
+      } else {
+        this.dataset = {};
+      }
+    }
     this.HATCHING = hatch(canvasBuildFunction);
     this.addListeners();
     this.setSize(width, height);

docs/js/custom-element/api/graphics-api.js

@@ -138,6 +138,19 @@ class GraphicsAPI extends BaseAPI {
     points.forEach((p) => this.movable.push(p));
   }
 
+  /**
+   * Get a parameter specified via data-attribute
+   */
+  getParameter(name, fallback) {
+    let val = this.dataset[name];
+    if (val) {
+      let asFloat = parseFloat(val);
+      if (val == asFloat) return asFloat;
+      return val;
+    }
+    return fallback;
+  }
+
   /**
    * Set up a slider to control a named, numerical property in the sketch.
    *