let handpose;

let video;

​

let thumbX = 0;

let thumbY = 0;

let indexX = 0;

let indexY = 0;

let middleX = 0;

let middleY = 0;

let ringX = 0;

let ringY = 0;

let pinkyX = 0;

let pinkyY = 0;

​

let brain;

​

let showGuide = true;

let count = 0;

let length = 100;

​

// code for flashLight

let particles = [];

​

let currentPose = null;

​

// defining variables

let hpfont;

let bgSound, lightSound, fireSound, floatSound;

​

function modelLoaded() {

  console.log("handpose ready");

}

​

function preload() {

  hpfont = loadFont("HARRYP.TTF");

​

  bg1 = loadImage("images/hogwarts wallpaper.jpeg");

  bg2 = loadImage("images/Fireplace.jpeg");

  bg3 = loadImage("images/classroom.jpeg");

​

  bgSound = loadSound("soundsEffect/HPbgm.mp3");

  lightSound = loadSound("soundsEffect/light.mp3");

  fireSound = loadSound("soundsEffect/fire.mp3");

  floatSound = loadSound("soundsEffect/floating.mp3");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  video = createCapture(VIDEO);

  video.size(320, 240);

  video.hide();

​

  // Load the model

  handpose = ml5.handpose(video, modelLoaded);

​

  // Listen to new 'predict' events

  handpose.on("predict", gotPose);

  //video.hide();

​

  // Create an ml5 neural network

  let options = {

    task: "classification",

    debug: true,

  };

  brain = ml5.neuralNetwork(options);

  const modelInfo = {

    model: "model (1).json",

    metadata: "model_meta (1).json",

    weights: "model.weights (1).bin",

  };

  brain.load(modelInfo, brainLoaded);

​

  imageMode(CENTER); // setting all the image mode to center

  bgSound.play(); // play the song

}

​

function gotPose(results) {

  if (results.length > 0) {

    thumbX = 0.5 * results[0].annotations.thumb[3][0];

    thumbY = 0.5 * results[0].annotations.thumb[3][1];

    indexX = 0.5 * results[0].annotations.indexFinger[3][0];

    indexY = 0.5 * results[0].annotations.indexFinger[3][1];

    middleX = 0.5 * results[0].annotations.middleFinger[3][0];

    middleY = 0.5 * results[0].annotations.middleFinger[3][1];

    ringX = 0.5 * results[0].annotations.ringFinger[3][0];

    ringY = 0.5 * results[0].annotations.ringFinger[3][1];

    pinkyX = 0.5 * results[0].annotations.pinky[3][0];

    pinkyY = 0.5 * results[0].annotations.pinky[3][1];

  }

}

​

function draw() {

  if (currentPose == "light") {

    imageMode(CENTER);

    image(bg1, windowWidth / 2, windowHeight / 2, windowWidth, windowHeight);

  } else if (currentPose == "hold") {

    image(bg2, -windowWidth / 2, windowHeight / 2, windowWidth, windowHeight);

    translate(windowWidth / 2, windowHeight / 2);

    scale(-1, 1); // mirrored video

​

    image(video, 0, 0);

  } else if (currentPose == "spread") {

    image(bg3, -windowWidth / 2, windowHeight / 2, windowWidth, windowHeight);

  } else {

    image(bg3, windowWidth / 2, windowHeight / 2, windowWidth, windowHeight);

  }

​

  count++;

​

  // show guide

  if (count < length) {

    guide();

  }

​

  // if only showing guide is finished, show the magical effects

  if (count > length) {

    bgSound.stop();

    // push and pop restrain changes to only things inside it

    push();

    //translate(indexX,indexY);

    //map();

​

    // if the current pose is light, show flashlight magic

    if (currentPose == "light") {

      flashLight(width - indexX - 1, indexY);

      //flashLight(indexX, indexY);

      if (!lightSound.isPlaying()) {

        lightSound.play();

      }

      fill(200);

    }

​

    // if the current pose is hold, show powder magic

    else if (currentPose == "hold") {

      console.log("drop the powder");

​

      flooPowder(indexX, indexY);

    }

    // spread, change the background image

    else if (currentPose == "spread") {

      console.log("change position");

      if (!fireSound.isPlaying()) {

        fireSound.play();

        image(

          bg3,

          -windowWidth / 2,

          windowHeight / 2,

          windowWidth,

          windowHeight

        );

      }

    }

​

    //floating, lift the position of the feather

    else if (currentPose == "floating") {

      console.log("float the feather");

      imageMode(CENTER);

      image(bg3, -windowWidth / 2, windowHeight / 2, windowWidth, windowHeight);

      // flooPowder(indexX, indexY);

    }

​

    pop();

  }

}

​

// put guide images

function guide() {

  console.log("showing guide");

  //ellipse(width / 2, height / 2, 150, 150);

  //image(bg1, 0, 0,500, 500);

  textAlign(CENTER);

  push();

  textSize(30);

  fill(255);

  textFont(hpfont);

  scale(-1, 1);

  text("Welcome to Hogwards...", 0, 0);

  pop();

}

​

// flashlight particle

function flashLight(xPos, yPos) {

  console.log("showing flashlight");

  //fill(200);

  //bg1.position(0,0);

  for (let i = 0; i < 3; i++) {

    particles.push(new Particle(xPos, yPos));

  }

​

  for (let particle of particles) {

    let gravity = createVector(-0.01, -0.08);

    particle.applyForce(gravity);

    particle.update();

    particle.show();

  }

​

  for (let i = particles.length - 1; i >= 0; i--) {

    if (particles[i].finished()) {

      particles.splice(i, 1);

    }

  }

}

​

// floo powder

function flooPowder(xPos, yPos) {

  console.log("showing floo powder");

  for (let i = 0; i < 3; i++) {

    particles.push(new Particle(xPos, yPos));

  }

​

  for (let particle of particles) {

    let gravity = createVector(0, 0.2);

    particle.applyForce(gravity);

    particle.update();

    particle.show2();

  }

}

​

function brainLoaded() {

  console.log("pose classification ready!");

  finishedTraining();

}

​

// // Start classification when model is finished training

function finishedTraining() {

  console.log("finished");

​

  let inputs = [

    indexX,

    indexY,

    thumbX,

    thumbY,

    middleX,

    middleY,

    ringX,

    ringY,

    pinkyX,

    pinkyY,

  ];

  brain.classify(inputs, gotResults);

}

​

// log the results of classification

function gotResults(error, results) {

  currentPose = results[0].label;

​

  // here it will tell the result of what the recognized hand pose it

​

  if (currentPose == "light") {

    console.log("light");

  } else if (currentPose == "hold") {

    console.log("hold");

  } else if (currentPose == "spread") {

    console.log("spread");

  } else {

    console.log("floating");

  }

​

  let inputs = [

    indexX,

    indexY,

    thumbX,

    thumbY,

    middleX,

    middleY,

    ringX,

    ringY,

    pinkyX,

    pinkyY,

  ];

  brain.classify(inputs, gotResults);

  console.log(results[0].label);

}

​