const fps = 60;

​

function setup() {

  const size = min(window.innerWidth, window.innerHeight);

  createCanvas(size, size);

  colorMode(RGB, 1);

​

  capture = createCapture(VIDEO);

  capture.size(320, 240);

  frameRate(60);

}

​

function tri(v) {

  return 1 - abs(1 - fract(v) * 2);

}

​

function invCosn(v) {

  return 1 - cosn(v);

}

​

function sinn(v) {

  return sin(v * TWO_PI) * 0.5 + 0.5;

}

​

function cosn(v) {

  return cos(v * TWO_PI) * 0.5 + 0.5;

}

​

const frames = 1000;

let t;

let frame=0;

function draw() {

  frame += deltaTime * (fps / 1000);

  t = frame / frames;

  // t = mouseX / width;

​

  background(0);

  stroke(1);

  fill(1);

  strokeWeight(3);

  strokeCap(ROUND);

​

  capture.loadPixels();

​

  const col = 100;

  const row = 100;

  const amp = 0.05;

  for (let y = 0; y < row; y++) {

    for (let x = 0; x < col; x++) {

      let xf = x / col;

      let xf2 = (x + 1) / col;

      let yf = y / row;

​

      let v = sig(xf, yf) * amp;

      let v2 = sig(xf2, yf) * amp;

      line(xf*width, (yf + v)*height, xf2*width, (yf + v2)*height);

    }

  }

}

​

function sig(x, y) {

  // return sin(TWO_PI * ((tri(x) + tri(y)) * 2 + t * 5)) * invCosn(x) * invCosn(y) * 0.5;

  // return sin(TWO_PI * ((cosn(x + t) + sinn(y + t)) + t));

​

  const px = floor(capture.width * x);

  const py = floor(capture.height * y);

  const i = floor(px + py * capture.width) * 4;

  const cp = capture.pixels;

  const lum = (cp[i] + cp[i + 1] + cp[i + 2]) / (255 * 3);

  stroke(color(cp[i +0]/ 255, cp[i +1]/ 255, cp[i +2] / 255));

  return sin(TWO_PI * (lum * x + t * 5)) * lum;

}