AI Pendulum Wave - Mesmerizing Physics Simulation Watch multiple pendulums of varying lengths swing

function setup() {
  // Create the main canvas
  createCanvas(windowWidth, windowHeight);
  // Use HSB color mode for easy gradient generation
  colorMode(HSB, 360, 100, 100, 100);

  // Create the offscreen graphics buffer for trails
  trailGraphics = createGraphics(windowWidth, windowHeight);
  trailGraphics.colorMode(HSB, 360, 100, 100, 100);
  // Fill the trail buffer with a dark background initially
  trailGraphics.background(0, 0, 0, 100);

  // --- Create Sliders ---

  // Pendulum Count Slider
  pendulumCountLabel = createP('Pendulum Count: ');
  pendulumCountLabel.position(10, 10);
  pendulumCountLabel.class('p5js_label'); // Add class for styling
  pendulumCountSlider = createSlider(5, 50, 25, 1); // Min 5, Max 50, Initial 25, Step 1
  pendulumCountSlider.position(10, 40);
  pendulumCountSlider.class('p5js_slider'); // Add class for styling
  // Re-initialize pendulums whenever the slider changes
  pendulumCountSlider.input(initializePendulums);

  // Gravity Slider
  gravityLabel = createP('Gravity: ');
  gravityLabel.position(10, 70);
  gravityLabel.class('p5js_label'); // Add class for styling
  gravitySlider = createSlider(0.1, 2, g, 0.01); // Min 0.1, Max 2, Initial g, Step 0.01
  gravitySlider.position(10, 100);
  gravitySlider.class('p5js_slider'); // Add class for styling

  // Set the initial pendulum count and initialize them
  currentPendulumCount = pendulumCountSlider.value();
  initializePendulums();
}

function initializePendulums() {
  pendulums = []; // Clear existing pendulums
  currentPendulumCount = pendulumCountSlider.value();
  // Update the label to show the current pendulum count
  pendulumCountLabel.html('Pendulum Count: ' + currentPendulumCount);

  // Clear trails on the offscreen buffer when pendulums are re-initialized
  trailGraphics.background(0, 0, 0, 100);

  // Anchor point for all pendulums (top center of the canvas)
  let cx = width / 2;
  let cy = height / 4;

  // Pendulum wave formula: L_i = L_shortest * (N / (N - i))^2
  // This formula ensures that all pendulums complete an integer number of cycles
  // in the same total time, causing them to periodically fall in and out of phase.
  // 'i' goes from 0 to N-1, where i=0 is the shortest pendulum.
  for (let i = 0; i < currentPendulumCount; i++) {
    let N = currentPendulumCount;
    let L = L_shortest * pow(N / (N - i), 2);
    // Create a new Pendulum object and add it to the array
    pendulums.push(new Pendulum(L, g, damping, cx, cy, i, N));
  }
}

function draw() {
  // Update gravity from the slider
  g = gravitySlider.value();
  // Update the label to show the current gravity value
  gravityLabel.html('Gravity: ' + g.toFixed(2));

  // Check if the pendulum count slider value has changed.
  // If it has, re-initialize the pendulums.
  if (pendulumCountSlider.value() !== currentPendulumCount) {
    initializePendulums();
  }

  // --- Trail Drawing ---
  // Draw a very transparent black rectangle over the trail buffer.
  // This makes existing trails gradually fade out, creating the trailing effect.
  trailGraphics.noStroke();
  trailGraphics.fill(0, 0, 0, 1); // Low alpha value for long trails
  trailGraphics.rect(0, 0, width, height);

  // --- Pendulum Simulation and Drawing ---
  // Loop through each pendulum, update its physics, and draw it
  for (let p of pendulums) {
    p.update(g); // Update pendulum's position based on physics and current gravity
    p.display(trailGraphics); // Draw the pendulum on the trail graphics buffer
  }

  // Display the accumulated trails from the offscreen buffer onto the main canvas
  image(trailGraphics, 0, 0);

  // Draw a small circle at the anchor point of the pendulums
  noStroke();
  fill(360, 0, 100); // White color
  circle(width / 2, height / 4, 10); // Diameter 10
}

class Pendulum {
  constructor(L, g, damping, cx, cy, index, totalPendulums) {
    this.L = L; // Length of the pendulum
    this.g = g; // Gravity
    this.damping = damping; // Damping factor
    this.cx = cx; // Anchor x-coordinate
    this.cy = cy; // Anchor y-coordinate

    this.theta = PI / 4; // Initial angle from vertical (45 degrees)
    this.omega = 0; // Initial angular velocity
    this.alpha = 0; // Initial angular acceleration

    // Assign a color based on its index in the array for a gradient effect
    this.color = color(map(index, 0, totalPendulums, 0, 360), 80, 80);
  }

  /**
   * Updates the pendulum's physics (angle, velocity, acceleration).
   * @param {number} newG The current gravity value from the slider.
   */
  update(newG) {
    this.g = newG; // Update gravity from the slider
    // Calculate angular acceleration
    this.alpha = (-this.g / this.L) * sin(this.theta);
    // Update angular velocity
    this.omega += this.alpha;
    // Update angle
    this.theta += this.omega;
    // Apply damping
    this.omega *= this.damping;
  }

  /**
   * Displays the pendulum (rod and bob) on the provided graphics buffer.
   * @param {p5.Graphics} graphics The graphics buffer to draw on.
   */
  display(graphics) {
    // Calculate the position of the pendulum bob
    let bobX = this.cx + this.L * sin(this.theta);
    let bobY = this.cy + this.L * cos(this.theta);

    // Draw the pendulum rod
    graphics.stroke(this.color); // Use the pendulum's assigned color
    graphics.strokeWeight(1);
    graphics.line(this.cx, this.cy, bobX, bobY);

    // Draw the pendulum bob
    graphics.noStroke();
    graphics.fill(this.color, 150); // Slightly more opaque color for the bob
    graphics.circle(bobX, bobY, 12); // Bob diameter 12
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  trailGraphics.resizeCanvas(windowWidth, windowHeight);
  trailGraphics.background(0, 0, 0, 100); // Clear trails on resize
  initializePendulums(); // Re-initialize pendulums based on new canvas size
}