Zhiyue Chen 

Description:

Revise assignment #6 by adding a consentful interface.

​

Design Process:

Followed the F.R.I.E.S model from Consentful Tech Zine, to revise this experimental camera.I want to create an interface that is clear and helpful to disclose information to users, and my aim is to communicate the consent in a way that is safe, thoughtful, and full of care. Down below

is my flowchart to outlines the architecture for my revised experimental camera.

​

Reflection:

For my revised camera's consentful interface, I tried to follow F.R.I.E.S model. I think I followed few of them. For example, I pay attention to all the potential options that I could gave to the users who are using this camera. (Freely given) Then, I started to be specfic in the descriptions so that people could understand the meaning behind this camera. (specific) After that, I looked into how can the content to be revesible and flexiable so that users have the interests as well as the freedom of choosing how to play it.

*/

let video;

let vScale = 16;

let particles = [];

let slider;

//let gif_loadImg, gif_createImg;

let bg, bg1;

let sceneNum = 0;

let button;

let next;

let back;

let changedmind;

let trycamera;

let num = 500;

let range = 6;

let ax = [[20,0],[150,30],[230.50]];

let ay = [0,30,50];

let intro = ["The project combines two filter, and it is a mosaic camera that allow us to \n capture \“mosaic in you\”. I would like all of us to think what kind of mosaic \n create for us today and over the course of our lives. Will it be a beautiful \n work of art or faces or figures or something we will be ashamed for others to see?"] //\n is a new line

​

function preload () {

  // gif_loadImg = loadImage("star.gif");

  // gif_createImg = createImg("star.gif", "");

  bg1 = loadImage("picture.png");

  bg = loadImage("picture1.png");

}

​

function setup() {

  createCanvas(640, 480);

  pixelDensity(1);

  slider = createSlider(0, 255, 150);

  video = createCapture(VIDEO);

  video.hide();

  video.size(width / vScale, height / vScale);

  for (var i = 0; i < 100; i++) {

    particles[i] = new Particle(random(width), random(height));

  }

  frameRate(40);

  background(51);

  tracker = new clm.tracker();

  tracker.init();

  tracker.start(video.elt);

  textFont("lores-12");

  //scene 0 button

  button = createButton("Click to go!");

  button.position(290, 400);

  button.mousePressed(forward);

  button.size(80,50);

  button.style("font-family", "lores-12");

  button.style("background-color", color(150,40,60));

  button.style("color", color(255,255,255));

  button.hide();

  //scene1button

  next = createButton("next");

  next.position(80,300);

  next.style("font-family", "lores-12");

  next.mousePressed(forward1);

  next.hide();

  back = createButton("back");

  back.position(520,300);

  back.style("font-family", "lores-12");

  back.mousePressed(backward);

  back.hide();

  filter = createButton("show me the filter instead");

  filter.position(400,440);

  filter.style("font-family", "lores-12");

  filter.mousePressed(filterforward);

  filter.hide();

  checkbox = createCheckbox("I am willing to turn on my camera to try", false);

  checkbox.style("color", color(255,186,8));

  checkbox.style("font-family", "lores-12");

  checkbox.changed(CheckedEvent);

  checkbox.position(80,328);

  checkbox.hide();

​

  changemind = createButton("Changed my mind");

  changemind.style("font-family", "lores-12");

  changemind.position(260,490);

  changemind.mousePressed(backward);

  changemind.hide();

  trycamera = createButton("I want to try");

  trycamera.position(260,490);

  trycamera.style("font-family", "lores-12");

  trycamera.mousePressed(returnscene);

  trycamera.hide();

  surveycheck = createButton("Quick survey");

  surveycheck.style("font-family", "lores-12");

  surveycheck.position(380,490);

  surveycheck.mousePressed(returnscene1);

  surveycheck.hide();

  checkbox1 = createCheckbox("Camera", false);

  checkbox1.style("color", color(255,186,8));

  checkbox1.style("font-family", "lores-12");

  checkbox1.changed(CheckedEvent);

  checkbox1.position(100,300);

  checkbox1.hide();

  checkbox2 = createCheckbox("Star filter", false);

  checkbox2.style("color", color(255,186,8));

  checkbox2.style("font-family", "lores-12");

  checkbox2.changed(CheckedEvent);

  checkbox2.position(300,300);

  checkbox2.hide();

  checkbox3 = createCheckbox("None", false);

  checkbox3.style("color", color(255,186,8));

  checkbox3.style("font-family", "lores-12");

  checkbox3.changed(CheckedEvent);

  checkbox3.position(480,300);

  checkbox3.hide();

  returnback = createButton("Restart");

  returnback.style("font-family", "lores-12");

  returnback.position(300,440);

  returnback.mousePressed(returnscene2);

  returnback.hide();

}

​

function draw() {

    switch (sceneNum) {

    case 0:

      scene0();

      break; // stop & exit

    case 1:

      scene1();

      break;

    case 2:

      scene2();

      break;

    case 3:

      scene3();

      break;

    case 4:

      scene4();

      break;

    case 5:

      scene5();

      break;

  }

  if (sceneNum == 0){

    button.show();

  } else {

    button.hide();

  }

  if (sceneNum == 1 || sceneNum ==2){

    next.show();

    back.show();

    checkbox.show();

    filter.show();

  } else {

    next.hide();

    back.hide();

    checkbox.hide();

    filter.hide();

  }

  if (sceneNum ==3 || sceneNum ==4){

    surveycheck.show(); 

  } else {

    surveycheck.hide(); 

  }

  if (sceneNum == 3){

    changemind.show();

  } else {

    changemind.hide(); 

  }

  if (sceneNum == 4){

    trycamera.show();

  } else {

    trycamera.hide();

  }

  if (sceneNum ==5){

    checkbox1.show();

    checkbox2.show();

    checkbox3.show();

    returnback.show();

  } else {

    checkbox1.hide();

    checkbox2.hide();

    checkbox3.hide();

    returnback.hide();

  }

}

function scene0(){

  // gif_createImg.position(170,70);

  // gif_createImg.size(width/2,height-80);

  image(bg,-5,-5,800,800);

  push();

  fill(255);

  textSize(34);

  text("Experimental Camera", 180, 200);

  pop();

  push();

  textSize(14);

  textAlign(CENTER);

  fill(255);

  text(intro, 330,240);

  pop();

} 

​

function scene1(){

  image(bg,-5,-5,800,800);

  push();

  fill(255,190,80);

  textSize(20);

  text("Here is to inform you that your camera will be turned on", 100, height-250);

  push();

  textSize(16);

  text("I don't want to turn camera on", 400,420);

  pop();

}

function scene2(){

  image(bg,-5,-5,800,800);

  push();

  fill(255,190,80);

  textSize(20);

  text("Here is to inform you that your camera will be turned on", 100, height-250);

  push();

  textSize(16);

  text("I don't want to turn camera on", 400,420);

  text("If you like to use the camera, check the box", 100,100);

  pop();

}

​

function scene3() {

  video.loadPixels();

  for (var i = 0; i < particles.length; i++) {

    particles[i].update();

    particles[i].show();

  }

  push();

  translate(width, 0); //correct mirror

  scale(-1,1);      

  features = tracker.getCurrentPosition();

  if (features.length > 0) {

    let leftEye = features[27];

    let leftEyeX = leftEye[0];

    let leftEyeY = leftEye[1];

    fill(255, 255, 255);

    stroke(0);

    ellipse(leftEyeX, leftEyeY, 10, 10);  

    let rightEyeX = features[32][0];

    let rightEyeY = features[32][1];

    ellipse(rightEyeX, rightEyeY, 10, 10); 

  }

  pop();

  mosaic();

  push();

  fill(255);

  textSize(12);

  text("use slider on the left to see different effect.There is also an eye tracker on the bottom right",10,470);

​

}

function scene4(){

  background(3,7,30);

  push();

  textAlign(CENTER);

  text("A star mosaic filter which could be applied and refreshed when you \n move the mouse to make it more playful!", 330,height/2);

  pop();

  push();

  for (let x = 5; x <= mouseX; x += 20) {

    for (let y = 5; y <= width; y += 20) {

      stroke(random(200), random(200), random(255), random(250));

      noFill();

      star(x, y, 2, 4, 5);

    }

  }

  pop();

}

​

function scene5(){

  background(3,7,30);

  image(bg1,0,0,650,650);

  // gif_createImg.position(170,70);

  // gif_createImg.size(width/2,height-80);

  push();

  fill(255);

  textSize(34);

  text("Suvery", 280, 180);

  pop();

  push();

  textSize(16);

  textAlign(CENTER);

  fill(255);

  text("Do you like the Camera or the filter itself or none?", 330,240);

  text("Thank you for taking time!",330, 280);

  pop();

  // text("Camera", 100,200);

  // text("Star filter", 100,330);

​

​

}

function forward(){

  sceneNum++;

}

function filterforward(){

  sceneNum =4;

}

function backward(){

  sceneNum--;

}

function forward1(){

  if (checkbox.checked() || checkbox1.checked() || checkbox2.checked() || checkbox3.checked()){

    sceneNum = 3;

  } else {

    console.log ("please check the box");

    sceneNum = 2;

  }

}

function returnscene(){

  sceneNum = 1;

}

function returnscene1(){

  sceneNum =5;

}

function returnscene2(){

  sceneNum =0;

}

​

function CheckedEvent(){

 if (this.checked()){

   console.log("checked");

 } else {

   console.log("uncheck")

 }

}

​

​

​

​