p5.js Web Editor | kirby final

xxxxxxxxxx
let bg, bgleft_dp, bgleft_g;
let bgleft = 0;
let bgright = 0;
let moon, star, car, heart;
let mario;
let video;
let poseNet;
let poses = [];
let predictions = [];
let touched_moon = false;
let touched_moon1 = false;
let touched_moon2 = false;
let touched_star = false;
let touched_star1 = false;
let touched_star2 = false;
let touched_car = false;
let touched_car1 = false;
let touched_car2 = false;
let touched_heart = false;
let touched_heart1 = false;
let touched_heart2 = false;
let fallList = [moon, star, car, heart];
​
function setup() {
  let cnv = createCanvas(860, 860);
  cnv.mousePressed(userStartAudio);
  mic = new p5.AudioIn();
  mic.start();
  bg = loadImage("bg.png");
  bg1 = loadImage("bg1.png");
  bg_game = loadImage("bg_game.png");
  bgleft_lp = loadImage("bgleft_lp.png");
  bgleft_dp = loadImage("bgleft_dp.png");
  bgleft_g = loadImage("bgleft_g.png");
  bgleft_b = loadImage("bgleft_b.png");
  bgright_lp = loadImage("bgright_lp.png");
  bgright_dp = loadImage("bgright_dp.png");
  bgright_g = loadImage("bgright_g.png");
  bgright_b = loadImage("bgright_b.png");
  car = loadImage("car.png");
  car_gray = loadImage("car_gray.png");
  heart = loadImage("heart.png");
  heart_gray = loadImage("heart_gray.png");
  kirby = loadImage("kirby.png");
  kirby_car = loadImage("kirby_car.png");
  kirby_moon = loadImage("kirby_moon.png");
  kirby_normal = loadImage("kirby_normal.png");
  kirby_sad = loadImage("kirby_sad.png");
  kirby_star = loadImage("kirby_star.png");
  kirby_heart = loadImage("kirby_heart.png");
  mario = loadSound("mario.mp3");
  moon = loadImage("moon.png");
  moon_gray = loadImage("moon_gray.png");
  star = loadImage("star.png");
  star_gray = loadImage("star_gray.png");
  video = createCapture(VIDEO);
  fallMoon = new Fall(random(290, 580), 240, 0);
  fallStar = new Fall(random(290, 580), 240, 1);
  fallCar = new Fall(random(290, 580), 240, 2);
  fallHeart = new Fall(random(290, 580), 240, 3);
  fallList = [moon, star, car, heart];
  fallObject = [fallMoon, fallStar, fallCar, fallHeart];
  video.size(500, 320);
  poseNet = ml5.poseNet(video, poseNetModelReady);
  poseNet.on("pose", function (results) {
    poses = results;
  });
  body_keypoints_layer = createGraphics(width, height);
  faceTracker = new clm.tracker();
  faceTracker.init();
  faceTracker.start(video.elt);
  video.hide();
  background("#fef6df");
}
​
function draw() {
  background(220);
  image(bg, 0, 240, 860, 380);
  image(bg1,180,270,500,320);
  image(kirby_moon,300,280,100,80);
  image(kirby_normal, 420,285,100,70);
  image(kirby_car,545,285,100,70)
  image(kirby,535,385,120,110);
  image(kirby_sad,365,380,120,110);
  image(moon,570,510,70,70);
  changeBg();
  if (key === "1") {
    game();
  }
  if (key === "2") {
    selfie();
  }
}
​
function poseNetModelReady() {
  console.log("poseNet Model ready!");
  facemesh = ml5.facemesh(video, faceMeshModelReady);
  facemesh.on("predict", (results) => {
    predictions = results;
  });
}
​
function faceMeshModelReady() {
  console.log("faceMesh Model ready!");
}
​
function drawBodyKeypoints(k) {
  for (let i = 0; i < poses.length; i++) {
    let pose = poses[i].pose;
    for (let j = 0; j < pose.keypoints.length; j++) {
      let keypoint = pose.keypoints[j];
      let x = keypoint.position.x;
      let y = keypoint.position.y;
      if (keypoint.score > 0.2) {
        body_keypoints_layer.push();
        if (j == 9 || j == 10) {
          body_keypoints_layer.image(k, x + 100, y + 100, 100, 100);
        }
        body_keypoints_layer.pop();
      }
    }
  }
}
​
function changeBg() {
  if (bgleft % 4 == 0) {
    image(bgleft_lp, 0, 240, 160, 380);
  } else if (bgleft % 4 == 1) {
    image(bgleft_dp, 0, 240, 160, 380);
  } else if (bgleft % 4 == 2) {
    image(bgleft_g, 0, 240, 160, 380);
  } else if (bgleft % 4 == 3) {
    image(bgleft_b, 0, 240, 160, 380);
  }
  if (bgright % 4 == 0) {
    image(bgright_g, 700, 240, 160, 380);
  } else if (bgright % 4 == 1) {
    image(bgright_b, 700, 240, 160, 380);
  } else if (bgright % 4 == 2) {
    image(bgright_lp, 700, 240, 160, 380);
  } else if (bgright % 4 == 3) {
    image(bgright_dp, 700, 240, 160, 380);
  }
}
​
function modelReady() {
  console.log("Model ready!");
}
​
function selfie() {
  image(video, 180, 270, 500, 320);
  image(moon_gray, 200, 280, 50, 50);
  image(star_gray, 200, 340, 50, 50);
  image(car_gray, 200, 400, 50, 40);
  image(heart_gray, 200, 450, 50, 40);
  if (touched_moon1) {
    image(moon, 200, 280, 50, 50);
  }
  if (touched_star1) {
    image(star, 200, 340, 50, 50);
  }
  if (touched_car1) {
    image(car, 200, 400, 50, 40);
  }
  if (touched_heart1) {
    image(heart, 200, 450, 50, 40);
  }
  drawFilter();
  drawHand();
}
​
function drawHand() {
  checkPressed();
  if (touched_moon1 == true && touched_moon2 == true) {
    image(body_keypoints_layer, 180, 270, 500, 320);
    if (frameCount % 2 == 0) {
      body_keypoints_layer.clear();
    }
    drawBodyKeypoints(moon);
  }
  if (touched_star1 == true && touched_star2 == true){
    image(body_keypoints_layer, 180, 270, 500, 320);
    if (frameCount % 2 == 0) {
      body_keypoints_layer.clear();
    }
    drawBodyKeypoints(star);
  }
  if (touched_car1 == true && touched_car2 == true){
    image(body_keypoints_layer, 180, 270, 500, 320);
    if (frameCount % 2 == 0) {
      body_keypoints_layer.clear();
    }
    drawBodyKeypoints(car);
  }
  if (touched_heart1 == true && touched_heart2 == true){
    image(body_keypoints_layer, 180, 270, 500, 320);
    if (frameCount % 2 == 0) {
      body_keypoints_layer.clear();
    }
    drawBodyKeypoints(heart);
  }
}
​
function checkPressed() {
  if (
    mouseIsPressed &&
    mouseX > 150 &&
    mouseX < 250 &&
    mouseY > 280 &&
    mouseY < 330
  ) {
    touched_moon2 = true;
    touched_star2 = false;
    touched_car2 = false;
    touched_heart2 = false;
  }
  if (
    mouseIsPressed &&
    mouseX > 150 &&
    mouseX < 250 &&
    mouseY > 340 &&
    mouseY < 390
  ) {
    touched_star2 = true;
    touched_moon2 = false;
    touched_car2 = false;
    touched_heart2 = false;
  }
  if (
    mouseIsPressed &&
    mouseX > 150 &&
    mouseX < 250 &&
    mouseY > 400 &&
    mouseY < 440
  ) {
    touched_car2 = true;
    touched_moon2 = false;
    touched_star2 = false;
    touched_heart2 = false;
  }
  if (
    mouseIsPressed &&
    mouseX > 150 &&
    mouseX < 250 &&
    mouseY > 450 &&
    mouseY < 490
  ) {
    touched_heart2 = true;
    touched_moon2 = false;
    touched_star2 = false;
    touched_car2 = false;
  }
}
​
function drawFilter() {
  micLevel = mic.getLevel();
  checkPressed();
  const positions = faceTracker.getCurrentPosition();
  if (positions !== false) {
    if (positions.length >= 20) {
      push();
      translate(120, 170);
      if (
        !touched_moon2 &&
        !touched_star2 &&
        !touched_car2 &&
        !touched_heart2
      ) {
        image(
          kirby_normal,
          positions[20][0],
          positions[20][1],
          50 + 60 * micLevel,
          50 + 60 * micLevel
        );
      }
      if (touched_moon1 == true && touched_moon2 == true) {
        image(
          kirby_moon,
          positions[20][0],
          positions[20][1],
          50 + 60 * micLevel,
          50 + 60 * micLevel
        );
      }
      if (touched_star1 == true && touched_star2 == true) {
        image(
          kirby_star,
          positions[20][0],
          positions[20][1],
          50 + 60 * micLevel,
          50 + 60 * micLevel
        );
      }
      if (touched_car1 == true && touched_car2 == true) {
        image(
          kirby_car,
          positions[20][0],
          positions[20][1],
          50 + 60 * micLevel,
          50 + 60 * micLevel
        );
      }
      if (touched_heart1 == true && touched_heart2 == true) {
        image(
          kirby_heart,
          positions[20][0],
          positions[20][1],
          50 + 60 * micLevel,
          50 + 60 * micLevel
        );
      }
      pop();
    }
​
    if (positions.length >= 16) {
      push();
      translate(160, 170);
      if (
        !touched_moon2 &&
        !touched_star2 &&
        !touched_car2 &&
        !touched_heart2
      ) {
        image(
          kirby_normal,
          positions[16][0],
          positions[16][1],
          50 + 60 * micLevel,
          50 + 60 * micLevel
        );
      }
      if (touched_moon1 == true && touched_moon2 == true) {
        image(
          kirby_moon,
          positions[16][0],
          positions[16][1],
          50 + 60 * micLevel,
          50 + 60 * micLevel
        );
      }
      if (touched_star1 == true && touched_star2 == true) {
        image(
          kirby_star,
          positions[16][0],
          positions[16][1],
          50 + 60 * micLevel,
          50 + 60 * micLevel
        );
      }
      if (touched_car1 == true && touched_car2 == true) {
        image(
          kirby_car,
          positions[16][0],
          positions[16][1],
          50 + 60 * micLevel,
          50 + 60 * micLevel
        );
      }
      if (touched_heart1 == true && touched_heart2 == true) {
        image(
          kirby_heart,
          positions[16][0],
          positions[16][1],
          50 + 60 * micLevel,
          50 + 60 * micLevel
        );
      }
      pop();
    }
  }
}
​
class Fall {
  constructor(x, y, i) {
    this.x = x;
    this.y = y;
    this.i = i;
  }
  draw() {
    image(fallList[this.i], this.x, this.y, 80, 70);
  }
  move() {
    this.y = this.y + 3;
  }
}
​
function game() {
  image(bg_game, 180, 270, 500, 320);
  image(moon_gray, 200, 280, 50, 50);
  image(star_gray, 200, 340, 50, 50);
  image(car_gray, 200, 400, 50, 40);
  image(heart_gray, 200, 450, 50, 40);
  if (
    !touched_moon &&
    !touched_star &&
    !touched_car &&
    !touched_heart &&
    mouseX > 180 &&
    mouseX < 600
  ) {
    image(kirby, mouseX, 480, 80, 80);
  }
  fall();
  catchObj();
  if (touched_moon) {
    image(kirby_moon, mouseX, 480, 80, 80);
  }
  if (touched_star) {
    image(kirby_star, mouseX, 480, 80, 80);
  }
  if (touched_car) {
    image(kirby_car, mouseX, 500, 80, 60);
  }
  if (touched_heart) {
    image(kirby_heart, mouseX, 500, 80, 60);
  }
  if (touched_moon1) {
    image(moon, 200, 280, 50, 50);
  }
  if (touched_star1) {
    image(star, 200, 340, 50, 50);
  }
  if (touched_car1) {
    image(car, 200, 400, 50, 40);
  }
  if (touched_heart1) {
    image(heart, 200, 450, 50, 40);
  }
}
​
function fall() {
  if (fallMoon.y < 460) {
    fallMoon.move();
    fallMoon.draw();
  } else {
    if (fallStar.y < 460) {
      fallStar.move();
      fallStar.draw();
    } else {
      if (fallCar.y < 460) {
        fallCar.move();
        fallCar.draw();
      } else {
        if (fallHeart.y < 460) {
          fallHeart.move();
          fallHeart.draw();
        }
      }
    }
  }
}
​
function catchObj() {
  if (
    fallMoon.y < 460 &&
    fallMoon.y > 400 &&
    mouseX > fallMoon.x - 50 &&
    mouseX < fallMoon.x + 50
  ) {
    touched_moon = true;
    touched_moon1 = true;
    touched_star = false;
    touched_car = false;
    touched_heart = false;
  }
  if (
    fallStar.y < 460 &&
    fallStar.y > 400 &&
    mouseX > fallStar.x - 50 &&
    mouseX < fallStar.x + 50
  ) {
    touched_star = true;
    touched_star1 = true;
    touched_moon = false;
    touched_car = false;
    touched_heart = false;
  }
  if (
    fallCar.y < 460 &&
    fallCar.y > 400 &&
    mouseX > fallCar.x - 50 &&
    mouseX < fallCar.x + 50
  ) {
    touched_car = true;
    touched_car1 = true;
    touched_moon = false;
    touched_star = false;
    touched_heart = false;
  }
  if (
    fallHeart.y < 460 &&
    fallHeart.y > 400 &&
    mouseX > fallHeart.x - 50 &&
    mouseX < fallHeart.x + 50
  ) {
    touched_heart = true;
    touched_heart1 = true;
    touched_moon = false;
    touched_star = false;
    touched_car = false;
  }
}
​
function mousePressed() {
  if (mouseX < 150 && mouseY > 240 && mouseY < 610) {
    bgleft += 1;
  } else if (mouseX > 700 && mouseY > 240 && mouseY < 610) {
    bgright += 1;
  }
}
​
Cookies

Sketch Files

Console

Preview
