let ccc;

let f = ["f1.png", "f2.png", "f3.png", "f4.png", "f5.png", "f6.png", "f7.png", "f8.png", "f9.png", "f10.png", "f11.png", "f12.png", "f13.png", "f14.png", "f15.png", "f16.png", "f17.png", "f18.png", "f19.png", "f20.png", "f21.png", "f22.png", "f23.png", "f24.png", "f25.png", "f26.png", "f27.png", "f28.png", "f29.png", "f30.png", "f31.png", "f32.png", "f33.png", "f34.png", "f35.png", "f36.png", "f37.png", "f38.png", "f39.png", "f40.png", "f41.png", "f42.png", "f43.png", "f44.png", "f45.png", "f46.png", "f47.png", "f48.png", "f49.png", "f50.png"];

let le = ["le1.png", "le2.png", "le3.png", "le4.png", "le5.png", "le6.png", "le7.png", "le8.png", "le9.png", "le10.png", "le11.png", "le12.png", "le13.png", "le14.png", "le15.png", "le16.png", "le17.png", "le18.png", "le19.png", "le20.png", "le21.png", "le22.png", "le23.png", "le24.png", "le25.png", "le26.png", "le27.png", "le28.png", "le29.png", "le30.png", "le31.png", "le32.png", "le33.png", "le34.png", "le35.png", "le36.png", "le37.png", "le38.png", "le39.png", "le40.png", "le41.png", "le42.png", "le43.png", "le44.png", "le45.png", "le46.png", "le47.png", "le48.png", "le49.png", "le50.png"];

let re = ["re1.png", "re2.png", "re3.png", "re4.png", "re5.png", "re6.png", "re7.png", "re8.png", "re9.png", "re10.png", "re11.png", "re12.png", "re13.png", "re14.png", "re15.png", "re16.png", "re17.png", "re18.png", "re19.png", "re20.png", "re21.png", "re22.png", "re23.png", "re24.png", "re25.png", "re26.png", "re27.png", "re28.png", "re29.png", "re30.png", "re31.png", "re32.png", "re33.png", "re34.png", "re35.png", "re36.png", "re37.png", "re38.png", "re39.png", "re40.png", "re41.png", "re42.png", "re43.png", "re44.png", "re45.png", "re46.png", "re47.png", "re48.png", "re49.png", "re50.png"];

let m = ["m1.png", "m2.png", "m3.png", "m4.png", "m5.png", "m6.png", "m7.png", "m8.png", "m9.png", "m10.png", "m11.png", "m12.png", "m13.png", "m14.png", "m15.png", "m16.png", "m17.png", "m18.png", "m19.png", "m20.png", "m21.png", "m22.png", "m23.png", "m24.png", "m25.png", "m26.png", "m27.png", "m28.png", "m29.png", "m30.png", "m31.png", "m32.png", "m33.png", "m34.png", "m35.png", "m36.png", "m37.png", "m38.png", "m39.png", "m40.png", "m41.png", "m42.png", "m43.png", "m44.png", "m45.png", "m46.png", "m47.png", "m48.png", "m49.png", "m50.png"];

let n = ["n1.png", "n2.png", "n3.png", "n4.png", "n5.png", "n6.png", "n7.png", "n8.png", "n9.png", "n10.png", "n11.png", "n12.png", "n13.png", "n14.png", "n15.png", "n16.png", "n17.png", "n18.png", "n19.png", "n20.png", "n21.png", "n22.png", "n23.png", "n24.png", "n25.png", "n26.png", "n27.png", "n28.png", "n29.png", "n30.png", "n31.png", "n32.png", "n33.png", "n34.png", "n35.png", "n36.png", "n37.png", "n38.png", "n39.png", "n40.png", "n41.png", "n42.png", "n43.png", "n44.png", "n45.png", "n46.png", "n47.png", "n48.png", "n49.png", "n50.png"];

let f1;

let e1;

let m1;

let n1;

let capture;

let tracker;

let rr;

let bb;

let gg;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  capture = createCapture(VIDEO);

  capture.elt.setAttribute('playsinline', '');

  capture.size(width, height);

  capture.hide();

  tracker = new clm.tracker();

  tracker.init();

  tracker.start(capture.elt);

  rr = random(180, 255);

  gg = random(180, 255);

  bb = random(180, 255);

  f1 = f[int(random(f.length))];

  face = loadImage(f1);

  le1 = le[int(random(le.length))];

  lefteye = loadImage(le1);

  re1 = re[int(random(re.length))];

  righteye = loadImage(re1);

  m1 = m[int(random(m.length))];

  mouth = loadImage(m1);

  n1 = n[int(random(n.length))];

  nose = loadImage(n1);

}

​

function draw() {

      button = createButton('Save Pic');

      button.position(50, height - 50);

      button.mousePressed(takePic);

      translate(width,0);

      scale(-1, 1);

  push();

      imageMode(CORNER);

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

  pop();

      imageMode(CENTER);

      background(rr, gg, bb);

      let positions = tracker.getCurrentPosition();

      console.log(positions);

      if(positions.length > 0){

        background(rr, gg, bb);

        image(face, positions[41][0], positions[41][1], 520, 520);

        image(lefteye, positions[27][0], positions[27][1], 190, 190);

        image(righteye, positions[32][0], positions[32][1],190, 190);

        image(mouth, positions[53][0], positions[53][1], 150, 150);

        image(nose, positions[62][0], positions[62][1], 150, 150);

      }

}

​

function takePic(){

  saveCanvas(ccc, 'jpg');