​

function toggleSong() {

  if(song.isPlaying()) {

    song.pause();

  } else {

    song.play();

  }

}

​

function preload() {

  song = loadSound('audio/Ghostwriter.mp3'); 

}

​

function setup() {

  createCanvas(600, 600);

  angleMode(DEGREES); // Change the mode to DEGREES

  colorMode(HSB);

  buttton = createButton('Toggle Play');

  buttton.mousePressed(toggleSong);

  svgButtton = createButton('Save SVG');

  svgButtton.mousePressed(saveSvg);

  song.play();  

  fft = new p5.FFT(0.9, 128);

  space_between_lines = width / 128;

}

​

//Switch to branch symmetric-spectrum using "git checkout symmetric-spectrum" if you want symmetric spectrum.

​

function draw() {

  let spectrum = fft.analyze();

  // console.log(song.currentTime())

  let songTime = map(song.currentTime(), 0, song.duration(), 0, width);

  console.log(songTime)

  let a = atan2(songTime - height / 2, songTime - width / 2);

  // console.log(a)

  translate(width / 2, height / 2);

  push();

  rotate(a);

  // rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees

  pop();

  angleMode(RADIANS); // Change the mode to RADIANS

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

    // fill(255,255,255);

    rotate(a); // variable a stays the same

    let amp = spectrum[i];

    let y = map(amp, 0, 256, height, 0);

    rect(i * space_between_lines, y, space_between_lines, height - y);

  }

}

​

// Chrome 70 will require user gestures to enable web audio api

// Click on the web page to start audio

function touchStarted() {

  getAudioContext().resume();

}

​

function saveSvg() {

  print("SAVE SVG")

  save(img, 'myImage.png');

}