filter shader

frontend/js/control.js

@@ -15,12 +15,12 @@ const params = {
 };
 gui.add(params, "fps", 0.1, 60);
 gui.add(params, "zoom", 0.001, 0.5);
-gui.add(params, "backgroundTicks", 1, 240).step(1);
+gui.add(params, "backgroundTicks", 1, 600).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);
+textFolder.add(params, "textTicks", 1, 600).step(1);
 
 gui.onChange((e) => {
   socket.emit("paramUpdate", { key: e.property, value: e.value });

frontend/js/sketch.js

@@ -34,11 +34,33 @@ interiors in berlin city reach peach intention lover drag sleepless depth fear d
 const realText = poem.split(" ").filter((t) => t.length > 0);
 
 const sketch = (p) => {
+  let sobel;
   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");
+    // bg = await p.loadImage("assets/scans/1200dpi 16bit grayscale.png");
+    bg = await p.loadImage("assets/scans/portable.png");
+    p.createCanvas(p.windowWidth, p.windowHeight, p.WEBGL);
+    sobel = p.createFilterShader(`
+      precision highp float;
+
+  // x,y coordinates, given from the vertex shader
+  varying vec2 vTexCoord;
+
+  // the canvas contents, given from filter()
+  uniform sampler2D tex0;
+  // other useful information from the canvas
+  uniform vec2 texelSize;
+  uniform vec2 canvasSize;
+  // a custom variable from this sketch
+  uniform float pulse;
+
+  void main() {
+    // get the color at current pixel
+    vec4 color = texture2D(tex0, vTexCoord);
+    // set the output color
+    color.b = 1.0;
+    color *= pulse;
+    gl_FragColor = vec4(color.rgb, 1.0);
+  }`);
     // const stream = c.elt.captureStream(60);
   };
 
@@ -52,21 +74,24 @@ const sketch = (p) => {
     // update scale
     p.setFrameRate(params.fps);
 
-    if (++bgTick >= params.backgroundTicks) {
+    bgTick %= params.backgroundTicks;
+    if (bgTick++ == 0) {
       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;
+
+    textTick %= params.textTicks;
+    if (textTick++ == 0) {
+      (word, (bounds = nextText()));
     }
 
     p.image(bg, 0, 0, p.windowWidth, p.windowHeight, sx, sy, cw, ch);
-    drawText();
+    if (word && bounds) drawText(word, bounds);
+    sobel.setUniform("pulse", 0.5);
+    p.filter(sobel);
   };
 
   function nextText() {
@@ -85,7 +110,7 @@ const sketch = (p) => {
     }
   }
 
-  function drawText() {
+  function drawText(word, bounds) {
     const whitespace = 2;
     p.stroke(0, 0, 0, params.textAlpha);
     p.fill(255, 255, 255, params.textAlpha);
@@ -98,7 +123,7 @@ const sketch = (p) => {
 
     p.noStroke();
     p.fill(0, 0, 0, params.textAlpha);
-    p.text(word, wx, wy);
+    p.text(word, bounds.x, bounds.y + p.textAscent());
   }
 };