AI Pendulum Wave - Mesmerizing Harmonic Motion Physics - xelsed.ai

constructor(x, y, length, initialAngle, bobSize, color) {
    this.x = x;           // Anchor x-coordinate
    this.y = y;           // Anchor y-coordinate
    this.len = length;    // Length of the pendulum arm
    this.angle = initialAngle; // Current angle from vertical
    this.velocity = 0;    // Angular velocity
    this.bobSize = bobSize; // Diameter of the bob
    this.color = color;   // Color of the bob

    // For trails (glowing circles)
    this.bobX = this.x + this.len * sin(this.angle);
    this.bobY = this.y + this.len * cos(this.angle);
    this.path = [];         // Stores past positions of the bob for trails
    this.pathLength = 30;   // Number of points to keep in the trail
  }

update() {
    // Apply pendulum physics
    // acceleration = -gravity / length * sin(angle)
    let acceleration = -gravity / this.len * sin(this.angle);

    // Update velocity and angle
    this.velocity += acceleration;
    this.angle += this.velocity;

    // Calculate the bob's current position
    this.bobX = this.x + this.len * sin(this.angle);
    this.bobY = this.y + this.len * cos(this.angle);

    // Add current bob position to the path for trails
    this.path.push(createVector(this.bobX, this.bobY));
    if (this.path.length > this.pathLength) {
      this.path.shift(); // Remove the oldest point if path is too long
    }
  }

display() {
    // Draw the pendulum arm
    stroke(200); // Light grey arm
    strokeWeight(1);
    line(this.x, this.y, this.bobX, this.bobY);

    // Draw the trail (glowing circles)
    noStroke();
    for (let i = 0; i < this.path.length; i++) {
      let alpha = map(i, 0, this.path.length, 0, 150); // Trail fades out
      fill(this.color.h, this.color.s, this.color.b, alpha);
      circle(this.path[i].x, this.path[i].y, this.bobSize);
    }

    // Draw the main bob
    fill(this.color.h, this.color.s, this.color.b); // Solid color
    circle(this.bobX, this.bobY, this.bobSize);
  }

reset() {
    this.angle = initialAngle;
    this.velocity = 0;
    this.path = []; // Clear trails
    this.bobX = this.x + this.len * sin(this.angle);
    this.bobY = this.y + this.len * cos(this.angle);
  }

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 1); // Use HSB color mode with alpha

  // Calculate pendulum lengths and anchor positions
  // Anchor points are distributed across 80% of the canvas width
  let anchorY = height * 0.1; // Anchor point 10% from the top
  let leftAnchorX = width * 0.1;
  let rightAnchorX = width * 0.9;

  for (let i = 0; i < numPendulums; i++) {
    // Calculate length, varying linearly
    let length_n_pixels = map(i, 0, numPendulums - 1, minLength, maxLength);

    // Calculate anchor position
    let anchorX = map(i, 0, numPendulums - 1, leftAnchorX, rightAnchorX);

    // Calculate color based on position in the wave
    let hue = map(i, 0, numPendulums - 1, 0, 360); // Full color spectrum
    let pendulumColor = color(hue, 80, 90); // Moderate saturation and brightness

    // Create a new Pendulum object and add it to the array
    pendulums.push(new Pendulum(anchorX, anchorY, length_n_pixels, initialAngle, bobSize, pendulumColor));
  }

  // Create the "Release" button
  releaseButton = createButton('Release');
  releaseButton.position(10, 10); // Position at top-left
  releaseButton.mousePressed(resetPendulums);
  releaseButton.style('font-size', '16px');
  releaseButton.style('padding', '8px 15px');
  releaseButton.style('background-color', '#4CAF50');
  releaseButton.style('color', 'white');
  releaseButton.style('border', 'none');
  releaseButton.style('border-radius', '5px');
  releaseButton.style('cursor', 'pointer');
}

function draw() {
  background(0, 0, 10); // Dark background, clears the canvas each frame

  // Update and display each pendulum
  for (let p of pendulums) {
    p.update();
    p.display();
  }
}

function resetPendulums() {
  for (let p of pendulums) {
    p.reset(); // Reset each pendulum
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Recalculate anchor positions to keep pendulums centered
  let anchorY = height * 0.1;
  let leftAnchorX = width * 0.1;
  let rightAnchorX = width * 0.9;

  for (let i = 0; i < pendulums.length; i++) {
    let anchorX = map(i, 0, numPendulums - 1, leftAnchorX, rightAnchorX);
    pendulums[i].x = anchorX;
    pendulums[i].y = anchorY;
    // Update bob position based on new anchor and current angle
    pendulums[i].bobX = pendulums[i].x + pendulums[i].len * sin(pendulums[i].angle);
    pendulums[i].bobY = pendulums[i].y + pendulums[i].len * cos(pendulums[i].angle);
    pendulums[i].path = []; // Clear trails on resize
  }
}