let ctracker;

let roar;

let mouthOpened = false;

​

function preload() {

  roar = loadSound('dragon-roar.wav');

}

​

function setup() {

  const canvas = createCanvas(400, 300);

  capture = createCapture(VIDEO);

  capture.size(width, height);

  capture.position(0, 0);

  canvas.style('z-index', '9999');

  capture.style('z-index', '-1');

  ctracker = new clm.tracker();

  ctracker.init();

  ctracker.start(capture.elt);

  // roar.play();

}

​

function draw() {

  const positions = ctracker.getCurrentPosition();

  if (positions) {

    const topOfMouth = createVector(positions[60][0], positions[60][1]);

    const bottomOfMouth = createVector(positions[57][0], positions[57][1]);

​

    // somewhere in between 2.8 and 20 ususally

    const mouthDistance = topOfMouth.sub(bottomOfMouth).mag();

    if (mouthDistance > 15 && !mouthOpened) {

      // could also map this to a filter or amplitude

      roar.play();

      mouthOpened = true;

    }

    if (mouthDistance < 3.5) {

      mouthOpened = false; 

    }

    const tintC = map(mouthDistance, 2.8, 20, 0, 255);

    print(tintC);

    clear();

    background(tintC, 0, 0, 150);

  }

  // if (positions && mouseIsPressed) {

  //   const x = positions[62][0];

  //   const y = positions[62][1];

  //   fill(255, 0, 0);

  //   circle(x, y, 25, 25);

  // }

}