PrintExample 4.2: Interactivity via the keyboard
Here's another example of user input that involves both the mouse and the keyboard. 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);
}
}
Below is a screencast of this program. You can see it running and also I talk about boolean variables a little bit (1:44).Click here for a transcript of the colored lines in display with the mouse video.
This program starts out by defining a couple of colors. This one, we're going to use as the background color, right here, and this one, we're going to use later on. Well, here's the setup block, where we tell it what size we want to make the display window, and we tell it to make the background a certain color. Down here, in the draw block, we're setting the stroke rate to two. And then I have a little comment that explains about what's going to happen for the rest of the program. Key pressed is a Boolean variable, and that means it just has two states, true or false, off or on. And it's an intrinsic variable set by processing, but you can declare your own Boolean variables. Sometimes they're useful if you want to test if it's off or on and then do a bunch of stuff in case it is, for example. So this if statement tests to see whether you're pressing a key and if that key happens to the R key, and if all those things are true, then it's going to draw a red line on the display window like this. This if statement tests to see whether or not you're pressing down a key and if that key happens to the K key, and if it is, then it will draw a black line on your screen. So this is what it looks like when it's running. Now here's kind of the limitation of what a screen test can do for you. Right now, you just have to trust me that I'm not holding down any keys. Now I'm going to hit the R key, and when I wiggle my mouse around, I make a line. I let my finger off the R key, so now not doing anything anymore. I'm gonna hit the K key, and you can see it draws a black line.
Quiz Yourself!
Example 4.3 More with the keyboard
Here's a program that combines keyboard input with moving a shape across the screen, so we are reviewing bits of Lesson 3 while adding Lesson 4 skills here:
//move a shape around the screen according to keyboard inputs
int x=100;
int y=100;
void setup(){
size(200,200);
pixelDensity(2);
stroke(0);
ellipse(x,y,10,10);
}
void draw(){
//stroke(0);
//ellipse(x,y,10,10);
if ((keyPressed == true) && (key == 'u' || key == 'U')){
stroke(255,0,0);
y--;
}
else if (keyPressed == true && (key == 'd' || key =='D')){
stroke(0,255,0);
y++;
}
else if (keyPressed == true && (key == 'r' || key == 'R')){
stroke(0,0,255);
x++;
}
else if (keyPressed == true && (key == 'l' || key == 'L')){
stroke(255,255,0);
x--;
}
else {
ellipse(x,y,10,10);
}
}
The beginning position is just a black circle drawn to the middle of the display window. It doesn't do anything unless you type the u, d, l, or r keys, in which case the circle jumps up, down, left, or right, and changes color. If no key is being pressed, the circle just sits still in its most recent position with its most recent color.
Exercise
4.6 Make a virtual Etch-a-Sketch in which you use the keyboard to draw a black line on a grey background.