chore(demo): update demo setup

demo-project/layers/canvas/basics-animation.js

@@ -1,13 +1,16 @@
-// @ts-check
-
+clear();
 const now = read('now', 0);
 
-const n = (now % 10000) * 0.0001;
-const h = (sin(n * PI2)) * 0.1;
-const color = hsla(h + 0.75, 0.5, .7, 1);
-
-clear();
-fillStyle(color);
+const beatP = beatPrct(now, read('bpm', 120) * (1 / 2));
+const beatNum = read('beatNum', 1);
+const frq = read('frequency', []);
+const vol = read('volume', []);
+const frqAvg = arrayAvg(frq);
 
-rect(width(2), height(2), width(4), height(4));
-fill();
+// if (frqAvg > 80) {
+//   cache.generate();
+// }
+lineCap('round');
+lineCap('square');
+(cache.lines || [])
+  .forEach((line) => line.render(now));

demo-project/layers/canvas/basics-setup.js

@@ -1,3 +1,41 @@
-// @ts-check
+class Line {
+  constructor(index) {
+    this.x = width(2) - (width() * random());
+    this.y = height() * random();
+    this.length = random() * width(0.75);
+    this.index = index
+    this.velocity = random() - 0.5;
+    this.width = random();
 
-// TODO
+    const v = random();
+    this.color = rgba(v, v, v, 1);
+  }
+
+  render(now, beatNum) {
+    const lwidth = vmin(this.width * 20);
+    lineWidth(lwidth);
+    strokeStyle(this.color);
+    beginPath();
+
+    const distance = this.length + width() + lwidth;
+    const relative = abs(now * this.velocity) % distance;
+
+    let x = relative - this.length;
+
+    if (this.velocity < 0) {
+      x = width() - relative;
+    }
+
+    moveTo(x, this.y);
+    lineTo(x + this.length, this.y);
+    stroke();
+  }
+}
+
+cache.lines = [];
+cache.generate = () => {
+  repeat(50, (i) => {
+    cache.lines.push(new Line(i));
+  });
+}
+cache.generate();