let frag, frag2;

function setup() {

  createCanvas(800, 800);

  pixelDensity(1);

  background(20);

  noiseDetail(.02, 0.75);

  let fragSrc2 = `precision mediump float;

​

// lets grab texcoords just for fun

varying vec2 vTexCoord;

​

// our texture coming from p5

uniform sampler2D tex0;

uniform vec2 resolution;

uniform vec2 canvasSize;

uniform vec2 texelSize;

​

void main() {

​

  vec2 uv = vTexCoord;

  // the texture is loaded upside down and backwards by default so lets flip it

  uv = 1.0 - uv;

​

  // lets figure out how big a pixel is on our screen

  // we can do this by diving 1 by the width and height of our sketch

  vec2 pixelSize = vec2(1.0) / texelSize;//resolution;

​

  // this variable will be used to offset the color channels

  // try changing the 10.0 here to see a bigger or smaller change

  vec2 offset = pixelSize * 105.0;

​

  // make a vec4 for each color channel (rgb)

  // on the red and blue channels, we will move the texture coordinates just a little

  vec4 rTex = texture2D(tex0, uv - offset);

  vec4 gTex = texture2D(tex0, uv);

  vec4 bTex = texture2D(tex0, uv + offset);

​

  // recombine the three texures into a single one for output

  vec4 color = vec4(rTex.r, gTex.g, bTex.b, 1.0);

​

  gl_FragColor = color;

}`;

  fragSrc = `precision mediump float;

​

// lets grab texcoords just for fun

varying vec2 vTexCoord;

​

uniform float u_time;

​

// our texture coming from p5

uniform sampler2D tex0;

​

void main() {

​

  vec2 uv = vTexCoord;

  // the texture is loaded upside down and backwards by default so lets flip it

  // uv = 1.0 - uv;

​

  // to pixelate an image we need to alter our uvs so that instead of being a smooth gradient it steps from one color to the next

  // in order to do this we will use the floor function

  // floor will round a float down to the nearest int, so 4.98 would become 4.0, and -37.2 would become -37.0

  // first the uv's are multipled times a tiles variable

  float tiles = 1000.;//250.;//20.0;

  uv = uv * tiles;

​

  // second the uvs are rounded down to the nearest int

  uv = floor(uv);

​

  // lastly we divide by tiles again so that uvs is between 0.0 - 1.0

   uv = (uv / tiles);

​

  // often times in glsl you will see programmers combining many operation onto one line.

  // the previous three steps could have also been written as uv = floor( uv * tiles ) / tiles

​

  // get the webcam as a vec4 using texture2D and plug in our distored uv's

  vec4 tex = texture2D(tex0, uv);

​

  // output the texture

  gl_FragColor = tex;

​

  // if you'd like a debug view of what the uv's look like try running this line

  //gl_FragColor = vec4(uv.x, uv.y, 0.0, 1.0);

}`;

  frag2 = createFilterShader(fragSrc2);

 frag=createFilterShader(fragSrc); 

}

​

let y = 0;

let z = 0;

function draw() {

  loadPixels();

  const _density = pixelDensity();

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

    let _zoom = zoom;

    // if (random() > 0.99) _zoom *= random(0.001, 0.1);

    let n = noise(x*_zoom, y*_zoom, z*_zoom);

    // let c = map(n, 0.0, 1.0, 221, 20);

    let c = 40;

    if (n < 0.2 && n > 0.15) c = 60;

    else if (n < 0.3 && n > 0.25) c = 80;

    else if (n < 0.4 && n > 0.35) c = 100;

    else if (n < 0.5 && n > 0.45) c = 120;

    else if (n < 0.6 && n > 0.55) c = 140;

    else if (n < 0.7 && n > 0.65) c = 160;

    else if (n < 0.8 && n > 0.75) c = 180;

    const idx = 4 * _density * (y * _density * width + x);

    pixels[idx] = c;

    pixels[idx+1] = c;

    pixels[idx+2] = c;

  }

  updatePixels();

  y++;

  // frag.setUniform("u_time", frameCount);

  // filter(frag);

  // filter(frag2);

  if (y > height-1) {

    y = 0;

    z++;

    frag.setUniform('u_time', frameCount);

    filter(frag1);

    filter(frag2);

    console.log("done");

    noLoop();

  }

}