131 lines
3.2 KiB
JavaScript
131 lines
3.2 KiB
JavaScript
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) => {
|
|
let sobel;
|
|
p.setup = async () => {
|
|
// 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);
|
|
};
|
|
|
|
let bgTick = 0;
|
|
let textTick = 0;
|
|
let sx, sy;
|
|
let word, bounds;
|
|
|
|
p.draw = () => {
|
|
p.background(220);
|
|
// update scale
|
|
p.setFrameRate(params.fps);
|
|
|
|
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);
|
|
}
|
|
|
|
textTick %= params.textTicks;
|
|
if (textTick++ == 0) {
|
|
(word, (bounds = nextText()));
|
|
}
|
|
|
|
p.image(bg, 0, 0, p.windowWidth, p.windowHeight, sx, sy, cw, ch);
|
|
if (word && bounds) drawText(word, bounds);
|
|
sobel.setUniform("pulse", 0.5);
|
|
p.filter(sobel);
|
|
};
|
|
|
|
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(word, bounds) {
|
|
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, bounds.x, bounds.y + p.textAscent());
|
|
}
|
|
};
|
|
|
|
new p5(sketch);
|