GAME

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

// SCENE1 Properties

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

let s1;                                 // Scene1 Class variable

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

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

​

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

// SCENE2 Properties

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

let s2;                                 // Scene 2 Class variable

let s2_GameBg_Src = "start_bg.png";           // Background image of the scene1

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

let s2_Banana_Src = "cop.png";        // Banana image for the BananaClass

let s2_GameTime = 30;                   // Game Time

​

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

// SCENE3 Properties

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

let s3; // Scene 3

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

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

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

​

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

// Global Game Variables

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

let img;

​

let durationImg;

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

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

​

let fontF;

​

function preload() {

  fontD = loadFont('MadimiOne-Regular.ttf');

   durationImg = loadImage('duration.png');

}

​

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

// 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(842, 510);             // 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_Banana_Src, s2_GameBg_Src);

  // Init Scene 3 by passing the restart button, fai 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);

    // 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

  // currentScene = 1 --> Draw Game intro scene

  if (currentScene == 1) {

    s1.display();

  } 

  // currentScene = 2 --> Draw Game play scene

  else if (currentScene == 2) {

    s2.display();

  } 

  // currentScene = 3 --> Draw Game end scene

  else if (currentScene == 3) {

    s3.display();

  }

}

​

function gameEnd() {

  currentScene = 3

  switchGameScene(s3);

}

​

function gameStart(e) {

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

    //print("Start Game Button Pressed");

    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);

    background(255);

    //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 = 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();

    }

}

​