final

​

​

// ---------- GLOBAL COLORS & DIMENSIONS ----------

let GRADIENT_TOP, GRADIENT_BOTTOM;

let BANNER_COLOR, CARD_COLOR, TEXT_COLOR, SUBTEXT_COLOR, ACCENT_COLOR, LINE_COLOR;

​

const CANVAS_W = 540;

const CANVAS_H = 1080;

​

// App States

let state = "list"; // "list", "player", "visualizer", "artistProfile", "poll"

​

// Example track data

let tracks = [

  {

    title: "Strategy",

    artist: "Lana",

    file: null,

    cover: null,

    plays: "1.5B",

    artistInfo: "Known for her genre-bending sound and poetic lyricism...",

    lyrics: `Hey, boy, I'ma get ya...`,

  },

  {

    title: "Sweetest Obsession",

    artist: "Lana",

    file: null,

    cover: null,

    plays: "623M",

    artistInfo: "Known for her genre-bending sound and poetic lyricism...",

    lyrics: `Boy, you caught my eyes...`,

  },

  {

    title: "Keeper",

    artist: "Lana",

    file: null,

    cover: null,

    plays: "98M",

    artistInfo: "A versatile artist whose gentle yet powerful voice touches hearts.",

    lyrics: `자꾸만 시선이 마주치고...`,

  },

  {

    title: "I Can't Stop Me",

    artist: "Lana",

    file: null,

    cover: null,

    plays: "703M",

    artistInfo: "A bold storyteller who explores the complexities of human emotions.",

    lyrics: `Why is it so hard to resist?...`,

  },

  {

    title: "Please Please Please",

    artist: "Lana & Emre",

    file: null,

    cover: null,

    plays: "134M",

    artistInfo: "A collaboration between two artists blending their unique styles.",

    lyrics: `I know I have good judgement...`,

  },

];

​

// Additional new songs for poll

let newSongs = [

  { title: "Diamond Nights" },

  { title: "Secret Lover" },

  { title: "Moonlight Road" },

];

​

let currentTrackIndex = -1;

​

// p5.Sound analyzer

let fft;

​

// UI objects

let trackList;

let playerOverlay;

​

// ---------- p5.js Preload ----------

function preload() {

  // Replace with your own file paths

  tracks[0].file = loadSound("Strategy1.mp3");

  tracks[1].file = loadSound("Sweetest Obsession (1).mp3");

  tracks[2].file = loadSound("Keeper.mp3");

  tracks[3].file = loadSound("I Cant stop me.mp3");

  tracks[4].file = loadSound("Please Please Please.mp3");

​

  // Same cover for all, just for demonstration

  tracks[0].cover = loadImage("Lana Album Cover.png");

  for (let i = 1; i < tracks.length; i++) {

    tracks[i].cover = loadImage("Lana Album Cover.png");

  }

}

​

// ---------- p5.js Setup ----------

function setup() {

  createCanvas(CANVAS_W, CANVAS_H);

  textFont("Helvetica");

​

  // Unique color palette

  GRADIENT_TOP = color(60, 100, 160);

  GRADIENT_BOTTOM = color(130, 80, 180);

  BANNER_COLOR = color(255, 255, 255, 25); 

  CARD_COLOR = color(255, 255, 255, 15);   

  TEXT_COLOR = color(255);

  SUBTEXT_COLOR = color(200);

  ACCENT_COLOR = color(255, 195, 0); 

  LINE_COLOR = color(255, 255, 255, 40);

​

  // p5.FFT for visualizer

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

​

  trackList = new TrackList(tracks);

  playerOverlay = new PlayerOverlay();

}

​

// ---------- p5.js Draw Loop ----------

function draw() {

  // Diagonal gradient

  setGradientDiagonal(0, 0, CANVAS_W, CANVAS_H, GRADIENT_TOP, GRADIENT_BOTTOM);

​

  // Subtle rotating ellipse background

  drawRotatingBackground();

​

  if (state === "list") {

    trackList.display();

    displayMiniPlayerBar(); // <-- mini player for currently playing track

  } else if (state === "player") {

    playerOverlay.display();

  } else if (state === "visualizer") {

    displayVisualizerTab();

  } else if (state === "artistProfile") {

    displayArtistProfile();

  } else if (state === "poll") {

    displayPollPage();

  }

}

​

// ========== ANIMATED BACKGROUND ==========

function drawRotatingBackground() {

  push();

  noStroke();

  fill(255, 255, 255, 10); 

  translate(width / 2, height / 2);

  rotate(frameCount * 0.001);

  ellipse(0, 0, width * 1.5, width * 1.5);

  pop();

}

​

// ========== MOUSE & SCROLL EVENTS ==========

function mousePressed() {

  if (state === "list") {

    let clickedIndex = trackList.getClickedTrackIndex();

    if (clickedIndex !== -1) {

      playTrack(clickedIndex);

      state = "player";

    } else {

      // Also check if user clicked mini player buttons

      checkMiniPlayerClicks();

    }

  } 

  else if (state === "player") {

    let clickedButton = playerOverlay.getClickedButton();

    if (clickedButton === "playPause") {

      togglePlayPause();

    } else if (clickedButton === "next") {

      nextTrack();

    } else if (clickedButton === "prev") {

      prevTrack();

    } else if (clickedButton === "close") {

      state = "list";

    } else if (clickedButton === "seek") {

      playerOverlay.seekTrack();

    } else if (clickedButton === "visualizer") {

      state = "visualizer";

    } else if (clickedButton === "artist") {

      state = "artistProfile";

    }

  }

  else if (state === "visualizer") {

    // Back from visualizer

    let backSize = 40;

    let backX = 35;

    let backY = 50;

    if (dist(mouseX, mouseY, backX, backY) < backSize / 2) {

      state = "player";

    }

  }

  else if (state === "artistProfile") {

    // "Back" button

    let backSize = 40;

    let backX = 35;

    let backY = 50;

    let dBack = dist(mouseX, mouseY, backX, backY);

    if (dBack < backSize / 2) {

      state = "player";

      return;

    }

​

    // "Vote Now" button bounding box

    let pollY = CANVAS_H - 260;

    let pollBtnX = 20;

    let pollBtnY = pollY + 70;

    let pollBtnW = width - 40;

    let pollBtnH = 50;

​

    if (

      mouseX > pollBtnX && 

      mouseX < pollBtnX + pollBtnW &&

      mouseY > pollBtnY &&

      mouseY < pollBtnY + pollBtnH

    ) {

      // Go to poll

      state = "poll";

    }

  }

  else if (state === "poll") {

    // "Back" button

    let backSize = 40;

    let backX = 35;

    let backY = 50;

    let dBack = dist(mouseX, mouseY, backX, backY);

    if (dBack < backSize / 2) {

      state = "artistProfile";

      return;

    }

​

    // Poll song boxes

    let xPadding = 40;

    let boxHeight = 60;

    let startY = 200;

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

      let boxY = startY + i * (boxHeight + 30);

      if (

        mouseX > xPadding &&

        mouseX < width - xPadding &&

        mouseY > boxY &&

        mouseY < boxY + boxHeight

      ) {

        let chosenSong = newSongs[i].title;

        alert("You voted for '" + chosenSong + "' as the next title track!");

        state = "artistProfile";

      }

    }

  }

}

​

function mouseWheel(event) {

  if (state === "player") {

    playerOverlay.scrollY -= event.delta;

    playerOverlay.scrollY = constrain(

      playerOverlay.scrollY,

      -(playerOverlay.contentHeight - height),

      0

    );

  }

}

​

// ---------- CORE PLAYER FUNCTIONS ----------

function playTrack(index) {

  if (currentTrackIndex !== -1 && tracks[currentTrackIndex].file.isPlaying()) {

    tracks[currentTrackIndex].file.stop();

  }

  currentTrackIndex = index;

  tracks[index].file.play();

  fft.setInput(tracks[index].file);

}

​

function togglePlayPause() {

  let track = tracks[currentTrackIndex];

  if (!track) return;

  if (track.file.isPlaying()) {

    track.file.pause();

  } else {

    track.file.play();

  }

}

​

function nextTrack() {

  let nextIndex = (currentTrackIndex + 1) % tracks.length;

  playTrack(nextIndex);

}

​

function prevTrack() {

  let prevIndex = currentTrackIndex - 1;

  if (prevIndex < 0) prevIndex = tracks.length - 1;

  playTrack(prevIndex);

}

​

// ========== MINI PLAYER (HOME) ==========

function displayMiniPlayerBar() {

  // Only show if a track is playing or paused (i.e. currentTrackIndex != -1)

  if (currentTrackIndex === -1) return;

​

  push();

  fill(0, 0, 0, 120);

  noStroke();

  rect(0, height - 70, width, 70);

​

  // Track info

  let track = tracks[currentTrackIndex];

  fill(TEXT_COLOR);

  textSize(16);

  textAlign(LEFT, CENTER);

  text(track.title, 20, height - 50);

​

  fill(SUBTEXT_COLOR);

  textSize(14);

  text(track.artist, 20, height - 30);

​

  // Buttons: Prev, Play/Pause, Next

  let buttonSize = 40;

  // positions for each button

  let btnPrevX = width - 180;

  let btnY = height - 35; 

  let btnPlayX = width - 120;

  let btnNextX = width - 60;

​

  // Draw Prev

  fill(ACCENT_COLOR);

  ellipse(btnPrevX, btnY, buttonSize, buttonSize);

  fill(0);

  textAlign(CENTER, CENTER);

  textSize(16);

  text("«", btnPrevX, btnY + 1);

​

  // Draw Play/Pause

  fill(ACCENT_COLOR);

  ellipse(btnPlayX, btnY, buttonSize, buttonSize);

  fill(0);

  textSize(18);

  if (track.file.isPlaying()) {

    text("❚❚", btnPlayX, btnY + 1);

  } else {

    text("►", btnPlayX, btnY + 1);

  }

​

  // Draw Next

  fill(ACCENT_COLOR);

  ellipse(btnNextX, btnY, buttonSize, buttonSize);

  fill(0);

  textSize(16);

  text("»", btnNextX, btnY + 1);

​

  pop();

}

​

/**

 * Check if user clicked on mini player buttons (Prev/Play/Pause/Next) 

 * while on the home (list) screen

 */

function checkMiniPlayerClicks() {

  if (currentTrackIndex === -1) return; // no track playing

​

  // bounding boxes

  let buttonSize = 40;

  let btnPrevX = width - 180;

  let btnY = height - 35;

  let btnPlayX = width - 120;

  let btnNextX = width - 60;

​

  // Distances from mouse

  let dPrev = dist(mouseX, mouseY, btnPrevX, btnY);

  let dPlay = dist(mouseX, mouseY, btnPlayX, btnY);

  let dNext = dist(mouseX, mouseY, btnNextX, btnY);

​

  if (dPrev < buttonSize / 2) {

    prevTrack();

  } else if (dPlay < buttonSize / 2) {

    togglePlayPause();

  } else if (dNext < buttonSize / 2) {

    nextTrack();

  }

}

​

// =============================

// TrackList Class

// =============================

class TrackList {

  constructor(tracks) {

    this.tracks = tracks;

    this.yStart = 220;

    this.xPadding = 20;

  }

​

  display() {

    this.displayHeroSection();

    // Show "Artist:" or "My Collection" or anything you want

    this.displaySectionTitle("Artist:", 40);

    this.displayTracks();

  }

​

  // ---------- Hero Section with angled banner & shape ----------

  displayHeroSection() {

    push();

    noStroke();

    // Angled banner

    fill(BANNER_COLOR);

    beginShape();

    vertex(0, 0);

    vertex(width, 0);

    vertex(width, 200);

    vertex(width / 2, 180);

    vertex(0, 200);

    endShape(CLOSE);

​

    // Title text

    fill(TEXT_COLOR);

    textSize(34);

    textAlign(LEFT, BOTTOM);

    text("Lana", this.xPadding, 80);

​

    // Subheader

    fill(SUBTEXT_COLOR);

    textSize(18);

    text("Strategy - First EP album", this.xPadding, 120);

​

    // Show Lana's album cover (e.g. track[0])

    let cover = tracks[0].cover;

    if (cover) {

      imageMode(CENTER);

      image(cover, width - 80, 100, 90, 90);

    }

    pop();

  }

​

  displaySectionTitle(title, y) {

    push();

    fill(TEXT_COLOR);

    textSize(22);

    textAlign(LEFT, CENTER);

    text(title, this.xPadding, y);

    pop();

  }

​

  displayTracks() {

    push();

    let cardH = 80;

    let spacing = 90;

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

      let y = this.yStart + i * spacing;

​

      fill(CARD_COLOR);

      noStroke();

      rect(this.xPadding, y, width - this.xPadding * 2, cardH, 10);

​

      let coverSize = 60;

      if (this.tracks[i].cover) {

        imageMode(CORNER);

        image(this.tracks[i].cover, this.xPadding + 10, y + 10, coverSize, coverSize);

      }

​

      fill(TEXT_COLOR);

      textAlign(LEFT, TOP);

      textSize(16);

      text(this.tracks[i].title, this.xPadding + coverSize + 20, y + 15);

​

      fill(SUBTEXT_COLOR);

      textSize(14);

      text(`${this.tracks[i].artist} • ${this.tracks[i].plays} plays`,

           this.xPadding + coverSize + 20,

           y + 40);

    }

    pop();

  }

​

  getClickedTrackIndex() {

    let cardH = 80;

    let spacing = 90;

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

      let y = this.yStart + i * spacing;

      if (

        mouseX > this.xPadding &&

        mouseX < width - this.xPadding &&

        mouseY > y &&

        mouseY < y + cardH

      ) {

        return i;

      }

    }

    return -1;

  }

}

​

// =============================

// PlayerOverlay Class

// =============================

class PlayerOverlay {

  constructor() {

    this.closeButton = { x: 60, y: 45, size: 30 };

    this.visualizerButton = { x: CANVAS_W - 60, y: 45, size: 30 };

    this.artistButton = { x: CANVAS_W / 2, y: 45, size: 30 };

​

    this.coverSize = CANVAS_W - 220;

    this.coverY = 240;

​

    this.progressBar = { x: 30, y: 520, w: CANVAS_W - 60, h: 6 };

​

    this.playPauseButton = { x: CANVAS_W / 2, y: 600, size: 60 };

    this.nextButton = { x: CANVAS_W / 2 + 100, y: 600, size: 50 };

    this.prevButton = { x: CANVAS_W / 2 - 100, y: 600, size: 50 };

​

    this.scrollY = 0;

    this.contentHeight = CANVAS_H * 2;

  }

​

  display() {

    let track = tracks[currentTrackIndex];

    if (!track) return;

​

    push();

    translate(0, this.scrollY);

​

    setGradientDiagonal(0, 0, width, CANVAS_H * 2.5, GRADIENT_BOTTOM, GRADIENT_TOP);

​

    this.displayTopBar();

    this.displayCoverAndInfo(track);

    this.displayProgressBar(track);

    this.displayControls(track);

​

    stroke(LINE_COLOR);

    strokeWeight(1);

    line(20, 650, width - 20, 650);

​

    this.displayLyricsAndInfo(track, 670);

    pop();

  }

​

  displayTopBar() {

    fill(0, 0, 0, 100);

    noStroke();

    rect(0, 0, width, 80);

​

    // Close

    fill(ACCENT_COLOR);

    circle(this.closeButton.x, this.closeButton.y, this.closeButton.size);

    fill(0);

    textAlign(CENTER, CENTER);

    textSize(16);

    text("X", this.closeButton.x, this.closeButton.y + 1);

​

    // Visualizer

    fill(ACCENT_COLOR);

    circle(this.visualizerButton.x, this.visualizerButton.y, this.visualizerButton.size);

    fill(0);

    textSize(16);

    textAlign(CENTER, CENTER);

    text("V", this.visualizerButton.x, this.visualizerButton.y + 1);

​

    // Artist

    fill(ACCENT_COLOR);

    circle(this.artistButton.x, this.artistButton.y, this.artistButton.size);

    fill(0);

    textSize(16);

    textAlign(CENTER, CENTER);

    text("A", this.artistButton.x, this.artistButton.y + 1);

  }

​

  displayCoverAndInfo(track) {

    // Decorative circle behind cover

    push();

    noStroke();

    fill(255, 255, 255, 20);

    ellipse(width / 2, this.coverY + this.coverSize / 2, this.coverSize * 1.3, this.coverSize * 1.3);

    pop();

​

    imageMode(CENTER);

    if (track.cover) {

      image(track.cover, width / 2, this.coverY, this.coverSize, this.coverSize);

    }

​

    fill(TEXT_COLOR);

    textAlign(CENTER, CENTER);

    textSize(24);

    text(track.title, width / 2, this.coverY + this.coverSize / 2 + 40);

​

    fill(SUBTEXT_COLOR);

    textSize(18);

    text(track.artist, width / 2, this.coverY + this.coverSize / 2 + 70);

  }

​

  displayProgressBar(track) {

    let currentTime = track.file.currentTime();

    let totalTime = track.file.duration();

​

    fill(255, 255, 255, 50);

    noStroke();

    rect(this.progressBar.x, this.progressBar.y, this.progressBar.w, this.progressBar.h, 3);

​

    fill(ACCENT_COLOR);

    let w = map(currentTime, 0, totalTime, 0, this.progressBar.w);

    rect(this.progressBar.x, this.progressBar.y, w, this.progressBar.h, 3);

​

    fill(SUBTEXT_COLOR);

    textAlign(LEFT, CENTER);

    textSize(12);

    text(formatTime(currentTime), this.progressBar.x, this.progressBar.y + 20);

​

    textAlign(RIGHT, CENTER);

    text(formatTime(totalTime), this.progressBar.x + this.progressBar.w, this.progressBar.y + 20);

  }

​

  displayControls(track) {

    // Play/Pause

    fill(ACCENT_COLOR);

    noStroke();

    circle(this.playPauseButton.x, this.playPauseButton.y, this.playPauseButton.size);

    fill(0);

    textAlign(CENTER, CENTER);

    textSize(24);

    if (track.file.isPlaying()) {

      text("❚❚", this.playPauseButton.x, this.playPauseButton.y + 2);

    } else {

      text("►", this.playPauseButton.x, this.playPauseButton.y + 2);

    }

​

    fill(255, 255, 255, 100);

    circle(this.nextButton.x, this.nextButton.y, this.nextButton.size);

    fill(0);

    textAlign(CENTER, CENTER);

    textSize(22);

    text("»", this.nextButton.x, this.nextButton.y + 1);

​

    fill(255, 255, 255, 100);

    circle(this.prevButton.x, this.prevButton.y, this.prevButton.size);

    fill(0);

    textAlign(CENTER, CENTER);

    textSize(22);

    text("«", this.prevButton.x, this.prevButton.y + 1);

  }

​

  displayLyricsAndInfo(track, startY) {

    fill(TEXT_COLOR);

    textSize(18);

    textAlign(LEFT, TOP);

    text("About the Artist", 20, startY);

​

    fill(SUBTEXT_COLOR);

    textSize(14);

    text(track.artistInfo, 20, startY + 30, width - 40, 120);

​

    stroke(LINE_COLOR);

    strokeWeight(1);

    line(20, startY + 160, width - 20, startY + 160);

​

    fill(TEXT_COLOR);

    noStroke();

    textSize(18);

    text("Lyrics", 20, startY + 180);

​

    fill(SUBTEXT_COLOR);

    textSize(14);

    text(track.lyrics, 20, startY + 210, width - 40, 800);

  }

​

  getClickedButton() {

    let my = mouseY - this.scrollY;

​

    // Close

    let dClose = dist(mouseX, my, this.closeButton.x, this.closeButton.y);

    if (dClose < this.closeButton.size / 2) return "close";

​

    // Visualizer

    let dViz = dist(mouseX, my, this.visualizerButton.x, this.visualizerButton.y);

    if (dViz < this.visualizerButton.size / 2) return "visualizer";

​

    // Artist

    let dArt = dist(mouseX, my, this.artistButton.x, this.artistButton.y);

    if (dArt < this.artistButton.size / 2) return "artist";

​

    // Play/Pause

    let dPP = dist(mouseX, my, this.playPauseButton.x, this.playPauseButton.y);

    if (dPP < this.playPauseButton.size / 2) return "playPause";

​

    // Next

    let dNext = dist(mouseX, my, this.nextButton.x, this.nextButton.y);

    if (dNext < this.nextButton.size / 2) return "next";

​

    // Prev

    let dPrev = dist(mouseX, my, this.prevButton.x, this.prevButton.y);

    if (dPrev < this.prevButton.size / 2) return "prev";

​

    // Progress bar

    let bx1 = this.progressBar.x;

    let bx2 = this.progressBar.x + this.progressBar.w;

    let by1 = this.progressBar.y - 10;

    let by2 = this.progressBar.y + 20;

    if (mouseX > bx1 && mouseX < bx2 && my > by1 && my < by2) {

      return "seek";

    }

​

    return null;

  }

​

  seekTrack() {

    let track = tracks[currentTrackIndex];

    if (!track) return;

    let totalTime = track.file.duration();

    let seekPos = map(mouseX, this.progressBar.x, this.progressBar.x + this.progressBar.w, 0, totalTime);

    track.file.jump(seekPos);

  }

}

​

// ---------- VISUALIZER TAB ----------

function displayVisualizerTab() {

  background(0);

​

  // Back button

  let backX = 35;

  let backY = 50;

  let backSize = 40;

  fill(ACCENT_COLOR);

  noStroke();

  circle(backX, backY, backSize);

  fill(0);

  textAlign(CENTER, CENTER);

  textSize(16);

  text("←", backX, backY + 1);

​

  fill(255);

  textAlign(CENTER, CENTER);

  textSize(20);

  text("Visualizer Tab", width / 2, 60);

​

  let spectrum = fft.analyze();

  let barCount = spectrum.length;

  let barWidth = width / barCount;

​

  push();

  translate(0, height - 50);

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

    let amp = spectrum[i];

    let barHeight = map(amp, 0, 255, 0, height - 100);

    fill(ACCENT_COLOR);

    rect(i * barWidth, 0, barWidth - 2, -barHeight);

  }

  pop();

}

​

// ========== ARTIST PROFILE TAB ==========

function displayArtistProfile() {

  background(10);

​

  // Back button

  let backSize = 40;

  let backX = 35;

  let backY = 50;

  fill(ACCENT_COLOR);

  noStroke();

  circle(backX, backY, backSize);

  fill(0);

  textAlign(CENTER, CENTER);

  textSize(16);

  text("←", backX, backY + 1);

​

  fill(255);

  textAlign(CENTER, CENTER);

  textSize(20);

  text("Artist Profile", width / 2, 60);

​

  let track = tracks[currentTrackIndex];

  if (!track) return;

​

  fill(ACCENT_COLOR);

  textSize(28);

  text(track.artist, width / 2, 120);

​

  fill(SUBTEXT_COLOR);

  textSize(14);

  textAlign(CENTER, TOP);

  text(

    "Welcome to the official artist page!\nCheck out popular releases and participate in our exclusive poll!",

    40,

    160,

    width - 80,

    120

  );

​

  push();

  fill(255);

  textSize(18);

  textAlign(LEFT, TOP);

  text("Popular Songs", 40, 300);

​

  let yPos = 340;

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

    if (tracks[i].artist.includes(track.artist)) {

      fill(255);

      textSize(16);

      text("- " + tracks[i].title + " (" + tracks[i].plays + ")", 40, yPos);

      yPos += 30;

    }

  }

  pop();

​

  // Fan Poll

  push();

  fill(255);

  textSize(18);

​

  // The poll area starts at 'pollY'

  let pollY = CANVAS_H - 260; 

  textAlign(LEFT, TOP);

  text("Fan Poll: Vote for your favorite new track!", 40, pollY);

​

  fill(SUBTEXT_COLOR);

  textSize(14);

  text("Click here to help choose the next title track!", 40, pollY + 30, width - 80);

​

  // The "Vote Now" rectangle

  noStroke();

  fill(ACCENT_COLOR);

  rect(20, pollY + 70, width - 40, 50, 10);

​

  fill(0);

  textAlign(CENTER, CENTER);

  textSize(16);

  text("Vote Now", width / 2, pollY + 95);

  pop();

}

​

// ========== NEW POLL TAB ==========

function displayPollPage() {

  background(20);

​

  // Back button

  let backX = 35;

  let backY = 50;

  let backSize = 40;

  fill(ACCENT_COLOR);

  noStroke();

  circle(backX, backY, backSize);

  fill(0);

  textAlign(CENTER, CENTER);

  textSize(16);

  text("←", backX, backY + 1);

​

  fill(255);

  textAlign(CENTER, CENTER);

  textSize(20);

  text("New Album Poll", width / 2, 60);

​

  fill(SUBTEXT_COLOR);

  textSize(14);

  textAlign(CENTER, TOP);

  text(

    "Help choose the next album's title track.\nClick a song below to cast your vote!",

    40,

    100,

    width - 80

  );

​

  let xPadding = 40;

  let boxHeight = 60;

  let startY = 200;

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

    let boxY = startY + i * (boxHeight + 30);

    fill(ACCENT_COLOR);

    noStroke();

    rect(xPadding, boxY, width - xPadding * 2, boxHeight, 10);

​

    fill(0);

    textAlign(CENTER, CENTER);

    textSize(16);

    text(newSongs[i].title, width / 2, boxY + boxHeight / 2);

  }

}

​

// ---------- Utility: Format mm:ss ----------

function formatTime(seconds) {

  if (isNaN(seconds)) return "0:00";

  let m = floor(seconds / 60);

  let s = floor(seconds % 60);

  if (s < 10) s = "0" + s;

  return m + ":" + s;

}

​

/**

 * A diagonal gradient from top-left to bottom-right

 */

function setGradientDiagonal(x, y, w, h, c1, c2) {

  noFill();

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

    let inter = map(i, 0, h, 0, 1);

    let c = lerpColor(c1, c2, inter);

    stroke(c);

    line(x, y + i, x + w, y + i);

  }

}

​