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

​

var capture;

var tracker

var w = 640, h = 480;

var song;

var twinkleSound;

var C, E, G, C1, Eb;

let eyeStar, silverStar, smallGoldStar, bigGoldStar;

​

function preload() {

    //twinkleSound = loadSound("TwinkleSoundEffect.mp3");

    //twinkleSound.setVolume(0.6);

    C = loadSound("C.mp3");

    E = loadSound("E.mp3");

    G = loadSound("G.mp3");

    C1 = loadSound("C1.mp3");

    Eb = loadSound("Eb.mp3");

    eyeStar = loadImage("eyeStar.png");

    bigGoldStar = loadImage("bigGoldStar.png");

    silverStar = loadImage("silverStar.png");

    smallGoldStar = loadImage("smallGoldStar.png");

}

​

function setup() {

    capture = createCapture({

        audio: false,

        video: {

            width: w,

            height: h

        }

    }, function() {

        console.log('capture ready.')

    });

    capture.elt.setAttribute('playsinline', '');

    createCanvas(w, h);

    capture.size(w, h);

    capture.hide();

​

    colorMode(HSB);

​

    tracker = new clm.tracker();

    tracker.init();

    tracker.start(capture.elt);

    // Game music

    //song = loadSound("Guzheng1.mp3", loaded);

    //song.play();

    //song.setVolume(0.75);

}

​

//function loaded() {

    //song.play();

//}

​

function draw() {

    //translate(capture.width, 0); //move image by the width of image to the left

    //scale(-1, 1); // mirror

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

    filter(GRAY);

    var positions = tracker.getCurrentPosition();

​

    let s = second();

    //console.log(s);

    //if (s > 5) playSound = true;

    // Targets

    fill(0, 255, 255); 

    image(bigGoldStar, 200-10, 330-10, 60, 60); // bottom L

    //rect(200, 330, 40, 40);

    image(bigGoldStar, 140-10, 230-10, 60, 60); // middle L

    image(bigGoldStar, 220-10, 130-10, 60, 60); // top L 

    image(bigGoldStar, 340-10, 55-10, 60, 60); // top

    image(bigGoldStar, 480-10, 130-10, 60, 60); // top R

    //rect(480, 130, 40, 40);

    image(bigGoldStar, 540-10, 230-10, 60, 60); // middle R

    //rect(540, 230, 40, 40);

    image(bigGoldStar, 460-10, 330-10, 60, 60); // bottom R

    //rect(460, 330, 40, 40);

    if (positions.length > 0) {

        var mouthLeft = createVector(positions[44][0], positions[44][1]);

        var mouthRight = createVector(positions[50][0], positions[50][1]);

        var smile = mouthLeft.dist(mouthRight);

        // uncomment the line below to show an estimate of amount "smiling"

        // rect(20, 20, smile * 3, 20);

        // Eyes

        var leftEyeX = positions[27][0];

        var leftEyeY = positions[27][1];

        var rightEyeX = positions[32][0];

        var rightEyeY = positions[32][1];

        //noStroke();

        fill(0, 255, 255);

        image(eyeStar, leftEyeX-25, leftEyeY-25, 50, 50); 

        image(eyeStar, rightEyeX-25, rightEyeY-25, 50, 50); 

        // Eye direction indicators

        fill(70, 52, 235);

        // If outer indicator overlaps target by certain amount, 'hit' target

        // Bottom L

        if ((leftEyeX-80) < (200+30) && (leftEyeY+65+30) > (330+30)) {

          image(smallGoldStar, leftEyeX-45, leftEyeY+30, 30, 30); 

          image(silverStar, leftEyeX-80, leftEyeY+65, 20, 20);

          if (C.isPlaying()) C.stop();

          C.play();

        }

        // Middle L

        if ((leftEyeX-125) < (140+30) && (leftEyeY+5+30) < (230+60) && (leftEyeY+5) > 230) {

          image(smallGoldStar, leftEyeX-75, leftEyeY, 30, 30); 

          image(silverStar, leftEyeX-125, leftEyeY+5, 20, 20);

          if (E.isPlaying()) E.stop();

          E.play();

        }

        // Upper L

        if ((leftEyeX-75) < (220+30) && (leftEyeY-60) < (130+30)) {

          image(smallGoldStar, leftEyeX-45, leftEyeY-30, 30, 30); 

          image(silverStar, leftEyeX-75, leftEyeY-60, 20, 20);

          if (G.isPlaying()) G.stop();

          G.play();

        }

        // Top

        if ((positions[33][0]+10) < (340+60) && (positions[33][0]+10+30) > 340 &&  (positions[33][1]-100+30) < (55+60)) {

          image(smallGoldStar, leftEyeX, leftEyeY-60, 30, 30); 

          image(silverStar, positions[33][0]+10, positions[33][1]-100, 20, 20);

          image(smallGoldStar, rightEyeX, rightEyeY-60, 30, 30); 

          if (C1.isPlaying()) C1.stop();

          C1.play();

        }

        // Upper R

        if ((rightEyeX+75+30) > (480+30) && (rightEyeY-60) < (130+30)) {

          image(smallGoldStar, rightEyeX+30, rightEyeY-30, 30, 30); 

          image(silverStar, rightEyeX+75, rightEyeY-60, 20, 20);

          if (G.isPlaying()) G.stop();

          G.play();

        }

        // Middle R

        if ((rightEyeX+115+30) > (540+30) && (rightEyeY+5) > 230 && (rightEyeY+5+30) < (230+60)) {

          image(smallGoldStar, rightEyeX+60, rightEyeY, 30, 30); 

          image(silverStar, rightEyeX+115, rightEyeY+5, 20, 20);

          if (Eb.isPlaying()) Eb.stop();

          Eb.play();

        }

        // Lower R

        if ((rightEyeX+80+30) > (460+30) && (rightEyeY+65+30) > (330+30)) {

          image(smallGoldStar, rightEyeX+30, rightEyeY+30, 30, 30); 

          image(silverStar, rightEyeX+80, rightEyeY+65, 20, 20);        

          if (C.isPlaying()) C.stop();

          C.play();

        }

        // stop the music

        //if (C.isPlaying()) C.stop();

        //if (s%5 == 0) console.log("Left x: " + leftEyeX +                                                   " Left y: " + leftEyeY);

        //if (leftEyeX >= 400.0) twinkleSound.play(); // sound effect test

    }

​

}

​