CIUC- Interactivity With Keyboard Lesson

Interactivity with Keyboard 

The keyboard is another input device used to trigger events. Processing has three event handler methods for creating interactivity with the keyboard.

voud key pressed handles behavior when user presses a key down.

Type the program code below into the Processing editor. Run the sketch and press any key - the background color changes each time you press a key.

In the above example, all key presses are treated in the same way and cause the same behavior.

Responding Differently to Different Key Presses

You can choose specific behavior for specific keys by using an if statement and the key system variable. An example of the syntax is below. Look at the completed program. It changes the background when the r or g key is pressed. Notice you must put the single quotes around the character.

if(key == 'r') {

  background(255, 0, 0);

}

if(key=='g'){

background(0, 255, 0);

}

Please read the next two paragraphs and the image below.  This is important information! 

The variable keyCode is used to detect special keys such as the arrow keys (UP, DOWN, LEFT, and RIGHT(note:  these are in all caps) as well as ALT, CONTROL, SHIFT, PAGE_UP, PAGE_DOWN, HOME, and END. 

When checking for these keys, it can be useful to first check if the key is coded. This is done with the conditional if (key == CODED), as shown in the example below.

When checking for these keys, it can be useful to first check if the key is coded.

If the key is included in the ASCII specification (BACKSPACE, TAB, ENTER, RETURN, ESC, and DELETE) it does not require checking to see if the key is coded. For those keys, you should simply use the key variable directly and not keyCode.

if( key == ENTER){

    ellipse(random(width), random(height), 25, 25);

        }

Usually, a user clicks the UP, DOWN, RIGHT, or LEFT key to create movement. Let's create an algorithm to move an ellipse when one of those keys is pressed.                                                                                      

Let's start with an ellipse.

ellipse(x1, y1, 30, 30);

Now we need to increment either the x or y location depending on the direction to move. To move UP or DOWN you would increment the y variable. To move LEFT or RIGHT you would increment the x variable.  

Examine the keyPressed () function below.

What if we want to check to see if two objects are touching or colliding? Let's start with two objects.      

x1 = 60;

y1 =   150;

x2 = 65;

y2 = 160;  

ellipse(x1, y1, 30, 30);

ellipse(x2, y2, 30, 30);

Let's determine if one ellipse is within a certain distance of the other ellipse.  We need a test to see if

(x1 - x2) and (y1 - y2) are within a certain distance of each other.  This is the result using the values above:

 

                  (60 - 65) = -5                                                   (150 - 160) = -10

Notice it resulted in a negative number. To make a correct comparison we need to convert these values to positive numbers.    

The Math class in Java provides two methods to get the absolute value of a number.      

  • Math.abs(int num)   - This method takes an int in the parameter and returns the absolute value of num as an int.
  • Math.abs(double num) - This method takes a double in the parameter and returns the absolute value of num as a double.

Let's see how to use the abs(int num) method in the Math class to solve our problem.      

if(Math.abs(x1 - x2) < 20 && Math.abs(y1-y2) < 20)              

This will now return the absolute value of -5 which is 5 and the absolute value of -10 which is 10.

Our expression will now evaluate as:     5 < 20     &&   10 < 20.      

This would return true so the objects would collide and the if statement would execute.  

Here is a check Collision() function that will make one of the ellipses go to different x and y locations and then increase the score variable by 1.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION