​

// Set variables

let capture;

let state;

let startTime;

let strings;

let ellapsedSeconds;

let button;

let returnButton;

let continueButton;

let goBackbutton;

let x1;

let y1;

let w1 = 15;

let h1 = 15;

let x2;

let y2;

let w2 = 15;

let h2 = 15;

let scene = 0;

let s;

let textY = 80;

​

​

//use scene (Create scene 0 and add the code) Add text and buttons

​

​

function setup() {

  createCanvas(420, 320);

  frameRate(30)

  //create camera capture and capture size

  capture = createCapture(VIDEO);

  capture.size(420, 320);

  capture.hide();

  //time  

  state = 0;

  startTime = millis()

  //create array with message

  strings = ["Full of energy", "Getting tired", "Go for a walk!"]

  //Text size and position/align

  textSize(32);

  textAlign(CENTER, CENTER);

​

  //Backstory & Disclosure buttons function and position

  returnButton = createButton('Return')

  returnButton.position(200, 280);

  returnButton.mousePressed(previousScene);

  continueButton = createButton ('Continue')

  continueButton.position(300, 280);

  continueButton.mousePressed(nextScene);

  //Camera buttons function and position

  button = createButton('Reset');

  button.position(300, 280);

  button.mousePressed(changeBG); 

  goBackbutton = createButton('Go Back')

  goBackbutton.position(200, 280);

  goBackbutton.mousePressed(previousScene);   

​

}

​

​

function draw() {

  push()

  translate(width, 0); //correct mirror - information from p5.js

  scale(-1, 1); //correct mirror - information from p5.js

  background(255); 

  // //creating pixels on capture image

  for (let i=0; i< width/w2; i+=3){

    for (let j=0; j<height/h2; j+=3){

      //let x = (i * cam.width + j) * 4;

       x2=w2*i;

       y2=h2*j;

       x1=w1*i;

       y1=h1*j;

       let offset=50;

      copy(capture,x1,y1,w1,h1,x2,y2,w2-offset,h2-offset);

    }

  }

​

  //creating filter effects on capture image 

  filter(INVERT);

  blendMode(OVERLAY)

  ellapsedSeconds = ((millis() - startTime) / 1000)

  let alpha = max(map(ellapsedSeconds, 0, 30, 255, 0), 0);//blue - alpha sequence from solid color to transparent in 30 seconds

  fill(0, 0, 255, alpha)

  rect(0, 0, width, height) //overlay

  pop()

  //console.log(alpha)

  //text color and text position on the canvas

  fill(50)

  text(strings[state], width / 2, height/1.3);

​

  //text loop - creating time for each state of the string through the 30 seconds while color blue goes from solid to transparent

  if (ellapsedSeconds < 14) {

    state = 0

  } else if (ellapsedSeconds > 14 && ellapsedSeconds < 28) {

    state = 1

  } else {

    state = 2

  }

  //show and hide buttons in scenes

 if (scene == 0 || scene ==1) {

    continueButton.show();

  } else {

    continueButton.hide();

  }

​

  if (scene ==1) {

    returnButton.show();

  } else {

    returnButton.hide();

  }

   if (scene ==2) {

    goBackbutton.show();

    button.show();

  } else {

    goBackbutton.hide();

    button.hide();

  }

  console.log(scene)

  switch(scene) {

        case 0:

            // background story

            backStory()

            console.log("backstory")

            break;

        case 1:

            // Continue button

            Disclosure()

            console.log("Disclosure")

            break;

        case 2:

            // Energy camera

            changeBG ()

            console.log("energyCamera")

            break;

    }

​

}

​

//Change background based on time from 0 to 30 seconds

  function changeBG() {

   startTime = millis()

}

​

function backStory() {

    push()

    background('red');

    let s = `Welcome to Energy camera, The first camera that measures your energy levels, and tells you when is time to stop and take a break.`

​

    fill(255)

    textSize(14);

    textLeading(24);

    text(s, 65, 10, 300, height/2)

    pop()

}

​

function Disclosure() {

    push()

    background('black');

    let s = `For the purpose of this expirience, the program will use your camera. If you allow us to access your camera, please click on "Continue" If you don't want to give us access to your camera, please click on "return"`

​

    fill(255)

    textSize(14);

    textLeading(24);

    text(s, 65, 10, 300, height/2)

    pop()

}

​

function nextScene () {

  scene++

}

function previousScene (){

  scene --

}

​

​

​

​

​