let pointsPerSpiral = 30; // Points per spiral

let maxRadius = 150; // Maximum radius

let height = 400; // Height of the spiral

let totalPoints = spirals * pointsPerSpiral;

let activeBackgrounds = [];

​

let balls = []; // Array to hold multiple balls

let scale = [261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88, 523.25]; // Frequencies for C major scale

let usedIndices = []; // Array to track used scale indices

​

let backgroundStyle = 0; // Current background style

let maxBackgroundStyles = 10; // Total number of different background styles

​

function setup() {

  createCanvas(600, 700, WEBGL);

  angleMode(DEGREES);

}

​

function draw() {

  background(0);

​

  // 获取当前频率（取最后一个小球的频率，若无小球则为 261.63）

  let frequency = balls.length > 0 ? balls[balls.length - 1].frequency : 261.63;

​

  // *** 2D 渲染背景 ***

  push();

  resetMatrix();

  drawBackground(frequency);

  pop();

​

  // *** 3D 渲染螺旋和小球 ***

  push();

  rotateX(60);

  draw3DElements();

  pop();

}

​

function mousePressed() {

  if (usedIndices.length >= scale.length) {

    usedIndices = [];

  }

​

  let availableIndices = scale.map((_, index) => index).filter(index => !usedIndices.includes(index));

  let noteIndex = random(availableIndices);

  usedIndices.push(noteIndex);

​

  let frequency = scale[noteIndex];

  let newBall = new Ball(0, 0, -height / 2, 10, frequency);

  newBall.startMoving();

  balls.push(newBall);

​

  backgroundStyle = (backgroundStyle + 1) % maxBackgroundStyles;

  if (activeBackgrounds.length >= 2) {

    activeBackgrounds.shift();

  }

  activeBackgrounds.push(backgroundStyle);

}

​

class Ball {

  constructor(x, y, z, r, frequency) {

    this.x = x;

    this.y = y;

    this.z = z;

    this.r = r;

    this.frequency = frequency;

    this.moving = false;

    this.pathIndex = 0;

    this.osc = new p5.Oscillator('sine');

    this.osc.freq(frequency);

    this.osc.start();

    this.osc.amp(0);

    this.particles = [];

  }

​

  update() {

    if (this.moving) {

      if (this.pathIndex < totalPoints) {

        let angle = map(this.pathIndex, 0, totalPoints, 0, 360 * spirals);

        this.x = map(this.pathIndex, 0, totalPoints, 20, maxRadius) * cos(angle);

        this.y = map(this.pathIndex, 0, totalPoints, 20, maxRadius) * sin(angle);

        this.z = map(this.pathIndex, 0, totalPoints, -height / 2, height / 2);

        this.pathIndex++;

        this.osc.amp(0.5, 0.1);

        this.particles.push(new Particle(this.x, this.y, this.z));

      } else {

        this.stopMoving();

      }

    }

​

    for (let i = this.particles.length - 1; i >= 0; i--) {

      this.particles[i].update();

      if (this.particles[i].isDone()) {

        this.particles.splice(i, 1);

      }

    }

  }

​

  display() {

    for (let particle of this.particles) {

      particle.display();

    }

​

    push();

    translate(this.x, this.y, this.z);

    emissiveMaterial(255, 0, 0);

    sphere(this.r);

    pop();

  }

​

  startMoving() {

    this.moving = true;

    this.pathIndex = 0;

  }

​

  stopMoving() {

    this.moving = false;

    this.osc.amp(0, 0.5);

    this.osc.stop(0.5);

  }

​

  isDone() {

    return !this.moving && this.pathIndex >= totalPoints && this.particles.length === 0;

  }

}

​

class Particle {

  constructor(x, y, z) {

    this.x = x;

    this.y = y;

    this.z = z;

    this.lifespan = 255;

  }

​

  update() {

    this.lifespan -= 5;

  }

​

  display() {

    push();

    translate(this.x, this.y, this.z);

    noStroke();

    fill(255, 255, 100, this.lifespan);

    sphere(3);

    pop();

  }

​

  isDone() {

    return this.lifespan <= 0;

  }

}

​

// 背景绘制逻辑

function drawBackground(frequency) {

  switch (backgroundStyle) {

    case 0:

      drawGradientBackground(frequency);

      break;

    case 1:

      drawGridBackground(frequency);

      break;

    case 2:

      drawStarryBackground(frequency);

      break;

    case 3:

      drawWaveBackground(frequency);

      break;

    case 4:

      drawRippleBackground(frequency);

      break;

    case 5:

      drawRotatingDiamondGridBackground(frequency);

      break;

    case 6:

      drawDynamicGridBackground(frequency);

      break;

    case 7:

      drawStripedBackground(frequency);

      break;

    case 8:

      drawArcBackground(frequency);

      break;

    case 9:

      drawFlickeringStarsBackground(frequency);

      break;

  }

}

​

// 背景函数调整

​

function drawGradientBackground(frequency) {

  push();

  resetMatrix();

  translate(-width / 2, -height / 2, -500);

  let speed = map(frequency, 261.63, 523.25, 0.01, 0.05);

  for (let y = 0; y < height; y++) {

    let r = map(sin(frameCount * speed + y * 0.01), -1, 1, 100, 255);

    let g = map(cos(frameCount * speed + y * 0.02), -1, 1, 50, 200);

    let b = map(sin(frameCount * speed + y * 0.03), -1, 1, 150, 255);

    stroke(r, g, b);

    line(0, y, width, y);

  }

  pop();

}

​

function drawGridBackground(frequency) {

  push();

  resetMatrix();

  translate(-width / 2, -height / 2, -500);

  let speed = map(frequency, 261.63, 523.25, 0.01, 0.05);

  let r = map(sin(frameCount * speed), -1, 1, 50, 200);

  let b = map(cos(frameCount * speed), -1, 1, 150, 255);

  stroke(r, 150, b, 150);

  for (let x = 0; x <= width; x += 20) {

    for (let y = 0; y <= height; y += 20) {

      point(x, y);

    }

  }

  pop();

}

​

function drawStarryBackground(frequency) {

  push();

  resetMatrix();

  translate(-width / 2, -height / 2, -500);

  let speed = map(frequency, 261.63, 523.25, 0.01, 0.05);

  background(10, 10, 30);

  for (let i = 0; i < 200; i++) {

    let x = random(width);

    let y = random(height);

    let brightness = map(sin(frameCount * speed), -1, 1, 150, 255);

    stroke(brightness);

    point(x, y);

  }

  pop();

}

function drawWaveBackground(frequency) {

  push();

  resetMatrix();

  translate(-width / 2, -height / 2, -500);

  noFill();

  let speed = map(frequency, 261.63, 523.25, 0.02, 0.1); // 频率越高，波动越快

  for (let y = 0; y < height; y += 10) {

    beginShape();

    for (let x = 0; x < width; x += 10) {

      let wave = sin(frameCount * speed + x * 0.1 + y * 0.1) * 20;

      let r = map(sin(frameCount * speed + x * 0.01), -1, 1, 100, 255);

      let g = map(cos(frameCount * speed + y * 0.01), -1, 1, 50, 200);

      stroke(r, g, 255);

      vertex(x, y + wave);

    }

    endShape();

  }

  pop();

}

​

function drawRippleBackground(frequency) {

  push();

  resetMatrix();

  translate(width / 2, height / 2, -500); // 确保波纹居中

  noFill();

  let speed = map(frequency, 261.63, 523.25, 0.02, 0.1);

  for (let r = 50; r < width * 1.5; r += 20) {

    let offset = sin(frameCount * speed + r * 0.1) * 10;

    let rColor = map(r, 50, width, 100, 255);

    let bColor = map(frequency, 261.63, 523.25, 200, 255);

    stroke(rColor, 150, bColor);

    strokeWeight(1.5);

    ellipse(0, 0, r + offset, r + offset);

  }

  pop();

}

​

function drawRotatingDiamondGridBackground(frequency) {

  push();

  resetMatrix();

  translate(-width / 2, -height / 2);

  translate(width / 2, height / 2); // 屏幕中心

  rotate(frameCount * 0.01 * map(frequency, 261.63, 523.25, 1, 3)); // 频率越高，旋转越快

  let rColor = map(sin(frameCount * 0.01 + frequency * 0.001), -1, 1, 150, 255);

  stroke(rColor, 200, 255, 150);

  let gridSize = 40;

  for (let x = -width; x <= width; x += gridSize) {

    for (let y = -height; y <= height; y += gridSize) {

      let offset = sin(frameCount * 0.05 + (x + y) * 0.02 + frequency * 0.001) * 10;

      line(x - offset, y, x + gridSize / 2, y + gridSize / 2);

      line(x + offset, y, x - gridSize / 2, y - gridSize / 2);

    }

  }

  pop();

}

​

function drawDynamicGridBackground(frequency) {

  push();

  resetMatrix();

  translate(-width / 2, -height / 2, -500);

  let speed = map(frequency, 261.63, 523.25, 0.01, 0.05);

  for (let x = 0; x < width; x += 50) {

    for (let y = 0; y < height; y += 50) {

      let offset = sin(frameCount * speed + (x + y) * 0.02) * 20;

      let gridColor = map(frequency, 261.63, 523.25, 100, 255);

      stroke(gridColor, 100, map(offset, -20, 20, 100, 255));

      noFill();

      rect(x + offset, y + offset, 30, 30);

    }

  }

  pop();

}

​

function drawStripedBackground(frequency) {

  push();

  resetMatrix();

  translate(-width / 2, -height / 2, -500);

  noStroke();

  let speed = map(frequency, 261.63, 523.25, 0.01, 0.05);

  for (let y = 0; y < height; y += 10) {

    let r = map(sin(frameCount * speed + y * 0.1), -1, 1, 100, 255);

    let g = map(cos(frameCount * speed + y * 0.2), -1, 1, 50, 200);

    let b = map(sin(frameCount * speed + y * 0.3), -1, 1, 150, 255);

    fill(r, g, b);

    rect(0, y, width, 10);

  }

  pop();

}

​

function drawArcBackground(frequency) {

  push();

  resetMatrix();

  translate(width / 2, height / 2, -500);

  noFill();

  let speed = map(frequency, 261.63, 523.25, 0.02, 0.1);

  for (let i = 0; i < 360; i += 20) {

    let offset = sin(frameCount * speed + i * 0.1) * 50;

    let rColor = map(frequency, 261.63, 523.25, 100, 255);

    stroke(rColor, 150, 200);

    arc(0, 0, 300 + offset, 300 + offset, radians(i), radians(i + 20));

  }

  pop();

}

​

function drawFlickeringStarsBackground(frequency) {

  push();

  resetMatrix();

  translate(-width / 2, -height / 2, -500);

  let speed = map(frequency, 261.63, 523.25, 0.01, 0.05);

  background(0, 0, 20); // 深空背景

  for (let i = 0; i < 300; i++) {

    let x = random(width);

    let y = random(height);

    let brightness = map(sin(frameCount * speed + i), -1, 1, 100, 255);

    stroke(brightness);

    point(x, y);

  }

  pop();

}

​