let video;

let mic;

let wand;

let kirby, kirby2, kirby3, kirby4, kirby5, kirby6, kirby7, kirby8, kirby9;

let star, star2, star3;

let ministar1, ministar2;

let mushroom;

let watermelon;

let kirby_status = kirby2;

let predictions = [];

let margin = 200;

let a = 122;

let b = 201;

let c = 166;

let q = 0;

let bg = false;

let fg = 0;

let wandx = 20;

let wandy = 50;

let isMovingLeft = false;

let isMovingRight = false;

let isMovingUp = false;

let isMovingDown = false;

let status = 0;

​

function setup() {

  let cnv = createCanvas(1040, 880);

  cnv.mousePressed(userStartAudio);

  mic = new p5.AudioIn();

  mic.start();

  wand = loadImage("wand.png");

  kirby = loadImage("kirby.png");

  kirby2 = loadImage("kirby2.png");

  kirby3 = loadImage("kirby3.png");

  kirby4 = loadImage("kirby4.png");

  kirby5 = loadImage("kirby5.png");

  kirby6 = loadImage("kirby6.png");

  kirby7 = loadImage("kirby7.png");

  kirby8 = loadImage("kirby8.png");

  kirby9 = loadImage("kirby9.png");

  star = loadImage("star.png");

  star2 = loadImage("star2.png");

  star3 = loadImage("star3.png");

  mushroom = loadImage("mushroom.png");

  watermelon = loadImage("watermelon.png");

  ministar1 = loadImage("ministar1.png");

  ministar2 = loadImage("ministar2.png");

  video = createCapture(VIDEO);

  video.size(640, 480);

​

  //facemesh = ml5.facemesh(video, modelReady);

​

  // This sets up an event that fills the global variable "predictions"

  // with an array every time new predictions are made

  //facemesh.on("predict", (results) => {

  //predictions = results;

  //});

​

  faceTracker = new clm.tracker();

  faceTracker.init();

  faceTracker.start(video.elt);

​

  // Hide the video element, and just show the canvas

  video.hide();

  background(a, b, c);

}

​

function mousePressed() {

  if (a == 122) {

    a = 87;

    b = 98;

    c = 138;

  } else if (a == 87) {

    a = 122;

    b = 201;

    c = 166;

  }

  if (bg == false) {

    bg = true;

  } else if (bg == true) {

    bg = false;

  }

}

​

function handleKeys() {

  if (isMovingUp) {

    wandy -= 3;

  }

  if (isMovingDown) {

    wandy += 3;

  }

  if (isMovingLeft) {

    wandx -= 3;

  }

  if (isMovingRight) {

    wandx += 3;

  }

}

​

function keyPressed() {

  if (key === "w") {

    isMovingUp = true;

  }

  if (key === "s") {

    isMovingDown = true;

  }

  if (key === "a") {

    isMovingLeft = true;

  }

  if (key === "d") {

    isMovingRight = true;

  }

  if (key === "q") {

    fg += 1;

  }

}

​

function keyReleased() {

  if (key === "w") {

    isMovingUp = false;

  }

  if (key === "s") {

    isMovingDown = false;

  }

  if (key === "a") {

    isMovingLeft = false;

  }

  if (key === "d") {

    isMovingRight = false;

  }

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  drawBackground();

  image(video, margin, margin, 640, 480);

  // We can call both functions to draw all keypoints

  //drawForeground();

  drawFilter();

  drawKeypoints();

  moveBackground();

  micDetect();

}

​

function micDetect() {

  micLevel = mic.getLevel();

  image(ministar1, 550, 80, 50 + 200 * micLevel, 50 + 200 * micLevel);

  image(ministar1, 50, 600, 50 + 200 * micLevel, 50 + 200 * micLevel);

  image(ministar1, 950, 400, 50 + 200 * micLevel, 50 + 200 * micLevel);

  image(ministar2, 100, 350, 50 + 200 * micLevel, 50 + 200 * micLevel);

  image(ministar2, 900, 50, 50 + 200 * micLevel, 50 + 200 * micLevel);

  image(ministar2, 300, 750, 50 + 200 * micLevel, 50 + 200 * micLevel);

}

​

function moveBackground() {

  handleKeys();

}

​

function wandStatus() {

  if (wandx >= 460 && wandx <= 510 && wandy >= 0 && wandy <= 40) {

    status = 1;

  }

  if (wandx >= -50 && wandx <= 50 && wandy >= 510 && wandy <= 560) {

    status = 1;

  }

  if (wandx >= 800 && wandx <= 910 && wandy >= 310 && wandy <= 360) {

    status = 1;

  }

  if (wandx >= 0 && wandx <= 100 && wandy >= 200 && wandy <= 350) {

    status = 2;

  }

  if (wandx >= 800 && wandx <= 900 && wandy >= 0 && wandy <= 50) {

    status = 2;

  }

  if (wandx >= 200 && wandx <= 300 && wandy >= 600 && wandy <= 750) {

    status = 2;

  }

  return status;

}

​

function drawForeground() {

  if (mouseX > 200 && mouseX < 840 && mouseY > 200 && mouseY < 680) {

    if (fg % 3 == 0) {

      image(star, mouseX - 70, mouseY - 65, 140, 130);

    }

    if (fg % 3 == 1) {

      image(mushroom, mouseX - 65, mouseY - 65, 130, 130);

    }

    if (fg % 3 == 2) {

      image(watermelon, mouseX - 65, mouseY - 65, 130, 130);

    }

  }

}

​

function drawFilter() {

  const positions = faceTracker.getCurrentPosition();

  if (positions !== false) {

    if (positions.length >= 20) {

      push();

      translate(80, 80);

      if (wandStatus() == 0) {

        image(star, positions[20][0], positions[20][1], 100, 90);

      }

      if (wandStatus() == 1) {

        image(star3, positions[20][0], positions[20][1], 100, 90);

      }

      if (wandStatus() == 2) {

        image(star2, positions[20][0], positions[20][1], 100, 90);

      }

      pop();

    }

​

    if (positions.length >= 16) {

      push();

      translate(210, 80);

      if (wandStatus() == 0) {

        image(star, positions[16][0], positions[16][1], 100, 90);

      }

      if (wandStatus() == 1) {

        image(star3, positions[16][0], positions[16][1], 100, 90);

      }

      if (wandStatus() == 2) {

        image(star2, positions[16][0], positions[16][1], 100, 90);

      }

      pop();

    }

​

    if (positions.length >= 62) {

      push();

      translate(145, -50); // Offset adjustment

      image(kirby9, positions[62][0], positions[62][1], 110, 100);

      pop();

    }

​

    //if (positions.length >= 23) {

    //push();

    //translate(0, 0); // Offset adjustment

    //image(star, positions[23][0], positions[23][1], 140,130);

    //pop();

    //}

  }

}

​

function drawBackground() {

  background(a, b, c);

  noStroke();

  handleKeys();

  image(wand, wandx, wandy, 180, 180);

  image(kirby, 620, 700, 180, 170);

  image(kirby2, 840, 700, 180, 170);

}

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

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

    const keypoints = predictions[i].scaledMesh;

​

    // Draw facial keypoints.

    for (let j = 0; j < keypoints.length; j += 1) {

      const [x, y] = keypoints[j];

      push();

      translate(margin, margin);

      if (bg == false) {

        fill(239, 198, 180);

        square(x, y, 3);

      } else {

        fill("#fff3dd");

        square(x, y, 3);

      }

      pop();

    }

  }

}

​