feat: new demo - ripple

bryanbraun · Apr 6, 2021 · 185c419 · 185c419
1 parent 743210e
commit 185c419
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 0 deletions.
diff --git a/docs/demos/ripple/demo.js b/docs/demos/ripple/demo.js
@@ -0,0 +1,79 @@
+import { Checkboxland } from '../../../src/index.js';
+
+const width = 44;
+const height = 15;
+const dimensions = `${width}x${height}`;
+const frames = []
+
+let interval = 100;
+let cbl;
+let timeoutId;
+let startTime;
+let elapsedTimeSeconds;
+
+function init(existingCbl) {
+  cbl = !!existingCbl ? existingCbl : new Checkboxland({ dimensions });
+  startTime = performance.now();
+
+  loop();
+
+  return cbl;
+}
+
+function simpleWave(x, y, t) {
+  let frequencyConstant = 0.9;
+  let scaledTime = t * 3;
+
+  // For reference, see https://www.desmos.com/calculator/bp9t79pfa0
+  return y < 5 * Math.sin((x - scaledTime) / frequencyConstant);
+}
+
+function hypotenuseLength(x, y) {
+  return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+}
+
+function reIndexY(y) {
+  // transform y to a more traditional scale (puts y=0 in the center
+  // of the grid with positive values above and negative values below).
+  return (height - 1 - y) - ((height - 1) / 2)
+}
+
+function reIndexX(x) {
+  // transform x to a more traditional scale (puts x=0 in the center
+  // of the grid with positive values right and negative values left).
+  return (width - x) - (width / 2)
+}
+
+function loop() {
+  let checkboxState;
+  let newMatrix = [];
+
+  elapsedTimeSeconds = (performance.now() - startTime) / 1000;
+
+  for (let y = 0; y < height; y++) {
+    newMatrix[y] = [];
+    for (let x = 0; x < width; x++) {
+      let reIndexedY = reIndexY(y);
+      let reIndexedX = reIndexX(x);
+
+      let radialX = hypotenuseLength(reIndexedX, reIndexedY);
+
+      checkboxState = simpleWave(radialX, 0, elapsedTimeSeconds);
+      newMatrix[y][x] = checkboxState ? 1 : 0;
+    }
+  }
+
+  cbl.setData(newMatrix);
+
+  timeoutId = setTimeout(loop, interval);
+}
+
+function cleanUp() {
+  clearInterval(timeoutId);
+}
+
+export {
+  init,
+  cleanUp,
+  dimensions,
+}
diff --git a/docs/demos/ripple/index.html b/docs/demos/ripple/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Ripple</title>
+
+  <link rel="icon" type="image/png" sizes="16x16" href="../../favicon.png">
+
+  <style>
+    body {
+      margin: 0;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="page">
+    <div id="checkboxland"></div>
+  </div>
+  <script type="module">
+    import * as ripple from './demo.js';
+    ripple.init();
+  </script>
+</body>
+
+</html>
diff --git a/docs/img/demo-ripple.png b/docs/img/demo-ripple.png
diff --git a/docs/js/demobox.js b/docs/js/demobox.js
@@ -1,6 +1,7 @@
 import { Checkboxland } from '../../src/index.js';
 
 import * as marqueeDemo from '../demos/marquee/demo.js';
+import * as rippleDemo from '../demos/ripple/demo.js';
 import * as snakeDemo from '../demos/snake/demo.js';
 import * as clockDemo from '../demos/clock/demo.js';
 import * as iconsDemo from '../demos/icons/demo.js';
@@ -12,6 +13,7 @@ import * as onClickDemo from '../demos/on-click/demo.js';
 
 const demoNameMap = {
   marquee: marqueeDemo,
+  ripple: rippleDemo,
   snake: snakeDemo,
   clock: clockDemo,
   gameOfLife: gameOfLifeDemo,

diff --git a/index.html b/index.html
@@ -92,6 +92,11 @@ <h3 class="demo-title">Demos</h3>
             <span class="demo-name">Marquee</span>
             <img class="demo-thumbnail" src="docs/img/demo-marquee.png" />
           </label>
+          <input type="radio" id="ripple-demo" class="visuallyhidden" name="demoRadios" value="ripple" />
+          <label for="ripple-demo" class="demo-option">
+            <span class="demo-name">Ripple</span>
+            <img class="demo-thumbnail" src="docs/img/demo-ripple.png" />
+          </label>
           <input type="radio" id="snake-demo" class="visuallyhidden" name="demoRadios" value="snake" />
           <label for="snake-demo" class="demo-option">
             <span class="demo-name">Snake</span>