Game Design

//🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼

//❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️

//🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙

​

​

//🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼

//SCENE 1 

let s1;                                      //Scene 1 class variable

let s1_Game_Bg = "intro screen.gif";

let s1_startBtn_Src = "btn start.png";

​

​

//🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼

//SCENE 2

let s2;                                       //Scene 2 class variable

let s2_Game_Bg_Src = "game_background.png";

let s2_Flower_Src = "flower copy.png";

let s2_Diamond_Src = "diamond.png";

let s2_Comet_Src = "Comett.png";

let s2_GameTime = 30;

​

​

//🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼

//SCENE 3

let s3;

let s3_Fail_bg = "failure screen.png";

let s3_Success_Bg = "success screen.png";

let s3_RestartBtn_Src = "restart_button.png";

​

//🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼

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

  //calling the functions

  s1 = new Scene1(s1_startBtn_Src, s1_Game_Bg);

  s1.enable();   //enable scene

  //calling scene2

  s2 = new Scene2(s2_Flower_Src, s2_Diamond_Src, s2_Comet_Src, s2_Game_Bg_Src);

  //scene 3

  s3 = new Scene3(s3_RestartBtn_Src, s3_Fail_bg, s3_Success_Bg);

  //EVENT LISTENERS that are triggered for scene1, scen2 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)

  //🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙

}

​

function draw(){

  background(255);

  if(currentScene == 1){

    s1.display();

  }

  else if (currentScene == 2){

    s2.display();

  }

  else if(currentScene == 3){

    s3.display();

  }

}

​

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

  //disbale all scenes first

  s1.disable();

  s2.disable();

  s3.disable();

  //then enable the current scene

  scene.enable();

}

​

function keyPressed() {

  if(key == 's') {

    saveCanvas('myCanvas', 'jpg');

  }

}

​

//🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙

//ML5JS

​

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.flower.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();

    }

}

//🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙🌙

​

​

//OLDDD

​

​

​

​

/*

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

// SCENE1 Properties

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

let s1;                                 // Scene1 Class variable

let s1_Game_Bg = "start_background.gif";        // Background image of the scene1

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

​

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

// SCENE2 Properties

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

let s2;                                 // Scene 2 Class variable

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

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

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

let s2_Comet_Src = "Comett.png"

let s2_GameTime = 30;                   // Game Time

​

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

// SCENE3 Properties

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

let s3; // Scene 3

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

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

let s3_ReStartBtn_Src = "btn start.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

​

​

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

// 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_Banana_Src, s2_Comet_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);

}

​

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

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

  }

}

*/