Interactivity | 2025-02-04

// Starter Sketch: Follow Along with Your Instructor

​

// Declare variables

let x, y; // Position variables

let circleColor; // Variable for circle color

​

function setup() {

  createCanvas(400, 400); 

  circleColor = color('black')

  x = 200; // Initial x position

  y = 200; // Initial y position

}

​

function draw() {

  background(220); // Clear the canvas after every frame

​

  // Add if/else statements to change the circle's color based on position

  // Hint: Orange if on upper left | Yellow if on upper right 

  // | Green if on lower left | Blue if on lower right

  // if (mouseX < 200 && mouseY < 200) { //Upper-left

  //  circleColor = color("orange");

  // } else if (mouseX >= 200 && mouseY < 200) { // Upper-right

  //  circleColor = color("yellow");

  // } else if (mouseX < 200 && mouseY >= 200) { // Lower left

  //  circleColor = color("green");

  // } else {

  //  circleColor = color("blue");

  // }

  // "Splitting" the canvas in half, logically the same as above

  if (mouseX < 200) { // Left side

    if (mouseY < 200) { // Upper-left

      circleColor = color("orange");

    } else { //Lower left

      circleColor = color("green");

    }

  } else { // Right side

    if (mouseY < 200) { // Upper-right

      circleColor = color("yellow");

    } else { // Lower right

      circleColor = color("blue");

    }

  }

  // Add if/else statements here for continuous movement using keyIsPressed

  // Hint: Up = | Down = | Left = | Right =

  if (keyIsPressed) {

    if (keyCode == 38) {

      // Move Up

      y = y - 1;

    } else if (keyCode == 37) {

    }

  }

  // Fill color and draw the circle

  fill(circleColor); // Fill the circle color variable

  ellipse(x, y, 50, 50); // Draw a circle at (x, y)

}

​

function mouseReleased() {

  // Add if/else statements to update position/color when the mouse is clicked

  // Hint: Use mouseX and mouseY to set x and y

  x = mouseX;

  y = mouseY;

}

​

function keyPressed() {

  // Add if statement to reset position when a key (ex. Backspace) is pressed

}

​