let capture;

let vol;

let fatOsc;

​

function getMouthWidth(positions) {

  const t = positions[60];

  const b = positions[57];

  const vt = createVector(t[0], t[1]);

  const vb = createVector(b[0], b[1]);

  return vt.sub(vb).mag();

}

​

function setup() {

  createCanvas(400, 300);

  capture = createCapture(VIDEO);

  capture.size(400, 300);

  capture.hide();

  ctracker = new clm.tracker();

  ctracker.init();

  ctracker.start(capture.elt);

  vol = new Tone.Gain(0).toDestination();

  fatOsc = new Tone.FatOscillator("Ab3", "sawtooth", 40).connect(vol).start();

}

​

function draw() {

  translate(width, 0);

  scale(-1, 1);

  image(capture, 0, 0);

  const positions = ctracker.getCurrentPosition();

  if (positions) {

    positions.forEach(p => {

      noStroke();

      fill("red");

      ellipse(p[0], p[1], 5, 5);

    });

    // 4 to 24

    let mw = getMouthWidth(positions);

    const newVol = map(mouseX, 0, width, 0, 0.3);

    vol.gain.value = newVol;

    const freq = map(mouseY, 0, height, 220, 440);

    fatOsc.frequency.value = freq;

    let spread = map(mw, 4, 24, 40, 100);

    fatOsc.spread = spread;

  }

}