Review Session from Tues April 30, 2024

In this session we cover the following:

• Capturing Video in P5
• Drawing a TV set using P5 shapes
• Introduction to P5 Live Media - Creating a 2 person Chat Sketch
• P5 Live Media - Creating a Multi-Person Chat Sketch

Video from our April 30th review session

code2-2024-p5livemedia.mp4

Video Capture

let video;

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

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

Drawing a TV Set:

// note we need to determine the width and height ratio of the video screen
// in your setup after you initialize video, set the sizeRatio global variable
// sizeRatio=video.height/video.width;

function drawTVSet(x,y,w,aMessage,aVideo) {
  strokeWeight(1);
  stroke(0);
  fill(130);
  let h=w*sizeRatio;
  rect(x,y,w,h);
  rect(x+5,y+5,w*2/3,h-10);

  fill(100);
  rect(x+w*3/32,y+h,w*26/32,20);
  fill(0);
  textSize(18);
  text(aMessage,x+w*12/32,y+h+18);
  ellipse(x+w*5/6,y+h*1/6,h/5);
  ellipse(x+w*5/6,y+h*3/6,h/5);
  ellipse(x+w*9/12,y+h*8/12,h/15);
  ellipse(x+w*11/12,y+h*8/12,h/15);
}

Putting our Video inside a TV Set:

let video;
let tvPositions=[];
let sizeRatio;

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.hide();
  sizeRatio=video.height/video.width;
  for (let i=0; i<13; i++) {
    tvPositions.push({x:random(width),y:random(width),w:150+random(150),h:100+random(100)});
  }
}

function drawTVSet(x,y,w,aMessage,aVideo) {
  strokeWeight(1);
  stroke(0);
  fill(130);
  let h=w*sizeRatio;
  rect(x,y,w,h);
  rect(x+5,y+5,w*2/3,h-10);

  fill(100);
  rect(x+w*3/32,y+h,w*26/32,20);
  fill(0);
  textSize(18);
  text(aMessage,x+w*12/32,y+h+18);
  ellipse(x+w*5/6,y+h*1/6,h/5);
  ellipse(x+w*5/6,y+h*3/6,h/5);
  ellipse(x+w*9/12,y+h*8/12,h/15);
  ellipse(x+w*11/12,y+h*8/12,h/15);
  image(aVideo,x+5,y+5,w*2/3,h-10);
}

function draw() {
  for (let i=0; i< tvPositions.length; i++) {
    let pos=tvPositions[i];
    drawTVSet(pos.x,pos.y,pos.w,"Zenith",video);
  }
}

Code from class: https://editor.p5js.org/des8963/sketches/br_LUSN-J

P5 Live Media: