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