Assemblage

Last Edited: Fri Mar 14 21:26:43 UTC 2025

let cam;
let shaderProgram;

let fragShader = `
#ifdef GL_ES
precision mediump float;
#endif

varying vec2 vTexCoord;
uniform sampler2D tex;
uniform float u_time;

vec3 hashOld33( vec3 p )
{
	p = vec3( dot(p,vec3(127.1,311.7, 74.7)),
			  dot(p,vec3(269.5,183.3,246.1)),
			  dot(p,vec3(113.5,271.9,124.6)));

	return fract(sin(p)*43758.5453123);
}

void main() {
    vec2 coords = vec2(vTexCoord.x, 1.0 - vTexCoord.y);
    vec4 color = texture2D(tex, coords);
    vec3 coefficients = vec3(0.2126, 0.7152, 0.0722);
    float grey = floor(dot(coefficients, color.rgb)+0.6);
    vec3 outc = vec3(grey, grey, grey);
    if (grey == 0.0) {
        outc = hashOld33(vec3(coords, u_time));
    } else {
        outc = hashOld33(vec3(coords, 0));
    }
    gl_FragColor = vec4(outc, 1.0);
    //gl_FragColor = vec4(vec3(grey, grey, grey), 1.0);
}`;

function preload() {
    shaderProgram = createShader("attribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\nvoid main() {\n  vTexCoord = aTexCoord;\n  gl_Position = vec4(aPosition, 1.0);\n}", fragShader);
}

function setup() {
    createCanvas(windowWidth, windowHeight, WEBGL);
    cam = createCapture(VIDEO);
    cam.size(windowWidth, windowHeight);
    cam.hide();
    shader(shaderProgram);
}

let isPaused = false;

function draw() {
    if (!isPaused) {
        shaderProgram.setUniform('u_time', millis() / 1000);
        shaderProgram.setUniform("tex", cam);
        rect(-width / 2, -height / 2, width, height);
    }
}

function keyPressed() {
    if (key === 'p') { // Press 'p' to pause or resume
        isPaused = !isPaused;
        if (isPaused) {
            noLoop(); // Stop the loop
        } else {
            loop(); // Resume the loop
        }
    }
}