let amplitude;

let level;

let play = false;

​

let mySound;

function preload() {

  soundFormats("mp3", "ogg");

  mySound = loadSound("assets/sound.mp3");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  angleMode(DEGREES);

  frameRate(60);

  rectMode(CENTER);

  // canvas to click on to play

  let cnv = createCanvas(windowWidth, windowHeight);

  cnv.mousePressed(canvasPressed);

​

  amplitude = new p5.Amplitude();

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

  beet = new p5.Part();

  stroke(255);

  background(42);

}

​

function draw() {

  background(42,1);

  level = amplitude.getLevel();

  strokeWeight(1);

​

  spectrum = fft.analyze();

  trebEnergy = fft.getEnergy("treble");

  midEnergy = fft.getEnergy("mid");

  bassEnergy = fft.getEnergy("bass");

  bas = map(bassEnergy, 0, 255, 0, 100);

  mid = map(midEnergy, 0, 255, 0, 100);

  tre = map(bassEnergy, 0, 255, 0, 100);

​

  if (play) {

    angle += level*2;

    push();

    translate(width/2+ width *sin(angle)*0.2, height / 4);

    rotate(angle);

    stroke(0,150,250,200);

    scale(sin(angle)*level*5)

    line(0, 0, 0, bas);

    noFill();

    stroke(0,150,250,20);

    circle(0,0,bas)

    pop();

    push();

    translate(width/2+ width *sin(angle)*0.2, height / 2);

    rotate(angle+180);

    stroke(200,0,100,200);

    scale(sin(angle)*level*5)

    line(0, 0, 0, mid);

    noFill();

    stroke(200,0,100,20);

    rect(0,0,mid)

    pop();

    push();

    translate(width/2+ width *sin(angle)*0.2, height - height/4);

    rotate(angle+270);

    stroke(200,150,0,200);

    scale(sin(angle)*level*5)

    line(0, 0, 0, tre);

    pop();

  }

}

​

function canvasPressed() {

  background(255);

  setTimeout(() => background(42), 250);

  mySound._playing ? mySound.stop() : mySound.play();

  setTimeout(function () {

    play = play ? false : true;

  }, 2000);

}

​