let _noise;

​

const fps = 24;

const secs = 24; //8;//5

const Z = fps * secs; //12; //48;//12;

const radius = 0.25; //.82;

​

let fs;

​

function setup() {

  createCanvas(600, 600);

  pixelDensity(1);

​

  background(20);

  num_cells = 40;

  noiseDetail(8,0.75);

  noStroke();

  _noise = openSimplexNoise(random());

  frameRate(fps);

  rgb_fs = createFilterShader(rgb_src);

  saveGif("loop.gif", secs);

}

​

let z = 0;

function draw() {

  let cell_w = width / num_cells;

  let t = z / Z;

  let top = 1.25;

  let bottom = 0.001;

  // if (z > Z / 2) {

  //   bottom = =;

  //   top = 0.001;

  // }

  let s = map(z, 0, Z, top, bottom);

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

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

      // let n = noise(x*0.01, y * 0.01, frameCount * 0.01);

      let n = _noise.noise4D(

          x * s, //5,//1,

          y * s, //5,//1,

          radius * cos(TWO_PI * t),

          radius * sin(TWO_PI * t)

        );

      // let c = map(n, -1.0, 1.0, 0, 220);

      let c = 0;

      if (n > -1.0 && n < -0.8) c = 20;

      if (n > -0.6 && n < -0.4) c = 60;

      if (n > -0.2 && n < 0.0) c = 100;

      if (n > 0.2 && n < 0.4) c = 140;

      if (n > 0.4 && n < 0.6) c = 180;

      if (n > 0.6 && n < 0.8) c = 220;

      if (n > 0.8 && n < 1.0) c = 255;

      c = color(c);

      if (n > -0.05 && n < 0.05) c = color(0,0,255);

      if (n > 0.49 && n < 0.59) c = color(255,0,255)

      fill(c);

      rect(x*cell_w, y*cell_w, cell_w, cell_w);

    }

  }

  z++;

  if (z > Z-1) z = 0;

  let g_n, fs_n;

  if (z > Z / 2) {

    g_n = map(z, 0, Z / 2, 0.0, 0.1);

    fs_n = map(z, 0, Z / 2, 0.0, 0.01);

  } else {

    g_n = map(z, Z / 2, frames.length - 1, 0.09, 0.02);

    fs_n = map(z, Z / 2, Z - 1, 0.008, 0.002);

  }

  rgb_fs.setUniform("_noise", 0.01);//g_n);

  rgb_fs.setUniform("_g_noise", 0.01);//fs_n);

  filter(rgb_fs);

}

​

// rgb - based on https://editor.p5js.org/BarneyCodes/sketches/XUer03ShM

let rgb_src = `precision mediump float;

varying vec2 vTexCoord;

uniform sampler2D tex0;

uniform float _noise;

uniform float _g_noise;

​

//https://iquilezles.org/articles/distfunctions2d/

float sdBox( in vec2 p, in vec2 b )

{

    vec2 d = abs(p)-b;

    return length(max(d,0.0)) + min(max(d.x,d.y),0.0);

}

​

void main() {

  vec2 uv = vTexCoord;

  vec3 col;

  vec4 _col = texture2D(tex0, uv);

  col = _col.rgb;

​

  float noise = 0.25;

​

  // if (sdBox(uv, vec2(1.0,sin(_g_noise*0.15))) > (2.2 * sin(_g_noise*0.5))) {//0.5) {

​

  // if ((sdBox(uv, vec2(0.15,0.31)) > 0.75) || (1./sdBox(uv, vec2(0.85,0.71)) < 0.25)) {

  // glitch rgb components

  // vec2 offset = vec2(noise * 0.05, 0.0);

  vec2 offset = vec2(noise * _noise, _noise);

  col.r = texture2D(tex0, uv-offset).r;

  col.g = texture2D(tex0, uv+offset).g;

  col.b = texture2D(tex0, uv-offset).b;

​

   //col = fract(5.*cos(2.0/col));

   //col.g *= tan(4.0*_g_noise);

   // col.g = pow(step(0.5,col.g),_g_noise);

//}

​

  float alpha = 1.0;//clamp(pow(noise, 2.0),0.0, 0.5);

  gl_FragColor = vec4(col, alpha);

}`;