Credit:https://editor.p5js.org/lisajamhoury/sketches/SOtCmkD7Q

https://p5js.org/reference/#/p5/createCapture

https://p5js.org/reference/#/p5.MediaElement

https://p5js.org/reference/#/p5/image

https://p5js.org/reference/#/p5.Image/pixels

https://p5js.org/reference/#/p5/pixelDensity

*/

​

let cam;

​

function setup() {

  createCanvas(480, 360);

  pixelDensity(1);

  cam = createCapture(VIDEO);

  cam.size(480, 360);

  cam.hide();

}

​

function draw() {

  // background(255,10);

  image(cam, 0, 0);

​

  // STEP 1 - load canvas pixel array

  loadPixels();

​

  // STEP 2 - load webcam pixel array

  cam.loadPixels();

​

  // STEP 3 - iterate through all pixels on canvas

  for (let x = 0; x < width/2; x++) {

    for (let y = 0; y < height; y++) {

      // STEP 4  - calculate index pos of each pixel's red value

      // from there access green, blue, alpha values

       let index = (x + y * width) * 4;

​

      // change canvas pixels using webcam pixels

      // pixels[index + 0] = 150;

      // pixels[index + 1] = cam.pixels[index+1];

      // pixels[index + 2] = cam.pixels[index+2];

      // pixels[index + 3] = cam.pixels[index+3];

​

      // another way to mirror webcam input

      // calc the index pos for pixels starting on the right

      // let rIndex = (width - x - 1 + y * width)*4;

      // pixels[index + 0] = cam.pixels[rIndex+0];

      // pixels[index + 1] = cam.pixels[rIndex+1];

      // pixels[index + 2] = cam.pixels[rIndex+2];

      // pixels[index + 3] = cam.pixels[rIndex+3];

​

      // experiment, mix and match!

      let rIndex = (width - x - 1 + y * width)*4;

      pixels[index + 0] = cam.pixels[rIndex+0];

      pixels[index + 1] = cam.pixels[rIndex+2];

      pixels[index + 2] = cam.pixels[index+1];

      pixels[index + 3] = 150;

​

    }

  }

​

  // STEP 5 - save changes to canvas pixels

  updatePixels();

}

​