https://www.youtube.com/watch?v=nMUMZ5YRxHI

https://www.youtube.com/watch?v=rNqaw8LT2ZU&t=544s

*/ 

var video;

var videoScale = 10; 

var circleScale=10;

let locationArray=[0,0,390,0];

let sceneNum=0;

let bgcolor=[165,255,239]

​

function preload(){

  sample_img=loadImage('Image/image1.png');

  consent_img=loadImage('Image/Frame 1.png');

  consent_img2=loadImage('Image/Frame 2.png');

  bye_img=loadImage('Image/Frame 3.png');

  start_img=loadImage('Image/Frame 4.png');

}

​

​

function setup() {

  createCanvas(600, 400);

  pixelDensity(1); //regular density display

  video= createCapture(VIDEO);

  // video to be smaller, canvas to be bigger 

  video.size(400/videoScale,400/videoScale);

  video.hide();

  // create yes button

  let greenCol = color(110,231,110,50);

  yesButton=createButton('Yes');

  yesButton.position(250,300);

  yesButton.style('background-color',greenCol);

  yesButton.mousePressed(changeScene);

  yesButton.hide();

  //create go button

  goButton=createButton('Yes');

  goButton.position(430,300);

  goButton.style('background-color',greenCol);

  goButton.mousePressed(changeScene);

  goButton.hide();

​

  // create no button

  let redCol = color(232,84,84);

  noButton=createButton('No');

  noButton.position(50,300);

  noButton.style('background-color',redCol);

  noButton.mousePressed(exitScene);

  noButton.hide();

  //create home button

  homeButton=createButton('Home');

  let yellowCol = color(254,241,157);

  homeButton.style('background-color',yellowCol);

  homeButton.mousePressed(reStart);

  homeButton.position(150,290);

  homeButton.hide();

  //create change consent button

  chgConsButton= createButton('Edit Consent');

  let darkGreen=color(171,216,185);

  chgConsButton.style('background-color',darkGreen);

  chgConsButton.position(420,350);

  chgConsButton.mousePressed(changeScene);

  chgConsButton.hide();

  //slider

  slider = createSlider(10, 20, 10);

  slider.position(420,100);

  slider.style('width', '150px');

  slider.hide();

}

​

function draw() {

  background(51);

  switch (sceneNum){

  // first page 

    case 0:

      startPage();

      goButton.show();

      break;

  // camera consent

    case 1:

      goButton.hide();

      cameraForm();

      yesButton.show();

      noButton.show();

      break;

  //consent form

    case 2: 

      consentForm();

      yesButton.show();

      noButton.show();

      break;

  //camerapage

    case 3:

      drawCamera();

      yesButton.hide();

      noButton.hide();

      chgConsButton.show();

      break;

    case 4:

      slider.hide();

      changePermission();

      chgConsButton.hide();

      yesButton.show();

      noButton.show();

      break;

    case 5:

      exitScreen();

      chgConsButton.hide();

      homeButton.show();

      yesButton.hide();

      noButton.hide();

  }

​

}

​

function startPage(){

  push()

  image(start_img,0,0,600,400);

  fill(0);

  textSize(16);

  text('Ready to start?',420,280);

  pop();

​

}

​

function cameraForm(){

  background(bgcolor);

  push() 

  fill(155,156,156);

  noStroke();

  rect(25,50,350,300);

  image(sample_img,390,50,200,200);

  fill(0);

  textSize(16);

  text('Sample Image',440,260,200)

  pop()

  push();

  textSize(16)

  fill(255);

  text('This camera application wants to access your camera.',60,70,300);

  text('By allowing access, the app is allowed to caputre and record photos through your front camera. The type of image you will produce can be seen on the left.',60,130,300);

  text('Do you want to allow camera access?',60,240,300);

  pop();

}

​

function consentForm(){

​

  background(bgcolor);

  image(consent_img,375,0,200,400);

​

  push() 

  fill(155,156,156);

  noStroke();

  rect(25,50,350,300);

  pop()

  push();

  fill(255);

  textSize(15);

  text('CONSENT FORM',140,70,400);

  text('READ AND KNOW YOUR RIGHTS',85,90,400);

  textSize(12);

  text('This application will not collect any of your images or metadata after your close the app. Meta data is any data related to you - location, time accessed, device info, etc.',60,130,300);

  text('You can revoke your consent any time from the camera page later',60,200,300);

  text('Do you agree?',160,250,300);

  pop();

}

​

function drawCamera(){

  slider.show();

  let val= slider.value();

  let circleScale=val;

  console.log(videoScale);

​

  video.loadPixels();

  //load pixels for new image I'm creating

  loadPixels();

  // for loop to hit every value of x and y in window

  // because need to look at video height and width, add video. infront of height and width (since video is now super small)

  for (var y =0; y < video.height; y++){

    for (var x=0; x<video.width; x++){

      // equation to mirror camera

      var index = (video.width-x+1+(y*video.width))*4;

      // find red green blue value to manipulate them later

      var r = video.pixels[index+0];// red value from video

      var g= video.pixels[index+1];

      var b = video.pixels[index+2];

      //manual way to calculate brightness value, adjusting value to videoscale

      var bright = (r+g+b)/3;  

      var w = map(bright,0,255,0,circleScale);

      noStroke();

      // x and y * videoscale to make image as big as canvas size

      if (x%2===0){

        fill(bright);

        ellipse(x*videoScale,y*videoScale,w, w);

      } else {

        fill(random(255),random(255),random(255));

        ellipse(x*videoScale,y*videoScale,w, w);

      }

​

    }

  }

  picData();

  consentSide();

}

​

function consentSide(){

​

  fill(bgcolor);

  rect(400,0,200,400);

​

  push()

  fill(255);

  rect(415,260,170,80);

  fill(0);

  textSize(16);

  text('Current Consent',440,270,200);

  fill(18,146,58);

  textSize(12);

  text('Consent for camera app to capture image and video',430,300,180);

  fill(0);

  textSize(16);

  text('Change filter size',420,80);

  pop()

}

​

function picData(){

  let dateTime= day();

  let monthTime= month();

  let yearTime = year();

  fill(255);

  rect(135,25,140,20);

  fill(50);

  text('Recorded on '+monthTime+'/'+dateTime+'/'+yearTime,140,40);

  //black border

  fill(0);

  rect(locationArray[0],0,10,400);

  rect(locationArray[1],0,400,10);

  rect(locationArray[2],0,10,400);

  rect(locationArray[3],390,400,10);

}

​

function changePermission(){

  background(bgcolor);

  image(consent_img2,390,0,200,400);

  push() ;

  fill(155,156,156);

  noStroke();

  rect(25,50,350,300);

  pop();

  push();

  fill(255);

  textSize(15);

  text('CONSENT FORM',140,70,400);

  text('READ AND KNOW YOUR RIGHTS',85,90,400);

  textSize(12);

  text('This application will not collect any of your images or metadata after your close the app. Meta data is any data related to you - location, time accessed, device info, etc.',60,130,300);

  text('Currently you agree to this statement. Click NO to change consent and YES to continue using app',60,200,300);

  text('Changing your permission will disable you from the app',60,250,300);

  pop();

}

​

function exitScreen(){

  background(bgcolor);

  image(bye_img,390,0,200,400);

  push() ;

  fill(155,156,156);

  noStroke();

  rect(25,50,350,300);

  pop();

  push()

  fill(255);

  textSize(20);

  text('We respect your right and privacy!',50,130,400);

  text('See you next time',120,190,400);

  pop();

}

​

function changeScene(){

  sceneNum = sceneNum+1;

  if (sceneNum >4){

    sceneNum = 3;

  }

}

​

​

function exitScene(){

  sceneNum = 5

}

​

function reStart(){

  sceneNum = 0;

  homeButton.hide();

}