let img;

let img2;

let isOn = false;

let angle = 0;

let fft;

let particles = [];

​

function preload() {

  song = loadSound('audio.mp3');

  img = loadImage('img.jpg');

  img2 = loadImage('vinyl.png');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  angleMode(DEGREES);

  imageMode(CENTER);

  rectMode(CENTER);

  fft = new p5.FFT(0.3);

  img.filter(BLUR, 12);

}

​

function draw() {

  background(0);

  translate (width/2, height/2);

  fft.analyze()

  amp = fft.getEnergy(20, 200);

  push();

  if (amp > 200) {

    scale (1.03);

  }

  image(img, 0, 0, width, height);

  pop();

  let alpha = map(amp, 0, 255, 160, 130);

  fill(0, alpha);

  noStroke();

  rect (0, 0, width, height);

  stroke(255);

  strokeWeight(3);

  noFill();

  push();

    rotate(angle);

  if (isOn){

    angle += 1;

  }

  image(img2, 0, 0, 300, 300);

  pop();

  let wave = fft.waveform();

​

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

    beginShape();

    for (let i = 0; i <= 180; i+= 0.4){

      let index = floor(map(i, 0, 180, 0, wave.length - 1));

      let r =map(wave[index], -1, 1, 150, 350);

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

      let y = r * cos(i);

      vertex(x,y);

      }

      endShape();

  }

  let p = new Particle();

  particles.push(p);

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

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

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

      particles[i].show();

    } else {

     particles.splice(i, 1); 

    }

  }

}

​

function mouseClicked(){

  if (song.isPlaying()){

    song.pause();

    noLoop();

    isOn = false;

  } else {

    song.play();

    loop();

    isOn = true;

  }

}

​

class Particle {

  constructor() {

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

    this.vel = createVector(0,0);

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

    this.w = random(3, 5);

  }

  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(random(255),random(255), random(255));

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

  }

}

​

//https://www.youtube.com/watch?v=uk96O7N1Yo0&ab_channel=ColorfulCoding