week9_sound+video.js

//////////////////////////////////////////////////
///////////////////////////////////// SOUND


//// 1. Click to toggle sound.

var song;

function preload() {
  song = loadSound("sounds/beat.mp3");  
}

function setup() {
  createCanvas(480, 270);
  background(0);
  fill(255);
  textAlign(CENTER);
  text("click to play/pause", width/2, height/2);
  song.play();
  noLoop();
}

function mousePressed() {
  if (song.isPlaying()) {
    song.stop();
  } else {
    song.play();
  }
}

//// 2. Distort sound

var song;

var speedSlider;
var volumeSlider;

function preload() {
  song = loadSound("sounds/beat.mp3");  
}

function setup() {
  noCanvas();

  // Loop the sound forever
  // (well, at least until stop() is called)
  song.loop();

  speedSlider = createSlider(0.5, 4, 1, 0.1);
  speedSlider.parent('rate');
  volumeSlider = createSlider(0, 1, 0.5, 0.01);
  volumeSlider.parent('volume');

}

function draw() {
  background(200);

  song.amp(volumeSlider.value());
  song.rate(speedSlider.value());
}

//// 3. Pan sound
var song;

function preload() {
  song = loadSound("sounds/beat.mp3");  
}

function setup() {
  createCanvas(200, 200);

  // Loop the sound forever
  // (well, at least until stop() is called)
  song.loop();
}

function draw() {
  background(200);
  // Map mouseX  to a panning value (between -1.0 and 1.0)
  var panning = map(mouseX, 0., width, -1.0, 1.0);
  song.pan(panning);
  
  // Draw a circle
  stroke(0);
  fill(51, 100);
  ellipse(mouseX, 100, 48, 48);
}

//// 4. Noise
var noise;

function setup() {
  createCanvas(200, 200);
  noise = new p5.Noise();
  noise.setType('white');
  noise.start();
}

function draw() {
  background(200);
  
  var vol = map(mouseX, 0, width, 0, 1);
  noise.amp(vol);
  fill(175);
  stroke(0);
  ellipse(mouseX, 100, 32, 32);
}

//// 5. Mic input

var input;

function setup() {
  createCanvas(480, 270);

  input = new p5.AudioIn();
  input.start();

}

function draw() {
  background(200);

  // Get the overall volume (between 0 and 1.0)
  var vol = input.getLevel();
  fill(127);
  stroke(0);

  // Draw an ellipse with size based on volume
  ellipse(width/2, height/2, 10+vol*200, 10+vol*200);
}

//////////////////////////////////////////////////
///////////////////////////////////// VIDEO

//// 1. Play a video


// Is it playing?
var playing = false;

// Video
var fingers;

// Button
var button;

function setup() {
  noCanvas();

  // Create a video element
  fingers = createVideo('fingers.mov');

  // Create button and set callback
  button = createButton('play');
  button.mousePressed(toggleVid); // attach button listener
}

// Plays or pauses the video depending on current state
function toggleVid() {
  if (playing) {
    fingers.pause();
    button.html('play');
  } else {
    fingers.loop();
    button.html('pause');
  }
  playing = !playing;
}


//// 2. Video canvas
var fingers;

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

  // Create the video
  fingers = createVideo('fingers.mov');
  fingers.loop(); // set the video to loop and start playing
  fingers.hide(); // by default video shows up in separate dom
                  // element. hide it and draw it to the canvas
                  // instead
}

function draw() {
  background(150);
  // Draw the video
  image(fingers,10,10); // draw the video frame to canvas

  // Apply a filter and draw again
  filter('GRAY');
  image(fingers,150,150); // draw a second copy to canvas
}

//// 3. Video cue with popcorn.js


// Video and button
var fingers;
var button;

// Dom element to show time in video
var time;


function setup() {
  createCanvas(100, 100);
  background(0);

  // DOM element to show time in video
  time = createP('0');

  // Start the video
  fingers = createVideo('fingers.mov');
  fingers.play();

  // Add a cue at 2 seconds to change background
  fingers.addCue(2, changeBackground);

  // Add two cues, notice how the third argument gets passed to the callback showText
  fingers.addCue(4, showText, "hello at 4 seconds");
  fingers.addCue(6.5, showText, "hello again at 6.5 seconds");

}

// Update the HTML element
function draw() {
  time.html(fingers.time());
}

// A callback to change background
function changeBackground() {
  background(255, 0, 175);
}

// A callback to show some text
function showText(txt) {
  createP(txt);
}

//////////////////////////////////////////////////
///////////////////////////////////// CAPTURE

//// 1. Basic capture
var video;

function setup() {
  createCanvas(320, 240);
  video = createCapture(VIDEO);
  // The above function actually makes a separate video
  // element on the page.  The line below hides it since we are
  // drawing the video to the canvas
  video.hide();
}

function draw() {
  background(0);
  // Step 5. Display the video image.
  image(video, 0, 0, width, height);
}

//// 2. photobooth
function setup() {

  // Make a canvas
  var canvas = createCanvas(320, 240);
  background(0);
  canvas.parent('video');

  // Make a video elements
  video = createCapture(VIDEO);
  video.size(320, 240);
  video.parent('video');

  // Make a button
  var button = createButton('snap');
  button.parent('button');
  // When you click the button
  button.mousePressed(snap);
}

// Copy a snapshot of the video onto the canvas
function snap() {
  image(video, 0, 0, width, height);
}

//// 3. Pointillism
// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example 15-14: "Pointillism"

// Number of columns and rows in our system
var cols, rows;


var slider;

function setup() {
  createCanvas(640, 480);
  devicePixelScaling(false);

  slider = createSlider(4, 64, 16);

  video = createCapture(VIDEO);
  video.size(width, height);

  //video.hide();

  background(0);
}

function draw() {
  
  video.loadPixels();

  // Draw ten dots per frame
  for (var i = 0; i < 10; i++) {

    // Pick a random point
    var x = floor(random(video.width));
    var y = floor(random(video.height));

    // Grab a color from a pixel
    var col = video.get(x, y);
    
    // Back to shapes! Instead of setting a pixel, we use the color 
    // from a pixel to draw a circle.
    noStroke();
    fill(col[0], col[1], col[2], 127);
    ellipse(x, y, slider.value(), slider.value()); 
    
  }
}

//// 4. clmtrackr

// For more: https://github.com/auduno/clmtrackr

var ctracker;

function setup() {
  // setup camera capture
  var videoInput = createCapture(VIDEO);
  videoInput.size(400, 300);
  videoInput.position(0, 0);

  // setup canvas
  var cnv = createCanvas(400, 300);
  cnv.position(0, 0);
  // setup tracker
  ctracker = new clm.tracker();
  ctracker.init(pModel);
  ctracker.start(videoInput.elt);
  noStroke();
}

function draw() {
  clear();
  // get array of face marker positions [x, y] format
  var positions = ctracker.getCurrentPosition();

  for (var i = 0; i < positions.length; i++) {
    // set the color of the ellipse based on position on screen
    fill(map(positions[i][0], width * 0.33, width * 0.66, 0, 255), map(positions[i][1], height * 0.33, height * 0.66, 0, 255), 255);
    // draw ellipse at each position point
    ellipse(positions[i][0], positions[i][1], 8, 8);
  }
}

//// 5. clmtrackr scream
var ctracker;
var mouthSound;

function preload() {
  mouthSound = loadSound('scream.mp3');
}

function setup() {

  // setup camera capture
  var videoInput = createCapture(VIDEO);
  videoInput.size(400, 300);
  videoInput.position(0, 0);
  
  // setup canvas
  var cnv = createCanvas(400, 300);
  cnv.position(0, 0);

  // setup tracker
  ctracker = new clm.tracker();
  ctracker.init(pModel);
  ctracker.start(videoInput.elt);

  mouthSound.loop();
  mouthSound.setVolume(0);


}

function draw() {
  clear();

  // get array of face marker positions [x, y] format
  var positions = ctracker.getCurrentPosition();
  if(positions.length > 0) {
    var mouthH = positions[57][1] - positions[60][1];
    var faceH = positions[7][1] - positions[33][1];
    var mouthR = mouthH/faceH;

    console.log(mouthR);

    if (mouthR > 0.1) {
      mouthSound.setVolume(10);
    } else {
      mouthSound.setVolume(0);
    }

  }

}


//// 6. clmtrackr speech
var ctracker;

function setup() {

  // setup camera capture
  var videoInput = createCapture(VIDEO);
  videoInput.size(400, 300);
  videoInput.position(0, 0);
  
  // setup canvas
  var cnv = createCanvas(400, 300);
  cnv.position(0, 0);

  // setup tracker
  ctracker = new clm.tracker();
  ctracker.init(pModel);
  ctracker.start(videoInput.elt);

}

function draw() {

  // get array of face marker positions [x, y] format
  var positions = ctracker.getCurrentPosition();
  if(positions.length > 0) {
    var mouthH = positions[57][1] - positions[60][1];
    var leftEyeH = positions[26][1] - positions[24][1];
    var rightEyeH = positions[31][1] - positions[29][1];
    var faceH = positions[7][1] - positions[33][1];
    
    var mouthR = mouthH/faceH;
    var leftEyeR = leftEyeH/faceH;
    var rightEyeR = rightEyeH/faceH;

    var t = leftEyeR > 0.075 ? "Let's party!" : "I'm sleepy.";

    if (mouthR > 0.1) {
      var u = new SpeechSynthesisUtterance(t);
      speechSynthesis.speak(u);
    } else {
      speechSynthesis.cancel();
    }

  }
}


//// 7. clmtrackr emotion

var ctracker;
var emotionData;
var ec;

function setup() {

  // setup camera capture
  var videoInput = createCapture(VIDEO);
  videoInput.size(400, 300);
  videoInput.position(0, 0);
  
  // setup canvas
  var cnv = createCanvas(400, 300);
  cnv.position(0, 0);

  // setup tracker
  ctracker = new clm.tracker();
  ctracker.init(pModel);
  ctracker.start(videoInput.elt);

  
  ec = new emotionClassifier();
  ec.init(emotionModel);
  emotionData = ec.getBlank();  
  
  textSize(20);
}

function draw() {
  clear();
  var cp = ctracker.getCurrentParameters();
  var er = ec.meanPredict(cp);
  
  for (var i=0; i<er.length; i++) {
    text(er[i].emotion+' '+nfc(er[i].value, 2), 20, (i+1)*30);
  }
}