​

// Set variables

let capture;

let state;

let startTime;

let strings;

let ellapsedSeconds;

let button;

let x1;

let y1;

let w1 = 15;

let h1 = 15;

let x2;

let y2;

let w2 = 15;

let h2 = 15;

​

​

function setup() {

  createCanvas(320, 240);

  //create camera capture and capture size

  capture = createCapture(VIDEO);

  capture.size(320, 240);

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

  //button function and position

  button = createButton('reset');

  button.position(260, 210);

  button.mousePressed(changeBG);

​

}

​

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++){

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

       x2=w2*i;

       y2=h2*j;

       x1=w1*i;

       y1=h1*j;

       let offset=40;

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

    }

  }

​

  //creating filter effects on capture image 

  filter(INVERT);

  blendMode(OVERLAY)

  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.2);

​

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

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

  if (ellapsedSeconds < 14) {

    state = 0

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

    state = 1

  } else {

    state = 2

  }

​

}

​

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

  function changeBG() {

   startTime = millis()

}