let pts;

let glitchShader, screen;

​

let lines;

​

function preload() {

  glitchShader = loadShader("shader.vert", "shader.frag");

}

function setup() {

  createCanvas(1000, 1000, WEBGL);

​

  stepsize = width / 4;

  cells = width / stepsize;

​

  lines = [];

  for (let _ = 0; _ < 20; _++) {

    lines.push({x:random(0,-50), dx: random(0.5, 10)})

  }

//   background(20);

//   noFill();

//   stroke(220);

​

//   rectMode(CENTER);

​

  let halfstep = stepsize / 2;

  pts = [];

  screen = createGraphics(width, height);

  screen.background(20);

  screen.stroke(220);

  shader(glitchShader);

  //   while (stepsize > 4) {

​

  //   }

}

let step = 0;

​

function updateShader() {

  glitchShader.setUniform("texture", screen);

  glitchShader.setUniform("noise", getNoiseValue());

  rect(-width/2, -height/2, width, height);

}

​

function getNoiseValue() {

  let v = noise(millis()/100);

  const cutOff = 0.5;

  if(v < cutOff) {

    return 0;

  }

  v = pow((v-cutOff) * 1/(1-cutOff), 2);

  return v;

}

​

function draw() {

  // if (frameCount % 10 == 0) {

    screen.background(20);

    for (let l of lines) {

      if (l.x >= 0 && l.x < width) screen.line(l.x,0,l.x,height);

      l.x += l.dx;

      if (l.x > width) l.x = random(0,-50);

    // }

    // let x = random(0,width);

    // screen.line(x,0,x,height);

  }

  updateShader();

//   // background(220);

//   // translate(-width/2,-height/2);

//   if (step == 0) {

//     if (frameCount % 10 == 0) {

//       screen.stroke(random(255));

//       cells = width / stepsize;

//       halfstep = stepsize / 2;

//       for (let r = 0; r < cells; r++) {

//         for (let c = 0; c < cells; c++) {

//           let x = c * stepsize;// + halfstep;

//           let y = r * stepsize;// + halfstep;

​

//           if (random() > 0.75) pts.push({x:x, y:y});

//           screen.rect(x, y, stepsize, stepsize);

//         }

//       }

//       stepsize /= random([2, 4, 8, 16]);

//     }

//     if (stepsize < random(2,10)) {

//       step++;

//     }

//     updateShader();

//   } else {

//     /*screen.noStroke();

//     // fill(color(255,0,255))

//     screen.beginShape(random([TESS,LINES,QUADS,QUAD_STRIP,TRIANGLES,TRIANGLE_FAN,TRIANGLE_STRIP]));

//     screen.vertex(width/2,height/2)

//     for (let p of pts) {

//       screen.vertex(p.x, p.y);

//       screen.stroke(color(random(255),random(0),random(255),random(20,100)))

//       screen.fill(color(random(255),random(0),random(255),random(20,100)))

//     }

//     screen.endShape(CLOSE);*/

//     updateShader();

//     console.log("done");

//     noLoop();

//   }

}

​