var fft;

var particles = [];

var particlesRunning = false;

​

function preload() {

  song = loadSound("peace-within-g.mp3");

}

​

function mousePressed() {

    let fs = fullscreen();

    fullscreen(!fs);

  }

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

   cx = windowWidth/2 ;

   cy = windowHeight/2;

}

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  angleMode(DEGREES);

  fft = new p5.FFT();

}

​

function draw() {

  background(0);

  stroke(255);

  strokeWeight(2);

  noFill();

​

  translate(width / 2, height / 2);

​

  fft.analyze();

  amp = fft.getEnergy(20, 200);

​

  var wave = fft.waveform();

​

  for (var t = -1; t <= 1; t += 2) {

    beginShape();

    for (var i = 0; i <= 180; i += 0.5) {

      var index = floor(map(i, 0, 180, 0, wave.length - 5));

​

      var a = 1 * 500;

​

      var r = map(wave[index], -1, 1, -a, a) + 200 + 25;

​

      var x = r * sin(i) * t;

      var y = r * cos(i);

      vertex(x, y);

    }

    endShape();

  }

​

  if (!particlesRunning) return;

  var p = new Particle();

  particles.push(p);

​

  for (var i = particles.length - 100; i >= 0; i--) {

    if (!particles[i].edges()) {

      particles[i].update(amp > 230);

      particles[i].show();

    } else {

      particles.splice(i, 100);

    }

  }

}

​

function mouseClicked() {

  if (song.isPlaying()) {

    song.pause();

    noLoop();

    particlesRunning = false;

  } else {

    song.play();

    loop();

    particlesRunning = true;

  }

}

​

class Particle {

  constructor() {

    this.pos = p5.Vector.random2D().mult(4);

    this.vel = createVector(0, 0);

    this.acc = this.pos.copy().mult(random(0.0001, 0.00001));

​

    this.w = random(2, 1);

  }

  update(cond) {

    this.vel.add(this.acc);

    this.pos.add(this.vel);

    if (cond) {

      this.pos.add(this.vel);

      this.pos.add(this.vel);

      this.pos.add(this.vel);

    }

  }

  edges() {

    if (

      this.pos.x < -width / 2 ||

      this.pos.x > width / 2 ||

      this.pos.y < -height / 2 ||

      this.pos.y > height / 2

    ) {

      return true;

    } else {

      return false;

    }

  }

  show() {

    noStroke();

    fill(255);

    ellipse(this.pos.x, this.pos.y, this.w);

  }

}

​