p5.js Web Editor | the five stages of procrastination

xxxxxxxxxx
let songNames = [];
let artistNames = [];
let songNum; // for indexing the array songNames[] and artistNames[] and alternating between different songs
let greenFlag; // for the Spotify heart animation
​
class SongName {
  constructor() {
    this.x = (1 / 9) * width;
    this.y = 0.63 * height;
    songNames = ["Gangtey", "Kalga", "Nahin Milta", "Tasveer", "Ayi Bahaar"];
    artistNames = [
      "aswekeepsearching",
      "aswekeepsearching",
      "Bayaan",
      "Mooroo",
      "Kashmir",
    ];
    songNum = 0; // start from first song in list
    greenFlag = 1; // set heart animation flag to one so it is not green yet
  }
​
  show() {
    switch (
      songNum // displaying specific details for each song in a case conditional statement i.e album covers, name of the song, name of the artist, duration, duration slider
    ) {
      case 0:
        background("#484848"); // set background according to colour of album cover
​
        push(); // drop down icon
        strokeWeight(4);
        stroke("#373737");
        line(this.x, 0.7 * height, (width * 8) / 9, 0.7 * height);
        stroke(220);
        line(
          // duration slider constantly updating as time passes using the ratio of two methods as follows
          this.x,
          0.7 * height,
          (gangteyAudio.currentTime() / gangteyAudio.duration()) *
            (7 / 9) *
            width +
            (1 / 9) * width,
          0.7 * height
        );
        pop();
​
        textFont(gothamBlack);
        textSize(16);
        fill(240);
        text(songNames[songNum], this.x, this.y); // displaying name of song
        textFont(gothamThin);
        textSize(12);
        fill(220, 220, 220, 150);
        text(artistNames[songNum], this.x, this.y + 20); // displaying artist name
​
        textSize(10); // the following code displays the time of the song and its duration in minutes and instead of showing it in seconds by default by using modulus and integer division functions
        text(
          Math.floor(gangteyAudio.currentTime() / 60),
          this.x,
          0.7 * height + 15
        );
        text(":", this.x + 7, 0.7 * height + 15);
        if (Math.floor(gangteyAudio.currentTime() % 60) < 10) {
          text("0", this.x + 10, 0.7 * height + 15);
          text(
            Math.floor(gangteyAudio.currentTime() % 60),
            this.x + 17,
            0.7 * height + 15
          );
        } else {
          text(
            Math.floor(gangteyAudio.currentTime() % 60),
            this.x + 10,
            0.7 * height + 15
          );
        }
        text(
          Math.floor(gangteyAudio.duration() / 60),
          (8 / 9) * width - 15,
          0.7 * height + 15
        );
        text(":", (8 / 9) * width - 8, 0.7 * height + 15);
        text(
          Math.floor(gangteyAudio.duration() % 60),
          (8 / 9) * width - 5,
          0.7 * height + 15
        );
​
        if (gangteyAudio.isPlaying()) {
          // for alternating between the pause/play icon shape
          fill(220);
          noStroke();
          circle(width * 0.5, height * 0.85, 60);
          fill(0);
          rect(width * 0.5 - 8, height * 0.85 - 12, 4, 24);
          rect(width * 0.5 + 4, height * 0.85 - 12, 4, 24);
        } else {
          fill(220);
          noStroke();
          circle(width * 0.5, height * 0.85, 60);
          fill(0);
          triangle(
            width * 0.5 - 6,
            height * 0.85 + 10,
            width * 0.5 - 6,
            height * 0.85 - 10,
            width * 0.5 + 10,
            height * 0.85
          );
        }
​
        image(
          // displaying album cover
          gangteyImage,
          (1 / 9) * width,
          0.2 * width,
          (7 / 9) * width,
          (7 / 9) * width
        );
        break;
      case 1: // same code for all following songs
        background("#737373");
        push();
        strokeWeight(4);
        stroke("#787878");
        line(this.x, 0.7 * height, (width * 8) / 9, 0.7 * height);
        stroke(220);
        line(
          this.x,
          0.7 * height,
          (kalgaAudio.currentTime() / kalgaAudio.duration()) * (7 / 9) * width +
            (1 / 9) * width,
          0.7 * height
        );
        pop();
        textFont(gothamBlack);
        textSize(16);
        fill(240);
        text(songNames[songNum], this.x, this.y);
        textFont(gothamThin);
        textSize(12);
        fill(220, 220, 220, 150);
        text(artistNames[songNum], this.x, this.y + 20);
        textSize(10);
        text(
          Math.floor(kalgaAudio.currentTime() / 60),
          this.x,
          0.7 * height + 15
        );
        text(":", this.x + 7, 0.7 * height + 15);
        if (Math.floor(kalgaAudio.currentTime() % 60) < 10) {
          text("0", this.x + 10, 0.7 * height + 15);
          text(
            Math.floor(kalgaAudio.currentTime() % 60),
            this.x + 17,
            0.7 * height + 15
          );
        } else {
          text(
            Math.floor(kalgaAudio.currentTime() % 60),
            this.x + 10,
            0.7 * height + 15
          );
        }
        text(
          Math.floor(kalgaAudio.duration() / 60),
          (8 / 9) * width - 15,
          0.7 * height + 15
        );
        text(":", (8 / 9) * width - 8, 0.7 * height + 15);
        text(
          Math.floor(kalgaAudio.duration() % 60),
          (8 / 9) * width - 5,
          0.7 * height + 15
        );
        if (kalgaAudio.isPlaying()) {
          fill(220);
          noStroke();
          circle(width * 0.5, height * 0.85, 60);
          fill(0);
          rect(width * 0.5 - 8, height * 0.85 - 12, 4, 24);
          rect(width * 0.5 + 4, height * 0.85 - 12, 4, 24);
        } else {
          fill(220);
          noStroke();
          circle(width * 0.5, height * 0.85, 60);
          fill(0);
          triangle(
            width * 0.5 - 6,
            height * 0.85 + 10,
            width * 0.5 - 6,
            height * 0.85 - 10,
            width * 0.5 + 10,
            height * 0.85
          );
        }
        image(
          kalgaImage,
          (1 / 9) * width,
          0.2 * width,
          (7 / 9) * width,
          (7 / 9) * width
        );
        break;
      case 2:
        background("#2D465D");
        push();
        strokeWeight(4);
        stroke("#1F3143");
        line(this.x, 0.7 * height, (width * 8) / 9, 0.7 * height);
        stroke(220);
        line(
          this.x,
          0.7 * height,
          (nahinMiltaAudio.currentTime() / nahinMiltaAudio.duration()) *
            (7 / 9) *
            width +
            (1 / 9) * width,
          0.7 * height
        );
        pop();
        textFont(gothamBlack);
        textSize(16);
        fill(240);
        text(songNames[songNum], this.x, this.y);
        textFont(gothamThin);
        textSize(12);
        fill(220, 220, 220, 150);
        text(artistNames[songNum], this.x, this.y + 20);
        textSize(10);
        text(
          Math.floor(nahinMiltaAudio.currentTime() / 60),
          this.x,
          0.7 * height + 15
        );
        text(":", this.x + 7, 0.7 * height + 15);
        if (Math.floor(nahinMiltaAudio.currentTime() % 60) < 10) {
          text("0", this.x + 10, 0.7 * height + 15);
          text(
            Math.floor(nahinMiltaAudio.currentTime() % 60),
            this.x + 17,
            0.7 * height + 15
          );
        } else {
          text(
            Math.floor(nahinMiltaAudio.currentTime() % 60),
            this.x + 10,
            0.7 * height + 15
          );
        }
        text(
          Math.floor(nahinMiltaAudio.duration() / 60),
          (8 / 9) * width - 15,
          0.7 * height + 15
        );
        text(":", (8 / 9) * width - 8, 0.7 * height + 15);
        text(
          Math.floor(nahinMiltaAudio.duration() % 60),
          (8 / 9) * width - 5,
          0.7 * height + 15
        );
        if (nahinMiltaAudio.isPlaying()) {
          fill(220);
          noStroke();
          circle(width * 0.5, height * 0.85, 60);
          fill(0);
          rect(width * 0.5 - 8, height * 0.85 - 12, 4, 24);
          rect(width * 0.5 + 4, height * 0.85 - 12, 4, 24);
        } else {
          fill(220);
          noStroke();
          circle(width * 0.5, height * 0.85, 60);
          fill(0);
          triangle(
            width * 0.5 - 6,
            height * 0.85 + 10,
            width * 0.5 - 6,
            height * 0.85 - 10,
            width * 0.5 + 10,
            height * 0.85
          );
        }
        image(
          nahinMiltaImage,
          (1 / 9) * width,
          0.2 * width,
          (7 / 9) * width,
          (7 / 9) * width
        );
        break;
      case 3:
        background("#8B6646");
        push();
        strokeWeight(4);
        stroke("#6F5138");
        line(this.x, 0.7 * height, (width * 8) / 9, 0.7 * height);
        stroke(220);
        line(
          this.x,
          0.7 * height,
          (tasveerAudio.currentTime() / tasveerAudio.duration()) *
            (7 / 9) *
            width +
            (1 / 9) * width,
          0.7 * height
        );
        pop();
        textFont(gothamBlack);
        textSize(16);
        fill(240);
        text(songNames[songNum], this.x, this.y);
        textFont(gothamThin);
        textSize(12);
        fill(220, 220, 220, 150);
        text(artistNames[songNum], this.x, this.y + 20);
        textSize(10);
        text(
          Math.floor(tasveerAudio.currentTime() / 60),
          this.x,
          0.7 * height + 15
        );
        text(":", this.x + 7, 0.7 * height + 15);
        if (Math.floor(tasveerAudio.currentTime() % 60) < 10) {
          text("0", this.x + 10, 0.7 * height + 15);
          text(
            Math.floor(tasveerAudio.currentTime() % 60),
            this.x + 17,
            0.7 * height + 15
          );
        } else {
          text(
            Math.floor(tasveerAudio.currentTime() % 60),
            this.x + 10,
            0.7 * height + 15
          );
        }
        text(
          Math.floor(tasveerAudio.duration() / 60),
          (8 / 9) * width - 15,
          0.7 * height + 15
        );
        text(":", (8 / 9) * width - 8, 0.7 * height + 15);
        text(
          Math.floor(tasveerAudio.duration() % 60),
          (8 / 9) * width - 5,
          0.7 * height + 15
        );
        if (tasveerAudio.isPlaying()) {
          fill(220);
          noStroke();
          circle(width * 0.5, height * 0.85, 60);
          fill(0);
          rect(width * 0.5 - 8, height * 0.85 - 12, 4, 24);
          rect(width * 0.5 + 4, height * 0.85 - 12, 4, 24);
        } else {
          fill(220);
          noStroke();
          circle(width * 0.5, height * 0.85, 60);
          fill(0);
          triangle(
            width * 0.5 - 6,
            height * 0.85 + 10,
            width * 0.5 - 6,
            height * 0.85 - 10,
            width * 0.5 + 10,
            height * 0.85
          );
        }
        image(
          tasveerImage,
          (1 / 9) * width,
          0.2 * width,
          (7 / 9) * width,
          (7 / 9) * width
        );
        break;
      case 4:
        background("#8B450B");
        push();
        strokeWeight(4);
        stroke("#723909");
        line(this.x, 0.7 * height, (width * 8) / 9, 0.7 * height);
        stroke(220);
        line(
          this.x,
          0.7 * height,
          (ayiBahaarAudio.currentTime() / ayiBahaarAudio.duration()) *
            (7 / 9) *
            width +
            (1 / 9) * width,
          0.7 * height
        );
        pop();
        textFont(gothamBlack);
        textSize(16);
        fill(240);
        text(songNames[songNum], this.x, this.y);
        textFont(gothamThin);
        textSize(12);
        fill(220, 220, 220, 150);
        text(artistNames[songNum], this.x, this.y + 20);
        textSize(10);
        text(
          Math.floor(ayiBahaarAudio.currentTime() / 60),
          this.x,
          0.7 * height + 15
        );
        text(":", this.x + 7, 0.7 * height + 15);
        if (Math.floor(ayiBahaarAudio.currentTime() % 60) < 10) {
          text("0", this.x + 10, 0.7 * height + 15);
          text(
            Math.floor(ayiBahaarAudio.currentTime() % 60),
            this.x + 17,
            0.7 * height + 15
          );
        } else {
          text(
            Math.floor(ayiBahaarAudio.currentTime() % 60),
            this.x + 10,
            0.7 * height + 15
          );
        }
        text(
          Math.floor(ayiBahaarAudio.duration() / 60),
          (8 / 9) * width - 15,
          0.7 * height + 15
        );
        text(":", (8 / 9) * width - 8, 0.7 * height + 15);
        text(
          Math.floor(ayiBahaarAudio.duration() % 60),
          (8 / 9) * width - 5,
          0.7 * height + 15
        );
        if (ayiBahaarAudio.isPlaying()) {
          fill(220);
          noStroke();
          circle(width * 0.5, height * 0.85, 60);
          fill(0);
          rect(width * 0.5 - 8, height * 0.85 - 12, 4, 24);
          rect(width * 0.5 + 4, height * 0.85 - 12, 4, 24);
        } else {
          fill(220);
          noStroke();
          circle(width * 0.5, height * 0.85, 60);
          fill(0);
          triangle(
            width * 0.5 - 6,
            height * 0.85 + 10,
            width * 0.5 - 6,
            height * 0.85 - 10,
            width * 0.5 + 10,
            height * 0.85
          );
        }
        image(
          ayiBahaarImage,
          (1 / 9) * width,
          0.2 * width,
          (7 / 9) * width,
          (7 / 9) * width
        );
        break;
    }
    fill(220); // making shapes for forward and backward icons
    triangle(
      width * 0.3 - 10,
      height * 0.85,
      width * 0.3 + 12,
      height * 0.85 + 12,
      width * 0.3 + 12,
      height * 0.85 - 12
    );
    rect(width * 0.3 - 10, height * 0.85 - 12, 4, 24);
    triangle(
      width * 0.7 + 10,
      height * 0.85,
      width * 0.7 - 12,
      height * 0.85 + 12,
      width * 0.7 - 12,
      height * 0.85 - 12
    );
    rect(width * 0.7 + 6, height * 0.85 - 12, 4, 24);
​
    push();
    textSize(9);
    textFont(gothamThin);
    textAlign(CENTER);
    text("PLAYING FROM PLAYLIST", width / 2, 0.05 * height);
    textFont(gothamBlack);
    text("the five stages of procrastination", width / 2, 0.05 * height + 13); // text on top of screen
​
    stroke(220, 220, 220, 200);
    strokeWeight(2);
    strokeJoin(ROUND);
    line(width * 0.065, height * 0.05, width * 0.1, height * 0.05 + 11);
    line(width * 0.1, height * 0.05 + 11, width * 0.135, height * 0.05);
    noStroke();
    fill(220);
    circle((width * 8) / 9, height * 0.05 - 7, 3);
    circle((width * 8) / 9, height * 0.05, 3);
    circle((width * 8) / 9, height * 0.05 + 7, 3); // shapes of icons on the top of the screen
    image(shuffleImage, (width * 1) / 9, height * 0.85 - 12, 24, 24);
    image(orderImage, (width * 8) / 9 - 24, height * 0.85 - 10, 24, 24); // images for icons on the bottom
​
    if (greenFlag == 1) {
      // to alternate between green heart and clear heart as the heart is pressed using the flag
      image(heartImage, this.x + (7 / 9) * width - 24, this.y - 12, 24, 24);
    }
    if (greenFlag == 2) {
      image(
        greenHeartImage,
        this.x + (7 / 9) * width - 24,
        this.y - 12,
        24,
        24
      );
    }
    if (
      mouseIsPressed &&
      mouseX > this.x + (7 / 9) * width - 24 &&
      mouseX < this.x + (7 / 9) * width &&
      mouseY > this.y - 12 &&
      mouseY < this.y + 12
    ) {
      greenFlag = 3 - greenFlag;
    }
    pop();
  }
​
  click() {
    // for pausing music
    if (
      // if the pause icon is pressed
      mouseIsPressed &&
      mouseY > height * 0.8 &&
      mouseY < height * 0.9 &&
      mouseX > width * 0.4 &&
      mouseX < width * 0.6
    ) {
      switch (
        songNum // stop the song currently playing if it is playing and play it if it is paused
      ) {
        case 0:
          if (gangteyAudio.isPlaying()) {
            gangteyAudio.pause();
          } else {
            gangteyAudio.play();
          }
          break;
        case 1:
          if (kalgaAudio.isPlaying()) {
            kalgaAudio.pause();
          } else {
            kalgaAudio.play();
          }
          break;
        case 2:
          if (nahinMiltaAudio.isPlaying()) {
            nahinMiltaAudio.pause();
          } else {
            nahinMiltaAudio.play();
          }
          break;
        case 3:
          if (tasveerAudio.isPlaying()) {
            tasveerAudio.pause();
          } else {
            tasveerAudio.play();
          }
          break;
        case 4:
          if (ayiBahaarAudio.isPlaying()) {
            ayiBahaarAudio.pause();
          } else {
            ayiBahaarAudio.play();
          }
          break;
      }
    }
  }
​
  next() {
    // skipping songs and going back
    push();
    frameRate(4);
    if (
      // if backward icon is pressed
      mouseIsPressed &&
      mouseY > height * 0.85 - 12 &&
      mouseY < height * 0.85 + 12 &&
      mouseX > width * 0.3 - 10 &&
      mouseX < width * 0.3 + 12
    ) {
      greenFlag = 1; // reset heart flag to clear as song changes
      switch (
        songNum // stop song currently playing
      ) {
        case 0:
          if (gangteyAudio.isPlaying()) {
            gangteyAudio.stop();
          }
          break;
        case 1:
          if (kalgaAudio.isPlaying()) {
            kalgaAudio.stop();
          }
          break;
        case 2:
          if (nahinMiltaAudio.isPlaying()) {
            nahinMiltaAudio.stop();
          }
          break;
        case 3:
          if (tasveerAudio.isPlaying()) {
            tasveerAudio.stop();
          }
          break;
        case 4:
          if (ayiBahaarAudio.isPlaying()) {
            ayiBahaarAudio.stop();
          }
          break;
      }
      if (songNum == 0) {
        // update the index to the previous one by decrementing
        songNum = 4;
      } else {
        songNum -= 1;
      }
      switch (
        songNum // play song from previous index
      ) {
        case 0:
          if (gangteyAudio.isPlaying() == false) {
            gangteyAudio.play();
          }
          break;
        case 1:
          if (kalgaAudio.isPlaying() == false) {
            kalgaAudio.play();
          }
          break;
        case 2:
          if (nahinMiltaAudio.isPlaying() == false) {
            nahinMiltaAudio.play();
          }
          break;
        case 3:
          if (tasveerAudio.isPlaying() == false) {
            tasveerAudio.play();
          }
          break;
        case 4:
          if (ayiBahaarAudio.isPlaying() == false) {
            ayiBahaarAudio.play();
          }
          break;
      }
    }
    if (
      // if forward icon pressed
      mouseIsPressed &&
      mouseY > height * 0.85 - 12 &&
      mouseY < height * 0.85 + 12 &&
      mouseX > width * 0.7 - 10 &&
      mouseX < width * 0.7 + 12
    ) {
      greenFlag = 1; // reset heart flag to clear as song changes
      switch (
        songNum // stop song currently playing
      ) {
        case 0:
          if (gangteyAudio.isPlaying()) {
            gangteyAudio.stop();
          }
          break;
        case 1:
          if (kalgaAudio.isPlaying()) {
            kalgaAudio.stop();
          }
          break;
        case 2:
          if (nahinMiltaAudio.isPlaying()) {
            nahinMiltaAudio.stop();
          }
          break;
        case 3:
          if (tasveerAudio.isPlaying()) {
            tasveerAudio.stop();
          }
          break;
        case 4:
          if (ayiBahaarAudio.isPlaying()) {
            ayiBahaarAudio.stop();
          }
          break;
      }
      if (songNum == 4) {
        // update index to next index by incrementing
        songNum = 0;
      } else {
        songNum += 1;
      }
      switch (
        songNum // play song from next index
      ) {
        case 0:
          if (gangteyAudio.isPlaying() == false) {
            gangteyAudio.play();
          }
          break;
        case 1:
          if (kalgaAudio.isPlaying() == false) {
            kalgaAudio.play();
          }
          break;
        case 2:
          if (nahinMiltaAudio.isPlaying() == false) {
            nahinMiltaAudio.play();
          }
          break;
        case 3:
          if (tasveerAudio.isPlaying() == false) {
            tasveerAudio.play();
          }
          break;
        case 4:
          if (ayiBahaarAudio.isPlaying() == false) {
            ayiBahaarAudio.play();
          }
          break;
      }
    }
    pop();
  }
​
  songEnds() {
    // when a song ends without skipping it
    if (
      (gangteyAudio.isPlaying() == true &&
        Math.floor(gangteyAudio.currentTime()) ==
          Math.floor(gangteyAudio.duration())) ||
      (kalgaAudio.isPlaying() == true &&
        Math.floor(kalgaAudio.currentTime()) ==
          Math.floor(kalgaAudio.duration())) ||
      (nahinMiltaAudio.isPlaying() == true &&
        Math.floor(nahinMiltaAudio.currentTime()) ==
          Math.floor(nahinMiltaAudio.duration())) ||
      (tasveerAudio.isPlaying() == true &&
        Math.floor(tasveerAudio.currentTime()) ==
          Math.floor(tasveerAudio.duration())) ||
      (ayiBahaarAudio.isPlaying() == true &&
        Math.floor(ayiBahaarAudio.currentTime()) ==
          Math.floor(ayiBahaarAudio.duration()))
    ) {
      greenFlag = 1; // reset heart to clear for next song
      switch (
        songNum // stop song currently playing
      ) {
        case 0:
          if (gangteyAudio.isPlaying()) {
            gangteyAudio.stop();
          }
          break;
        case 1:
          if (kalgaAudio.isPlaying()) {
            kalgaAudio.stop();
          }
          break;
        case 2:
          if (nahinMiltaAudio.isPlaying()) {
            nahinMiltaAudio.stop();
          }
          break;
        case 3:
          if (tasveerAudio.isPlaying()) {
            tasveerAudio.stop();
          }
          break;
        case 4:
          if (ayiBahaarAudio.isPlaying()) {
            ayiBahaarAudio.stop();
          }
          break;
      }
      if (songNum == 4) {
        // increment index
        songNum = 0;
      } else {
        songNum += 1;
      }
      switch (
        songNum // play next song
      ) {
        case 0:
          if (gangteyAudio.isPlaying() == false) {
            gangteyAudio.play();
          }
          break;
        case 1:
          if (kalgaAudio.isPlaying() == false) {
            kalgaAudio.play();
          }
          break;
        case 2:
          if (nahinMiltaAudio.isPlaying() == false) {
            nahinMiltaAudio.play();
          }
          break;
        case 3:
          if (tasveerAudio.isPlaying() == false) {
            tasveerAudio.play();
          }
          break;
        case 4:
          if (ayiBahaarAudio.isPlaying() == false) {
            ayiBahaarAudio.play();
          }
          break;
      }
    }
  }
}
​
Cookies

Sketch Files

Console

Preview
