​

let buttonHue = 100;

let bgHue = 200;

let buttonTxt = "chill mode";

let font = "Verdana"; 

let size = 40;

​

function setup() {

  //makes canvas size of window

  createCanvas(windowWidth, windowHeight);

  //HSL color mode

  colorMode(HSL, 360, 100, 100, 100);

  // makes x, y coordinates for rectangles at center, not corner

  rectMode(CENTER);

  //slows down animation

  frameRate(10);

}

​

function draw() {

  background(bgHue, 100, 50);

  // remove outline/stroke

  noStroke();

​

  //Chill Mode

  //button

  fill(buttonHue, 100, 50);

  rect(width / 2, height / 2, 300, 100, 30);

  //colour of text - same variable as background

  fill(bgHue, 100, 50);

  //text qualities

  textSize(size);

  textFont(font);

  textAlign(CENTER);

  //text(text to appear, x coordinate, y coordinate): https://p5js.org/reference/#/p5/text

  text(buttonTxt, width / 2, height / 2 + 10);

​

  //Party mode only activated when mouse location is within the parameters of the rectangle. If (partyMode) else (chillMode).

  if (

    mouseX > width / 2 - 150 &&

    mouseX < width / 2 + 150 &&

    mouseY > height / 2 - 50 &&

    mouseY < height / 2 + 50

  ) {

      //Party mode

      // hue randomly selected from  one side of colour wheel (0 to 180 degrees or red to cyan), https://p5js.org/reference/#/p5/random

      bgHue = random(180);

      //hue of button is opposite of background

      buttonHue = bgHue + 180;

      //it's party time!

      font = "Party LET";

      size = 80;

      buttonTxt = "party mode"; 

  } else {

    buttonHue = 100;

    bgHue = 200;

    font = "Verdana";

    size = 40;

    buttonTxt = "chill mode";

  }

}

​