Review Session from Tuesday Nov 15, 2022

In this session we cover the following:

• Capturing Video in P5
• Creating an Artistic Pixelation of the Video Output
• Introduction to P5 Live Media - Creating a 2 person Chat Sketch
• P5 Live Media - Creating a Multi-Person Chat Sketch

Code2VideoLiveMedia.mp4

Video Capture

let video;

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.hide();
}

function draw() {
  image(video, 0, 0);
}

Accessing pixels of the video capture:

let video;

function setup() {
  createCanvas(600, 400);
  video = createCapture(VIDEO);
  video.size(20,20);
  video.hide();
}

// video.pixels is an array of pixels, and each pixel is actually 4 values
//    The 4 values represent red, greed, blue and alpha (transparency)
// The array of pixels represents every pixel in the video, but we want
//    to access the array as a grid not as a list.
// This function lets you pass an x & y and we will find the index of the
//    pixel you are looking for in the array. We return a color.
function getPixelColor(aVideo,x,y) {
  let pIndex=4*(x+y*aVideo.width);
  let r=aVideo.pixels[pIndex];
  let g=aVideo.pixels[pIndex+1];
  let b=aVideo.pixels[pIndex+2];
  let c=color(r,g,b);
  return c;
}

function draw() {
  background(100);
  video.loadPixels();
  
  for (let j=0; j< video.height; j++) {
    for (let i=0; i < video.width; i++) {
      //let c=random(0,255);  // we first showed what our grid looked like
      let c=getPixelColor(video,i,j); // Get the pixel from the video 
      fill(c);
      let b=brightness(c);

      ellipse(i*20,j*20,b/4,b/4);
    }
  }
  //image(video, 100, 100,200,200);
}

Code from class: https://editor.p5js.org/des8963/sketches/8kzcWm9b6

P5 Live Media:

Check out ITP Chair Shawn Van Every’s documentation on P5 Live Media. Shawn created this library.

P5 Live Media on Github