Bouncing Blended Balls

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Use HSB color mode for easier transparency and color selection
  // Hue: 0-360, Saturation: 0-100, Brightness: 0-100, Alpha: 0-1
  colorMode(HSB, 360, 100, 100, 1);
  noStroke(); // No outlines for the circles
  initializeCircles(); // Create our initial set of circles
}

function initializeCircles() {
  circles = []; // Clear any existing circles
  for (let i = 0; i < numCircles; i++) {
    // Generate random radius within a range
    let r = baseRadius + random(-maxRadiusVariance, maxRadiusVariance);
    // Generate random position within canvas bounds, accounting for radius
    let x = random(r, width - r);
    let y = random(r, height - r);
    // Generate random velocity, ensuring a minimum speed
    let vx = random(-maxSpeedVariance, maxSpeedVariance) + (random() > 0.5 ? baseSpeed : -baseSpeed);
    let vy = random(-maxSpeedVariance, maxSpeedVariance) + (random() > 0.5 ? baseSpeed : -baseSpeed);
    
    // Choose a trendy hue from a predefined range
    let trendyHues = [
      random(260, 300), // Purples
      random(200, 240), // Blues
      random(120, 160), // Greens
      random(320, 360)  // Pinks/Reds
    ];
    let hue = random(trendyHues);
    let saturation = 70; // Moderate saturation
    let brightness = 90; // Bright but not fully white
    let alpha = 0.3; // Significant transparency
    let c = color(hue, saturation, brightness, alpha);
    
    // Add a new Circle object to our array
    circles.push(new Circle(x, y, vx, vy, r, c));
  }
}

function draw() {
  // Draw a slightly less transparent background for a clearer trailing effect
  // This helps the editor's heuristic detect canvas changes more easily.
  fill(0, 0, 0, 0.1); // CHANGE: Slightly less transparent (was 0.05)
  rect(0, 0, width, height);

  // Set blend mode to ADD. When shapes overlap, their colors are added together,
  // creating brighter, unique blended colors.
  blendMode(ADD);

  // Update and display each circle
  for (let circle of circles) {
    circle.move();
    circle.bounce();
    circle.display();
  }

  // Reset blend mode to default (BLEND) for any subsequent drawing,
  // though none exists in this sketch.
  blendMode(BLEND);
}

function mouseDragged() {
  // Calculate the mouse movement vector since the last frame
  let dx = mouseX - pmouseX;
  let dy = mouseY - pmouseY;

  // If there's no movement, or if pmouse values are not yet valid (first drag frame)
  // This prevents applying shove when the mouse isn't actually moving or on the very first frame of a drag
  if ((dx === 0 && dy === 0) || (pmouseX === 0 && pmouseY === 0 && mouseX !== 0 && mouseY !== 0)) {
    return;
  }

  for (let circle of circles) {
    // Calculate distance from mouse to circle center
    let d = dist(mouseX, mouseY, circle.x, circle.y);

    // If the mouse is within the circle's interaction radius (mouseRadius + circle's own radius)
    if (d < mouseRadius + circle.r) {
      // Apply a shove force based on mouse movement
      circle.vx += dx * shoveStrength;
      circle.vy += dy * shoveStrength;

      // Constrain velocity to prevent circles from flying too fast
      circle.vx = constrain(circle.vx, -maxVelocity, maxVelocity);
      circle.vy = constrain(circle.y, -maxVelocity, maxVelocity); // BUG FIX: Changed circle.y to circle.vy
    }
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Re-initialize circles for the new canvas size to prevent them from
  // being out of bounds or resizing incorrectly.
  initializeCircles();
}

class Circle {
  constructor(x, y, vx, vy, r, c) {
    this.x = x;
    this.y = y;
    this.vx = vx; // Velocity in x direction
    this.vy = vy; // Velocity in y direction
    this.r = r;   // Radius
    this.c = c;   // Color
  }

  // Move the circle based on its velocity
  move() {
    this.x += this.vx;
    this.y += this.vy;
  }

  // Check for collisions with canvas edges and reverse velocity to bounce
  bounce() {
    // Bounce off left/right edges
    if (this.x - this.r < 0 || this.x + this.r > width) {
      this.vx *= -1; // Reverse x velocity
      // Prevent the circle from sticking to the edge
      this.x = constrain(this.x, this.r, width - this.r);
    }
    // Bounce off top/bottom edges
    if (this.y - this.r < 0 || this.y + this.r > height) {
      this.vy *= -1; // Reverse y velocity
      // Prevent the circle from sticking to the edge
      this.y = constrain(this.y, this.r, height - this.r);
    }
  }

  // Display the circle
  display() {
    fill(this.c); // Set the circle's transparent color
    ellipse(this.x, this.y, this.r * 2); // Draw the circle
  }
}