let cltracker;

let osc, playing, freq, amp, phase;

​

​

function setup() {

  let cnv = createCanvas(320, 240);

​

  capture = createCapture(VIDEO);

  capture.size(320, 240);

  capture.hide();

  ctracker = new clm.tracker();

  ctracker.init();

  ctracker.start(capture.elt);

    cnv.mousePressed(playOscillator);

  osc = new p5.Oscillator('sawtooth');

}

​

function draw() {

  background(220);

  image(capture, 0, 0);

​

  var positions = ctracker.getCurrentPosition();

  if (positions) {

    const leftside = positions[0];

    const rightside = positions[14];

    const nose = positions[62];

    const mouthtop = positions[60];

    const mouthbot = positions[57];

    const eye1 = positions[27];

    const eye2 = positions[32];

​

    const middle = [(leftside[0] + rightside[0]) / 2,

      (leftside[1] + rightside[1]) / 2

    ];

​

    const mouthmiddle = [(mouthtop[0] + mouthbot[0]) / 2,

      (mouthtop[1] + mouthbot[1]) / 2

    ];

    const mouthsize = dist(mouthtop[0], mouthtop[1], mouthbot[0], mouthbot[1]);

    const wid =  dist(leftside[0], leftside[1], rightside[0], rightside[1]);

​

    const ang = atan2(leftside[1] - rightside[1], leftside[0] - rightside[0])

​

    push();

    translate(middle[0], middle[1]);

    rotate(ang);

​

    ellipse(0, 0, wid, wid * 1.5);

​

    pop();

​

​

    ellipse(nose[0], nose[1], 10);

    ellipse(eye1[0], eye1[1], 10);

    ellipse(eye2[0], eye2[1], 10);

​

​

    ellipse(mouthmiddle[0],mouthmiddle[1],mouthsize*3,mouthsize);

    stroke(0);

    // line(leftside[0],leftside[1],rightside[0],rightside[1]);

​

    stroke(255, 0, 0);

​

    nosedist = dist(width/2,height/2, nose[0],nose[1]);

  freq = constrain(map(nosedist, 100, 0, 100, 500), 100, 500);

  phase = 0.5;

  amp  = constrain(map(mouthsize,1,20,0,1), 0, 1);

​

  text('mouse down to make sound,\n head up down and mouth to change', 20, 20);

  text('freq: ' + freq, 20, 60);

  text('amp: ' + amp, 20, 80);

​

  if (playing) {

    // smooth the transitions by 0.1 seconds

    osc.freq(freq, 0.1);

    osc.amp(amp, 0.1);

  }

  }

}

​

​

​

function playOscillator() {

  // starting an oscillator on a user gesture will enable audio

  // in browsers that have a strict autoplay policy.

  // See also: userStartAudio();

  osc.start();

  playing = true;

}

​

function mouseReleased() {

  // ramp amplitude to 0 over 0.5 seconds

  osc.amp(0, 0.5);

  playing = false;

}