feat: new demo - circles

bryanbraun · Jun 4, 2021 · 35edb54 · 35edb54
1 parent 2029351
commit 35edb54
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 0 deletions.
diff --git a/docs/demos/circles/demo.js b/docs/demos/circles/demo.js
@@ -0,0 +1,59 @@
+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 getCirclesCheckbox(x, y, t) {
+  let xOffset = 2*t;
+  let yOffset = -1.6*t;
+  let sizeValue = 1;
+
+  // For reference, see https://www.desmos.com/calculator/l0nb1db6te
+  return Math.cos(x - xOffset) + Math.cos(y - yOffset) + sizeValue > 1;
+}
+
+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++) {
+      checkboxState = getCirclesCheckbox(x, y, elapsedTimeSeconds);
+      newMatrix[y][x] = checkboxState ? 1 : 0;
+    }
+  }
+
+  cbl.setData(newMatrix);
+
+  timeoutId = setTimeout(loop, interval);
+}
+
+function cleanUp() {
+  clearTimeout(timeoutId);
+}
+
+export {
+  init,
+  cleanUp,
+  dimensions,
+}
diff --git a/docs/demos/circles/index.html b/docs/demos/circles/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>Circles</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 circles from './demo.js';
+    circles.init();
+  </script>
+</body>
+
+</html>
diff --git a/docs/img/demo-circles.png b/docs/img/demo-circles.png
diff --git a/docs/js/demobox.js b/docs/js/demobox.js
@@ -3,6 +3,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 circlesDemo from '../demos/circles/demo.js';
 import * as clockDemo from '../demos/clock/demo.js';
 import * as gameOfLifeDemo from '../demos/game-of-life/demo.js';
 import * as spiralDemo from '../demos/spiral/demo.js';
@@ -17,6 +18,7 @@ const demoNameMap = {
   marquee: marqueeDemo,
   ripple: rippleDemo,
   snake: snakeDemo,
+  circles: circlesDemo,
   clock: clockDemo,
   gameOfLife: gameOfLifeDemo,
   spiral: spiralDemo,

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