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);
}
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);
}
createCapture()
It will create separate DOM element
<canvas>
</canvas>
<video>
</video>
Simply ADD Video as an DOM element
createCapture(VIDEO);
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);
}
tint()
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);
}
Snapshot in an Array
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
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()
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
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);
}
}
