4 – Interaction with mouse and keyboard

Keyboard and mouse clicks with conditional statements

We’ve already used the mouse to get locations, but now we can use the clicks and keyboard input as well by writing conditional statements. The if statement if(mousePressed) is true if the mouse if pressed. The if statement if(keyPressed) is true if the key is pressed. The conditional statement can have two tests like this: if(keyPressed&&key==’w’)
with the && indicating AND, so true if the key is pressed and it is w.

color RanColor;
 
void setup() {
  size(300, 300);
  RanColor = color(200, 10, 189);
}
 
void draw() {
  background (RanColor);
 
//if the mouse is pressed 
  if(mousePressed){
  RanColor = color(random(255), random(255),   random(255)); //generate random color
}
 
// this is if any key is pressed
if (keyPressed){ 
  RanColor = color(255,0,0); //color is red
 
}
//this is a double conditional and is if keyPressed and key is w
if ((keyPressed)&&(key == 'w')){
  RanColor = color(255, 255, 255); //color is white
  }
}

Mouse and Key Functions

There is another way to detect mouse click. You may have noticed that from the computers perspective, when you click the mouse or press a key using the conditional method, the statement is true for many loops of draw and this can result in a flickering. There is a way of getting around this by using the mousePressed, mouseReleased and keyPressed as events (one offs) rather than conditionals (continuously executed as long as the key or mouse is pressed).

As you know, our program runs through blocks of code that are defined by curly brackets {}. We have have the void setup() block of code that only runs once. Then void draw() block of code that loops constantly. We can add extra blocks of code called functions, that are only activated when certain events occur like a mouse clicks or key presses. These functions sit outside of void draw, below it usually and they are only activated when the event occurs. These can be:
• mousePressed() — Handles mouse clicks.
• mouseReleased() — Handles mouse releases.
• keyPressed() — Handles key presses.

void setup() {
  size(200,200);
  background(255);
}
void draw() {
} // nothing in draw, nothing happens if the mouse or key events don't happen
 
void mousePressed() { //Whenever a user releases the mouse the code written inside mousePressed() is executed.
  stroke(0);
  fill(175);
  rectMode(CENTER);
  rect(mouseX,mouseY,16,16);
}
void keyPressed() { // Whenever a user presses a key the code written inside keyPressed() is executed.
  background(255);
}

We use the functions mousePressed or mouseReleased when we only want one change to happen when the mouse is clicked. The function is only called ONCE at the moment that the mouse is pressed, for mousePressed or released, for mouseReleased.

Mouse Variables – pmouseX and pmouseY

You have used mouseX and mouseY already. Processing also has additional mouse variable pmouseX and pmouseY. These get the value of the mouse position in the previous loop of draw.

//Draw a line from previous mouse location to current mouse location.
void setup() {
  size(200,200);
  background(255);
  smooth();
}

void draw() {
  stroke(0);
//to draw a line using the mouse, make a line connecting the current mouse position with 
//the previous mouse position for each loop of draw
  line(pmouseX,pmouseY,mouseX,mouseY); 
}

Exercise 4

Rearrange your generative face code using either mousePressed or mouseReleased, to get rid of the flickering.

'+
1
'+
2 - 3
4 - 5
6 - 7
8 - 9
10 - 11
12 - 13
13 - 14
[x]