monkey.game

// -----------------------------------------------------

// SCENE1 Properties

// -----------------------------------------------------

let s1;                                   // Scene1 Class variable

let s1_Game_Bg = "start.background.png"; // Background image of the scene1

let s1_StartBtn_Src = "button.start.png";// Start Button image of the scene1

​

// -----------------------------------------------------

// SCENE2 Properties

// -----------------------------------------------------

let s2;                                // Scene 2 Class variable

let s2_GameBg_Src = "background.png";  // Background image of the scene2

let s2_Hero_Src = "man.monkey.png";    // Hero image for the HeroClass

let s2_Leaves_Src = "leaves.png";      // leaves image for the LeavesClass

let s2_Bocek_Src = "bocek.png"; 

let s2_GameTime = 15;                  // Game Time

​

// -----------------------------------------------------

// SCENE3 Properties

// -----------------------------------------------------

let s3;                                // Scene 3

let s3_Fail_Bg = "fail.background.png";       // Background image of the scene3 -> fail

let s3_Success_Bg = "congrats.background.png";// Background image of the scene3 -> success

let s3_ReStartBtn_Src = "button.return.png";  // Restart Button image of the scene3

​

// -----------------------------------------------------

// Global Game Variables

// -----------------------------------------------------

let currentScene = 1; // Variable stores the current game scene 1=Scene1, 2=Scene2, 3=Scene3 

let totalScore = 0;   // Variable stores the current score

​

// -----------------------------------------------------

// Apply ML5 Library declerations

// -----------------------------------------------------

let faceapi;

let video;

let detections;

​

​

// by default all options are set to true

const detection_options = {

    withLandmarks: true,

    withDescriptors: false,

}

​

​

​

// -----------------------------------------------------

// Main Setup Function

// -----------------------------------------------------

function setup() {

    createCanvas(800, 800); // Canvas size

​

    // Init Scene 1 by passing the start button, game background image

    s1 = new Scene1(s1_StartBtn_Src, s1_Game_Bg);

    s1.enable(); // Enable scene

​

    // Init Scene 2 by passing Image hero, image banana, image background

    s2 = new Scene2(s2_Hero_Src, s2_Leaves_Src, s2_Bocek_Src, s2_GameBg_Src);

​

    // Init Scene 3 by passing the restart button, fail bg and success bg

    s3 = new Scene3(s3_ReStartBtn_Src, s3_Fail_Bg, s3_Success_Bg);

​

    // Event Listeners that are triggered from scene1, scene2, and scene3

    addEventListener("BUTTON_PRESSED", gameStart);

    addEventListener("GAME_END", gameEnd);

  addEventListener("GAME_END_FAIL", gameEndFail);

  // load up your video

  video = createCapture(VIDEO);

  video.size(width, height);

  video.hide(); // Hide the video element, and just show the canvas

  faceapi = ml5.faceApi(video, detection_options, modelReady)

}

​

// -----------------------------------------------------

// Main Draw Function

// -----------------------------------------------------

function draw() {

    background(255);

​

    // Draw relevant scene according to the value of currentScene

    if (currentScene == 1) {

        s1.display();

    } else if (currentScene == 2) {

        s2.display();

    } else if (currentScene == 3) {

        s3.display();

    }

}

​

function gameEndFail() {

  currentScene = 3;

  gameEnd();

}

​

function gameEnd() {

    currentScene = 3;

    switchGameScene(s3);

}

​

function gameStart(e) {

    if (e.name == "START") {

        switchGameScene(s2);

        currentScene = 2;

    } else if (e.name == "RESTART") {

        switchGameScene(s1);

        currentScene = 1;

    }

}

​

function switchGameScene(scene) {

    // Disable all scenes first

    s1.disable();

    s2.disable();

    s3.disable();

​

    // Then enable the current Scene

    scene.enable();

}

​

function keyPressed() {

    if (key == 's') {

        saveCanvas('myCanvas', 'jpg');

    }

}

function modelReady() {

    console.log('ready!')

    console.log(faceapi)

    faceapi.detect(gotResults)

​

}

​

function gotResults(err, result) {

    if (err) {

        console.log(err)

        return

    }

    // console.log(result)

    detections = result;

​

    // background(220);

    //image(video, 0,0, width, height)

    if (detections) {

        if (detections.length > 0) {

            // console.log(detections)

            drawBox(detections)

            //drawLandmarks(detections)

        }

​

    }

    faceapi.detect(gotResults)

}

​

function drawBox(detections){

    //for(let i = 0; i < detections.length; i++){

        const alignedRect = detections[0].alignedRect;

        const x = alignedRect._box._x

        const y = alignedRect._box._y

        const boxWidth = alignedRect._box._width

        const boxHeight  = alignedRect._box._height

        //noFill();

        //stroke(161, 95, 251);

        //strokeWeight(2);

        //rect(x, y, boxWidth, boxHeight);

   // }

  // Draw circle here

  //fill(200,0, 0)

  //circle(x, height, 30);

        if(currentScene == 2) {

          s2.hero.x = 800-x;

        }

}

​

function drawLandmarks(detections){

    noFill();

    stroke(161, 95, 251)

    strokeWeight(2)

​

    for(let i = 0; i < detections.length; i++){

        const mouth = detections[i].parts.mouth; 

        const nose = detections[i].parts.nose;

        const leftEye = detections[i].parts.leftEye;

        const rightEye = detections[i].parts.rightEye;

        const rightEyeBrow = detections[i].parts.rightEyeBrow;

        const leftEyeBrow = detections[i].parts.leftEyeBrow;

​

        drawPart(mouth, true);

        drawPart(nose, false);

        drawPart(leftEye, true);

        drawPart(leftEyeBrow, false);

        drawPart(rightEye, true);

        drawPart(rightEyeBrow, false);

​

    }

​

}

​

function drawPart(feature, closed){

    beginShape();

    for(let i = 0; i < feature.length; i++){

        const x = feature[i]._x

        const y = feature[i]._y

        vertex(x, y)

    }

    if(closed === true){

        endShape(CLOSE);

    } else {

        endShape();

    }

}

​