​

​

function setup() {

        createCanvas(400, 300);

        rectMode(CENTER);

}

function draw() {

        // change the toggle value based on mouse press.

        if (mouseIsPressed === true) {

                toggle = !toggle; //! is the not operator. Placed in front of a boolean value it will reverse the value, returning the opposite.

        }

  // display a different bg colour based on the toggle value

        if (toggle === true) {

                background(1, 186, 240);

        } else {

                background(250, 150, 50);

        }

  // declaration of variables

        let x = width / 2;

        let y = height / 2;

        let size = 200;

  // circle

        fill(237, 34, 93);

        noStroke();

        ellipse(x, y, size, size);

  // rectangle

        fill(255);

        rect(x, y, size * 0.75, size * 0.15);

}

​