Simple Webcam in p5.js

I started off––like I normally do with new programming concepts––by breaking them down to the basic elements to make sure I understand them. I simplified the code example given by Lisa Jamhoury in class so that it would just create a p5 webcam:

// variable for my webcam video
let myVideo;

function setup() {
  // create a p5 canvas at the dimensions of my webcam
  createCanvas(640, 480);

  // create a p5 webcam, then hide it
  // the webcam appears below the canvas by default for some reason
  myVideo = createCapture(VIDEO);
  myVideo.size(width, height);


function draw() {
  // loadPixels() tells p5 to make the video's pixel array available at .pixels

  // get the current pixels from pixel array
  const currentPixels = myVideo.pixels;

  // go through every pixel of the video like a typewriter
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      // get the current position (index aka i) in the array
      const i = (y * width + x) * 4;

      ////// this is where you do something to the pixels //////

  // you always gotta update pixels in order for the image to change

  // flip the video image to be a mirror image of the user
  // translate to the right corner of the canvas
  translate(width, 0);

  // flip the horizontal access with -1 scale
  scale(-1, 1);

  // draw the updated video to the canvas
  image(myVideo, 0, 0, width, height);


Playing Around With Frame Difference

I then played around with Lisa’s example “Frame Difference“––the concept of which is essentially creating a webcam mirror that calculates the difference between the pixels in a previous frame with the pixels in your current frame and then applies different rules to that difference.

Drunko Vision


RULE: If the difference between two pixels is more than 50px, then draw the current pixels at that moment with an alpha value of 75.

EFFECT: By setting the threshold value for the difference between pixels so low (on a scale of 0-255), the sketch will draw more often than not. This creates a delay or trailing effect that becomes more pronounced the faster one moves. This made me feeling disoriented and slightly woozy… like being drunk.

Psychadelic Webcam


RULES: If the difference between two pixels is more than 50px:

EFFECT: Rather than being disorienting, I found the effect of this to be very pleasant, if surreal. I’d like to figure out how to play with the playback in real time in order to mimic the pingpong effect I created within giphy.

You Can Never Go Home Again


RULE: I modified Lisa’s other example, “BG-Subtraction,” in order to capture not just the pixels of a background, but the entire image present within the webcam. I then applied an alpha to the current pixels and tried to realign myself with the captured moment.

EFFECT: It was a very interesting feeling not being able to fully fit myself back into a previous moment, if even for an instant. It made me feel outside of my body.

Unfortunately, Fernando and I weren’t able to connect before class to user test. Otherwise, I would’ve been interested to see if he tried to do what I did in response to this sketch and try to realign his current image with his captured image.

September 16, 2020