Song Visualisation (Radial)

let sound;

let peaks;

let index = 0;

let amplitude;

let radius;

​

function preload() {

  sound = loadSound("onedeepstar.mp3");

}

​

function setup() {

  cnv = createCanvas(700, 700);

  background(100);

​

  //cnv.mouseClicked(togglePlay);

  sound.amp(0.2);

​

  sound.loop();

  amplitude = new p5.Amplitude();

  peaks = sound.getPeaks();

  print(sound.duration());

}

​

function draw() {

  background(100);

​

  radius = width/2-50;

  translate(width/2, height/2);

  // Peak circle

  noFill();

  stroke(255);

  beginShape();

  for (i=0; i<peaks.length; i++) {

    peak = map(peaks[i], 0, 1, 0, 50);

    step = map(i, 0, peaks.length, 0, 2*PI);

    x = (peak+radius) * cos(step);

    y = (peak+radius) * sin(step);

    vertex(x, y);

    //radius -= 1;

  }

  endShape();

  // Sound position

  sound_angle = map(sound.currentTime(), 0, sound.duration(), 0, 2*PI);

  sx = (peak+radius) * cos(sound_angle);

  sy = (peak+radius) * sin(sound_angle);

  ellipse(sx, sy, 10, 10);

}