let logo, cdImg, arrow;

let goBackButton

​

function setup() {

  createCanvas(650, 700);    //set canvas to 650x700

  logo = loadImage("Assets/logo.png");    //load assets

  cdImg = loadImage("Assets/cd.webp");

  arrow = loadImage("Assets/arrow.png");

  goBackButton = createButton('');    //creates the back button

  goBackButton.position(10, 10);

  goBackButton.size(110, 110);

  goBackButton.style('opacity', '0');

  goBackButton.mousePressed(goBackPage);    //runs the goBackPage function when pressed

  addCartButton = createButton('Add to Cart');    //add to cart button

  addCartButton.position(65, 440);

  addCartButton.size(520, 60);

  addCartButton.style('font-size', '25px');

  addCartButton.style('font-family', 'Arial Black');

  addCartButton.style('borderRadius', '40px');

  buyNowButton = createButton('Buy Now');    //Buy Now button

  buyNowButton.position(65, 520);

  buyNowButton.size(520, 60);

  buyNowButton.style('font-size', '25px');

  buyNowButton.style('font-family', 'Arial Black');

  buyNowButton.style('borderRadius', '40px');

  wishlistButton = createButton('❤Wishlist');    //wishlist button

  wishlistButton.position(65, 600);

  wishlistButton.size(520, 60);

  wishlistButton.style('font-size', '25px');

  wishlistButton.style('font-family', 'Arial Black');

  wishlistButton.style('borderRadius', '40px');

}

​

function draw() {

  background("Maroon");    //sets background to maroon

  push();    //rectangle to house the buttons at the bottom of the page

  fill(255);

  rectMode(CENTER);

  rect(325, 550, 550, 250, 40);

  pop();

  push();

  rectMode(CENTER);

  noStroke();

  fill(0);

  rect(325, 225, 300, 300);    //rectangle for the image of the CD

  fill(255);

  rect(580, 67, 110, 105, 90);    //background for company logo

  rect(70, 70, 110, 110, 90);    //background for the arrow

  image(logo, 530, 10, 100, 125);    //places logo

  image(arrow, 20, 20, 100, 100);    //places arrow

  image(cdImg, 174, 75, 300, 300);    //places image of the CD

}  

function goBackPage(){    //sends user back to the Music Player page

  window.location.href = 'sketch3.html';

}