let bgc = 255;

let colors = [[255, 0, 0], [255, 100, 0], [255, 255, 0], [0, 255, 255], [0, 0, 255]];

let song;

let size = 100;

let fft;

let fcfft = [0, 0, 0, 0, 0];

​

function preload(){

  song = loadSound("MySongYourNote.mp3");

}

​

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

  song.play();

  fft = new p5.FFT(0.8, 16);

}

​

function draw() {

  let spectrum = fft.analyze();

  background(bgc);

  strokeWeight(3);

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

    size = 260 - i * 40;

    fill(colors[i][0], colors[i][1], colors[i][2]);

    stroke(round(bgc / 255) * - 255 + 255);

    arc(200, 200, size, size, -90 - angle[i] / 2, -90 + angle[i] / 2);

    arc(sin(angle[i] / 2 + 179) * ((size - 20) / 2) + 200, cos(angle[i] / 2 + 179) * ((size - 20) / 2) + 200, 20, 20, 90 - angle[i] / 2, -90 - angle[i] / 2);

    arc(sin(angle[i] / 2 + 179) * -((size - 20) / 2) + 200, cos(angle[i] / 2 + 179) * ((size - 20) / 2) + 200, 20, 20, -90 + angle[i] / 2 , 90 + angle[i] / 2);

    fill(bgc);

    arc(200, 200, size - 40, size - 40, -90 - angle[i] / 2, -90 + angle[i] / 2);

    noStroke();

    circle(200, 200, size - 43);

  }

​

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

    fcfft[i] = (spectrum[i * 2] + spectrum[i * 2 + 1]) / 2;

    angle[i] = map(fcfft[i], 0, 256, 2, 330);

  }

  stroke(0);

  strokeWeight(10);

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

    line(sin(i * -22.5 + 180) * 150 + 200, cos(i * -22.5 + 180) * 150 + 200, sin(i * -22.5 + 180) * (150 + spectrum[i] / 8) + 200, cos(i * -22.5 + 180) * (150 + spectrum[i] / 8) + 200);

  }

​

}