finished molding

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

@@ -38,6 +38,7 @@ graphics-element:not(:defined) fallback-image {
   font-size: 60%;
   text-align: center;
   padding-bottom: 0.2em;
+  visibility:collapse;
 }
 
 /*
@@ -48,7 +49,7 @@ graphics-element:not(:defined) fallback-image {
 
 graphics-element:not(:defined) fallback-image > img {
   display: block;
-  margin: 0.9em;
+  visibility:visible;
 }
 
 /*
@@ -59,7 +60,6 @@ graphics-element:not(:defined) fallback-image > img {
 graphics-element:defined {
   display: inline-block;
   padding: 0.5em;
-  margin: 1em auto;
   justify-self: center;
   font-size: revert;
   text-align: revert;
@@ -70,6 +70,6 @@ graphics-element:defined {
   the <fallback-image> does NOT show anymore!
 */
 
-graphics-element:defined fallback-image {
+graphics-element:defined fallback-image.loaded {
   display: none;
 }

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

@@ -16,6 +16,8 @@ CustomElement.register(class ProgramCode extends HTMLElement {});
  * Our custom element
  */
 class GraphicsElement extends CustomElement {
+  static DEBUG = false;
+
   constructor() {
     super({ header: false, footer: false });
 
@@ -220,12 +222,14 @@ class GraphicsElement extends CustomElement {
    * can't actually find anywhere in the document or shadow DOM...
    */
   printCodeDueToError() {
-    console.log(
-      this.code
-        .split(`\n`)
-        .map((l, pos) => `${pos + 1}: ${l}`)
-        .join(`\n`)
-    );
+    if (GraphicsElement.DEBUG) {
+      console.log(
+        this.code
+          .split(`\n`)
+          .map((l, pos) => `${pos + 1}: ${l}`)
+          .join(`\n`)
+      );
+    }
   }
 
   /**

docs/js/custom-element/lib/bezierjs/bezier.js

@@ -16,25 +16,6 @@ const pi = Math.PI;
 // a zero coordinate, which is surprisingly useful
 const ZERO = { x: 0, y: 0, z: 0 };
 
-// TODO: figure out where this function goes, it has no reason to exist on its lonesome.
-function getABC(n, S, B, E, t) {
-  if (typeof t === "undefined") {
-    t = 0.5;
-  }
-  const u = utils.projectionratio(t, n),
-    um = 1 - u,
-    C = {
-      x: u * S.x + um * E.x,
-      y: u * S.y + um * E.y,
-    },
-    s = utils.abcratio(t, n),
-    A = {
-      x: B.x + (B.x - C.x) / s,
-      y: B.y + (B.y - C.y) / s,
-    };
-  return { A, B, C };
-}
-
 /**
  * Bezier curve constructor.
  *
@@ -128,7 +109,7 @@ class Bezier {
       return new Bezier(p1, p2, p2);
     }
     // real fitting.
-    const abc = getABC(2, p1, p2, p3, t);
+    const abc = Bezier.getABC(2, p1, p2, p3, t);
     return new Bezier(p1, abc.A, p3);
   }
 
@@ -136,7 +117,7 @@ class Bezier {
     if (typeof t === "undefined") {
       t = 0.5;
     }
-    const abc = getABC(3, S, B, E, t);
+    const abc = Bezier.getABC(3, S, B, E, t);
     if (typeof d1 === "undefined") {
       d1 = utils.dist(B, abc.C);
     }
@@ -239,10 +220,18 @@ class Bezier {
   }
 
   static getABC(order = 2, S, B, E, t = 0.5) {
-    let ret = getABC(order, S, B, E, t);
-    ret.S = S;
-    ret.E = E;
-    return ret;
+    const u = utils.projectionratio(t, order),
+      um = 1 - u,
+      C = {
+        x: u * S.x + um * E.x,
+        y: u * S.y + um * E.y,
+      },
+      s = utils.abcratio(t, order),
+      A = {
+        x: B.x + (B.x - C.x) / s,
+        y: B.y + (B.y - C.y) / s,
+      };
+    return { A, B, C, S, E };
   }
 
   getABC(t, B) {