constructor(name, x = 0, y = 0, score = 0) {

      this.name = name;

      this.x = x;

      this.y = y;

      this.score = score;

    }

  }

​

  const keypointDefinitions = [

​

    // new Keypoint("Left_wrist"), new Keypoint("Right_wrist"), new Keypoint("Left_pinky"),

    // new Keypoint("Right_pinky"), new Keypoint("Left_index"), new Keypoint("Right_index"),

    // new Keypoint("Left_thumb"), 

    new Keypoint("Right_thumb"), 

  ];

​

let bodyPose;

let handPose;

let video;

let poses = [];

let hands = [];

let distance = 0;

let mode = 1; // Default mode

let pillarImage;

function preload() {

  // Load the handPose model

  handPose = ml5.handPose();

  bodyPose = ml5.bodyPose("BlazePose");

  pillarImage = loadImage("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c741eead-0f8a-46df-b16d-18b58dbbe1ed/df36n3p-418a5ce3-258f-44ca-bd96-386409a64bdf.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2M3NDFlZWFkLTBmOGEtNDZkZi1iMTZkLTE4YjU4ZGJiZTFlZFwvZGYzNm4zcC00MThhNWNlMy0yNThmLTQ0Y2EtYmQ5Ni0zODY0MDlhNjRiZGYucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.XZfhJ9t5l1-7hPl2FMq5JyH_WOmhtZtw50VWe1IpdO4");

}

​

function setup() {

  createCanvas(640, 480);

  // Create the webcam video and hide it

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

  // start detecting hands from the webcam video

  handPose.detectStart(video, gotHands);

  bodyPose.detectStart(video, gotPoses);

}

​

function draw() {

​

  // Draw the webcam video

  if (mode === 1 || mode === 2) {

    if (mode === 1) {

    }

    drawAllKeypoints();

  } else if (mode === 3) {

    displayVisibleKeypointsList();

​

  }

//   Draw all the tracked hand points

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

    let hand = hands[i];

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

      let keypoint = hand.keypoints[j];

      fill(0, 255, 0);

      noStroke();

      circle(keypoint.x, keypoint.y, 10);

    }

​

}

​

​

}

​

​

​

​

function drawAllKeypoints() {

    if (poses.length > 0) {

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

        drawKeypoint(i);

      }

    }

  }

​

function drawKeypoint(index) {

    if (index >= 0 && index < keypointDefinitions.length && poses.length > 0) {

      const keypoint = poses[0].keypoints[index];

      keypointDefinitions[index].x = keypoint.x;

      keypointDefinitions[index].y = keypoint.y;

      keypointDefinitions[index].score = keypoint.score;

      // Draw all points, but use different colors based on confidence

      const confidence = keypoint.score;

      if (confidence > 0.5) {

        fill(0, 255, 0); // Green for high confidence

      } else if (confidence > 0.2) {

        fill(255, 255, 0); // Yellow for medium confidence

      } else {

        fill(255, 0, 0); // Red for low confidence

      }

      noStroke();

      circle(keypoint.x, keypoint.y, 10);

      // Draw index number

      fill(0);

      textAlign(CENTER, CENTER);

      textSize(10);

      text(index, keypoint.x, keypoint.y);

      // Draw name and coordinates

      textAlign(CENTER, TOP);

      textSize(8);

      text(`${keypointDefinitions[index].name}\n(${Math.round(keypoint.x)}, ${Math.round(keypoint.y)})`, keypoint.x, keypoint.y + 15);

    }

  }

​

  function displayVisibleKeypointsList() {

    background(220);

    textAlign(LEFT, TOP);

    textSize(16);

    fill(0);

    let y = 20;

    text("Keypoints:", 20, y);

    y += 30;

    textSize(12);

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

      if (poses.length > 0 && poses[0].keypoints[i]) {

        const keypoint = poses[0].keypoints[i];

        text(

          `${i}: ${keypointDefinitions[i].name} (${Math.round(keypoint.x)}, ${Math.round(keypoint.y)})`,

          20,

          y

        );

        y += 20;

      }

    }

  }

  function gotPoses(results) {

    poses = results;

  }

  function getKeypointCoordinates(index) {

    if (index >= 0 && index < keypointDefinitions.length) {

      return { x: keypointDefinitions[index].x, y: keypointDefinitions[index].y, score: keypointDefinitions[index].score };

    }

    return null;

  }

​

  function keyPressed() {

  if (key === '1' || key === '2' || key === '3') {

    mode = parseInt(key);

  }

}

​

​

// Callback function for when handPose outputs data

function gotHands(results) {

  // save the output to the hands variable

  hands = results;

}

var canvas;

var ctx;

var w = 1000;

var h = 700;

//var x = w/2;

//var y = h/2;

var pill2= { //bottom pillars

    x:0,

    changeX:75,

    y:700, // bottom of canvas

    w:75,

    h:-140, // negative so it is relative to the bottom of the canvas

    c:260,

    a:1,

    randomness:0,

    lw:1,

    d:"hsla(200,100%,50%,.5)",

}

​

setUpCanvas();

for (var i = 0; i < 20; i++) {

    pillar(pill2);

    pill2.x += pill2.changeX;

    // pill2.h -=  1; // negative so it is relative to the bottom of the canvas; the height goes up

    pill2.d = "hsla("+pill2.c+",100%,50%,.3)";

}

​

function pillar(o){ // rectangle pillars

​

​

    ctx.beginPath();

    ctx.moveTo(o.x+rand(o.randomness),o.y+rand(o.randomness));

    ctx.lineTo(o.x+o.w+rand(o.randomness),o.y+rand(o.randomness));

    ctx.lineTo(o.x+o.w+rand(o.randomness),o.y+o.h+rand(o.randomness));

    ctx.lineTo(o.x+rand(o.randomness),o.y+o.h+rand(o.randomness));

    ctx.closePath();

    ctx.strokeStyle = "hsla("+o.c+",100%,50%,"+o.a+")";

    ctx.lineWidth = o.lw;

    ctx.stroke();

    ctx.fillStyle = o.d;

    ctx.fill();

​

}

// function update(o){

//     // o.x += o.changeX;

//     // o.y += o.changeY;

//     o.h += o.changeh;

//     // o.changeX += randn(2);

//     // o.changeY += randn(2);

//     o.changeh += 2;

//     // if (o.x > w || o.x < 0){

//     //     o.changeX *= -1;

//     // } 

//     // if (o.y > h || o.y < 0){

//     //     o.changeY *= -1;

//     // }

//     // if (o.h > -100 || o.h < -200){

//     //     o.changeh *= -1;

//     // }

// }

​

function rectang(o){

    o.y = o.y - o.h/2 -100;

    ctx.beginPath();

    ctx.moveTo(o.x+rand(o.randomness),o.y+rand(o.randomness));

    ctx.lineTo(o.x+50+rand(o.randomness),o.y+o.h+rand(o.randomness));

    ctx.lineTo(o.x+160+rand(o.randomness),o.y+o.h+rand(o.randomness));

    ctx.lineTo(o.x+70+rand(o.randomness),o.y+o.h+80+rand(o.randomness));

    ctx.lineTo(o.x+110+rand(o.randomness),o.y+o.h+190+rand(o.randomness));

    ctx.lineTo(o.x+rand(o.randomness),o.y+o.h+130+rand(o.randomness));

    ctx.lineTo(o.x-100+rand(o.randomness),o.y+o.h+190+rand(o.randomness));

    ctx.lineTo(o.x-70+rand(o.randomness),o.y+o.h+80+rand(o.randomness));

    ctx.lineTo(o.x-160+rand(o.randomness),o.y+o.h+rand(o.randomness));

    ctx.lineTo(o.x-50+rand(o.randomness),o.y+o.h+rand(o.randomness));

    ctx.closePath();

    //star fill and stroke

    ctx.strokeStyle = "hsla("+o.c+",100%,50%,"+o.a+")";

    ctx.lineWidth = o.lw;

    ctx.stroke();

    ctx.fillStyle = o.d;

    ctx.fill();

    }

function rand(range){

     var r = Math.random()*range;

     return r;

 }    

function randn(range)   {

    var result = Math.random()*range- range/2;

    return result;

 }

​

function setUpCanvas(){

    canvas = document.getElementById("myCanvas");

    ctx = canvas.getContext("2d");

    canvas.width = w;

    canvas.height = h;

    canvas.style.border = "3px solid purple";

    console.log(canvas);

    }

​

​

​

​

​

​

​