// inspired by Barbara Kruger's ouevre

let vid;

let vidScale = 4;

let slider;

let median;

let bgCol = 0;

let ptCol = 255;

let myFont;

let bodyFont;

let defaultText;

let button1;

let input1;

let input2;

let input3;

let photo;

let yes;

let no;

let tryAgain;

let scene = 0;

​

// loading futura: the font that Barbara kruger mostly used in her work

function preload() {

  myFont = loadFont(

    "911Fonts.com_FuturaBoldItalic__-_911fonts.com_fonts_dgS7.ttf"

  );

​

  myFont2 = "911Fonts.com_FuturaBookItalic__-_911fonts.com_fonts_o625.ttf";

}

​

function setup() {

  photo = createCanvas(640, 480);

  pixelDensity(1);

  rectMode(CENTER);

​

//   adding buttons for the interface

  yes = new Buttons(width / 2 - 40, height / 2 + 160, 50, 25, "YES");

  no = new Buttons(width / 2 + 40, height / 2 + 160, 50, 25, "NO");

  tryAgain = new Buttons(width / 2, height / 2 + 84, 135, 25, "TRY CAMERA");

​

  vid = createCapture(VIDEO);

  vid.size(width / vidScale, height / vidScale);

  vid.hide();

​

  // giving instructions to the user

  let command = createElement(

    "h4",

    "You can remove or add your own text below"

  );

  command.position(0, height - 10);

//   giving default inputs to the user based on existing kruger work

//   users are free to change the text/tweak in any way or remove altogether

  // createP();

  input1 = createInput("Your body");

  input1.position(0, height + 35);

  input1.size(width / 2, 15);

  createP();

  input2 = createInput("is a");

  input2.position(0, height + 65);

  input2.size(width / 2, 15);

  createP();

  input3 = createInput("battleground");

  input3.position(0, height + 95);

  input3.size(width / 2, 15);

​

  // button1 = createButton("Submit");

  // button1.position(0, height + 125);

}

​

function draw() {

  switch (scene) {

    case 0:

      // calling yes and no buttons

      background(255);

      yes.body();

      yes.over()

      no.body();

      no.over()

//       introduction text

      textAlign(CENTER);

      textFont(myFont);

      textSize(18);

      fill(80);

      text(

        "Inspired by Barbara Kruger's works, this camera",

        width / 2,

        height / 2 - 80

      );

      text(

        "lets you layer text and image. You are free to",

        width / 2,

        height / 2 - 55

      );

      text("to choose your own subject and backgrounds.", width / 2, height / 2 -30);

      text(

        "Spread positivity with uplifting messages!",

        width / 2,

        height / 2 + 30

      );

//       giving instructions as to how to save the image to their system

      text(

        "Press your ENTER key to capture and download your image.",

        width / 2,

        height / 2 + 55

      );

   stroke(255,0,0)

line(width/2-120,height/2+85,width/2+120,height/2+85)

//       checking again with users if they are really okay

      noStroke()

      text(

        "Are you comfortable sharing your camera?",

        width / 2,

        height / 2 + 130

      );

​

​

      break;

​

    case 1:

      background(bgCol);

​

      vid.loadPixels();

​

      // loadPixels();

​

//       pixel array

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

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

          let index = (vid.width - x + 1 + y * vid.width) * 4;

          let red = vid.pixels[index];

          let green = vid.pixels[index + 1];

          let blue = vid.pixels[index + 2];

​

//           averaging values extracted from pixel array to get brightness of each pixel on grey scale

          let brightness = (red + green + blue) / 3;

          let invert = map(brightness, 0, 255, 255, 0);

​

          if (x < vid.width / 2) {

            fill(brightness);

          } else {

            fill(invert);

          }

​

//           size of pixel for camera is based on brightness value of each corresponding pixel 

          radius = map(brightness, 0, 255, 0, vidScale);

​

          noStroke();

          circle(x * vidScale, y * vidScale, vidScale);

        }

      }

      vid.updatePixels();

​

      //   adding red border

      stroke(255, 0, 0);

      strokeWeight(30);

      noFill();

      rect(width / 2, height / 2, width, height);

​

      // if (button1.mousePressed) {

        //   adding red highlight behind text

        noStroke();

        fill(255, 0, 0);

//         by checking textWidth, it adds highlight only behind the text - it calculates in real time as the text is being changed

        if (textWidth(input1.value()) > 0) {

          rect(width / 2, 50, 10 + textWidth(input1.value()), 36);

          // console.log(textWidth(input1.value()));

        }

​

        if (textWidth(input2.value()) > 0) {

          rect(width / 2, height / 2, 10 + textWidth(input2.value()), 36);

        }

        if (textWidth(input3.value()) > 0) {

          rect(width / 2, height - 50, 10 + textWidth(input3.value()), 36);

        }

​

        //   adding white text

        textAlign(CENTER);

        textSize(36);

        noStroke();

        fill(255);

        textFont(myFont);

        text(input1.value(), width / 2, 60);

        text(input2.value(), width / 2, height / 2 + 10);

        text(input3.value(), width / 2, height - 40);

        // console.log(input1)

      // }

      break;

​

//       in case the player is not comfortable, letting them know that this is safe and their picture cannot be misused

    case 2:

      background(255);

      textAlign(CENTER);

      textSize(18);

      fill(80);

      text("This is a safe space.", width / 2, height / 2 - 60);

      text(

        "Any images taken will be stored on your computer.",

        width / 2,

        height / 2 - 20

      );

      text("Nobody else can access them.", width / 2, height / 2);

      text(

        "If you want to try the camera now, click below.",

        width / 2,

        height / 2 + 60

      );

​

//       not forcing the users, they can still opt not to show their face - will not even open the camera until they agree to try it out

      text(

        "If you are still unsure, you can view my other projects :)",

        width / 2,

        height / 2 + 40

      );

      tryAgain.body();

      tryAgain.over();

​

      break;

  }

}

​

function keyPressed() {

  if (keyCode === ENTER) {

    saveCanvas(photo, "myCanvas.jpg");

  }

}

​

// associating boolean values for the yes and no buttons

function mousePressed() {

  if (yes.hoverBool || tryAgain.hoverBool) {

    scene = 1;

    yes.hoverBool = false;

  }

  if (no.hoverBool) {

    scene = 2;

    no.hoverBool = false;

  }

}

​

// declaring all the button fucntions

class Buttons {

  constructor(x, y, w, h, option) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.option = option;

    this.col = color(80);

    this.hoverBool = false;

  }

​

  body() {

    noStroke();

    fill(this.col);

    rect(this.x, this.y, this.w, this.h, 10);

    push()

    fill(255);

    textFont(myFont);

    textSize(18);

    text(this.option, this.x, this.y + 6);

    pop()

  }

​

//   hover() {

//     if (

//       mouseX > this.x - this.w / 2 &&

//       mouseX < this.x + this.w / 2 &&

//       mouseY > this.y - this.h / 2 &&

//       mouseY < this.x + this.h / 2

//     ) {

//       this.col = color('green');

//       this.hoverBool = true;

//           // console.log('hover is working')

​

//     } else {

//       this.col = color(80);

//       this.hoverBool = false;

//     }

//   }

//   if the mouse is over a button

  over() {

    if (

      mouseX > this.x - this.w / 2 &&

      mouseX < this.x + this.w / 2 &&

      mouseY < this.y + this.h / 2 &&

      mouseY > this.y - this.h / 2

    ) {

      this.col = color(255,0,0);

      this.hoverBool = true;

    } else {

      this.col = color(180);

      this.hoverBool = false;

    }

  }

}

​