​

Brett Peterson

​

Adapted from calebfoss videorecorder webcam example

p5.video recorder

https://github.com/calebfoss/p5.videorecorder

​

*/

​

let isUsingPhidgets = true;

let testState = false;

​

//  Declare variable to store VideoRecorder object

let videoRecorder;

let capture;

let recordButton, playButton, stopButton;

let videoPlayback;

let recordingState = false;

let recordingStartMillis;

let durationMillis = 5000;

let yPos;

let increment = 20;

let limit = 100;

let appState = 0;

let slomoSpeed = 0.5;

​

let lowThresh = 1500;

let highThresh = 4100;

let recordingCountdownStart;

let recordingCountdownDuration = 5000;

​

let suspenseAudio;

let thunderAudio;

​

let conn;

let ch;

​

let startChannel;

let upChannel;

let downChannel;

​

async function setup() {

  createCanvas(640, 480);

  fill(0);

  rect(0, 0, width, height);

  yPos = height / 2 - 320 / 2;

​

  //  Create a webcam capture with video and audio

  //  When the stream is ready, setup the buttons

  capture = createCapture({ video: true, audio: true }, setupButtons);

  //  Mute webcam audio to prevent feedback

  capture.volume(0);

  //  Hide capture element (because it will be displayed on canvas instead)

  capture.hide();

​

  //  Create a new VideoRecorder instance

  //    with webcam capture as input

  videoRecorder = new p5.VideoRecorder(capture);

  //  Set callback for when recording is completed

  //    and video file has been created

  videoRecorder.onFileReady = showPlayback;

​

  thunderAudio = loadSound("Thunder_trimmed.mp3");

  suspenseAudio = loadSound("suspenseful_violin_trimmed.mp3");

​

  //Phidgets

  if (isUsingPhidgets) {

    conn = new phidget22.Connection(8989, "localhost");

    ch = new phidget22.DigitalOutput();

    startChannel = new phidget22.DigitalOutput();

    upChannel = new phidget22.DigitalOutput();

    downChannel = new phidget22.DigitalOutput();

​

    ch.setIsHubPortDevice(true);

    ch.setHubPort(0);

​

    startChannel.setIsHubPortDevice(true);

    startChannel.setHubPort(3);

​

    downChannel.setIsHubPortDevice(true);

    downChannel.setHubPort(4);

​

    upChannel.setIsHubPortDevice(true);

    upChannel.setHubPort(5);

​

    //Callback to start

    startChannel.onStateChange = function (state) {

      console.log("Start button State: " + state);

​

      appState = 1;

      setTimeout(startRecording, 5000);

      recordingCountdownStart = millis();

​

      suspenseAudio.play();

      setTimeout(playSound, 3280);

      setTimeout(flipLight, 6300);

    };

​

    downChannel.onStateChange = function (state) {

      console.log("down button State: " + state);

​

      yPos += increment;

      if (abs(yPos) >= limit) {

        yPos = limit;

      }

      print(yPos);

    };

​

    upChannel.onStateChange = function (state) {

      console.log("up button State: " + state);

​

      yPos -= increment;

      if (abs(yPos) >= limit) {

        yPos = -limit;

      }

      print(yPos);

    };

​

    try {

      await conn.connect();

      await ch.open(phidget22.Phidget.DEFAULT_TIMEOUT);

      ch.setState(false);

​

      await startChannel.open(phidget22.Phidget.DEFAULT_TIMEOUT);

      await downChannel.open(phidget22.Phidget.DEFAULT_TIMEOUT);

      await upChannel.open(phidget22.Phidget.DEFAULT_TIMEOUT);

      console.log("set up");

    } catch (err) {

      console.error("Error", err);

    }

  }

}

​

function draw() {

  if (testState){

    console.log(startChannel.state);

  }

  //  If playing back the recording

  if (videoPlayback && videoPlayback.time() > 0 && videoPlayback.time() < 4.9) {

    //  Display video playback

    videoPlayback.speed(slomoSpeed);

    image(videoPlayback, 0, yPos, 640, 480);

    print(videoPlayback.time());

  } else {

    //  Otherwise display webcam

    image(capture, 0, yPos, 640, 480);

    //  If recording

    if (videoRecorder.recording) {

      //  Display a red circle indicator

      noStroke();

      fill(200, 40, 20);

      circle(width - 50, 50, 50);

    }

  }

​

  if (recordingState) {

    if (millis() >= recordingStartMillis + durationMillis) {

      videoRecorder.stop();

      recordingState = false;

      appState = 3;

      setTimeout(restartLoop, 5000 / slomoSpeed);

​

      if (isUsingPhidgets) {

        ch.setState(false);

      }

    }

  }

​

  // Setup masks

  noStroke();

  fill(0);

  rect(0, 0, width, 100);

  rect(0, height - 100, width, 100);

  rect(0, 0, 160, height);

  rect(480, 0, 160, height);

​

  // On-screen Instructions

  textAlign(CENTER);

  textSize(20);

  fill(38, 143, 209);

​

  if (appState == 0) {

    text("Press START to Begin", width / 2, 50);

  } else if (appState == 1) {

    text(

      "Center your face in the box below using the up and down buttons",

      width / 2,

      50

    );

​

    let roundedSeconds = round(

      (recordingCountdownDuration - (millis() - recordingCountdownStart)) / 1000

    );

    text("Recording will start in " + roundedSeconds, width / 2, height - 50);

  } else if (appState == 2) {

    text("Camera is recording", width / 2, 50);

  } else if (appState == 3) {

    text("Watch your startle response!", width / 2, 50);

  }

}

​

//  Create buttons and hide all except record

function setupButtons() {

  // playButton = createButton("Play");

  // playButton.hide();

  // recordButton = createButton("Record");

  // recordButton.mousePressed(startRecording);

  // stopButton = createButton("Stop");

  // stopButton.hide();

}

​

function startRecording() {

  //  Set buttons to manage recording

  //    and show hidden buttons

  // stopButton.mousePressed(() => videoRecorder.stop());

  // stopButton.show();

​

  appState = 2;

  //  Start recording

  videoRecorder.start();

  recordingState = true;

  recordingStartMillis = millis();

​

  // let timeTillPlay = random(lowThresh, highThresh);

  // setTimeout(playSound, timeTillPlay);

}

​

function showPlayback() {

  //  Create video element to display recording

  videoPlayback = createVideo(videoRecorder.url);

  //  Hide video element (because it will be displayed on canvas instead)

  videoPlayback.hide();

​

  //   //  Set buttons to manage playback

  //   playButton.mousePressed(() => videoPlayback.play());

  //   playButton.show();

​

  //   stopButton.mousePressed(() => videoPlayback.stop());

​

  videoPlayback.play();

}

​

function playSound() {

  thunderAudio.play();

}

​

function flipLight() {

  if (isUsingPhidgets) {

    ch.setState(true);

  }

  console.log("BOOM");

}

​

function restartLoop() {

  appState = 0;

}

​

function keyPressed() {

  if (key === "s") {

    appState = 1;

    setTimeout(startRecording, 5000);

    recordingCountdownStart = millis();

​

    suspenseAudio.play();

    setTimeout(playSound, 3280);

    setTimeout(flipLight, 6300);

  } else if (keyCode === UP_ARROW) {

    yPos -= increment;

    if (abs(yPos) >= limit) {

      yPos = -limit;

    }

    print(yPos);

  } else if (keyCode === DOWN_ARROW) {

    yPos += increment;

    if (abs(yPos) >= limit) {

      yPos = limit;

    }

    print(yPos);

  } else if(key === 't'){

    testState = true;

  }

}

​

// function mousePressed() {

//   if (mouseX > 0 && mouseX < windowWidth && mouseY > 0 && mouseY < windowHeight) {

//     let fs = fullscreen();

//     fullscreen(!fs);

//   }

// }

​