//Wk7 clmtrackr.js from class by abolor

// https://www.youtube.com/watch?v=kCHpFe4T7_A&ab_channel=JeffThompson

//xin Pointillism https://www.youtube.com/watch?v=aza-3oZjY4g&list=PLT233rQkMw76VnyIOIL--jMbd1NsPEkgB&index=2&ab_channel=xinxin

​

​

​

// F.R.I.E.S zoom cam stream

​

​

let webcam = null;

let tracker = null;

let features = null;

let capture;

let cg;

let slider;

let gtR, gtM, gtB;

let screenNum = 0;

let BG;

let onbutton, offbutton;

​

function preload() {

  BG = loadImage("4Seasons.jpg")

  TestImg1 = loadImage("1a.jpg")

  TestImg2 = loadImage("1b.jpg")

  TestImg3 = loadImage("1c.jpg")

​

  //type

  gtR = loadFont('GT-Walsheim-Pro-Regular.ttf');

  gtM = loadFont('GT-Walsheim-Pro-Medium.ttf');

  gtB = loadFont('GT-Walsheim-Pro-Bold.ttf');

​

}

​

function setup() {

  createCanvas(640, 480);

  capture = createCapture(VIDEO); //video feed

  capture.size(width, height);

  capture.hide();

  tracker = new clm.tracker(); //clm tracker

  tracker.init();

  tracker.start(capture.elt);

  pixelDensity(1)

  cg = createGraphics(width, height) // for additional layer

  slider = createSlider(5, 25, 15, 1) // slider to control 'pixel size'

  slider.size(width / 3, 20); // width and height

  slider.position(210, height)

​

​

​

  //effect on button

  onbutton = createButton('Turn effect On');

  onbutton.position(440, 480)

  onbutton.mousePressed(screen1);

  onbutton.hide();

​

  //effect is on

  effectIsOn = createButton('Effect is ON');

  effectIsOn.position(445, 480)

  effectIsOn.style("background-color", "#49BF45");

  effectIsOn.style("color", "white");

  effectIsOn.hide();

​

  effectIsOff = createButton('Normal Cam');

  effectIsOff.position(548, 480)

  effectIsOff.style("background-color", "#49BF45");

  effectIsOff.style("color", "white");

  effectIsOff.hide();

​

​

  //effect off button

  offbutton = createButton('Regular Cam');

  offbutton.position(545, 480)

  offbutton.mousePressed(screen2);

​

  offbutton.hide()

​

​

  //stream is paused

  scenePaused = createButton('Feed Paused');

  scenePaused.position(0, height)

  scenePaused.mousePressed(screen3);

  scenePaused.style("background-color", "#49BF45");

  scenePaused.style("color", "black");

  // scenePaused.size(100, 50);

  scenePaused.hide();

​

  //Pause stream

  pausebutton = createButton('Pause Feed');

  pausebutton.position(0, height)

  pausebutton.mousePressed(screen3);

​

​

​

  //unpause with effect

  unpauseEbutton = createButton('Resume with effect ON');

  unpauseEbutton.position(width / 1.455, height)

  unpauseEbutton.mousePressed(screen1);

​

  unpauseEbutton.size(100, 50);

​

  //unpause with no effect

  unpausebutton = createButton('Resume with Normal cam');

  unpausebutton.position(width / 1.185, height)

  unpausebutton.mousePressed(screen2);

  unpausebutton.size(100, 50);

​

  //Turn Cam off

  camOff = createButton('Turn Cam off');

  camOff.position(width / 6.5, height)

  camOff.mousePressed(offCam);

  camOff.style("background-color", "#BF3030");

  camOff.style("color", "white");

  // camOff.size(100, 50);

​

}

​

function draw() {

  capture.loadPixels(); // loading pixels from the webcam

​

  // //4seasons BG

  image(BG, -325, 0);

​

​

  //text for slider

  push()

  fill(255)

  // text('Drag slider to adjust detail', 100, 460)

  pop()

​

​

​

  switch (screenNum) {

​

    case 0: // begining screen with information and instructions

      screen0();

      onbutton.show()

      offbutton.show()

      unpauseEbutton.hide()

      unpausebutton.hide()

      pausebutton.hide();

      linkA.show();

      linkB.show();

      linkC.show();

      break;

​

    case 1: // screen with tracker and pixels effect

      screen1();

      offbutton.show()

      effectIsOn.show();

      scenePaused.hide();

      pausebutton.show()

      onbutton.hide()

      unpauseEbutton.hide()

      unpausebutton.hide()

      web()

      break;

​

    case 2: // normal webcam

      screen2()

      // onbutton.show()

      effectIsOff.show()

      effectIsOn.hide()

      offbutton.hide()

      onbutton.show()

      unpauseEbutton.hide()

      unpausebutton.hide()

      web()

      break;

​

    case 3: //pausing webcam feed

      screen3()

      pausebutton.hide();

      unpauseEbutton.show();

      unpausebutton.show();

      effectIsOff.hide();

      scenePaused.show();

      web()

      break;

​

    case 4: //off Cam

      offCam()

      onbutton.show()

      pausebutton.hide();

      effectIsOn.hide();

      web()

      break;

  }

​

}

​

// begining screen with information and instructions

function screen0() {

​

​

  // example screenshots

​

  rect(0, 0, 640, 480)

  push()

  textSize(15)

  fill(42, 77, 235)

  textFont(gtM)

  text('Implemented feature preview. Default range is set to value of the middle image', 60, 410)

  pop();

  image(TestImg1, 60, 215)

  image(TestImg2, 250, 215)

  image(TestImg3, 435, 215)

  textFont(gtB);

  textSize(27)

  textAlign(LEFT);

  push();

  fill(42, 77, 235)

  text('About the feature', 60, 70)

  pop();

  push();

  fill(42, 77, 235)

​

  textSize(15)

  textFont(gtR)

  textAlign(LEFT)

  text("This camera offers an option to address Zoom fatigue by adding a feature \nto obscure your video feed to cater to your comfort. This was programmed \nusing p5.js library in combination with CLMtrackr to track your facial \nfeatures. It is built following the Planned Parenthood’s F(reely given) R(eversible) \nI(nformed) E(nthusiastic) S(pecific) methodology. To continue please click on \nan option below the screen. ", 60, 100)

  pop()

  web()

  console.log('screen 0');

}

​

​

//clm tracker with pixels

function screen1() {

  screenNum = 1

  textSize(15)

​

  //getting positions using clm tracker

  let positions = tracker.getCurrentPosition();

  if (positions.length > 0) {

    for (let x = 0; x < positions.length; x++) {

      let c = capture.get(positions[x][0], positions[x][1]);

      fill(c);

      noStroke();

​

      // selectin tracked pixels of the face

      rect(positions[x][0], positions[x][1], slider.value(), slider.value())

​

      //calling the pixels

      image(cg, positions[x][0], positions[x][1], width, height)

      updatePixels();

    }

  }

​

​

​

​

  console.log('screen 1');

}

​

//normal webcam

function screen2() {

  screenNum = 2

  image(capture, 0, 0, width, height);

​

  console.log('screen 2');

}

​

//pause screen

function screen3() {

  screenNum = 3;

  image(BG, -325, 0);

  console.log('screen 3');

}

​

function offCam() {

  background(0)

  screenNum = 4;

  push();

  textSize(15)

  fill(255)

  textAlign(CENTER)

  text('Your camera has been turned off \nyour audio is still active', 640 / 2, 480 / 2)

​

  pop();

​

  console.log('Cam Off');

}

​

function web() {

​

  push()

  textFont(gtM)

  textSize(15)

  fill(73, 191, 69)

  text("READ MORE:", 10, 470)

  pop();

​

  //FRIES

  linkA = createA('https://privacy.shorensteincenter.org/fries#:~:text=According%20to%20FRIES%2C%20consent%20is,applies%20to%20our%20digital%20lives.', 'FRIES', '_blank')

  linkA.style("font-family", "Verdana");

  linkA.style("color", "#49BF45");

  linkA.position(290, 455);

  linkA.style('font-size', '14px')

  linkA.hide();

​

  // CLM

  linkB = createA('https://auduno.com/2014/01/05/fitting-faces/', 'CLMtrackr', '_blank')

  linkB.style("font-family", "Verdana");

  linkB.style("color", "#49BF45");

  linkB.position(210, 455);

  linkB.style('font-size', '14px')

  linkB.hide();

​

  //Zoom fatigue

  linkC = createA('https://www.insidehighered.com/advice/2020/04/22/professor-explores-why-zoom-classes-deplete-her-energy-opinion', 'Zoom fatigue', '_blank')

  linkC.style("font-family", "Verdana");

  linkC.style("color", "#49BF45");

  linkC.position(105, 455);

  linkC.style('font-size', '14px')

  linkC.hide();

}