PROCESSING
BASIC INTERACTIVITY
In this tutorial we'll take a brief look at adding interaction to our processing sketches.
Lets start with a new sketch with the usual setup:
01
02
03
04
05
06
07
08 
void setup(){
   size(500,500);
   fill(255,0,0);
}

void draw(){
   rect(50,50,75,75);
}
That should give us a red rectangle at x=50, y=50 which is 75x75 pixels.

Just like the width parameter, processing has a variable that represents the mouse x and y position for that current frame. They are called mouseX and mouseY. With that, we can use this variable for our x and y position for a rect:
01
rect(mouseX,mouseY,75,75);
And then every frame our rectangle will draw whenever the mouse cursor happens to be on that frame. One more detail would be to also change the origin of our rect from the top left to the center via:
01
rectMode(CENTER);
Give it a try! (if it doesn't work initially, try clicking the square at the left)
01
02
03
04
05
06
07
08
09 
void setup(){
   size(500,500);
   fill(255,0,0);
   rectMode(CENTER);
}

void draw(){
   rect(mouseX,mouseY,75,75);
}
Notice since we haven't specified a background color every frame we see the smear effect here, except now it works as a drawing tool and gives a more interesting result.
Processing also has a few other functions you can hook into to create more interactive sketches. These functions are called based on events that they listen for - for instance the mousePressed will execute whenever the mouse is clicked in our window. Therefore we can add some code within that function to create visual feedback based on the supported events.
01
02
03
04
05
06
07
08
09
10
11
12
13 
void setup(){
   size(500,500);
   fill(255,0,0);
   rectMode(CENTER);   
}

void draw(){
   rect(mouseX,mouseY,75,75);
}

void mousePressed(){
   fill(random(0,255),random(0,255),random(0,255)); 
}
By using the random method we looked at in previous tutorials, we can add additional variety and play with the sketch easily.

A list of some of the "event callbacks" or functions which you can implement:
Another interesting variable, like mouseX and mouseY, is is pmouseX and pmouseY. The p stands for previous, so these two represent the mouse cursor position of the previous frame. We could then get the absolute difference between the mouse position of the current frame and the last one and plug that value as the width and height of our shape. For instance if we use that difference as the diameter of an ellipse:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16 
void setup(){
   size(500,500);
   fill(255,0,0);
   noStroke();
   smooth();
   background(50,50,50);
   rectMode(CENTER);   
}

void draw(){
   ellipse(mouseX,mouseY,abs(mouseX-pmouseX),abs(mouseY-pmouseY));
}

void mousePressed(){
   fill(random(0,255),random(0,255),random(0,255)); 
}
The abs method gives us the absolute value of the difference between the current mouse position and the previous mouse position.
With a little refinement, we can quickly design a system that creates compelling feedback based on user input. For instance, if we invert the difference, so that the smaller the difference is between our current and last position, the larger the circle, we can create a sort of drip painting simulator:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17 
void setup(){
   size(500,500);
   fill(255,0,0);
   noStroke();
   smooth();
   background(50,50,50);
   rectMode(CENTER);   
}

void draw(){
   int difference = 25 - constrain((abs(mouseX-pmouseX) + abs(mouseY-pmouseY)),0,24);
   ellipse(mouseX,mouseY,difference,difference);
}

void mousePressed(){
   fill(random(0,255),random(0,255),random(0,255)); 
}
Above, we are again getting the difference between the two cursor positions, but this time using the constrain method to limit the result to be within a range between 0-24 so that the our smallest possible ellipse size would be 1px -- the faster we move, the smaller our ellipse.

In the last tutorial we'll look at using more advanced structures to create more active sketches with more elements being drawn.