*

 * Draw only pixels of video that have changed very little

 * in comparison to the previous frame of the video. But the last

 * drawn pixels are not erased each iteration of the loop.

 *

 * As the pixels add on, an image drawn by ripples is created.

 * 

 */

​

let clip;

let prevFrame = null;

let nextPrevFrame = null;

​

let shortestSideOfWindow;

​

let frame = 0;

​

function preload() {

  clip = createVideo("/pontetto.mp4");

  clip.hide();

  clip.loop();

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  imageMode(CENTER);

  frameRate(1);

  background('#E8E6D8');

  shortestSideOfWindow = min(width, height);

}

​

function draw() {

  //Advance the video by skipping a random amount of frames

  //between 0.5s and 1s.

  //Modified from https://editor.p5js.org/davepagurek/sketches/6fVw3SmuX

  frame += random(0.5,1);

  clip.time(frame);

  //If the video is almost over, restart it

  if(frame >= 9) {

    frame = 0;

  }

  //Load the pixels of the current video frame

  clip.loadPixels();

  //Save the pixels of the rendered last frame for comparison

  prevFrame = nextPrevFrame;

  //Save the pixels of the current frame, which will become

  //the pixels of the previous frame on the next 

  //run through the loop

  nextPrevFrame = clip.get();

  //If a previous frame exists

  if (prevFrame != null) {

    prevFrame.loadPixels();

​

    //If the previous frame indeed has pixels

    if (prevFrame.pixels.length == clip.pixels.length) {

      for (let i = 0; i < clip.pixels.length; i += 4) {

        const clipColor = color(

          clip.pixels[i + 0],

          clip.pixels[i + 1],

          clip.pixels[i + 2]

        );

        const prevFrameColor = color(

          prevFrame.pixels[i + 0],

          prevFrame.pixels[i + 1],

          prevFrame.pixels[i + 2]

        );

​

​

        //If this pixel has changed in brightness only by a decimal

        if (Math.abs(brightness(prevFrameColor) - brightness(clipColor)) < 1) {

          //Draw the pixel with full opacity

          clip.pixels[i + 3] = 255;

        } else {

          //if the change was greater, remove all opacity from the px

          clip.pixels[i + 3] = 0;

        }

      }

      clip.updatePixels();

​

      //Blend the images with opacity

      tint(255,128);

      //Draw the image in the center, so that it is not cropped

      let imSize = shortestSideOfWindow;

      image(clip, width/2, height/2, imSize, imSize);

      //Below is previous code used to tile the image vertically

      //and horizontally

//      //extending vertically

//       push();

//       scale(1, -1);

//       translate(0, -(height+imSize) );

//       image(clip, width/2, height/2, imSize, imSize);

//       translate(0, (height+imSize) );

//       translate(0, -(height-imSize) );

//       image(clip, width/2, height/2, imSize, imSize);

//       pop();

//       //extending horizontally

//       push();

//       scale(-1, 1);

//       translate(-(width+imSize),0 );

//       image(clip, width/2, height/2, imSize, imSize);

//       translate((width+imSize),0 );

//       translate(-(width-imSize),0 );

//       image(clip, width/2, height/2, imSize, imSize);

//       pop();

    }

  }

}

​