let instructionScreen = true; // Instruction screen control

let spotify; // Spotify object

let songIndex = 0; // To switch between songs

let songs = [];

let songNames = ['Song 1', 'Song 2', 'Song 3'];

​

class SpotifyApp {

  constructor() {

    this.playing = false;

    this.timeElapsed = 0;

    this.startTime = 0;

  }

​

  // Display Spotify screen

  display() {

    background(40, 50, 60); // Dark background like Spotify

    fill(255);

    textAlign(CENTER, CENTER);

    textSize(30);

    text("Spotify", width / 2, 50); // Spotify Title

​

    // Display current song

    textSize(20);

    text(songNames[songIndex], width / 2, 120);

​

    // Song progress bar

    let progress = this.playing ? (millis() - this.startTime) / 1000 : this.timeElapsed;

    fill(0, 255, 0);

    rect(100, 200, map(progress, 0, songs[songIndex].duration(), 0, 400), 20);

​

    // Play/Pause button

    fill(255);

    textSize(16);

    text(this.playing ? "Pause" : "Play", width / 2, 250);

​

    // Next song button

    fill(255, 0, 0);

    rect(500, 180, 50, 50); // Button for next song

    fill(255);

    textSize(16);

    text("Next", 525, 205); // Label

  }

​

  // Play/Pause functionality

  togglePlay() {

    if (this.playing) {

      this.timeElapsed = millis() - this.startTime; // Store time before pausing

      songs[songIndex].pause();

      this.playing = false;

    } else {

      songs[songIndex].play();

      this.startTime = millis() - this.timeElapsed; // Resume from where paused

      this.playing = true;

    }

  }

​

  // Switch to the next song

  nextSong() {

    songs[songIndex].stop(); // Stop the current song

    this.timeElapsed = 0; // Reset time elapsed for the new song

    songIndex = (songIndex + 1) % songs.length; // Move to next song

    songs[songIndex].play(); // Play new song

    this.startTime = millis(); // Reset the start time

  }

}

​

function preload() {

  // Load songs

  songs.push(loadSound('music_sample.wav'));

}

​

function setup() {

  createCanvas(600, 800); // Phone size canvas

  spotify = new SpotifyApp(); // Create Spotify object

}

​

function draw() {

  if (instructionScreen) {

    // Instruction Screen

    background(50);

    fill(255);

    textSize(30);

    textAlign(CENTER, CENTER);

    text("Welcome to the Phone!", width / 2, height / 3);

    textSize(20);

    text("Click anywhere to start using the phone.", width / 2, height / 2);

  } else {

    drawPhone(); // Draw the phone

​

    if (currentApp === null) {

      // Home screen of the phone

      drawHomeScreen();

    } else if (currentApp === "Spotify") {

      spotify.display(); // Display Spotify app

    }

  }

}

​

function drawPhone() {

  // Draw the outline of the phone

  fill(0);

  rect(50, 50, 500, 700, 20); // Phone body

  fill(255);

  rect(60, 60, 480, 680); // Phone screen

  // Draw home button (circle at the bottom)

  fill(0);

  ellipse(300, 730, 80, 80);

}

​

function drawHomeScreen() {

  fill(0);

  textAlign(CENTER, CENTER);

  textSize(30);

  text("Home Screen", width / 2, 100);

  // Draw Spotify icon (simple rectangle for now)

  fill(50, 200, 50);

  rect(200, 300, 200, 100, 20);

  fill(255);

  textSize(20);

  text("Spotify", 300, 350);

}

​

// Handle mouse press

function mousePressed() {

  if (instructionScreen) {

    instructionScreen = false;

  } else if (currentApp === null) {

    // Check if user clicked on Spotify icon on home screen

    if (mouseX > 200 && mouseX < 400 && mouseY > 300 && mouseY < 400) {

      currentApp = "Spotify";

    }

  } else if (currentApp === "Spotify") {

    // Spotify play/pause button area

    if (mouseX > width / 2 - 30 && mouseX < width / 2 + 30 && mouseY > 230 && mouseY < 270) {

      spotify.togglePlay(); // Play or pause

    }

    // Check if "Next" button is pressed

    if (mouseX > 500 && mouseX < 550 && mouseY > 180 && mouseY < 230) {

      spotify.nextSong(); // Switch to next song

    }

  }

}

​

function keyPressed() {

  if (key === 'H' || key === 'h') {

    // Go back to home screen

    currentApp = null;

  }

  if (key === 'R' || key === 'r') {

    // Restart the whole interaction

    currentApp = null;

    instructionScreen = true;

  }

}

​