Part 1: Unscramble the code below.

​

1. Move the statements into either the setup(), draw(), or mousePressed() functions in order to:

2. Draw a square in the center of the Canvas.

3. When the mouse is inside the square,

and you click the mouse, change the square's color.

*/

​

let isOn = false;

​

function setup() {

  createCanvas(400, 400);

  background(220);

  rectMode(CENTER);

}

​

function draw() {

  if (isOn == false) {

    background(255);

    fill(0);   

  } else {

    background(0);

    fill(255);

  } 

  rect(width / 2, height / 2, 200);

}

​

function mouseClicked() {

  if (mouseX > 100 && mouseX < 300 && mouseY > 100 && mouseY < 300) {

    isOn =! isOn;

  }

}

​

​

/*

Part 2: Add on

Toggle the state of the square.

Can you create an interaction where you flip the color back and forth from white to black and back?

​

If it is white, click to flip it to black.

If it is black, click to flip it to white.

​

Just like flipping a light switch on and off.

​

Extra: Can you toggle the background color at the same time, too?

*/

​