AI Gravity Painter - Click to Create Orbital Particle Wells - xelsed.ai

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100); // Set color mode to HSB with alpha
  noStroke(); // No outlines for shapes

  // Initialize particles with random positions and velocities
  for (let i = 0; i < numParticles; i++) {
    particles.push(new Particle(random(width), random(height)));
  }
}

function draw() {
  // Semi-transparent background creates particle trails
  background(0, 0, 10, 10); // Dark background, low alpha

  // Update and draw particles
  for (let particle of particles) {
    // Calculate gravitational force from each well
    for (let well of wells) {
      let force = p5.Vector.sub(well.pos, particle.pos); // Vector from particle to well
      let distance = force.mag(); // Distance between particle and well

      // Clamp distance to prevent extreme forces when very close and division by zero
      distance = constrain(distance, wellSize / 2, 200);

      // Calculate gravitational strength (inverse-square law: F = G * m1 * m2 / d^2)
      let strength = (G * particle.mass * well.mass) / (distance * distance);

      // Set the magnitude of the force vector to the calculated strength
      force.setMag(strength);

      // Apply the force to the particle
      particle.applyForce(force);
    }

    particle.update();    // Update particle position
    particle.wrapEdges(); // Handle screen edge wrapping
    particle.show();      // Draw the particle
  }

  // Update and draw wells, and remove faded ones
  for (let i = wells.length - 1; i >= 0; i--) {
    wells[i].update(); // Update well fading and pulsing
    wells[i].show();   // Draw the well

    // Remove the well if it has faded completely
    if (wells[i].isDead()) {
      wells.splice(i, 1);
    }
  }

  // Display particle count
  fill(0, 0, 100); // White text
  textSize(16);
  textAlign(LEFT, TOP);
  text(`Particles: ${particles.length}`, 10, 10);
  text(`Wells: ${wells.length}/${maxWells}`, 10, 30);
}

function mousePressed() {
  // Create a new gravity well at the mouse position
  wells.push(new GravityWell(mouseX, mouseY));

  // If there are more wells than allowed, remove the oldest one
  if (wells.length > maxWells) {
    wells.shift(); // .shift() removes the first element from an array
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Re-center any existing wells if desired, or let them stay relative to their creation point
  // For this sketch, we'll let them stay in their original relative positions.
}

class Particle {
  constructor(x, y) {
    this.pos = createVector(x, y); // Position vector
    this.vel = p5.Vector.random2D(); // Random initial velocity vector (magnitude 1)
    this.vel.mult(random(1, 3));   // Scale initial velocity for faster movement
    this.mass = 1;                 // Mass of the particle (used for gravity calculation)
  }

  // Applies a force to the particle, updating its velocity
  applyForce(force) {
    // F = ma, so a = F/m. Acceleration is added to velocity.
    // Here, mass is 1, so acceleration equals force.
    this.vel.add(force);
  }

  // Updates the particle's position based on its velocity
  update() {
    this.pos.add(this.vel);
  }

  // Makes the particle wrap around the screen edges
  wrapEdges() {
    if (this.pos.x < 0) this.pos.x = width;
    if (this.pos.x > width) this.pos.x = 0;
    if (this.pos.y < 0) this.pos.y = height;
    if (this.pos.y > height) this.pos.y = 0;
  }

  // Draws the particle on the canvas
  show() {
    // Map particle speed (velocity magnitude) to hue for a colorful trail effect
    let hue = map(this.vel.mag(), 0, maxVel, hueBase, hueBase + hueShiftRate);
    hue = hue % 360; // Ensure hue stays within 0-360 range

    fill(hue, saturationBase, brightnessBase, 80); // Low alpha for trails
    ellipse(this.pos.x, this.pos.y, particleSize, particleSize);
  }
}

class GravityWell {
  constructor(x, y) {
    this.pos = createVector(x, y); // Position vector
    this.mass = 500;               // Mass of the well (influences gravitational strength)
    this.creationTime = millis();  // Timestamp when the well was created for fading
    this.alpha = 100;              // Initial alpha (opacity) of the well
    this.pulseSize = wellSize;     // Current size of the glowing pulse
    this.pulseAlpha = 0;           // Current alpha of the glowing pulse
  }

  // Updates the well's fading and pulsing animation
  update() {
    let elapsedTime = millis() - this.creationTime; // Time since creation

    // Calculate alpha based on elapsed time, fading out over wellFadeTime
    this.alpha = map(elapsedTime, 0, wellFadeTime, 100, 0);
    this.alpha = constrain(this.alpha, 0, 100); // Ensure alpha stays within 0-100

    // Animate the pulsing glow behind the well
    // sin(frameCount * 0.05) oscillates between -1 and 1
    // This creates a smooth growing/shrinking effect
    this.pulseSize = wellSize + sin(frameCount * 0.05) * (wellSize * 0.5);
    this.pulseAlpha = map(sin(frameCount * 0.05), -1, 1, 0, this.alpha * 0.4); // Pulse alpha also fades
  }

  // Draws the gravity well on the canvas
  show() {
    // Draw the glowing pulse
    fill(0, 0, 100, this.pulseAlpha); // White glow
    ellipse(this.pos.x, this.pos.y, this.pulseSize, this.pulseSize);

    // Draw the main well circle
    fill(hueBase, saturationBase, brightnessBase, this.alpha); // Same color as particles, but solid
    ellipse(this.pos.x, this.pos.y, wellSize, wellSize);
  }

  // Returns true if the well has faded completely
  isDead() {
    return this.alpha <= 0;
  }
}