​

var positions;

let cam;

let step = 10;

let ctracker;

var streamReady = false;

const width = 600;

const height = 600;

let didLoad = false;

let colors;

let state = 1;

let beginButton;

let nextButton;

let backButton;

let consentCheckbox;

​

​

function createCamTracker() {

  didLoad = false;

  streamReady = false;

  cam = createCapture(VIDEO, () => {

    streamReady = true;

    didLoad = true;

  });

  cam.size(width, height);

  cam.hide();

​

  // setup tracker

  ctracker = new clm.tracker();

  ctracker.init(pModel);

  ctracker.start(cam.elt);

}

​

function setup() {

  createCanvas(width, height);

  colors = [

    color(176, 48, 0),

    color(5, 10, 110),

    color(235, 188, 48),

    color(218),

    color(243, 66, 108),

    color(52, 91, 184),

    color(0),

    color(19, 67, 50)

  ];

​

  textAlign(CENTER, TOP);

  // begin button

  beginButton = createButton("Start");

  beginButton.position(width / 2 - 50, 270);

  beginButton.size(100, 25);

  beginButton.style("background-color", "#000000");

  beginButton.style("font-family", "Helvetica");

  beginButton.style("color", "#ffffff");

  beginButton.mousePressed(() => {

    beginButton.hide();

    state++

  });

  beginButton.hide();

  // back button

  backButton = createButton("Back");

  backButton.position(20, height - 35);

  backButton.size(100, 25);

  backButton.style("background-color", "#000000");

  backButton.style("font-family", "Helvetica");

  backButton.style("color", "#ffffff");

  backButton.mousePressed(() => {

    backButton.hide();

    state--

  });

  backButton.hide();

​

  // next button

  nextButton = createButton("Begin");

  nextButton.position(width / 2 - 20, 400);

  nextButton.size(50, 25);

  nextButton.style("background-color", "steelblue");

  nextButton.style("font-family", "Helvetica");

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

  nextButton.mousePressed(() => {

    nextButton.hide();

    state++;

    consentCheckbox.hide();

    if (consentCheckbox.checked()) {

      createCamTracker();

    } else {

      if (cam) {

        cam.remove();

      }

    }

  });

  nextButton.hide();

​

  //checked box

  consentCheckbox = createCheckbox(' I grant access to my device camera', false);

  consentCheckbox.style("color", '#fffff');

  consentCheckbox.style("font-family", "Helvetica");

  consentCheckbox.position(width / 4, 350);

  consentCheckbox.hide();

​

}

​

​

function draw() {

​

  switch (state) {

    case 1:

      clear();

      beginButton.show();

      background(200, 50, 255);

      fill('white');

      textSize(15);

      text('Welcome to "Face Painting".', width / 2, 50);

      text('\t\t\tThis experimental camera tracks your face position,\n allowing you to use this position to create a beautiful work of art!', width / 2, 150)

      break

    case 2:

      clear();

      background('grey');

      nextButton.show();

      consentCheckbox.show();

      fill('black');

      textSize(15);

      text('This project requires use of the computer\'s camera.', width / 2, 100);

      text('None of your personal data will be saved.', width / 2, 150);

      text('If you choose to not use the camera, your mouse will control the brush instead.', width / 2, 200);

      text('If at any point you\'d like to stop the camera, \njust click the "stop" button on the bottom right.', width / 2, 250);

      break;

    case 3:

      let positions;

      if (consentCheckbox.checked()) {

        positions = ctracker.getCurrentPosition(); 

      } else {

        positions = [[mouseX, mouseY]];

      }

      if (didLoad === true) {

        background(0);

        clear();

        didLoad = false;

      }

      if (streamReady || !consentCheckbox.checked()) {

        backButton.show();

        blendMode(NORMAL);

        background(255, 1);

        if (consentCheckbox.checked()) {

          cam.loadPixels();

          image(cam, 0, 0, 320, 240);

        };

​

        let maxX = 0;

        let maxY = 0;

        let minX = width;

        let minY = height;

        let mappedX, mappedY;

        if (positions) {

          positions.forEach(pos => {

            if (pos[0] < minX) {

              minX = pos[0];

            }

            if (pos[0] > maxX) {

              maxX = pos[0];

            }

            if (pos[1] < minY) {

              minY = pos[1];

            }

            if (pos[1] > maxY) {

              maxY = pos[1];

            }

          });

​

          mappedX = map(maxX - minX, 0, width, 0, 255);

          mappedY = map(maxY - minY, 0, height, 0, 255);

​

          blendMode(SOFT_LIGHT);

          noStroke();

          positions.forEach((pos, posIdx) => {

            let c = get(pos[0], pos[1])

            fill(colors[posIdx % colors.length]);

            ellipse(

              pos[0], pos[1], map(mouseX, 0, width, 2, 20), map(mouseY, 0, height, 2, 20)

            );

          });

        }

      } else {

        fill('white');

        text('LOADING', width / 2, height / 2)

      }

      break;

  }

}