both new posts from vacation

1 files changed, 213 insertions, 0 deletions

diff --git a/src/_posts/2021-05-26-viz-4.md b/src/_posts/2021-05-26-viz-4.md
new file mode 100644
index 0000000..cd6054a
--- /dev/null
+++ b/src/_posts/2021-05-26-viz-4.md
@@ -0,0 +1,213 @@
+---
+title: >-
+    Visualization 4
+description: >-
+    Birth, death, and colors.
+series: viz
+tags: tech art
+---
+
+<canvas id="canvas" style="padding-bottom: 2rem;" width="100%" height="100%"></canvas>
+
+This visualization is a conglomeration of ideas from all the previous ones. On
+each tick up to 20 new pixels are generated. The color of each new pixel is
+based on the average color of its neighbors, plus some random drift.
+
+Each pixel dies after a certain number of ticks, `N`. A pixel's life can be
+extended by up to `8N` ticks, one for each neighbor it has which is still alive.
+This mechanism accounts for the strange behavior which is seen when the
+visualization first loads, but also allows for more coherent clusters of pixels
+to hold together as time goes on.
+
+The asteroid rule is also in effect in this visualization, so the top row and
+bottom row pixels are neighbors of each other, and similarly for the rightmost
+and leftmost column pixels.
+
+<script type="text/javascript">
+
+function randn(n) {
+    return Math.floor(Math.random() * n);
+}
+
+const canvas = document.getElementById("canvas");
+const parentWidth = canvas.parentElement.offsetWidth;
+
+const rectSize = Math.floor(parentWidth /100 /2) *2; // must be even number
+console.log("rectSize", rectSize);
+
+canvas.width = parentWidth - rectSize - (parentWidth % rectSize);
+canvas.height = canvas.width * 0.75;
+canvas.height -= canvas.height % rectSize;
+const ctx = canvas.getContext("2d");
+
+const w = (canvas.width / rectSize) - 1;
+const h = (canvas.height / rectSize) - 1;
+
+class Elements {
+  constructor() {
+    this.els = {};
+    this.diff = {};
+  }
+
+  _normCoord(coord) {
+    if (typeof coord !== 'string') coord = JSON.stringify(coord);
+    return coord;
+  }
+
+  get(coord) {
+    return this.els[this._normCoord(coord)];
+  }
+
+  getAll() {
+    return Object.values(this.els);
+  }
+
+  set(coord, el) {
+    this.diff[this._normCoord(coord)] = {action: "set", coord: coord, ...el};
+  }
+
+  unset(coord) {
+    this.diff[this._normCoord(coord)] = {action: "unset"};
+  }
+
+  drawDiff(ctx) {
+    for (const coordStr in this.diff) {
+      const el = this.diff[coordStr];
+      const coord = JSON.parse(coordStr);
+
+      if (el.action == "set") {
+        ctx.fillStyle = `hsl(${el.h}, ${el.s}, ${el.l})`;
+      } else {
+        ctx.fillStyle = `#FFF`;
+      }
+
+      ctx.fillRect(coord[0]*rectSize, coord[1]*rectSize, rectSize, rectSize);
+    }
+  }
+
+  applyDiff() {
+    for (const coordStr in this.diff) {
+      const el = this.diff[coordStr];
+      delete this.diff[coordStr];
+
+      if (el.action == "set") {
+        delete el.action;
+        this.els[coordStr] = el;
+      } else {
+        delete this.els[coordStr];
+      }
+    }
+  }
+}
+
+const neighbors = [
+    [-1, -1],   [0, -1],   [1, -1],
+    [-1, 0], /* [0, 0], */ [1, 0],
+    [-1, 1],    [0, 1],    [1, 1],
+];
+
+function neighborsOf(coord) {
+  return neighbors.map((n) => {
+    let nX = coord[0]+n[0];
+    let nY = coord[1]+n[1];
+    nX = (nX + w) % w;
+    nY = (nY + h) % h;
+    return [nX, nY];
+  });
+}
+
+function randEmptyNeighboringCoord(els, coord) {
+  const neighbors = neighborsOf(coord).sort(() => Math.random() - 0.5);
+  for (const nCoord of neighbors) {
+    if (!els.get(nCoord)) return nCoord;
+  }
+  return null;
+}
+
+function neighboringElsOf(els, coord) {
+  const neighboringEls = [];
+  for (const nCoord of neighborsOf(coord)) {
+    const el = els.get(nCoord);
+    if (el) neighboringEls.push(el);
+  }
+  return neighboringEls;
+}
+
+const drift = 30;
+function newEl(nEls) {
+
+  // for each h (which can be considered as degrees around a circle) break the h
+  // down into x and y vectors, and add those up separately. Then find the angle
+  // between those two resulting vectors, and that's the "average" h value.
+  let x = 0;
+  let y = 0;
+  nEls.forEach((el) => {
+    const hRad = el.h * Math.PI / 180;
+    x += Math.cos(hRad);
+    y += Math.sin(hRad);
+  });
+
+  let h = Math.atan2(y, x);
+  h = h / Math.PI * 180;
+
+  // apply some random drift, normalize
+  h += (Math.random() * drift * 2) - drift;
+  h = (h + 360) % 360;
+
+  return {
+    h: h,
+    s: "100%",
+    l: "50%",
+  };
+}
+
+const requestAnimationFrame = 
+  window.requestAnimationFrame || 
+  window.mozRequestAnimationFrame || 
+  window.webkitRequestAnimationFrame || 
+  window.msRequestAnimationFrame;
+
+const els = new Elements();
+
+const maxNewElsPerTick = 20;
+const deathThresh = 20;
+
+let tick = 0;
+function doTick() {
+  tick++;
+
+  const allEls = els.getAll().sort(() => Math.random() - 0.5);
+
+  if (allEls.length == 0) {
+    els.set([w/2, h/2], {
+      h: randn(360),
+      s: "100%",
+      l: "50%",
+    });
+  }
+
+  let newEls = 0;
+  for (const el of allEls) {
+    const nCoord = randEmptyNeighboringCoord(els, el.coord);
+    if (!nCoord) continue; // el has no empty neighboring spots
+
+    const nEl = newEl(neighboringElsOf(els, nCoord))
+    nEl.tick = tick;
+    els.set(nCoord, nEl);
+
+    newEls++;
+    if (newEls >= maxNewElsPerTick) break;
+  }
+
+  for (const el of allEls) {
+    const nEls = neighboringElsOf(els, el.coord);
+    if (tick - el.tick - (nEls.length * deathThresh) >= deathThresh) els.unset(el.coord);
+  }
+
+  els.drawDiff(ctx);
+  els.applyDiff();
+  requestAnimationFrame(doTick);
+}
+requestAnimationFrame(doTick);
+
+</script>