Code

void setup(){
  size(300,300);  
  noStroke();
}

void draw(){
  if ((mouseX <= 100)||(mouseX > 200)|| (mouseY<=100)||(mouseY>200)){
    fill(0);
    rect(100,100, 100,100);
  }else{
    fill(255,0,0);
    rect(100,100, 100,100);
  }
}

0211 - Interaction and Conditional Testing I: A mouse-sensitive square

Statement:In the code from the examples from last Wednesday, I provided an example of detecting whether the mouse was in a certain region of the screen ("Testing the location of the mouse on screen").

In a canvas which is exactly 300x300 pixels, create a simple "interactive square" in the center of the screen, whose size is 100x100 pixels. Create an interaction such that this square is filled RED when the mouse cursor is inside the square. The square should be black otherwise.

In coding your answer, ask yourself whether your code tests (A) whether the mouse is within the square, or (B) whether the mouse is not within the square.

hide statement