// ⭐ TODO: Change the canvas size

  createCanvas(400, 400);

​

  // mode for rotating shapes

  angleMode(DEGREES);

}

​

function draw() {

  // ⭐ TODO: Set starting background color

  background(45, 57, 120);

​

  // ⭐ TODO: code along with Kate to use system variables

  rectMode(CENTER);

  fill(75, mouseY, mouseX);

  noStroke();

  rect(mouseX, mouseY, 130, 130);

  fill(mouseY, mouseX, 100);

  rect(mouseX, mouseY, 70, 70);

​

  // ⭐ TODO: Write code below to create a design that:

  // * uses at least 4 shapes (can use text & emojis!)

  // * at least one part follows your mouse

  // * at least one part changes color when your mouse moves

  // * at least one part changes size when your mouse moves

​

  ellipse(100, 200, mouseX, mouseY);

​

  // Challenges:

  // * use a triangle, quad, arc, and/or bezier curve

  // * use colorMode(HSB); and see how changing the different values affect color changes: https://www.learnui.design/blog/the-hsb-color-system-practicioners-primer.html

  // Use Desmos and mouseX, mouseY to experiment with making objects rotate when your mouse moves

​

  // Grid support

  //drawGrid();

}

​