Merge devel to master. (#56)

Merge devel to master.

Author: Demonstrandum

example/index.html

@@ -7,6 +7,11 @@
     <style>
       @import url("https://fontlibrary.org/face/cmu-serif");
 
+      html, body {
+        font-size: 16px;
+        scroll-behavior: smooth;
+      }
+
       body {
         margin: 0;
         padding: 0;
@@ -25,10 +30,10 @@
         /* border: 1px solid rgba(0, 0, 0, 0.2); */
         box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
 
-        /* Don't use drop shadow. Every frame redraw
+        /* Don't use drop shadow. Every frame redraws
          * the shadow, 60 times a second, if you use
          * `drop-shadow`, causing like 23ms of time to be
-         * wasted on what the dev-tool call 'composite layers'.
+         * wasted on what the dev-tools call 'composite layers'.
          * `box-shadow` above works without re-drawing itself,
          * use that instead.
          */
@@ -45,6 +50,16 @@
         top: 15px;
         border: 1px solid rgba(0,0,0,0.4);
       }
+
+      hr {
+        height: 6px;
+        background: rgba(25,25,25,0.07);
+        border: none;
+      }
+
+      button {
+        cursor: pointer;
+      }
     </style>
     <script type="text/x-mathjax-config">
       MathJax.Hub.Queue(
@@ -149,6 +164,10 @@
         file = document.getElementById('picks').value;
         localStorage.setItem('last_script', file);
       });
+
+      window.onload = () => {
+        window.scrollTo(0, document.body.scrollHeight);
+      };
     </script>
   </body>
 </html>

example/vector_plot.js

@@ -10,13 +10,56 @@ document.body.html`
       v(x, y) = f(x, y) &times (g(x, y)&#xee + h(x, y)&#x135)<br />
       v(x, y) = (<span id="factor"></span>) &times;
         ((<span id="i"></span>)&#xee; + (<span id="j"></span>)&#x135;)
-    <br />
+    <br /><br />
     where <i>f, g</i> and <i>h</i> are scalars,<br />
     and <i>r</i> represents the distance of the given point in space from
-    the origin.
+    the origin.<br />
+    <br /><hr /><br />
+    <button onclick="select_plot(this)">Default</button>
+    <button onclick="select_plot(this)">Divergent Monopole</button>
+    <button onclick="select_plot(this)">Convergent Monopole</button>
+    <button onclick="select_plot(this)">Dipole</button>
+    <button onclick="select_plot(this)">Magnetic Curl around Current</button>
   </div>
 `;
 
+const vec_funcs = {
+  default: {
+    factor: '1',
+    i: 'y^3 - 9y',
+    j: 'x^3 - 9x'
+  },
+  magnetic_curl_around_current: {
+    factor: '1/r^2',
+    i: '-y',
+    j: 'x'
+  },
+  divergent_monopole: {
+    factor: '1/r^3',
+    i: 'x',
+    j: 'y'
+  },
+  convergent_monopole: {
+    factor: '-1/r^3',
+    i: 'x',
+    j: 'y'
+  },
+  dipole: {
+    factor: '1',
+    i: '(x+3)/sqrt((x+3)^2+y^2)^3 - (x-3)/sqrt((x-3)^2+y^2)^3',
+    j: '(1/sqrt((x+3)^2+y^2)^3 - 1/sqrt((x-3)^2+y^2)^3)y'
+  },
+};
+
+window.select_plot = self => {
+  [factor_input.value, i_input.value, j_input.value] = Object.values(
+    vec_funcs[self.innerHTML.toLowerCase().split(' ').join('_')]
+  );
+  i_input.update();
+  for (const input of [factor_input, i_input, j_input])
+    input.fit();
+};
+
 const factor_input = text('#factor', '1');
 const i_input = text('#i', 'y^3 - 9y');
 const j_input = text('#j', 'x^3 - 9x');
@@ -79,12 +122,11 @@ factor_input.change(draw, 500).fit();
 css`
   #controls {
     position: absolute;
-    top: 50%;
+    top: calc(50% + ${sketch.height}px/2 + 40px);
     left: 50%;
     width: 80vw;
-    transform: translate(-50%, -50%);
+    transform: translate(-50%, 0);
     padding-bottom: 40px;
-    margin-top: 340px;
     font-family: 'CMUSerifRoman', serif;
   }
   #controls input {
@@ -95,6 +137,15 @@ css`
     font-family: monospace;
     background: #eee;
     border-bottom: 1px dashed #aaa;
+    font-size: 14px;
+  }
+  .hidden {
+    font: inherit;
+    font-family: monospace;
+    font-size: 14px;
+  }
+  #controls #factor input {
+    min-width: 50px;
   }
   .hidden {
     font: inherit;

lib/BasicDOM.js

@@ -27,9 +27,11 @@ class Input {
     this.elem = document.createElement('input');
     this.id = id(this.elem);
     this.hidden = null;
+    this.lambda = null;
 
     this.elem.type = this.type;
-    this.elem.className = `BasicDOM-input DOM${this.id}`;
+    this.elem.className = 'BasicDOM-input';
+    this.elem.id = `BD-DOM-${this.id}`;
     document.querySelector(this.parent).appendChild(this.elem);
   }
 
@@ -61,13 +63,20 @@ class Input {
     return this;
   }
 
+  update() {
+    if (this.lambda !== null) this.lambda();
+    this.fit();
+  }
+
   change(lambda, timeout = this.timeout) {
+    this.lambda = lambda;
+
     if (timeout === 0) {
       return this.elem.addEventListener('input', lambda);
     }
 
     let timed = null;
-    this.elem.addEventListener('keyup', () => {
+    this.elem.addEventListener('input', () => {
       clearTimeout(timed);
       timed = setTimeout(lambda, timeout);
     });