let circleRadius = 50;

let rotationAngle = 0;

let rotationSpeed = 1;

let isClockwise = true;

let mySound;

let isMusicPlaying = false; // to keep track if music is playing

​

function setup() {

  let cnv = createCanvas(400, 400);

  centerX = width / 2;

  centerY = height / 2;

  cnv.mousePressed(canvasPressed);

}

​

function preload() {

  soundFormats('mp3', 'ogg');

  mySound = loadSound('redbone.mp3', loaded); // Use callback to start playback when loaded

}

​

function loaded() {

  // Music is loaded, but will not play yet

}

​

function canvasPressed() {

  if (isMusicPlaying) {

    mySound.pause(); // pause the music 

  } else {

    mySound.play(); // play the music

  }

  isMusicPlaying = !isMusicPlaying; // toggle the music playing status

}

​

function draw() {

  background(64, 50, 60);

​

  // the spinning CD

  fill(200);

  stroke(255);

  ellipse(centerX, centerY, circleRadius * 2);

​

  // colored lines to give the illusion of a CD

  for (let angle = 0; angle < 360; angle += 2) {

    let x1 = centerX + cos(radians(angle + rotationAngle)) * (circleRadius - 20);

    let y1 = centerY + sin(radians(angle + rotationAngle)) * (circleRadius - 20);

    let x2 = centerX + cos(radians(angle + rotationAngle)) * 150;

    let y2 = centerY + sin(radians(angle + rotationAngle)) * 150;

​

    let randomColor = color(random(100, 255), random(100, 255), random(100, 255), 150);

    stroke(randomColor);

​

    strokeWeight(6);

    line(x1, y1, x2, y2);

  }

​

  // Add rotation to simulate the CD spinning

  if (isClockwise) {

    rotationAngle += rotationSpeed;

  } else {

    rotationAngle -= rotationSpeed;

  }

  strokeWeight(1);

  noFill();

  circle(200, 200, 305);

​

  // Display play/pause text based on music playing status

  fill(255);

  textSize(18);

  textAlign(CENTER);

  text(isMusicPlaying ? "Click to Pause" : "Click to Play", width / 2, height - 20);

}

​

​