EARTH 801
Computation and Visualization in the Earth Sciences

Lesson 4: User Input

PrintPrint

Syntax introduced: mouseX mouseY pmouseX pmouseY mouseClicked() keyPressed boolean else

Another fun thing to do is write programs that involve interactivity via the keyboard and the mouse. Processing stores the position of the cursor as long as the cursor is inside the display window. It stores that position inside the variables mouseX and mouseY. It also stores the most recent previous position of the cursor in the variables pmouseX and pmouseY. You can take advantage of this by telling your program to do various things depending on where the cursor is.

Example 4.0: Interactivity via the mouse

This program draws a square and circle to the screen. The circle follows the cursor around the display window. Both the circle and square change color depending on the cursor's position.

color bg = color(220, 220, 200);

void setup() {
background(bg);
size(200, 200);
}

void draw() {
strokeWeight(1);

fill(48, 107, 198, 100);
if (mouseX >= 100 && mouseY < 100) {
fill(242, 99, 42, 100);
}
if (mouseX < 100 && mouseY >= 100) {
fill(146, 21, 175, 100);
}
rect(40, 40, 40, 40);
ellipse(mouseX, mouseY, 50, 50);
}
screenshot of program in which fill colors of shapes are set by the cursor position
Screenshot of the output of the program detailed in Example 4.0. The fill colors of the circle and the square are set by the cursor position. The circle follows the cursor around the display window.
cartoon Eliza alerting you that instructions come next Below is a screencast of what this code does. The default fill color is blue, but if the cursor is in the upper right, the fill color is orange. If the cursor is in the lower left, the fill color is purple. Note that the position of the ellipse is assigned with mouseX and mouseY as its coordinates. Above is a snapshot of the display window. Since I have background() inside setup(), you can see the trail left behind by the circle.
Example 4.0
E. Richardson

Example 4.1: Interactivity via the keyboard

Here's another example of mouse and keyboard input. This program draws a line on the screen that follows the mouse if you also hold down the "r" key or the "k" key. See the demonstration of pmouseX and pmouseY and also the variable keyPressed.

/* Move your mouse across the screen while holding down 
"r" or "k" key to draw a line that follows the mouse */

// set the background color 
color bg = color(220,220,200);

// define a shade of red that I like 
rd = color(242,42,48);

void setup() {   
   size(200, 200);
   background(bg); 
}  

void draw() {
   strokeWeight(2);

   //keyPressed is a boolean variable.
   //That means it can either be "true" or false"
   //Capitals are different from lowercase.
   //I wrote the if test this way so in case the
   //user has caps lock on, it will still work
   
   if ((keyPressed == true) && (key == 'r' || key == 'R')) {
      stroke(rd);
      line(mouseX,mouseY,pmouseX,pmouseY);
   }

   if ((keyPressed == true) && (key == 'k' || key == 'K')) {
      stroke(0);      
      line(mouseX,mouseY,pmouseX,pmouseY);
   }    
}
screenshot of code from above for drawing a colored line in the display window with the mouse
Snapshot is a still from the running program to draw a colored line in the display window with the mouse.
cartoon Eliza alerting you that instructions come nextBelow is a screencast of this program. You can see it running and also I talk about boolean variables a little bit.
Program for drawing colored lines in display with the mouse.
E. Richardson

Quiz Yourself!

In English, what do the following lines mean:

if ((keyPressed == true) && (key == 'r' || key == 'R')) {
   stroke(rd);
   line(mouseX, mouseY, pmouseX, pmouseY);
}
Check for answer

It means that if there is a key pressed and that key is the r key, draw a red line that connects the mouse’s position with its previous position.

Example 4.2: More things you can do with the mouse

Below is another example program that uses mouseClicked(). mouseClicked() is a separate function written in its own block after draw(). In this program, clicking inside one of the squares will make the other square change color.

// Click within a square to change 
// the color of the other square.

color value  = color(255, 0, 0);
color value2 = color(0, 255, 0);

void setup() {
   size(200,200);
   background(255);
}

void draw() {
  fill(value);
  rect(25, 25, 50, 50);
  fill(value2);
  rect(75, 75, 50, 50);
}

// The mouseClicked function is called after a mouse button is pressed
// and then released.
void mouseClicked() {
   //if the cursor is inside the top square and the color of the bottom
   //square is green . . .
   if(mouseX < 75 && mouseY < 75 && mouseX >25 && mouseY > 25 
       && value2 == color(0,255,0)) {
      value2 = color(0, 255, 255);
   }

   // If the cursor is inside the top square and the color of the bottom
   // square is aqua . . .
    else if (mouseX < 75 && mouseY < 75 && mouseX > 25 && mouseY > 25 
      && value2 == color(0, 255, 255)) {
      value2 = color(0,255,0);
    }

   //if the cursor is inside the bottom square and the color of the top 
   //square is red . . .
   else if (mouseX < 125 && mouseY < 125 && mouseX > 75 && mouseY > 75 
      && value == color(255, 0, 0)) {
      value = color(255, 0, 255);
   }

   //if the cursor is inside the bottom square and the color of the top 
   //square is pink . . .
   else if (mouseX < 125 && mouseY < 125 && mouseX > 75 && mouseY > 75 
      && value == color(255, 0, 255)){
      value = color(255, 0, 0);
   }

   //tell me if I haven't satisfied any of the above possibilities
   else {
      println("You have to click inside a square for something to happen!");
   }
} 

A major new thing in the program above is the

if
else if
else

structure inside the mouseClicked() function.

The way it works is like this:

if (test is true) {
   do something;
}

else if (first test was false, then test if this test is true and if it is) {
   do some other thing;
}

else {
   neither of the above possibilities were true, so do this by default;
}

You can write as many else ifs as you want to in between the first if and the final else. The final else does not include a parenthetical test because it is there to mop up. It will execute its commands by default when none of the tests above it have been satisfied.

screenshot of the program (from above text) in which a mouse click in a certain region changes the fill color of the shapes

Screenshot of the text of the program and a still from the program running in which clicking the mouse in certain regions changes the fill color of the squares.

cartoon Eliza alerting you that instructions come nextBelow is a screencast of me walking you through the above program. I also explain the if, else if, else structure.
Screencast walking through the above program.
E. Richardson

Your turn to play around with mouse and keyboard inputs:

Exercises

4.1 Draw a series of points in a trail following the mouse position.

4.2 Draw a shape that follows the mouse but does not leave a trail.

4.3 Draw a shape that follows the mouse but in reverse (reverse x and y or reverse the response to changes in directions of x and y)

4.4 Draw a shape that changes size depending on the mouse position.

4.5 Draw three different shapes of three different colors to the screen and have them move in an interesting relationship to the mouse when the mouse is moved, and have them change color when the mouse is clicked.