constructor() {

    // Variables for rotation and spinning

    this.angle = 0;

    this.rotationSpeed = 0.03;

    this.isSpinning = false;

​

    // Color variables

    this.colorPalette = [

      color(242, 39, 76),

      color(133, 48, 130),

      color(84, 73, 55),

      color(5, 17, 242),

      color(245, 139, 87),

      color(0, 0, 13),

      color(66, 106, 140),

      color(84, 73, 55)

    ];

    this.rectColor = this.colorPalette[0];

    this.innerCircleColor = this.colorPalette[0];

​

    // Audio files and controls

    this.audioFiles = [];

    this.trackNames = [

      'Kanye West - All Of The Lights',

      'Kanye West - Cant Tell Me Nothing',

      'Kanye West - Burn',

      'Kanye West - God is',

      'Kanye West - Ultralight Beam',

      'Kanye West - Hurricane',

      'Kanye West - Ghost Town',

      'Kanye West - GOOD(DONT DIE)',

    ];

    this.currentAudioIndex = 0;

    this.playtimeSlider;

    this.volumeSlider;

    this.buttonPrevious;

    this.buttonStartStop;

    this.buttonNext;

    this.isSeeking = false; // Variable to track if the user is seeking

    this.visible = false;   // Visibility flag for hiding/showing controls

  }

​

  preloadAudio() {

    // Load audio files and store their names

    soundFormats('mp3');

    this.audioFiles[0] = loadSound('songs/Kanye West - All Of The Lights.mp3');

    this.audioFiles[1] = loadSound('songs/Kanye West - Cant Tell Me Nothing.mp3');

    this.audioFiles[2] = loadSound('songs/Kanye West - Burn.mp3');

    this.audioFiles[3] = loadSound('songs/Kanye West - God is.mp3');

    this.audioFiles[4] = loadSound('songs/Kanye West - Ultralight Beam.mp3');

    this.audioFiles[5] = loadSound('songs/Kanye West - Hurricane.mp3');

    this.audioFiles[6] = loadSound('songs/Kanye West - Ghost Town.mp3');

    this.audioFiles[7] = loadSound('songs/Kanye West - GOOD(DONT DIE).mp3');

  }

​

  setup() {

    // Set up the canvas and sliders

    angleMode(RADIANS);

​

    // Create buttons

    this.buttonPrevious = createButton('⏮');

    this.buttonPrevious.position(100, height - 50);

    this.buttonPrevious.mousePressed(() => this.previousTrack());

​

    this.buttonStartStop = createButton('⏯');

    this.buttonStartStop.position(400 / 2, height - 50);

    this.buttonStartStop.mousePressed(() => this.togglePlay());

​

    this.buttonNext = createButton('⏭');

    this.buttonNext.position(400 - 100, height - 50);

    this.buttonNext.mousePressed(() => this.nextTrack());

​

    // Create volume slider (vertical slider)

    this.volumeSlider = createSlider(0, 1, 0.5, 0.01);

    this.volumeSlider.position(400 - 100, 150);

    this.volumeSlider.style('rotate', '270deg'); // Vertical slider

​

    // Create playtime slider (horizontal)

    this.playtimeSlider = createSlider(0, 100, 0);

    this.playtimeSlider.position(50, height - 100);

    this.playtimeSlider.style('width', '300px');

​

    // Detect when user starts seeking (mouse pressed on the slider)

    this.playtimeSlider.input(() => {

      this.isSeeking = true;

    });

​

    // Detect when user finishes seeking (mouse released)

    this.playtimeSlider.mouseReleased(() => {

      if (this.audioFiles[this.currentAudioIndex].isLoaded()) {

        let newTime = map(

          this.playtimeSlider.value(),

          0,

          100,

          0,

          this.audioFiles[this.currentAudioIndex].duration()

        );

        this.audioFiles[this.currentAudioIndex].jump(newTime); // Jump to the new time

      }

      this.isSeeking = false;

    });

​

    // Initially hide all controls

    this.hideControls();

  }

​

  showControls() {

    // Show all buttons and sliders

    this.buttonPrevious.show();

    this.buttonStartStop.show();

    this.buttonNext.show();

    this.volumeSlider.show();

    this.playtimeSlider.show();

    this.visible = true;

  }

​

  hideControls() {

    // Hide all buttons and sliders

    this.buttonPrevious.hide();

    this.buttonStartStop.hide();

    this.buttonNext.hide();

    this.volumeSlider.hide();

    this.playtimeSlider.hide();

    this.visible = false;

  }

​

​

  draw() {

    // Draw the record and interactive elements

    stroke(255);

    strokeWeight(1);

    fill(0);

​

    // Draw the large circle in the center

    let centerX = width / 2;

    let centerY = height / 2 - 50; // Move it up to make space for buttons

    circle(centerX, centerY, 180); // Main outer circle

​

    stroke(255);

​

    // Rotate and draw elements inside the circle

    push();

    translate(centerX, centerY); // Move the origin to the center of the circle

    rotate(this.angle); // Always rotate to the current angle, even if spinning is stopped

    this.drawSpinningElements(this.rectColor); // Draw spinning arcs and rectangles

    pop();

​

    // Update angle based on rotation speed if spinning is active

    if (this.isSpinning) {

      this.angle += this.rotationSpeed;

    }

​

    // Inner Circle

    fill(this.innerCircleColor); // Use the updated color for the inner circle

    circle(centerX, centerY, 80); // Inner circle

​

    // Small inner circle

    fill(0);

    circle(centerX, centerY, 25); // Small inner circle

​

    // Update volume based on volume slider value

    if (this.audioFiles[this.currentAudioIndex].isPlaying()) {

      this.audioFiles[this.currentAudioIndex].setVolume(this.volumeSlider.value());

​

      // Update the playtime slider based on the current playtime if not seeking

      if (!this.isSeeking) {

        let currentTime1 = this.audioFiles[this.currentAudioIndex].currentTime();

        let duration1 = this.audioFiles[this.currentAudioIndex].duration();

        this.playtimeSlider.value((currentTime1 / duration1) * 100);

      }

    }

​

    // Display the track name under the record

    fill(255);

    textFont(circularFont)

    strokeWeight(0)

    textAlign(CENTER);

    textSize(20);

    text(this.trackNames[this.currentAudioIndex], width / 2, height - 90); // Track name below the record

  }

​

  drawSpinningElements(rectColor) {

    fill(rectColor); // Use the updated color for the rectangle

    noStroke();

    rectMode(CORNER)

    // Draw the rectangle relative to the translated origin

    rect(-10, -85, 10, 100); // Center the rectangle around the translated origin

​

    noFill();

    stroke(225);

​

    // Arcs drawn using a loop

    let arcSizes = [60, 155, 135, 115];

    let arcAngles = [0.4, PI / 2 - 0.2];

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

      arc(0, 0, arcSizes[i], arcSizes[i], arcAngles[0], arcAngles[1]);

    }

  }

​

  togglePlay() {

    // Toggle the playback and spinning

    if (this.audioFiles[this.currentAudioIndex].isPlaying()) {

      this.audioFiles[this.currentAudioIndex].pause(); // Pause the audio instead of stopping

      this.isSpinning = false; // Stop the spinning

    } else {

      this.audioFiles[this.currentAudioIndex].play(); // Resume the audio from where it was paused

      this.isSpinning = true; // Start the spinning

    }

  }

​

  previousTrack() {

    // Switch to the previous track

    this.audioFiles[this.currentAudioIndex].stop(); // Stop current audio

    this.currentAudioIndex =

      (this.currentAudioIndex - 1 + this.audioFiles.length) %

      this.audioFiles.length;

​

    // Automatically play the new track and start spinning

    this.audioFiles[this.currentAudioIndex].play();

    this.isSpinning = true;

​

    this.updateColors();

  }

​

  nextTrack() {

    // Switch to the next track

    this.audioFiles[this.currentAudioIndex].stop(); // Stop current audio

    this.currentAudioIndex =

      (this.currentAudioIndex + 1) % this.audioFiles.length;

​

    // Automatically play the new track and start spinning

    this.audioFiles[this.currentAudioIndex].play();

    this.isSpinning = true;

​

    this.updateColors();

  }

​

  updateColors() {

    // Update the colors based on the current track

    this.rectColor =

      this.colorPalette[this.currentAudioIndex % this.colorPalette.length];

    this.innerCircleColor =

      this.colorPalette[this.currentAudioIndex % this.colorPalette.length];

  }

}

​