// https://thebookofshaders.com/10/

// https://editor.p5js.org/TheSketchyGuy/sketches/J0gXLJ9w7

//

​

let img;

function preload(){

  img = loadImage("ema.jpg");

}

​

let s;

function setup() {

  createCanvas(400, 400, WEBGL);

​

  let fragSrc = `precision highp float;

​

  // x,y coordinates, given from the vertex shader

  varying vec2 vTexCoord;

​

  // the canvas contents, given from filter()

  uniform sampler2D tex0;

  // other useful information from the canvas

  uniform vec2 texelSize;

  uniform vec2 canvasSize;

  // a custom variable from this sketch

  uniform float noise;

​

  void main() {

    // get the color at current pixel

    vec4 color = texture2D(tex0, vTexCoord);

    // set the output color

    color.b *= 1.4;

    color.g *= 1.2;

    color.r *= .8;

​

    vec4 k;

    k.r = color.b;

    k.g = color.b;

    k.b = color.b;

    k.a = 1.0;

​

    color = (noise>.6)?color*noise:k;

    gl_FragColor = vec4(color.rgb, 1.0);

  }`;

​

  s = createFilterShader(fragSrc);

}

​

function draw() {

  background(220);

  image(img,10-200,10-200,200-10*2,200-10*2);

​

  image(img,10    ,10-200,200-10*2,200-10*2);

  s.setUniform('noise', noise(frameCount*5) );

  filter(s);

​

  image(img,10-200,10    ,200-10*2,200-10*2);

  image(img,10    ,10    ,200-10*2,200-10*2);

}