let video;

let poseNet;

let pose;

let mySound;

let colorR, colorB, colorG;

​

function preload(){

  bat = loadImage("bat1.png");

}

​

// The setup function is called once at the beginning of the sketch.

function setup() {

  // Create a canvas of size 640x480 pixels.

  createCanvas(640, 480);

  // Access the user's webcam. The VIDEO argument specifies that we want video input.

  video = createCapture(VIDEO);

  // Hide the default video element to only display our canvas.

  video.hide();

  // Initialize the PoseNet model with the video as input and specify a callback (modelLoaded) for when the model is loaded and ready.

  poseNet = ml5.poseNet(video, modelLoaded);

  // Set up an event listener for when poses are detected. When detected, the gotPoses function is called.

  poseNet.on("pose", gotPoses);

}

​

// This function is called whenever PoseNet detects poses.

function gotPoses(poses) {

  // Log the detected poses to the console.

  //console.log(poses);

  // If at least one pose is detected, store the first pose in the pose variable.

  if (poses.length > 0) {

    pose = poses[0].pose;

  }

}

​

// This function is called when the PoseNet model is fully loaded and ready to use.

function modelLoaded() {

  console.log("poseNet ready");

}

​

// The draw function is called continuously, allowing for animation and continuous updates.

function draw() {

  // Display the video feed at the top-left corner of the canvas.

  image(video, 0, 0);

  background(bat);

  // If a pose has been detected...

  if (pose) {

    colorR = random(0, 255);

    colorG = map(pose.nose.x, 200, 20, 0, 180);

    colorB = random(0, 255);

    fill(colorR, colorG, colorB);

    frameRate(16);

    stroke("black");

    strokeWeight(8);

​

    //Cat Ear

    triangle(

      pose.rightEye.x,

      pose.rightEye.y - 80,

      pose.rightEye.x - 50,

      pose.rightEye.y - 50,

      pose.rightEye.x - 50,

      pose.rightEye.y - 110

    );

    triangle(

      pose.leftEye.x,

      pose.leftEye.y - 80,

      pose.leftEye.x + 50,

      pose.leftEye.y - 50,

      pose.leftEye.x + 50,

      pose.leftEye.y - 110

    );

​

    //Cat Nose

    line(pose.nose.x - 65, pose.nose.y, pose.nose.x + 65, pose.nose.y);

    line(

      pose.nose.x - 55,

      pose.nose.y - 30,

      pose.nose.x + 55,

      pose.nose.y + 30

    );

    line(

      pose.nose.x - 55,

      pose.nose.y + 30,

      pose.nose.x + 55,

      pose.nose.y - 30

    );

​

    // Draw an ellipse at the position of the nose.

    triangle(

      pose.nose.x,

      pose.nose.y + 25,

      pose.nose.x - 25,

      pose.nose.y - 15,

      pose.nose.x + 25,

      pose.nose.y - 15

    );

​

    // Draw a cat paw at the position the wrist.

    ellipse(pose.leftWrist.x, pose.leftWrist.y - 100, 150, 180);

    ellipse(pose.rightWrist.x, pose.rightWrist.y - 100, 150, 180);

    //teeth

    fill("white");

    triangle(

      pose.nose.x,

      pose.nose.y + 40,

      pose.nose.x - 20,

      pose.nose.y + 40,

      pose.nose.x - 10,

      pose.nose.y + 70

    );

    triangle(

      pose.nose.x,

      pose.nose.y + 40,

      pose.nose.x + 20,

      pose.nose.y + 40,

      pose.nose.x + 10,

      pose.nose.y + 70

    );

    //skeleton

    stroke("white");

    strokeWeight(16);

    line(pose.leftWrist.x, pose.leftWrist.y, pose.leftElbow.x, pose.leftElbow.y);

    line(pose.rightWrist.x, pose.rightWrist.y, pose.rightElbow.x, pose.rightElbow.y);

    ellipse(pose.leftWrist.x, pose.leftWrist.y, 40, 20);

    ellipse(pose.leftElbow.x, pose.leftElbow.y, 40, 20);

    ellipse(pose.rightWrist.x, pose.rightWrist.y, 40, 20);

    ellipse(pose.rightElbow.x, pose.rightElbow.y, 40, 20);

    line(pose.rightShoulder.x, pose.rightShoulder.y, pose.rightElbow.x, pose.rightElbow.y);

    line(pose.leftShoulder.x, pose.leftShoulder.y, pose.leftElbow.x, pose.leftElbow.y);

    ellipse(pose.leftShoulder.x, pose.leftShoulder.y, 50, 30);

    ellipse(pose.rightShoulder.x, pose.rightShoulder.y, 50, 30);

    line(pose.leftShoulder.x, pose.leftShoulder.y, pose.rightShoulder.x, pose.rightShoulder.y);

​

    // Draw the left toes

    fill("black");

    noStroke();

    ellipse(pose.leftWrist.x - 40, pose.leftWrist.y - 110, 30, 50);

    ellipse(pose.leftWrist.x - 15, pose.leftWrist.y - 140, 30, 50);

    ellipse(pose.leftWrist.x + 15, pose.leftWrist.y - 140, 30, 50);

    ellipse(pose.leftWrist.x + 40, pose.leftWrist.y - 110, 30, 50);

    ellipse(pose.leftWrist.x, pose.leftWrist.y - 70, 80, 50);

​

    // Draw the right toes

    fill("black");

    noStroke();

    ellipse(pose.rightWrist.x - 40, pose.rightWrist.y - 110, 30, 50);

    ellipse(pose.rightWrist.x - 15, pose.rightWrist.y - 140, 30, 50);

    ellipse(pose.rightWrist.x + 15, pose.rightWrist.y - 140, 30, 50);

    ellipse(pose.rightWrist.x + 40, pose.rightWrist.y - 110, 30, 50);

    ellipse(pose.rightWrist.x, pose.rightWrist.y - 70, 80, 50);

  }

}

​