Ripple Shader

let myShader;

let img1;// previous image

let img2;// current image

let img3;

let time = 0;

​

function preload(){

  myShader = loadShader("test.vert", "test.frag")

}  

​

function setup() { 

  createCanvas(400, 400, WEBGL);

  // pixelDensity(1);

  img1 = createImage(width, height);

  img2 = createImage(width, height);

} 

​

function draw() { 

  img3 = get();

  img1 = get();

  const w = 2;

  img1.loadPixels();

  for(let i = mouseX-w + width/2; i <= mouseX+w + width/2; i += 1){

    for(let j = mouseY-w; j <= mouseY+w; j += 1){

      const k = (j * width + i) * 4;

      img1.pixels[k + 1] = 255;

      img1.pixels[k + 2] = 255;

    }

  }

  if(random() < .1) {

    const x = floor(random(width));

    const y = floor(random(height));

    const k = (y * width + x) * 4;

    img1.pixels[k + 1] = 255;

    img1.pixels[k + 2] = 255;

    for(let i = x-w; i <= x+w; i += 1){

      for(let j = y-w; j <= y+w; j += 1){

        const k = (j * width + i) * 4;

        img1.pixels[k + 1] = 255;

        img1.pixels[k + 2] = 255;

      }

    }

  }

  img1.updatePixels();

  myShader.setUniform("u_resolution", [width, height]);

  myShader.setUniform("u_tex1", img1);

  myShader.setUniform("u_tex2", img2);

  myShader.setUniform("u_time", time);

​

  shader(myShader);

  rect(0, 0, 10, 10);  

  img2 = img3.get();

  time += 1;

}