About this project:

In this project you will use more mouse input variables, after which you will cover event functions. Event functions will launch you to the next level in Processing. Both of these abilities will allow you to create robust projects with less code. Finally, you'll learn to harness mouse clicks to create two simple drawing programs that work a lot more efficiently than what you've previously done.

More Mouse Variables

You've already used a few of Processing's built in variables - but there are others including mousePressed and mouseButton. The mouseButton variable tells you which button (LEFT or RIGHT) was pressed.

These variables are handy when you only need to detect button presses, but as you're about to learn, event functions offer even more input-based functionality.

Event Functions

An event function executes only when a certain event happens. You implement your event function outside the basic draw() loop in your sketch, and when it is triggered by the event( i.e. the user input) it will run in parallel with draw() . This will reduce the number of if statements needed.

mouseClicked() the event triggers when the mouse button is clicked.

mouseDragged() the event triggers when the mouse moves while a button is held down.

mouseMoved() the event triggers when the mouse moves.

mousePressed() the event triggers when the mouse button is pressed.

mouseReleased() the event triggers when the mouse button is released.

When you want to use an event function, just create another function of the void type underneath your draw() function. A complete Processing program with an event function would follow this structure:

• void setup() {
• //usual code here;
• }
• void draw() {
• background(244);
• }
• void mouseClicked() {
• background(0);
• }

In this example I used only the mouseClicked() function, but you can add multiple event functions.

Rainbow Doodles

In this section, you will explore mouseDragged() and mousePressed() event functions to write a program that lets you create rainbow colored drawings.

Implementing mouseDragged()

First add the usual setup() and draw() sections, and then implement the mouseDragged() event function outside of your draw() loop as follows:

• void setup() {
• size(850,1000);
• background(255);
• }
• void draw() {
• //no code needed here.. if you don't have a draw loop your sketch will ONLY run setup() you must have a draw loop even if it is empty.
• // an empty draw loop lets your sketch actively wait for an event to happen
• }
• void mouseDragged() {
• strokeWeight(50);
• stroke(random(255), random(255), random(255));
• line(pmouseX,pmouseY, mouseX, mouseY);
• }

Inside mouseDragged(), sets a stroke weight, apply a random() stroke color and call the line() function to draw your line. Pass line() the previous and current mouse coordinates - (pmouseX, pmouseY) and (mouseX, mouseY) respectively - as its start and end points. You should have no code inside of your draw() because your line should be drawn only when you click and drag your mouse.

Challenge! Run your code - draw with it! Now add an event function that creates a blank background when you want it.

** You can write code saying if(mouseButton ==LEFT) ***

#2 A Simple Painting Program

Now that you've explored mouse event functions, let's make our drawing application a little more useful and creative. We'll tweak the draw() loop to let you change the color of your pen on the fly from the keyboard.

To add this functionality, start with the code you had at the end of "Rainbow Doodles". First, add three integers variables as global variables, named r, g and b, at the top of your sketch.

int r = 10;

int g = 10;

int b = 10;

Each new integer represents one piece of an RGB color: r is red, g is green, and b is blue. I gave them all an arbitrary starting value of 10. After creating these new variables, we'll modify the draw() loop to create a feedback box that shows our current pen color and its RGB value.

Creating a Color-Changing Feedback Box

Inside the draw() loop, create a small feedback box that displays the current pen color and its RGB setting as follows:

void draw() {

fill(r,g,b);

noStroke();

rect(0,0,100,12);

fill(255);

text((r + "," + g + "," + b), 10,10);

}

Set a fill color using the variables, r, g, and b, and draw a rectangle in the upper-left corner of the sketch. This rectangle's color will change when you press the R,G, AND B keys. To display the current RGB setting, pick another fill color and call the text() function; this prints the RGB value as a concatenated string inside the new rectangle. You can see the finished product of this nifty feedback tool in Figure 8-3.

The rectangle and text will display the hardcoded color values, but how do you change the color on the fly? We'll put if() statements to good use to increment the color variables r , g, and b. Add the following code to your draw() loop.

if (key =='r') {

r++;

key = ' ';

if( r > 255) {

r = 0;

}

}

else if (key == 'g') {

g++;

key = ' ' ;

if( g >255) {

g = 0 ;

}

}

else if (key =='b') {

b++;

key = ' ' ;

if (b > 255) {

b =0;

}

}

Changing the PEN color

To change the color of your pen, find the stroke() function in the mouseDragged() event function and modify it to use your new color variables.

void mouseDragged() {

if (mouseButton == LEFT) {

strokeWeight(50);

stroke(r,g,b);

line(pmouseX, pmouseY, mouseX, mouseY);

}

}

Set a stroke weight you like, and replace the three random() arguments to stroke() with r, g, and b. Since these three variables are global you can use them in any function, anywhere in your sketch. Now when you run your sketch, you should be able to change the color of your pen using R, G, AND B keys and make the most beautiful drawing ever.