// https://github.com/kylemcdonald/AppropriatingNewTechnologies/wiki/Week-2

​

​

let vid;

let canvas;

let w = 640;

let h = 480;

let tracker;

let pos1;

let mark = ['😡','🤬','🥵','😈','👿','👹','😱','😨','🥶','😔','😒','😩','😖','😤','😴','😑','😏','😌'];

let word = ['!','?','#','$','%','&','@','~','*','!','?','#','$','%','&','@','~','*'];

​

function preload(){

  font = loadFont('GOTHICBI.TTF');

  fontregular = loadFont('GOTHICB.TTF');

}

​

function setup() {

  canvas = createCanvas(w, h);

  vid = createCapture(VIDEO);

  vid.size(width,height);

  vid.hide();

  tracker = new clm.tracker();

  tracker.init();

  tracker.start(vid.elt);

  angleMode(DEGREES);

}

​

function draw() {

  background(255);

  tint(204, 204, 255, 200);

  image(vid,0,0,w,h);

  let positions = tracker.getCurrentPosition();

   if (positions.length > 0) {

    //if face is detected, you can do follow things:

     // create array for icons and marks

    pos1 = [[positions[0][0]-10,positions[0][1]],[positions[0][0]-40,positions[0][1]-20],[positions[0][0]-40,positions[0][1]+20],[positions[0][0]-75,positions[0][1]-30],[positions[0][0]-75,positions[0][1]],[positions[0][0]-75,positions[0][1]+30],[positions[0][0]-110,positions[0][1]-40],[positions[0][0]-110,positions[0][1]-10],[positions[0][0]-110,positions[0][1]+20],[positions[0][0]-145,positions[0][1]-50],[positions[0][0]-145,positions[0][1]-20],[positions[0][0]-145,positions[0][1]+10],[positions[0][0]-180,positions[0][1]-75],[positions[0][0]-180,positions[0][1]-45],[positions[0][0]-180,positions[0][1]-15],[positions[0][0]-215,positions[0][1]-100],[positions[0][0]-215,positions[0][1]-70],[positions[0][0]-215,positions[0][1]-40]];

    pos2 = [[positions[14][0]+10,positions[14][1]],[positions[14][0]+40,positions[14][1]-20],[positions[14][0]+40,positions[14][1]+20],[positions[14][0]+75,positions[14][1]-30],[positions[14][0]+75,positions[14][1]],[positions[14][0]+75,positions[14][1]+30],[positions[14][0]+110,positions[14][1]-40],[positions[14][0]+110,positions[14][1]-10],[positions[14][0]+110,positions[14][1]+20],[positions[14][0]+145,positions[14][1]-50],[positions[14][0]+145,positions[14][1]-20],[positions[14][0]+145,positions[14][1]+10],[positions[14][0]+180,positions[14][1]-75],[positions[14][0]+180,positions[14][1]-45],[positions[14][0]+180,positions[14][1]-15],[positions[14][0]+215,positions[14][1]-100],[positions[14][0]+215,positions[14][1]-70],[positions[14][0]+215,positions[14][1]-40]];

    //blendMode(DIFFERENCE);

    //ear effect

    strokeWeight(2);

    noFill();

    for ( e = 0; e < 18; e++){

    // add gradient for the color

    b = map(e,0,width,40,150);

    //r = map(e,0,width,50,180);

    fill(60,160,b);

    textAlign(CENTER);

    textSize(28);

    //textFont();

    text(mark[e],pos1[e][0],pos1[e][1]);

    }

    for (o = 0; o < 18; o++){

    push();

    //b = map(o,0,width,40,150);

    noStroke();

    textFont(fontregular);

    fill(255, 102, 153);

    text(word[o],pos2[o][0],pos2[o][1]);

    pop();

    }

    //triangle(positions[62][0], positions[62][1], positions[62][0]-i,positions[62][1]+i, positions[62][0] +i, positions[62][1] +i );

   // ellipse(positions[62][0], positions[62][1]+i,i);

    if (dist(positions[47][0], positions[47][1], positions[53][0], positions[53][1]) > 30) { 

    blendMode(DIFFERENCE);

    // mouth effect

    for ( i = 0; i < width; i+=8){

    r = map(i,0,width,0,150);

    noFill();

    stroke(r,140,255);

    arc(positions[57][0], positions[57][1], i, i, 45, 135);

    }

    // Tear drops

    for ( x=0; x<width; x+=4){

    noStroke();

    r = map(x,0,width,0,255);

    fill(r,100,255);

    ellipse(positions[27][0], positions[27][1] + x,14);

    ellipse(positions[32][0], positions[32][1] + x,14);

    }

    push();

    noStroke();

    textFont(font);

    textSize(24);

    textAlign(CENTER);

    fill(255, 204, 204)

    text('SHUT UP',positions[57][0],positions[57][1] + 70);

    pop();

    }

      else{

      blendMode(BLEND);

}}

   }

​