Bubble Pop - OpenProcessing

mySketch.js
xxxxxxxxxx
 
let bubbles = []; // Array to store the falling bubbles
let handpose;
let video;
let hands = [];
​
function preload() {
  handpose = ml5.handPose(video, modelReady);
}
​
function setup() {
  createCanvas(640, 480, WEBGL); // Smaller canvas
  video = createCapture(VIDEO); // Access the webcam
  video.size(width, height);
  video.hide(); // Hide the raw video feed
  noStroke();
  handpose.detectStart(video, gotHands);
}
​
function draw() {
  background(0);
​
  // Display the webcam feed as a background
  push();
  translate(-width / 2, -height / 2, 0); // Align video with canvas
  image(video, 0, 0, width, height);
  pop();
​
  // Add new bubbles at random intervals
  if (frameCount % 20 === 0) {
    let size = random(20, 50);
    bubbles.push(new Bubble(random(-width / 2, width / 2), -height / 2, size));
  }
​
  // Update and display bubbles
  for (let i = bubbles.length - 1; i >= 0; i--) {
    let bubble = bubbles[i];
​
    for (let k = 0; k < hands.length; k++) {
      let hand = hands[k];
      for (let j = 0; j < hand.keypoints.length; j++) {
        let keypoint = hand.keypoints[j];
        let x = keypoint.x - width/2;
        let y = keypoint.y - height/2;
​
        // Check if the bubble collides with the fingertip
        if (bubble.checkCollision(x, y)) {
          bubbles.splice(i, 1); // Remove the bubble from the array
          break;
        }
      }
    }
​
    bubble.update();
    bubble.display();
  }
  
  
​
  for (let k = 0; k < hands.length; k++) {
    let hand = hands[k];
    for (let j = 0; j < hand.keypoints.length; j++) {
      let keypoint = hand.keypoints[j];
      let x = keypoint.x - width/2;
      let y = keypoint.y - height/2;
​
      fill(0, 255, 0);
      noStroke();
      circle(x, y, 10);
    }
  }
}
​
function gotHands(results) {
  // save the output to the hands variable
  hands = results;
}
​
// Bubble class
class Bubble {
  constructor(x, y, size) {
    this.x = x;
    this.y = y;
    this.z = 0;
    this.size = size;
    this.speed = random(1, 3);
    this.color = color(173, 216, 230, 150); // Light blue, semi-transparent
  }
​
  update() {
    // Move the bubble downwards
    this.y += this.speed;
​
    // Stop the bubble if it reaches the bottom
    if (this.y >= height / 2 - this.size / 2) {
      this.y = height / 2 - this.size / 2;
    }
  }
​
  display() {
    push();
    translate(this.x, this.y, this.z);
​
    // Create a soft gradient effect for a realistic bubble
    noStroke();
    for (let i = 0; i < this.size; i++) {
      let alpha = map(i, 0, this.size, 150, 0);
      let gradSize = map(i, 0, this.size, this.size, 0);
      fill(this.color.levels[0], this.color.levels[1], this.color.levels[2], alpha);
      ellipse(0, 0, gradSize);
    }
​
    pop();
  }
​
  checkCollision(x, y) {
    // Check if the given point (x, y) is within the bubble's radius
    let d = dist(this.x, this.y, x, y);
    return d < this.size / 2;
  }
}
​
function modelReady() {
  console.log("Handpose model ready!");
}
​