xxxxxxxxxx
171
const canvasWidth = 600, canvasHeight = 400
let clm_tracker
let vid
let positions
let initialMouthSize = -1000
let initialEyeSize = -1000
let mySound;
function preload() {
soundFormats('mp3', 'ogg');
mySound = loadSound('meow.mp3');
catnose = loadImage("cat.png");
}
function setup() {
vid = createCapture(VIDEO);
vid.size(canvasWidth, canvasHeight);
vid.style("z-index: 1");
vid.position(0, 0);
//vid.hide()
// setup canvas
cnv = createCanvas(canvasWidth, canvasHeight);
cnv.position(0, 0);
cnv.style("z-index: 2");
// setup tracker
clm_tracker = new clm.tracker();
clm_tracker.init(pModel);
clm_tracker.start(vid.elt);
noStroke()
}
function draw() {
clear();
//get the detection score, or how well the face is detected (from 0 to 1)
const detectionScore = clm_tracker.getScore();
if (detectionScore > 0) {
// get array of face marker positions [x, y] format
positions = clm_tracker.getCurrentPosition();
/*
You can find all the points here
https://camo.githubusercontent.com/e967f92904c8ef84228b8950d3a278efb895b9d2/68747470733a2f2f617564756e6f2e6769746875622e696f2f636c6d747261636b722f6578616d706c65732f6d656469612f666163656d6f64656c5f6e756d626572696e675f6e65775f736d616c6c2e706e67
*/
if(positions){
const leftEyeX = positions[32][0];
const leftEyeY = positions[32][1];
const rightEyeX = positions[27][0];
const rightEyeY = positions[27][1];
const noseX = positions[62][0];
const noseY = positions[62][1];
const faceLeftX = positions[1][0];
const faceLeftY = positions[1][1];
const faceRightX = positions[13][0];
const faceRightY = positions[13][1];
const browLeftX = positions[20][0];
const browLeftY = positions[20][1];
const browRightX = positions[17][0];
const browRightY = positions[17][1];
// const whiskerLeftStartX = positions[44][0]
// const whiskerLeftStartY = positions[44][1]
// const whiskerRightStartX = positions[50][0]
// const whiskerRightStartY = positions[50][1]
//the distance between the left point and the rightmost point is a good indication
//of the size of the face or proximity to the camera and I can use it to scale my graphic elements
const sz = dist(faceLeftX,faceLeftY, faceRightX, faceRightY);
//draw the face
//fill(220,0,220,200);
//ellipse(noseX, noseY, sz, sz);
fill(200, 200, 200, 100)
// rect(faceLeftX - sz/10, faceLeftY - sz/2, sz, sz, 10, 10, 10, 10)
const leftEyeSz = leftEyeY - browLeftY;
if (initialEyeSize == -1000) {
initialEyeSize = leftEyeSz
}
let pupil_size = 20*(1-(leftEyeSz-initialEyeSize)/(initialEyeSize))
if (pupil_size < 8) {
pupil_size = 8
}
if (pupil_size > 20) {
pupil_size = 20
}
//draw the eyes
fill(255,255,255,200)
ellipse(rightEyeX, rightEyeY, sz/5, sz/10);
ellipse(leftEyeX, leftEyeY, sz/5, sz/10);
fill(60, 60, 60, 220);
ellipse(rightEyeX, rightEyeY, sz/pupil_size, sz/10);
ellipse(leftEyeX, leftEyeY, sz/pupil_size, sz/10);
var noseSize = sz/4
//draw a nose
//fill(20, 0, 220, 220);
// ellipse(noseX, noseY, noseSize, noseSize);
image(catnose,noseX-155,noseY-130, 350,350);
const topMouthX = positions[48][0];
const topMouthY = positions[48][0];
const bottomMouthX = positions[53][0];
const bottomMouthY = positions[53][1];
if (initialMouthSize <= -1000) {
initialMouthSize = topMouthY-bottomMouthY;
}
console.log(abs((topMouthY-bottomMouthY)/(initialMouthSize)))
if (abs((topMouthY-bottomMouthY)/(initialMouthSize)) < 0.75) {
if(!mySound.isPlaying()) {
mySound.play();
}
}
//whiskers
//drawWhiskersLeft(positions[44], sz)
// drawWhiskersRight(positions[50], sz)
}
}
/////When you click the mouse this draws all the detected positions
if(mouseIsPressed) {
for (var i = 0; i < positions.length; i++) {
// set the color of the ellipse based on position on screen
fill(255, 0, 0);
// draw ellipse at each position point
ellipse(positions[i][0], positions[i][1], 4, 4);
text(i, positions[i][0], positions[i][1]);
}
}
}
function drawWhiskersLeft([x, y], sz){
push()
stroke(0)
strokeWeight(1)
line(x, y, x - sz/4, y)
pop()
}
function drawWhiskersRight([x, y], sz){
push()
stroke(0)
strokeWeight(1)
line(x, y, x + sz/4, y)
pop()
}