* Hand Raise Detector with Threshold Box

 * 

 * This p5.js sketch demonstrates pose detection using ml5.js and detects

 * when the right hand is raised above the nose.

 * 

 * Features:

 * - Real-time pose detection using ml5.js bodyPose

 * - Detection of hand raises above the nose

 * - Visualization of the threshold area with a semi-transparent box

 * - Counter for number of hand raises

 * - Multiple view modes for different visualization options

 * 

 * Usage:

 * - Press '1', '2', or '3' to switch between view modes

 * 

 * Dependencies:

 * - p5.js

 * - ml5.js

 * 

 */

​

// Declare variables for video and pose detection

let img;

let video;

let bodyPose;

let poses = [];

let mode = 1; // Default mode

​

// Variables for hand raise detection

let rightHandIndex = 20; // Index for right hand

let noseIndex = 0;      // Index for nose

let handRaiseCount = 0;

let noseY = 0;

let lastHandRaised = false;

​

let handRaised = false;

​

function preload() {

  // Load the bodyPose model

  bodyPose = ml5.bodyPose("BlazePose");

  img = loadImage('https://i.kym-cdn.com/photos/images/original/002/243/354/a90.jpg')

}

​

function setup() {

  // Create canvas and set up video capture

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

  // Start pose detection

  bodyPose.detectStart(video, gotPoses);

}

​

function draw() {

  background(220);

  console.log(handRaised);

  // Handle different view modes

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

    if (mode === 1) {

      // Display video in mode 1

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

      if(handRaised)

        {

          image(img,0,0)}

    }

    drawThresholdBox();

    drawBodyPoints();

    displayOnScreenData();

  } else if (mode === 3) {

    displayDetailedData();

     if(handRaised)

        {

          image(img,0,0)}

  }

  checkHandRaise();

​

}

​

function drawBodyPoints() {

  // Draw the nose and right hand points if pose is detected

  if (poses.length > 0) {

    let nose = poses[0].keypoints[noseIndex];

    let rightHand = poses[0].keypoints[rightHandIndex];

    if (nose && rightHand) {

      // Draw nose point

      fill(255, 0, 0);

      noStroke();

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

      // Draw right hand point

      fill(0, 255, 0);

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

    }

  }

}

​

function drawThresholdBox() {

  // Draw the threshold box from bottom of the screen to nose level

  if (poses.length > 0) {

    let nose = poses[0].keypoints[noseIndex];

    if (nose) {

      noStroke();

      fill(255, 0, 0, 70); // Red with 70% opacity

      rect(0, nose.y, width, height - nose.y);

    }

  }

}

​

function checkHandRaise() {

  // Check if the right hand is raised above the nose

  if (poses.length > 0) {

    let nose = poses[0].keypoints[noseIndex];

    noseY = nose.y;

    let rightHand = poses[0].keypoints[rightHandIndex];

    if (nose && rightHand) {

      handRaised = rightHand.y < nose.y;

      if (handRaised && !lastHandRaised) {

        bodyClick();

      }

      lastHandRaised = handRaised;

    }

  }

}

​

function bodyClick() {

  // Function called when a hand raise is detected

  handRaiseCount++;

  console.log("Hand raise detected!");

  // Add any additional functionality here

//image(img,0,0);

}

​

​

function displayOnScreenData() {

  // Display data on the canvas

  fill(0);

  textAlign(LEFT, TOP);

  textSize(16);

  text(`Hand Raises: ${handRaiseCount}`, 10, 30);

}

​

function displayDetailedData() {

  // Display detailed data in mode 3

  background(220);

  textAlign(LEFT, TOP);

  textSize(16);

  fill(0);

  let y = 20;

  text(`Hand Raise Detector`, 20, y); y += 30;

  text(`Total Hand Raises: ${handRaiseCount}`, 20, y); y += 30;

  if (poses.length > 0) {

    let nose = poses[0].keypoints[noseIndex];

    let rightHand = poses[0].keypoints[rightHandIndex];

    if (nose && rightHand) {

      text(`Nose Y: ${nose.y.toFixed(2)}`, 20, y); y += 30;

      text(`Right Hand Y: ${rightHand.y.toFixed(2)}`, 20, y); y += 30;

      text(`Hand Position: ${rightHand.y < nose.y ? "Above" : "Below"} Nose`, 20, y);

    }

  }

}

​

function gotPoses(results) {

  // Callback function for when bodyPose outputs data

  poses = results;

}

​

function keyPressed() {

  // Handle key presses for changing modes

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

    mode = parseInt(key);

  }

}