AI Wind Chimes - Peaceful Garden Sounds Click to make the chimes swing and play! 5 hanging tubes of

constructor(index, total) {
    this.index = index;
    this.total = total;

    // Pendulum physics state
    this.angle = 0;
    this.angleVel = 0;
    this.angleAcc = 0;
    this.damping = 0.995; // how quickly it slows down
    this.k = 0.02;        // springiness (restoring force)

    // Geometry (set in updateGeometry so it recomputes on resize)
    this.x0 = 0;
    this.y0 = 0;
    this.length = 0;
    this.updateGeometry();

    // Sound: longer tube = lower frequency
    const freqHigh = 880;  // short tube, higher pitch
    const freqLow = 220;   // long tube, lower pitch
    const t = total > 1 ? index / (total - 1) : 0;
    this.freq = lerp(freqHigh, freqLow, t);

    this.osc = new p5.Oscillator('sine');
    this.osc.freq(this.freq);
    this.osc.amp(0); // start silent
    this.osc.start();
  }

updateGeometry() {
    // Horizontal layout
    const totalWidth = min(width * 0.6, 500);
    const spacing = this.total > 1 ? totalWidth / (this.total - 1) : 0;
    const startX = width / 2 - totalWidth / 2;

    this.x0 = startX + this.index * spacing;
    this.y0 = height * 0.2;

    // Tube length increases slightly with index
    const baseLen = height * 0.25;
    const extra = height * 0.05 * this.index;
    this.length = baseLen + extra;
  }

strike() {
    // Set an initial swing (a bit different per tube)
    this.angleVel = -0.12 - 0.02 * this.index;
    this.angle = this.angleVel * 15;

    // Trigger sound with quick attack and gentle decay
    this.osc.freq(this.freq);
    this.osc.amp(0.4, 0.02); // fade up to 0.4 in 20ms
    this.osc.amp(0, 1.5);    // fade back to 0 over 1.5s
  }

update() {
    this.angleAcc = -this.k * this.angle;
    this.angleVel += this.angleAcc;
    this.angleVel *= this.damping;
    this.angle += this.angleVel;
  }

display() {
    // Tube + cord
    push();
    translate(this.x0, this.y0);
    rotate(this.angle);

    // Cord
    stroke(90, 80);
    strokeWeight(2);
    const cordLen = this.length * 0.15;
    line(0, 0, 0, cordLen);

    // Tube body
    const tubeTop = cordLen;
    const tubeBottom = this.length;
    strokeWeight(12);
    stroke(210);
    line(0, tubeTop, 0, tubeBottom);

    // Highlight stripe on the tube
    strokeWeight(5);
    stroke(240, 240, 255, 180);
    line(0, tubeTop + 2, 0, tubeBottom - 2);

    pop();

    // Small pivot dot
    noStroke();
    fill(80);
    circle(this.x0, this.y0, 6);
  }

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Create chimes
  for (let i = 0; i < NUM_CHIMES; i++) {
    chimes.push(new Chime(i, NUM_CHIMES));
  }
}

function draw() {
  drawBackground();
  drawChimeFrame();

  // Update and draw all chimes
  for (let chime of chimes) {
    chime.update();
    chime.display();
  }
}

function drawBackground() {
  // Soft sky
  background(206, 226, 255);

  noStroke();

  // Distant hills
  fill(180, 215, 190);
  ellipse(width * 0.2, height * 0.9, width * 0.8, height * 0.7);
  fill(170, 205, 185);
  ellipse(width * 0.8, height * 0.95, width * 0.9, height * 0.8);

  // Ground
  fill(190, 230, 200);
  rect(0, height * 0.7, width, height * 0.3);

  // Soft sun
  fill(255, 245, 210, 240);
  circle(width * 0.15, height * 0.2, min(width, height) * 0.18);

  // A few simple grass tufts for extra calmness
  fill(160, 210, 170, 180);
  const step = width / 20;
  for (let x = 0; x < width; x += step) {
    const h = random(15, 30);
    triangle(x, height * 0.7, x + step * 0.3, height * 0.7 - h, x + step * 0.6, height * 0.7);
  }
}

function drawChimeFrame() {
  // Wooden bar holding the chimes
  const barY = height * 0.2;
  const barWidth = min(width * 0.7, 600);
  const barHeight = 12;

  rectMode(CENTER);
  noStroke();
  fill(160, 120, 90);
  rect(width / 2, barY, barWidth, barHeight, 6);
  rectMode(CORNER);
}

function mousePressed() {
  // Make sure audio context is running (required on many browsers)
  userStartAudio();

  for (let chime of chimes) {
    chime.strike();
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Recompute positions and lengths, keep oscillators
  for (let chime of chimes) {
    chime.updateGeometry();
  }
}