let mic; // Microphone input

let particleSystem; 

let brightThreshold = 0.1; //Vol threshold to determine when to use bright colors

let usedRadii = []; // Array to store used radii for particles to avoid overlap

​

​

function setup() {

  createCanvas(800, 800, SVG);

  background(255); 

  mic = new p5.AudioIn(); // Create a new AudioIn object

  mic.start(); // Start listening to the microphone input

  particleSystem = new ParticleSystem(); // Initialize the particle system

}

​

​

function draw() {

  background(0); 

  let vol = mic.getLevel(); // Get the current audio input level

​

  let x = width / 2; // X-coordinate for particle 

  let y = height / 2; // Y-coordinate for particle

​

  particleSystem.update(x, y, vol); // Update the particle system with audio data

  particleSystem.display(); // Display the particles on the canvas

}

​

​

​

​

// Particle class to create individual particles

class Particle {

  constructor(x, y, vol) {

    this.x = x; // X-coordinate of the particle

    this.y = y; // Y-coordinate of the particle

    this.radius = this.getUniqueRadius(); // Set a unique radius for the particle

    this.angle = random(TWO_PI); // Set a random initial angle

​

    // Adjust color based on audio input volume

    if (vol >= brightThreshold) {

      this.color = color(random(255), random(100), random(100)); // Bright colors

    } else {

      this.color = color(random(100), random(100), random(255)); // Dull colors

    }

​

    this.speed = map(vol, 0, 1, 0.01, 0.1); // Adjust speed based on audio volume

    this.trail = []; // Array to store the particle's trail

  }

​

  // Method to generate a unique radius for the particle

  getUniqueRadius() {

    let radius;

    do {

      radius = random(20, 400); 

    } while (usedRadii.includes(radius)); // Check if the radius is already used

    usedRadii.push(radius); // Store the used radius

    return radius;

  }

​

  // Method to update the particle's position and trail

  update() { //Determining what trig value to use was mostly based on trying them out and seeing what produces a nicer patterns

    this.angle += 1 / sin(this.speed);

    this.x = width / 2 + cos(this.angle) * this.radius;

    this.y = height / 2 + sin(this.angle) * this.radius;

​

    let v = createVector(this.x, this.y);//using vector to create that trail path

    this.trail.push(v);

​

    if (this.trail.length > 100) {

      this.trail.splice(0, 1);

    }

  }

​

  // Method to display the particle and its trail

  display() {

    stroke(this.color);

    strokeWeight(1);

    noFill();

​

    beginShape();

    for (let i = 0; i < this.trail.length; i++) {

      let pos = this.trail[i];

      vertex(pos.x, pos.y);

    }

    endShape();

​

    ellipse(this.x, this.y, 0, 0); // invisible ellipse to lead the trail

  }

}

​

// Define a ParticleSystem class to instantiate multiple particles

class ParticleSystem {

  constructor() {

    this.particles = []; // Array to store particles in the system

  }

​

  // Method to update the particle system based on audio input

  update(x, y, vol) {

    let numParticles = int(map(vol, 0, 1, 0, 10)); // Calculate the number of particles to create

​

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

      this.particles.push(new Particle(x, y, vol)); // Create new particles

    }

​

    if (this.particles.length > 50) {

      this.particles.splice(0, 1); // Remove older particles to maintain a limit of 50

    }

  }

​

  // Method to display all particles in the system

  display() {

    for (let particle of this.particles) {

      particle.update(); // Update each particle's position

      particle.display(); // Display each particle

    }

  }

}

​