let handpose;

let predictions = [];

let isAlive = false; // Toggles life and death phases

let t = 0; // Time variable for animation

let transitionAlpha = 0; // Controls pulsation and fade

​

function setup() {

  createCanvas(800, 800);

​

  // Create webcam capture

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

​

  // Load handpose model

  handpose = ml5.handpose(video, () => {

    console.log("Handpose model loaded");

  });

​

  // Listen for predictions

  handpose.on("predict", results => {

    predictions = results;

  });

​

  noStroke();

}

​

function draw() {

  background(0, 30); // Slight transparency for glow effect

​

  // Display webcam feed (optional, for debugging or artistic overlay)

  push();

  translate(width, 0);

  scale(-1, 1);

  image(video, 0, 0, width, height / 3); // Show part of the webcam feed

  pop();

​

  // Detect gestures

  detectGestures();

​

  // Gradual transitions for pulsation and fading

  if (isAlive) {

    transitionAlpha = min(transitionAlpha + 10, 255); // Fade in

  } else {

    transitionAlpha = max(transitionAlpha - 10, 0); // Fade out

  }

​

  // Visualize based on state

  if (transitionAlpha > 0) {

    displayEnhancedVisualization(transitionAlpha);

  }

}

​

// Function to detect hand gestures

function detectGestures() {

  if (predictions.length > 0) {

    let leftHandUp = isHandRaised(predictions[0]); // Check first hand

    let secondHandUp = predictions.length > 1 && isHandRaised(predictions[1]); // Check second hand

​

    // Both hands raised

    if (leftHandUp && secondHandUp) {

      isAlive = true;

    } else {

      isAlive = false; // Not both hands raised

    }

  } else {

    isAlive = false; // No hands detected

  }

}

​

// Check if a hand is raised

function isHandRaised(hand) {

  const wrist = hand.landmarks[0];

  const palmBase = hand.landmarks[9];

  return palmBase[1] < wrist[1] - 50; // Adjust sensitivity

}

​

// Display enhanced visualization

function displayEnhancedVisualization(alpha) {

  translate(width / 2, height / 2);

  let maxRadius = min(width, height) * 0.4;

  let layers = 8;

  let baseColors = [

    color(66, 135, 245, alpha),

    color(255, 99, 132, alpha),

    color(58, 217, 142, alpha),

    color(255, 183, 66, alpha),

    color(245, 66, 130, alpha)

  ];

​

  for (let i = 0; i < layers; i++) {

    let radius = maxRadius - i * 20 + sin(t + i * 0.5) * 15; // Pulsating effect

    let gradientColor = lerpColor(

      baseColors[i % baseColors.length],

      baseColors[(i + 1) % baseColors.length],

      map(sin(t + i), -1, 1, 0, 1)

    );

​

    fill(gradientColor);

    push();

    rotate(t * 0.1 + i * 0.1); // Add rotation for layers

    beginShape();

    let step = TWO_PI / (6 + i * 2);

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

      let x = cos(angle) * radius + random(-2, 2);

      let y = sin(angle) * radius + random(-2, 2);

      vertex(x, y);

    }

    endShape(CLOSE);

    pop();

  }

​

  t += 0.03; // Increment time for smoother animation

}