const URL2 = 'https://teachablemachine.withgoogle.com/models/0RfdfBN5r/'

const TREEMODEL = 'https://teachablemachine.withgoogle.com/models/FinX7c8bu/'

const github = 'https://teachablemachine.withgoogle.com/models/FinX7c8bu/'

const DANCEURL = 'https://teachablemachine.withgoogle.com/models/8flYNtTo1/'

​

const modelURL = DANCEURL;

// the json file (model topology) has a reference to the bin file (model weights)

const checkpointURL = modelURL + "model.json";

// the metatadata json file contains the text labels of your model and additional information

const metadataURL = modelURL + "metadata.json";

​

const angle = 1.57079632679;

const size = 500;

const flip = true; // whether to flip the webcam

let webcam;

let model;

let totalClasses;

let myCanvas;

let ctx;

let MediaTrackConstraints = {

  frameRate: 15

};

​

let desiredpose;

let timer = 45;

let nicetimer = 10;

let nice = false;

​

​

//let extraLayer;

let imgone;

let imgtwo;

let imgthree;

let overlayimage;

let noseX=0;

let noseY=0;

​

var song;

​

//pose sequence

var sequence = [];

let seqpos = 0;

let writepos = 0;

let buty = 125;

let buty2 = buty+55;

let windy = buty2+110;

let slidy = windy+size+20;

let imgcolor = "blue";

var nextpOse;

var updateTime;

var on = false;

let printstring;

let trans121,trans122,trans123,trans124,trans125,trans126,trans127,trans128,trans129,trans131,trans132,trans133,trans134,trans135,trans136,trans137,trans138,trans139,trans211,trans212,trans213,trans214,trans215,trans216,trans217,trans218,trans219,trans231,trans232,trans233,trans234,trans235,trans236,trans237,trans238,trans239,trans311,trans312,trans313,trans314,trans315,trans316,trans317,trans318,trans319,trans321,trans322,trans323,trans324,trans325,trans326,trans327,trans328,trans329;

let changepose=false;

let transname;

let changeframe=1;

let prevpose;

let i;

​

//accuracy

let totalcount = 1;

let goodcount = 1;

let stopseq = false;

​

​

​

// A function that loads the model from the checkpoint

async function load() {

  model = await tmPose.load(checkpointURL, metadataURL);

  totalClasses = model.getTotalClasses();

  console.log("Number of classes, ", totalClasses);

}

​

async function loadWebcam() {

  webcam = new tmPose.Webcam(size, size, flip); // can change width and height

  await webcam.setup(MediaTrackConstraints); 

  await webcam.play();

  window.requestAnimationFrame(loopWebcam);

}

​

async function setup() {

  myCanvas = createCanvas(size, size);

  //var x = (windowWidth - width) / 2;

  //var y = (windowHeight - height) / 2;

  myCanvas.position(0,windy);

  ctx = myCanvas.elt.getContext("2d");

  imgone= loadImage('poses/pose1.png');

  imgtwo=loadImage('poses/pose2.png');

  imgthree=loadImage('poses/pose3.png');

  loadImages();

  //preload sound

  song=loadSound("hiphop.mp3");

  slider=createSlider(0,100,30);

  slider.position(20, slidy);

  slider.size(size);

  //create buttons for choreography assembly

  button1 = createButton('add pose 1');

  button1.position(20, buty);

  button1.mousePressed(addPoseOne);

  button2 = createButton('add pose 2');

  button2.position(120, buty);

  button2.mousePressed(addPoseTwo);

  button3 = createButton('add pose 3');

  button3.position(220, buty);

  button3.mousePressed(addPoseThree);

  button4 = createButton('remove pose');

  button4.position(320, buty);

  button4.mousePressed(removePose);

  button5 = createButton('START SEQUENCE');

  button5.position(20, buty2);

  button5.mousePressed(startSequence);

  button6 = createButton('STOP SEQUENCE');

  button6.position(220, buty2);

  button6.mousePressed(stopSequence);

  // Call the load function, wait until it finishes loading

  await load();

  await loadWebcam();

}

​

async function loadImages(){

  for (i = 1; i < 10; i++) {

    window["trans12" + i] = loadImage('poses/12trans/12trans00' + i + '.png');} 

  for (i = 1; i < 10; i++) {

    window["trans13" + i] = loadImage('poses/13trans/13trans00' + i + '.png');} 

  for (i = 1; i < 10; i++) {

    window["trans21" + i] = loadImage('poses/21trans/21trans00' + i + '.png');} 

  for (i = 1; i < 10; i++) {

    window["trans23" + i] = loadImage('poses/23trans/23trans00' + i + '.png');} 

  for (i = 1; i < 10; i++) {

    window["trans31" + i] = loadImage('poses/31trans/31trans00' + i + '.png');} 

  for (i = 1; i < 10; i++) {

    window["trans32" + i] = loadImage('poses/32trans/32trans00' + i + '.png');} 

}

​

​

async function loopWebcam(timestamp) {

  webcam.update(); // update the webcam frame

  await predict();

  window.requestAnimationFrame(loopWebcam);

}

​

async function predict() {

  // Prediction #1: run input through posenet

  // predict can take in an image, video or canvas html element

  const flipHorizontal = false;

  const { pose, posenetOutput } = await model.estimatePose(

    webcam.canvas,

    flipHorizontal

  );

  // Prediction 2: run input through teachable machine assification model

  const prediction = await model.predict(

    posenetOutput,

    flipHorizontal,

    totalClasses

  );

​

  // Sort prediction array by probability

  // So the first classname will have the highest probability

  const sortedPrediction = prediction.sort((a, b) => - a.probability + b.probability);

​

  // Show the result

  const res = select('#res'); // select <span id="res">

  res.html(sortedPrediction[0].className);

​

  // Show the probability

  const prob = select('#prob'); // select <span id="prob">

  prob.html(Math.round(sortedPrediction[0].probability.toFixed(2) * 100));

  // draw the keypoints and skeleton and silhouette

  if (pose) {

    drawPose(pose);

    if(on){

    LearX=pose.keypoints[3].position.x;

    LearY=pose.keypoints[3].position.y;

    RearX=pose.keypoints[4].position.x;

    RearY=pose.keypoints[4].position.y;

    d = sqrt( sq(RearX-LearX) + sq(RearY-LearY));

    imgscale= d/30

    noseX=pose.keypoints[0].position.x;

    noseY=pose.keypoints[0].position.y;

    if(imgcolor=="blue"){

         tint(0, 153, 204, 126); // Display at half opacity

       }

    else if(imgcolor=="green"){

      tint(0,255,100,126);

    }

    if(changepose){

      if(changeframe<10){

        image(window[transname+changeframe],noseX-250*imgscale,noseY-125*imgscale,window[transname+changeframe].width * imgscale,window[transname+changeframe].height * imgscale);

        changeframe++;

        if(changeframe == 9){

          changepose=false;

          changeframe=1;

        }

      }

    }  

    else{  

      image(overlayimage,noseX-250*imgscale,noseY-125*imgscale,overlayimage.width * imgscale,overlayimage.height * imgscale);

    }

  }

  // Show the accuracy

  const prob = select('#acc'); // select <span id="acc">

  prob.html(Math.round(goodcount/totalcount * 10000)/100);

  }

  // POSE CHECKER

  if(on){

    const despos = select('#despos'); // select <span id="res">

    textSize(32);

    fill(255,255,255);

    text(timer, 10, 30);

    if (desiredpose == sortedPrediction[0].className){    

      //text('Nice!', 100, 30);

      //imgcolor = "green";

      if(timer<4){

        goodcount++;

      }

    }

    else{

      imgcolor = "blue";

    }

    if(timer<4){

      totalcount++;

    }

  }

  if(stopseq){

    textSize(64);

    fill(255,255,255);

    text('FINAL SCORE:', 30, 150);

    text(Math.round(goodcount/totalcount * 10000)/100 + '%', size/2-80, 230);

    if(goodcount/totalcount>0.4){

      text('VERY GOOD', 70, 310);

    }

    else if(goodcount/totalcount>0.1){

      text('NOT BAD', 70, 310);

    }

    else if(goodcount/totalcount>0.05){

      text('NOT GOOD', 70, 310);

    }

    else{

      text('ATROCIOUS', 70, 310);

    }

  }

  song.setVolume(slider.value() / 300);

}

​

function updateImg(){

  if (desiredpose == 'Pose 1' && prevpose == 'Pose 1'){

            overlayimage = imgone;

          }

  else if (desiredpose == 'Pose 1' && prevpose == 'Pose 2'){

            overlayimage = imgone;

            changepose = true;

            transname = 'trans21';

          }

  else if (desiredpose == 'Pose 1' && prevpose == 'Pose 3'){

            overlayimage = imgone;

            changepose = true;

            transname = 'trans31';

          }

  else if (desiredpose == 'Pose 2' && prevpose == 'Pose 2'){

            overlayimage = imgtwo;

          }

  else if (desiredpose == 'Pose 2' && prevpose == 'Pose 1'){

            overlayimage = imgtwo;

            changepose = true;

            transname = 'trans12';

          }

  else if (desiredpose == 'Pose 2' && prevpose == 'Pose 3'){

            overlayimage = imgtwo;

            changepose = true;

            transname = 'trans32';

          }

  else if (desiredpose == 'Pose 3' && prevpose == 'Pose 3'){

            overlayimage = imgthree;

          }

  else if (desiredpose == 'Pose 3' && prevpose == 'Pose 1'){

            overlayimage = imgthree;

            changepose = true;

            transname = 'trans13';

          }

  else if (desiredpose == 'Pose 3' && prevpose == 'Pose 2'){

            overlayimage = imgthree;

            changepose = true;

            transname = 'trans23';

          }

}

​

function addPoseOne(){

  sequence.push('Pose 1');

  updateSeq();

}

​

function addPoseTwo(){

  sequence.push('Pose 2');

  updateSeq();

}

​

function addPoseThree(){

  sequence.push('Pose 3');

  updateSeq();

}

​

function removePose(){

  sequence.splice(sequence.length-1);

  updateSeq();

}

​

function stopSequence(){

  song.stop();

  on=false;

  stopseq=true;

}

​

function startSequence(){

  if(sequence.length !== 0){

  on = true;

  stopseq = false;

  clearTimeout(nextpOse);

  clearInterval(updateTime);

  timer = 5;

  seqpos = 0;

  desiredpose = sequence[seqpos];

  prevpose = desiredpose;

  updateSeq();

  updateImg();

  song.stop();

  song.play();

  nextpOse = setTimeout(nextPose, 5000);

  updateTime = setInterval(updateTimer,1000);

  }

  else{

    textSize(32);

    fill(255,255,255);

    text('please add a pose', 10, 30);

  }

}

​

function nextPose(){

  clearInterval(updateTime);

  timer = 5;

  seqpos++; 

  if(seqpos==sequence.length){

    stopSequence();

  }

  prevpose = desiredpose;

  desiredpose = sequence[seqpos];

  updateSeq();

  updateImg();

  nextpOse = setTimeout(nextPose, 5000);

  updateTime = setInterval(updateTimer,1000);

}

​

function updateTimer(){

  timer--;

}

​

function updateSeq(){

  printstring = '';

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

    if(i==seqpos){      

      printstring += "<b>" + sequence[i] + "</b> - ";

    }

    else{

      printstring += sequence[i] + " - ";

      }

  } 

  const seq = select('#seq'); // select <span id="prob">

  seq.html(printstring);

}

​

function drawPose(pose) {

  if (webcam.canvas) {

    ctx.drawImage(webcam.canvas, 0, 0);

    // draw the keypoints and skeleton

    if (pose) {

      const minPartConfidence = 0.5;

      tmPose.drawKeypoints(pose.keypoints, minPartConfidence, ctx);

      tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx);

    }

  }

}

​