let c;

let tracker;

let positions;

let catNose;

let button;

let button1;

let inp;

let checkbox1;

let checkbox2;

let checkbox3;

​

let sceneNum = 1;

let scene1;

let scene2;

let scene3;

​

function preload() {

  yearbook = loadImage(" photo.png")

  catNose = loadImage(" photofilter.png");

  cover = loadImage(" cover.png");

  consent = loadImage(" consent.png");

}

​

function setup() {

  c = createCanvas(600, 800);

  button = createButton('SAVE')

  button.size(80,40)

  button.position(50, 750)

  button.mousePressed(takePic)

  button.style('background-color', "#EF4076");

  button.style('border-radius', '5px');

  button1 = createButton('CONSENT')

  button1.size(80,40)

  button1.position(50, 700)

  button1.mousePressed(sceneNum2)

  button1.style('background-color', "#3789BC");

  button1.style('border-radius', '5px');

​

  capture = createCapture(VIDEO);

  capture.size(width, height);

  capture.hide();

​

  tracker = new clm.tracker();

  tracker.init(); 

  tracker.start(capture.elt);

  filter90s = createGraphics(width, height);

  filter90s.pixelDensity(1);

​

  inp = createInput('');

  inp.position(100, 560);

  inp.size(300,30);

  inp.style('background-color', "#F7F05F");

  button.style('border-radius', '5px');

  inp.input(checkInput);

  checkbox1 = createCheckbox("", false);

  checkbox1.position(130, 300);

  checkbox1.style('background-color', "#F7F05F");

​

  checkbox2 = createCheckbox("", false);

  checkbox2.position(250, 300);

  checkbox2.style('background-color', "#F7F05F");

​

  checkbox3 = createCheckbox("", false);

  checkbox3.position(365, 300);

  checkbox3.style('background-color', "#F7F05F");

​

}

​

function draw() {

  switch(sceneNum) {

    case 1:

        coverScene();

        button.hide();

        button1.hide();

        checkbox1.hide();

        checkbox2.hide();

        checkbox3.hide();

        inp.hide();

        break;

    case 2:

        consentScene();

        button.hide();

        button1.hide();

        checkbox1.show();

        checkbox2.show();

        checkbox3.show();

        inp.show();

        break;

    case 3:

        filterScene();

        button.show();

        button1.show();

        checkbox1.hide();

        checkbox2.hide();

        checkbox3.hide();

        inp.hide();

        break;

  }

}

​

function coverScene() {

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

  if (mouseIsPressed && mouseX > 95 && mouseX < 520 && mouseY > 653 && mouseY < 678) {

    sceneNum = 2;

  }

}

​

function consentScene() {

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

}

​

function filterScene() {

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

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

​

  positions = tracker.getCurrentPosition(); 

  noFill();

  noStroke();

​

  beginShape();

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

    vertex(positions[i][0], positions[i][1]);

  }

  endShape();

​

  noStroke();

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

    if (i === 62) {

      let catNoseWidth = 400;

      let catNoseHeight = 600;

      let xOffset = 253;

      let yOffset = -270;

      image(catNose, positions[i][0] - xOffset, positions[i][1] + yOffset, catNoseWidth, catNoseHeight);

    } else {

      text(i, positions[i][0], positions[i][1]);

    }

  }

}

​

function takePic() {

  console.log("savepic");

}

​

function checkInput() {

  if (inp && inp.value) {

    let msg = inp.value();

​

    if (msg === 'YEARBOOKFILTER' && checkbox1.checked() &&

        checkbox2.checked() &&

        checkbox3.checked()) {

      sceneNum = 3;

    } else if (msg === 'yearbookfilter' &&

               checkbox1.checked() &&

               checkbox2.checked() &&

               checkbox3.checked()) {

      sceneNum = 3;

    }

  }

}

​

function sceneNum2() {

  sceneNum = 2;

}

​

function takePic() {

  saveCanvas(c, 'myPic', 'jpg')

}