let video;

let predictions = [];

let poseNet;

let poses = [];

let margin = 50;

let startscene = true;

let scene = false;

let i = 0;

let j = 360;

let titleC = ['#EC9EC0','#EBE0D0'];

let colors = ['#E34A6F', '#9CD08F', '#FFD5C2', '#F28F3B'];

let pinks = ['#f699cd','#fc94af','#fc46aa','#f25278','#fe7f9c','#fda4ba','#f26b8a','#fdab9f','#fe7d6a','#fc9483','#fc4c4e','#fcbacb','#fa86c4','#fd5da8','#f79ac0','#f2b8c6','#e11584','#ff1694'];

let yellows = ['#fffae5', '#fff6cc', '#fff2b2', "#ffee99", '#ffe14c', '#ffea00', '#ffdd32', '#ffd800', '#ffd400', '#ffd700', '#ffd000', '#ffd400', '#ffb100', '#ffe302', '#ffe135', '#fbec5d', '#f8dc75'];

​

​

function setup() {

  createCanvas(800, 600);

  video = createCapture(VIDEO);

  video.size(640, 480);

​

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

  poseNet = ml5.poseNet(video, poseNetModelReady);

  poseNet.on("pose", function (results) {

          poses = results;

        });

  facemesh_layer = createGraphics(width, height); 

  body_keypoints_layer = createGraphics(width, height);

        skeleton_layer = createGraphics(width, height);

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

  //});

​

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

  video.hide();

  createCanvas(800, 600);

  angleMode(DEGREES)

  noCursor();

  mic = new p5.AudioIn();

  mic.start();

​

}

​

function poseNetModelReady() {

        console.log("poseNet Model ready!");

        facemesh = ml5.facemesh(video, faceMeshModelReady);

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

          predictions = results;

        });

      }

​

​

function faceMeshModelReady() {

  console.log("Model ready!");

}

​

function preload(){

  elsieb = loadFont("elsieb.ttf");

  heartimg = loadImage("heart3.png");

  ribbonimg = loadImage("ribbon2.png");

  lipsimg = loadImage("lips.png");

  kirakira = loadSound("soundeffect.mp3");

  sailormoon = loadImage("sailormoon.jpg");

  cc = loadImage("ccsakura.jpg");

  wand = loadImage("wand.png");

  righteye = loadImage("righteye.png");

  lefteye = loadImage("lefteye.png");

}

​

function draw() {

  if (startscene == true){

    push();

    //frameRate(10);

    //let randomc = Math.floor(Math.random() * titleC.length);

    if (frameCount % 10 == 0){

      background('#EC9EC0');

    }

    else{

       background('#EBE0D0');

    }

    textAlign(CENTER,CENTER);

    fill('#FF0080');

    textSize(46);

    textFont(elsieb);

    text("Choose your gender: ", width/2, height/2);

    textSize(16);

    text("press M or F or O to start", width/2, height/2 + 48);

    pop();

    push();

    frameRate(60);

    translate(550,500)

    rotate(j);

    scale(0.2);

    image(heartimg,0,0);

    pop();

    push();

    //frameRate(60);

    scale(0.2);

    translate(100,70);

    rotate(i+35);

    image(heartimg,0,0);

    pop();

    //imageMode(CENTER);

    //image(cc, random(width), random(height),50,68);

    //image(sailormoon, random(width), random(height),75,58.5);

    i += 1;

    j -= 1;

  }

  else{

    push();

    background('#FF0080');

    //print("enter scene");

    //image(skeleton_layer, 0, 0, width, height);

    //image(body_keypoints_layer, 0, 0, width, height);

    image(video, 0, 0, width, height);

    drawKeypoints();

    drawBodyKeypoints();

    drawSkeleton();

    fill('#EBE0D0');

    textSize(16);

    textFont(elsieb);

    text("press b for bubbles, h for hearts, s for stars", 20, 40);

    image(wand,mouseX,mouseY, 50, 186);

    if (key == "b"){

    //print('bubble');

    bubble();

  }

  else if (key == "h"){

    //print('heart');

    manyhearts();

  }

  else if (key == "s"){

    manyStars();

  }

  else if(key == "n"){

  }

    pop();

  }

}

​

function drawBodyKeypoints() {

        // Loop through all the poses detected

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

          // For each pose detected, loop through all the keypoints

          let pose = poses[i].pose;

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

            // A keypoint is an object describing a body part (like rightArm or leftShoulder)

            let keypoint = pose.keypoints[j];

            let x = keypoint.position.x;

            let y = keypoint.position.y;

            // Only draw an ellipse is the pose probability is bigger than 0.2

           if (keypoint.score > 0.2) {

              push();

              noStroke();

              circle(x, y, 20);

              textAlign(CENTER, CENTER);

              text(j, x, y);

              //if (j == 1 || j == 2) {

              //  body_keypoints_layer.textSize(42);

              //  body_keypoints_layer.text("👁️", x, y);

              //} else if (j == 9 || j == 10) {

              //  body_keypoints_layer.textSize(84);

              //  body_keypoints_layer.text("🔥", x, y);

              //}

              pop();

            }

          }

        }

      }

function drawSkeleton() {

        // Loop through all the skeletons detected

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

          let skeleton = poses[i].skeleton;

          // For every skeleton, loop through all body connections

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

            let partA = skeleton[j][0];

            let partB = skeleton[j][1];

            push();

            strokeWeight(10);

            stroke("DodgerBlue");

            line(

              partA.position.x,

              partA.position.y,

              partB.position.x,

              partB.position.y

            );

            pop();

          }

        }

      }

​

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

      pop();

      if (j == 10){

        imageMode(CENTER);

        image(ribbonimg, x, y)

        //text("Ribbon", x, y);

      }

      else if (j == 13){

        push();

        //scale(0.2);

        imageMode(CENTER);

        image(lipsimg, x, y, 50, 25);

        pop();

      }

      else if (j == 466){

        push();

        //scale(0.2);

        imageMode(CENTER);

        image(righteye, x, y, 240, 150);

        pop();       

               }

      else if (j == 246){

         push();

        //scale(0.2);

        imageMode(CENTER);

        image(lefteye, x, y, 240, 150);

        pop();           

               }

      else{

         push();

        noStroke();

      fill(map(mouseY, 0, height, 10, 255), map(mouseY, 0, height, 255,10), 40);

       //circle(x, y, 5);

         pop();

      }

    }

  }

​

}

​

function heart(x, y, size) {

  beginShape();

  vertex(x, y);

  bezierVertex(x - size / 2, y - size / 2, x - size, y + size / 3, x, y + size);

  bezierVertex(x + size, y + size / 3, x + size / 2, y - size / 2, x, y);

  endShape(CLOSE);

}

​

function star(x, y, radius1, radius2, npoints) {

  angleMode(RADIANS);

  let angle = TWO_PI / npoints;

  let halfAngle = angle / 2.0;

  beginShape();

  for (let a = 0; a < TWO_PI; a += angle) {

    let sx = x + cos(a) * radius2;

    let sy = y + sin(a) * radius2;

    vertex(sx, sy);

    sx = x + cos(a + halfAngle) * radius1;

    sy = y + sin(a + halfAngle) * radius1;

    vertex(sx, sy);

  }

  endShape(CLOSE);

}

​

​

function bubble(){

  push();

  //frameRate(10);

  let numBubble = random(20, 50);

  for (let i = 0; i< numBubble;i+=1){

    //fill(colors[random(0,3)]);

    let randomc = Math.floor(Math.random() * colors.length);

    noStroke();

    //print(colors[randomc]);

    fill(colors[randomc]);

    circle(random(0,width), random(0,height), random(10,50));

  }

  pop();

}

​

function manyhearts(){

  let num = random(20, 50);

  for (let i = 0 ; i < num; i += 1){

    let randomc = Math.floor(Math.random() * pinks.length);

    fill(pinks[randomc]);

    noStroke();

    heart(random(0, width), random(0,height), random(10,50));

  }

}

​

function manyStars(){

  let num = random(5, 30);

  for (let i = 0 ; i < num; i += 1){

    let randomc = Math.floor(Math.random() * pinks.length);

    fill(pinks[randomc]);

    noStroke();

    star(random(0, width), random(0,height), random(10,20), random(10,20), 5);

  }

}

​

function keyPressed(){

  if (key == "m" || key == "f" || key == "o"){

    kirakira.play();

    scene = true;

    startscene = false;

  }

  else if(key == 'b' || key == 'h' || key == 's'){

          kirakira.play();

          }

}