init commit

frontend/js/control.js

@@ -0,0 +1,27 @@
+import { GUI } from "lil-gui";
+import io from "socket.io-client";
+
+const socket = io("http://localhost:3000");
+
+const gui = new GUI();
+const params = {
+  fps: 60,
+  zoom: 0.01,
+  backgroundTicks: 60,
+  textSpread: 0,
+  maxSpawns: 1,
+  textAlpha: 0.0,
+  textTicks: 1
+};
+gui.add(params, "fps", 0.1, 60);
+gui.add(params, "zoom", 0.001, 0.5);
+gui.add(params, "backgroundTicks", 1, 240).step(1);
+const textFolder = gui.addFolder("Text");
+textFolder.add(params, "textSpread", 0, 200);
+textFolder.add(params, "maxSpawns", 1, 20).step(1);
+textFolder.add(params, "textAlpha", 0, 255).step(1);
+textFolder.add(params, "textTicks", 1, 240).step(1);
+
+gui.onChange((e) => {
+  socket.emit("paramUpdate", { key: e.property, value: e.value });
+});

frontend/js/sketch.js

@@ -0,0 +1,105 @@
+import p5 from "p5";
+import io from "socket.io-client";
+const socket = io("http://localhost:3000");
+
+const params = {
+  fps: 60,
+  zoom: 0.01,
+  backgroundTicks: 60,
+  textSpread: 0,
+  maxSpawns: 1,
+  textAlpha: 0.0,
+  textTicks: 1,
+};
+
+socket.on("paramUpdate", ({ key, value }) => {
+  params[key] = value;
+  console.log(`Updated param ${key} to ${value}`);
+});
+
+let bg;
+let cw = 1;
+let ch = 1;
+
+const poem =
+  "everybody is pretty ugly \
+lover \
+you are my mirror \
+I can't judge this \
+predicament \
+autism alienation and sitting beach \
+this depression's a symptom but it's disease too \
+spaces \
+interiors in berlin city reach peach intention lover drag sleepless depth fear dirt lone";
+const realText = poem.split(" ").filter((t) => t.length > 0);
+
+const sketch = (p) => {
+  p.setup = async () => {
+    bg = await p.loadImage("assets/scans/1200dpi 16bit grayscale.png");
+    console.log(bg);
+    p.createCanvas(p.windowWidth, p.windowHeight);
+    console.log("canvas created");
+    // const stream = c.elt.captureStream(60);
+  };
+
+  let bgTick = 0;
+  let textTick = 0;
+  let sx, sy;
+  let word, bounds;
+
+  p.draw = () => {
+    p.background(220);
+    // update scale
+    p.setFrameRate(params.fps);
+
+    if (++bgTick >= params.backgroundTicks) {
+      cw = Math.floor(bg.width * params.zoom);
+      ch = Math.floor(bg.height * params.zoom);
+
+      sx = Math.random(0) * (bg.width - cw);
+      sy = Math.random(0) * (bg.height - ch);
+      bgTick = 0;
+    }
+    if (++textTick >= params.textTicks) {
+      word, bounds = nextText();
+      textTick = 0;
+    }
+
+    p.image(bg, 0, 0, p.windowWidth, p.windowHeight, sx, sy, cw, ch);
+    drawText();
+  };
+
+  function nextText() {
+    for (let i = 0; i < Math.random() * params.maxSpawns; i++) {
+      const word = realText[Math.floor(Math.random() * realText.length)];
+      const wx =
+        p.windowWidth / 2 -
+        p.textWidth(word) / 2 +
+        p.random(-params.textSpread, params.textSpread);
+      const wy =
+        p.windowHeight / 2 -
+        p.textAscent() / 2 +
+        p.random(-params.textSpread, params.textSpread);
+      const bounds = p.textBounds(word, wx, wy);
+      return { word, bounds };
+    }
+  }
+
+  function drawText() {
+    const whitespace = 2;
+    p.stroke(0, 0, 0, params.textAlpha);
+    p.fill(255, 255, 255, params.textAlpha);
+    p.rect(
+      bounds.x - whitespace,
+      bounds.y - whitespace,
+      bounds.w + 2 * whitespace,
+      bounds.h + 2 * whitespace,
+    );
+
+    p.noStroke();
+    p.fill(0, 0, 0, params.textAlpha);
+    p.text(word, wx, wy);
+  }
+};
+
+new p5(sketch);