Week 09

Video and Sound

Load Images

var img;
var k = 2;
function setup() {
createCanvas(720, 400);
img = loadImage('images/car' + k + '.jpg');
console.log(k);
}
function draw() {
image(img, 0, 0, width, height);
}

https://editor.p5js.org/kdoodoo/sketches/r1nYPIa27

Preload()

var img;
var k = 3;
function preload(){
img = loadImage('images/car' + k + '.jpg');
}
function setup() {
createCanvas(720, 400);
}
function draw() {
image(img, 0, 0, width, height);
}

https://editor.p5js.org/kdoodoo/sketches/H1n6OITn7

createCapture()

It will create separate DOM element

<canvas>
</canvas>
<video>
</video>

Simply ADD Video as an DOM element

createCapture(VIDEO);

https://editor.p5js.org/kdoodoo/sketches/rkoa9npnX

You can add your video DOM on to the Canvas with image();

var video;
function setup() {
createCanvas(320, 240);
video = createCapture(VIDEO);
video.size(320,240);
}
function draw() {
background(220);
image(video, 0, 0,320,240);
}

https://editor.p5js.org/kdoodoo/sketches/SkiGXTThQ

tint()

https://editor.p5js.org/kdoodoo/sketches/SJi3mp627

var video;
function setup() {
createCanvas(320, 240);
video = createCapture(VIDEO);
video.size(320,240);
}
function draw() {
tint(255,0,255);
image(video, 0, 0,320,240);
}

hide()

video.hide();

Http VS Https

https is necessary for your website to access your camera.

Simple Snapshot Function

var video;
function setup() {
createCanvas(320, 240);
background(255,255,255);
video = createCapture(VIDEO);
video.size(320,240);
button = createButton("Shot!!");
button.mousePressed(takeashot);
}
function takeashot(){
image(video, 0, 0,320,240);
}
function draw() {
// image(video, 0, 0,320,240);
}

https://editor.p5js.org/kdoodoo/sketches/SyaDMA6hX

Snapshot in an Array

https://editor.p5js.org/kdoodoo/sketches/SJVVFRa2m

var video;
var button;
var snapshots = [];
function setup() {
createCanvas(480, 240);
background(255,255,255);
video = createCapture(VIDEO);
video.size(320,240);
button = createButton("Shot!!");
button.mousePressed(takeshot);
}
function takeshot() {
snapshots.push(video.get());
}
function draw() {
var x = 0;
var y = 0;
var w = 80;
var h = 60;
for(i=0;i<snapshots.length;i++) {
image(snapshots[i], x, y, w, h);
x = x + w;
if(x > width){
x = 0;
y = y + h;
}
}
}

Other Example

https://editor.p5js.org/kdoodoo/sketches/ryujhCpnX

var video;
var button;
var snapshots = [];
var counter = 0;
var vScale = 4;
var total;
function setup() {
createCanvas(800, 300);
background(51);
video = createCapture(VIDEO);
video.size(320, 240);
// button = createButton('snap');
// button.mousePressed(takesnap);
}
function draw() {
var w = 80;
var h = 60;
var x = 0;
var y = 0;
// How many cells fit in the canvas
total = floor(width / w) * floor(height / h);
snapshots[counter] = video.get();
counter++;
if (counter == total) {
counter = 0;
}
for (var i = 0; i < snapshots.length; i++) {
//tint(255, 50);
var index = (i + frameCount) % snapshots.length;
image(snapshots[index], x, y, w, h);
x = x + w;
if (x >= width) {
x = 0;
y = y + h;
}
}
}

Audio

AudioIn()

https://editor.p5js.org/kdoodoo/sketches/H1Z-0Cahm

var mic;
function setup() {
createCanvas(500, 500);
// Create an Audio input
mic = new p5.AudioIn();
// start the Audio Input.
// By default, it does not .connect() (to the computer speakers)
mic.start();
}
function draw() {
background(200);
// Get the overall volume (between 0 and 1.0)
var vol = mic.getLevel();
fill(255,0,255);
stroke(0);
// Draw an ellipse with height based on volume
var h = map(vol, 0, 1, 0, height/2);
ellipse(width/2,height/2, 25+h ,25 +h);
}

Simple Music Player

https://editor.p5js.org/kdoodoo/sketches/ry9RJJAhQ

var music;
function setup() {
song = loadSound('sound/intmus3.mp3');
createCanvas(400,400);
background(255,0,255);
}
function mousePressed() {
if ( song.isPlaying() ) { // .isPlaying() returns a boolean
song.stop();
var r = random(0,255);
var b = random(100,255);
background(r,0,b);
} else {
song.play();
background(100,100,100);
}
}

Face Tracker

https://editor.p5js.org/kdoodoo/sketches/HksKmt0h7

https://github.com/auduno/clmtrackr

Assignment: Either Video OR Sound

https://goo.gl/forms/HXuxh1lnSbdwoLh03