ICL
Search…
Week 09
Video and Sound

Load Images

1
var img;
2
var k = 2;
3
4
function setup() {
5
createCanvas(720, 400);
6
7
img = loadImage('images/car' + k + '.jpg');
8
console.log(k);
9
}
10
11
function draw() {
12
image(img, 0, 0, width, height);
13
}
Copied!

Preload()

1
var img;
2
var k = 3;
3
4
5
function preload(){
6
img = loadImage('images/car' + k + '.jpg');
7
8
}
9
10
11
function setup() {
12
createCanvas(720, 400);
13
}
14
15
16
function draw() {
17
image(img, 0, 0, width, height);
18
}
19
Copied!

createCapture()

It will create separate DOM element
1
<canvas>
2
</canvas>
3
4
<video>
5
</video>
Copied!

Simply ADD Video as an DOM element

1
createCapture(VIDEO);
Copied!

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

1
var video;
2
3
function setup() {
4
createCanvas(320, 240);
5
video = createCapture(VIDEO);
6
video.size(320,240);
7
}
8
9
10
function draw() {
11
background(220);
12
image(video, 0, 0,320,240);
13
}
Copied!

tint()

1
var video;
2
function setup() {
3
createCanvas(320, 240);
4
video = createCapture(VIDEO);
5
video.size(320,240);
6
}
7
8
function draw() {
9
tint(255,0,255);
10
image(video, 0, 0,320,240);
11
}
Copied!

hide()

1
video.hide();
Copied!

Http VS Https

https is necessary for your website to access your camera.

Simple Snapshot Function

1
var video;
2
3
function setup() {
4
createCanvas(320, 240);
5
background(255,255,255);
6
video = createCapture(VIDEO);
7
video.size(320,240);
8
button = createButton("Shot!!");
9
button.mousePressed(takeashot);
10
11
}
12
13
function takeashot(){
14
image(video, 0, 0,320,240);
15
16
}
17
18
function draw() {
19
20
// image(video, 0, 0,320,240);
21
22
}
Copied!

Snapshot in an Array

1
var video;
2
var button;
3
var snapshots = [];
4
5
function setup() {
6
createCanvas(480, 240);
7
background(255,255,255);
8
video = createCapture(VIDEO);
9
video.size(320,240);
10
button = createButton("Shot!!");
11
button.mousePressed(takeshot);
12
}
13
14
function takeshot() {
15
snapshots.push(video.get());
16
}
17
18
function draw() {
19
var x = 0;
20
var y = 0;
21
var w = 80;
22
var h = 60;
23
24
for(i=0;i<snapshots.length;i++) {
25
image(snapshots[i], x, y, w, h);
26
x = x + w;
27
if(x > width){
28
x = 0;
29
y = y + h;
30
}
31
}
32
33
}
34
35
36
37
38
Copied!

Other Example

1
var video;
2
var button;
3
var snapshots = [];
4
var counter = 0;
5
var vScale = 4;
6
var total;
7
8
function setup() {
9
createCanvas(800, 300);
10
background(51);
11
video = createCapture(VIDEO);
12
video.size(320, 240);
13
// button = createButton('snap');
14
// button.mousePressed(takesnap);
15
}
16
17
function draw() {
18
var w = 80;
19
var h = 60;
20
var x = 0;
21
var y = 0;
22
23
// How many cells fit in the canvas
24
total = floor(width / w) * floor(height / h);
25
26
snapshots[counter] = video.get();
27
counter++;
28
if (counter == total) {
29
counter = 0;
30
}
31
32
for (var i = 0; i < snapshots.length; i++) {
33
//tint(255, 50);
34
var index = (i + frameCount) % snapshots.length;
35
image(snapshots[index], x, y, w, h);
36
x = x + w;
37
if (x >= width) {
38
x = 0;
39
y = y + h;
40
}
41
}
42
}
43
44
Copied!

Audio

AudioIn()

1
2
var mic;
3
4
function setup() {
5
createCanvas(500, 500);
6
7
// Create an Audio input
8
mic = new p5.AudioIn();
9
10
// start the Audio Input.
11
// By default, it does not .connect() (to the computer speakers)
12
mic.start();
13
}
14
15
function draw() {
16
background(200);
17
18
// Get the overall volume (between 0 and 1.0)
19
var vol = mic.getLevel();
20
fill(255,0,255);
21
stroke(0);
22
23
// Draw an ellipse with height based on volume
24
var h = map(vol, 0, 1, 0, height/2);
25
ellipse(width/2,height/2, 25+h ,25 +h);
26
}
27
Copied!

Simple Music Player

1
var music;
2
3
function setup() {
4
song = loadSound('sound/intmus3.mp3');
5
createCanvas(400,400);
6
background(255,0,255);
7
}
8
9
function mousePressed() {
10
if ( song.isPlaying() ) { // .isPlaying() returns a boolean
11
song.stop();
12
var r = random(0,255);
13
var b = random(100,255);
14
15
background(r,0,b);
16
} else {
17
song.play();
18
background(100,100,100);
19
}
20
}
21
Copied!

Face Tracker

Assignment: Either Video OR Sound

Last modified 3yr ago