​

Fear of Falling

Brett Peterson

​

Adapted from calebfoss videorecorder webcam example

p5.video recorder

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

​

*/

​

//USER VARIABLES

​

// Are phidgets connected?

let isUsingPhidgets = false;

​

// How many seconds to countdown before recording?

let recordingCountdownDuration = 5000;

​

// How long should the recording be?

let recordingDuration = 5000;

​

// How slow should the playback be?

let slomoSpeed = 0.5;

​

// How many times should the recording play?

let playbackTotalCount = 4;

​

​

​

// Don't touch :)

let videoRecorder;

let capture;

let recordButton, playButton, stopButton;

let videoPlayback;

let recordingState = false;

let recordingStartMillis;

​

let yPos;

let increment = 20;

let limit = 100;

let appState = 0;

​

let recordingCountdownStart;

​

let conn;

let ch;

​

async function setup() {

  createCanvas(windowWidth, windowHeight);

  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;

​

  //Phidgets

  if (isUsingPhidgets) {

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

    ch = new phidget22.DigitalOutput();

​

    ch.setIsHubPortDevice(true);

    ch.setHubPort(0);

​

    try {

      await conn.connect();

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

      ch.setState(false);

    } catch (err) {

      console.error("Error", err);

    }

  }

}

​

function draw() {

  background(0);

  // Check if recording or playing back

  if (appState < 3) {

    //  Otherwise display webcam

    image(capture, width/2-640/2, height/2-480/2, 640, 480);

    //  If recording

    if (videoRecorder.recording) {

      //  Display a red circle indicator

      noStroke();

      fill(200, 40, 20);

      circle(width - 50, 50, 50);

    }

  } else {

    if (

      videoPlayback &&

      videoPlayback.time() > 0 &&

      videoPlayback.time() < 4.9

    ) {

      //  Display video playback

      videoPlayback.speed(slomoSpeed);

      image(videoPlayback, width/2-640/2, height/2-480/2, 640, 480);

      print(videoPlayback.time());

    } else if (videoPlayback && videoPlayback.time() >= 4.85) {

      videoPlayback.stop();

      videoPlayback.play();

    }

  }

​

  if (recordingState) {

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

      videoRecorder.stop();

      recordingState = false;

      appState = 3;

      setTimeout(restartLoop, (recordingDuration * playbackTotalCount) / 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 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();

​

  if (isUsingPhidgets) {

    ch.setState(true);

  }

​

  appState = 2;

  //  Start recording

  videoRecorder.start();

  recordingState = true;

  recordingStartMillis = millis();

}

​

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 restartLoop() {

  appState = 0;

}

​

function keyPressed() {

  if (key === "s") {

    appState = 1;

    setTimeout(startRecording, recordingCountdownDuration);

    recordingCountdownStart = millis();

  } 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);

  }

}

​