//

// An example sketch showing the p5.filterShader library

// https://github.com/BarneyWhiteman/p5.filterShader

​

let glitchShader;

let grainShader;

​

let drawingSurface;

​

// load in the shaders (reuse vertex shader)

function preload() {

  glitchShader = loadShader("filter.vert", "glitch.frag");

  grainShader = loadShader("filter.vert", "grain.frag");

}

​

function setup() {

  createCanvas(400, 400);

  // Create a seperate graphics to draw on

  drawingSurface = createGraphics(width, height);

  drawingSurface.background(50);

  drawingSurface.stroke(255);

  drawingSurface.strokeWeight(5);

}

​

function draw() {

  if(mouseIsPressed) {

    // draw a line when mouse is pressed

    drawingSurface.line(mouseX, mouseY, pmouseX, pmouseY);

  }

  // put what we've drawn on the main canvas

  image(drawingSurface, 0, 0);

  // filter the main canvas

  grainShader.setUniform("millis", millis());

  grainShader.setUniform("grainAmp", 0.1);

  filterShader(grainShader);

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

  filterShader(glitchShader);

}

​

​

function getNoiseValue() { 

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

  const cutOff = 0.4;

  if(v < cutOff) {

    return 0;

  }

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

  return v;

}