let pointsPerSpiral = 100; // Points per spiral

let maxRadius = 150; // Maximum radius

let height = 200; // Height of the spiral

let totalPoints = spirals * pointsPerSpiral;

​

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

​

function setup() {

  createCanvas(400, 400, WEBGL);

  angleMode(DEGREES);

  soundSetup();

}

​

function draw() {

  background(30);

  rotateX(60);

  noFill();

  stroke(255);

​

  // Draw the spiral

  beginShape();

  for (var i = 0; i < totalPoints; i++) {

    let angle = map(i, 0, totalPoints, 0, 360 * spirals);

    let rad = map(i, 0, totalPoints, 20, maxRadius);

    let z = map(i, 0, totalPoints, -height / 2, height / 2);

​

    let x = rad * cos(angle);

    let y = rad * sin(angle);

​

    let r = map(sin(frameCount + z), -1, 1, 100, 200);

    let g = map(cos(frameCount + z), -1, 1, 100, 200);

    let b = map(sin(frameCount + z), -1, 1, 200, 100);

​

    stroke(r, g, b);

    vertex(x, y, z);

  }

  endShape();

​

  // Update and display each ball

  for (let j = balls.length - 1; j >= 0; j--) {

    balls[j].update();

    balls[j].display();

    if (balls[j].isDone()) {

      balls.splice(j, 1); // Remove ball if it has finished the path

    }

  }

}

​

function mousePressed() {

  // Create a new ball at the start of the spiral every time the mouse is pressed

  let noteIndex = floor(random(scale.length)); // Randomly pick a note from the scale

  let newBall = new Ball(0, 0, -height / 2, 10, scale[noteIndex]);

  newBall.startMoving();

  balls.push(newBall);

}

​

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;

    // Sound setup

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

    this.osc.freq(this.frequency);

    this.osc.start();

    this.osc.amp(0); // Start with amplitude at 0 to avoid clicks

  }

​

  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); // Gradually increase the amplitude

      } else {

        this.stopMoving();

      }

    }

  }

​

  display() {

    push();

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

    fill(200, 0, 0);

    sphere(this.r);

    pop();

  }

​

  startMoving() {

    this.moving = true;

    this.pathIndex = 0;

  }

​

  stopMoving() {

    this.moving = false;

    this.osc.amp(0, 0.5); // Fade out then stop

    this.osc.stop(0.5); // Give it half a second to fade out

  }

​

  isDone() {

    return !this.moving && this.pathIndex >= totalPoints;

  }

}

​

function soundSetup() {

  // Additional sound setup here if needed

}