[email protected]

Images

Display an image within your P5 sketch

https://editor.p5js.org/des8963/sketches/zzCmuip7e

To upload files, you need to open up the file explorer, click “<” within the P5 Editor. (see red)

Select “+” to upload a file and copy the file from your file manager into the upload window

let img1;

// preload runs before setup() and causes p5 to wait until assets are loaded
function preload() {
  img1=loadImage("sunset400.png");
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  image(img1,0,0,width,height);
}

Capturing Video

let video;

function setup() {
	video=createCapture(VIDEO);
	video.hide();
}

function draw() {
  background(220);
	image(video,0,0,width,height);
}

It is possible to change the resolution when we capture the video. (Note I did not emphasize this in class)

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

Capturing Video and showing a couple of copies of the Video:

Example of Capturing a Video Stream and putting it inside a TV

https://editor.p5js.org/des8963/sketches/6G2vshVdD