let song, fft, layer;

let playing = false;

let fr = 60;

let a, b;

let solidColor; // Store a single color for the entire visual

​

​

​

function preload() {

  myFont = loadFont('Font/DMSans-VariableFont_opsz,wght.ttf'); 

  myFont2 = loadFont('Font/Poppins-Bold.ttf'); 

  //********************

  //STEP 1 

  //Upload your audio file to "Audio" folder and replace "Replace Audio.mp3" with your audio file name.

  //Recommended .mp3 length not to exceed 30 seconds.

  song = loadSound("Audio/Replace Audio.mp3");

  //********************

  song.onended(() => {

    playing = false;

    document.getElementById("audio").innerText = "Play";

    a = 0;

  });

}

​

function setup() {

  createCanvas(500, 650);

  layer = createGraphics(width, height);

  background('black');

  fft = new p5.FFT(0, 256);

  a = 360 / (song.duration() * fr);

  b = a;

​

  // Generate a single random solid color for the whole visual

  solidColor = [random(50, 255), random(50, 255), random(50, 255)];

}

​

function draw() {

  background(0);

​

  // Title

  fill(255);

  textSize(70);

  textFont(myFont2); // Already bold

  textAlign(CENTER, CENTER);

  //********************

  //STEP 2 

  //Replace title text to your food name.  

  text("FOOD NAME", width / 2, 55);

  //********************

​

  // Footer Texts

  textFont(myFont);

  textSize(10);

  //********************

  //STEP 3 

  //Replace "Your Name" and "Unit 7" text

  textAlign(RIGHT, CENTER);

  text("YOUR NAME", width - 30, 615); // Right aligned

  textAlign(LEFT, CENTER);

  text("Unit 7", 30, 615); // Left aligned

  //********************

  // Audio Visualization

  layer.noFill();

  layer.colorMode(RGB);

  let spectrumA = fft.analyze();

  let spectrumB = spectrumA.slice().reverse();

  spectrumB.splice(0, 40);

​

  push();

  translate(width / 2, height / 2 + 20);

  noFill();

​

  beginShape();

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

    let freqAmp = spectrumB[i]; 

    let x = map(freqAmp, 0, 256, -5, 5);

    let y = map(i, 0, spectrumB.length, 350, 950);

    vertex(x, y);

  }

  endShape();

  pop();

​

  push();

  translate(width / 2, height / 2 + 30);

  rotate(radians(a));

​

  layer.push();

  layer.translate(width / 2, height / 2);

  layer.rotate(radians(-a));

​

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

    let freqAmp = spectrumB[i];

​

    if (freqAmp > 10) { 

      layer.strokeWeight(0.05 * freqAmp);

      layer.stroke(solidColor[0], solidColor[1], solidColor[2], freqAmp / 40); // Apply single solid color

      layer.line(0, i, 0, i);

    }

  }

​

  layer.pop();

  image(layer, -width / 2, -height / 2);

  pop();

​

  if (playing) a += b;

}

​

function toggleAudio() {

  if (!playing) {

    song.play();

    console.log("playing");

    document.getElementById("audio").innerText = "Pause";

  } else {

    song.pause();

    console.log("paused");

    document.getElementById("audio").innerText = "Play";

  }

  playing = !playing;

}