glitch001

const sketch = {

  fps: 30, // frames per second

  fpp: () => 30 * 5, // frames per period

};

​

let clock;

let noiseloop;

const size = 600;

const scale = size / 20;

const rows = size / scale;

const cols = size / scale;

let bg,fg;

​

function setup() {

  createCanvas(size, size);

  colorMode(HSB);

  frameRate(sketch.fps);

  clock = new PeriodicFrameClock(sketch.fpp());

  noiseloop = clock.createNoiseLoop("main", 2);

  rectMode(CENTER);

  bg = color([0, 0, 10]);

  fg = color([115, 20, 70]);

}

​

function ease(p) {

  p = constrain(p, 0, 1);

  return 3 * pow(p, 2) - 2 * pow(p, 3);

}

​

function draw() {

  background(bg);

  layerTwo(fg);

  layerOne(color([115,80,100]));

}

​

function layerOne(color) {

  const t = clock.time();

  for (let c = 1; c < cols; c++) {

    const cp = c / cols;

    for (let r = 1; r < rows; r++) {

      const rp = r / cols;

      const x = c * scale;

      const y = r * scale;

​

      const px = map(noiseloop.value(t + cp), 0, 1, 0, width);

      const py = map(pow(clock.cos(t + r),-7), -1, 1, 0, height)

​

      let cd = dist(px, py, x/5, sqrt(y));

      const p = ease(map(cd, 0, size / 2, 0, 1));

      strokeWeight(map(p, 0, 1, scale * 0.2, 0.05));

      const s = scale * 0.5;

​

      const h = color;

      h.setAlpha(map(p, 0, 1, 0.5, 0.1));

      stroke(color);

      fill(h);

​

      rect(x, y,

        s * clock.cos(clock.time() + pow(1, cp)),

        s * clock.sin(clock.time(20) - pow(1, rp)));

    }

  }

}

​

function layerTwo(color) {

  const t = clock.time();

  for (let c = 1; c < cols; c++) {

    const cp = c / cols;

    for (let r = 1; r < rows; r++) {

      const rp = r / cols;

      const x = c * scale;

      const y = r * scale;

​

      const px = map(clock.cos(t + cp + rp), -1, 1, 0, width);

      const py = map(clock.sin(t - r), -1, 1, 0, height)

​

      const cd = dist(width/2, height/2, x, y);

      const p = ease(map(cd, 0, size / 2, 0, 1));

      strokeWeight(map(p, 0, 1, scale * 0.1, 0.01));

      const s = scale * 0.6;

​

      const h = color;

      h.setAlpha(map(p, 0, 1, 1, 0));

      fill(h);

      stroke(color);

​

      rect(x, y,

        s * clock.sin(t - pow(r, cp)),

        s * clock.cos(t - pow(c, rp)));

    }

  }

}

​