Add onChange example

examples/js/index/index.js

@@ -243,8 +243,8 @@ function log(...args) {
   const lineNo = parseInt(logElem.dataset.lineNo || 1);
   const lines = logElem.textContent.split('\\n');
   lines.push(\`\${lineNo}: \${args.join(' ')}\`);
-  if (lines.length > 3) {
-    lines.shift();
+  if (lines.length > 5) {
+    lines.splice(0, lines.length - 5);
   }
   logElem.textContent = lines.join('\\n');
   logElem.dataset.lineNo = lineNo + 1;

index.html

@@ -304,6 +304,8 @@ <h2>Canvas:</h2>
 const s = {
   period1: 1,
   period2: 4,
+  period3: 10,
+  period4: 40,
 };
 
 //gui.add(s, 'period1', 0, 5);
@@ -313,13 +315,22 @@ <h2>Canvas:</h2>
   waveData.shift();
   const v = performance.now() * 0.001;
   const s1 = Math.sin(v * s.period1);
-  const s2 = Math.sin(v * s.period2)
+  const s2 = Math.sin(v * s.period2);
   waveData.push(s1 + s2);
 }, 200);
 
+setInterval(() => {
+  waveData2.shift();
+  const v = performance.now() * 0.001;
+  const s1 = Math.sin(v * s.period3);
+  const s2 = Math.sin(v * s.period4);
+  waveData2.push(s1 + s2);
+}, 10);
+
   ">
     <pre><code class="language-javascript">
 const waveData = new Array(100).fill(0);
+const waveData2 = new Array(100).fill(0);
 
 const gui = new GUI();
 helpers.graph(
@@ -330,6 +341,14 @@ <h2>Canvas:</h2>
     max: +2,
     interval: 200,
   });
+helpers.graph(
+  gui.addCanvas('wave 2').canvas, 
+  waveData2,
+  {
+    min: -2,
+    max: +2,
+    interval: 10,
+  });
     </code></pre>
   </div>
 
@@ -502,9 +521,34 @@ <h2>TextNumbers:</h2>
     </code></pre>
   </div>
 
+  <!-- ============================================================ -->
+  <h2>Respond to changes:</h2>
+  <p>Get called when the user changes a value.</p>
+
+  <div data-example>
+    <pre><code class="language-javascript">
+const s = {
+  count: 123,
+  name: 'Buffy',
+  speed: 45,
+};
+
+const gui = new GUI();
+gui.add(s, 'count').onChange(logCount);
+gui.add(s, 'name').onChange(logName);
+gui.add(s, 'speed', 0, 100).onChange(logSpeed);
+gui.onChange(logAll);  // or folder
+
+function logCount(v) { log('count:', v); }
+function logName(v) { log('name:', v); }
+function logSpeed(v) { log('speed:', v); }
+function logAll() { log(JSON.stringify(s)); }
+    </code></pre>
+  </div>
+
   <!-- ============================================================ -->
   <h2>Listen:</h2>
-  <p>Listens for changes.</p>
+  <p>Listens for changes. (auto update)</p>
 
   <div data-example>
     <pre><code class="language-javascript">