Lab-Programming with Processing

Part I

Run Processing

1. If you haven’t already, download Processing from the website and install it.
2. Run the Processing program, and select an Example from the File menu.
3. Run the example code you selected by clicking on the Run triangle button.
4. Check out the examples in various categories to get a sense of the range of tasks that can be accomplished in the Processing environment.

Structure

1. Open a New sketch from the File menu.
2. Put your name and email into comments using the //  or  /*  formats
3. Set the size of the sketch to a width of 640 and a height of 480
4. Set the background color to black
5. Print a joyful message with the println command
6. Save this sketch as yourname-Structure

First Sketch

1. Set the size of the sketch to the size of width of 400 and a height of 400.
2. Set the background color to white.
3. Create a composition that involves placing at least one of each of these primitives in grey-scale:
   - point
   - line
   - triangle
   - quad
   - rect
   - ellipse
4. Save As.. this sketch, naming it yourname-First

Full Color

1. Use the stroke(), fill() and background() commands to change the way your shapes look.
2. Change the opacity (alpha) of some of the shapes so they become partially transparent.
3. Save As.. this sketch, naming it yourname-FormColor

Albers

Just in case you think you can’t do anything remarkable yet, we’ll take a cue from Josef Albers.

1. Find any Albers painting online–I recommend one with squares–and see if you can make a duplicate in Processing.
2. Put the name of the original painting in the comments.
3. Save As.. this sketch, naming it yourname-Albers

Part II

Paint Brush

Create a new Processing program that has a setup() and a draw() function that repeatively draws the same shape on the canvas.

1. Set your screen size to 400 x 600.
2. Create two or more shapes that make a pattern.
3. Use the mouseX and mouseY variables for one of the coordinates of each shape
4. Make the other coordinates relative to mouseX and mouseY by using a statement for each coordinate such as mouseX+37
5. Run your program
6. Moving the mouse around should create trails like a paint brush. If it doesn’t perhaps you used the background() command in your draw loop. That would clear the screen at each step. Put it in setup instead, so the background is drawn only once.
7. Save As… a copy of your program. Call it yourname-Paintbrush

Paintbrush Control

1. Using a conditional “if” statement, change your program so that it only draws when the mouse is pressed. You can use the mousePressed variable to determine the current state of the mouse button.
2. Save As… a copy of your program. Call it yourname-Mousebrush

Drawable Area

1. Decide on a rectangle area in the canvas of the sketch of your program as being drawable. This means that when the mouse button is pressed, your paint brush will only make marks within this area and not outside of it.
2. What are the 4 pixel coordinates of your area? In comments in your code, write down the extents of this area.
3. Have your program draw a rectangle to visually show where this area is. Will this rectangle go in the setup() function or the draw() function? Write your answer to this question in comments next to the rectangle that you draw.
4. Now add conditionals to your draw() function where you previously added the Mouse Pressed conditional to decide whether the Mouse is currently within the drawable area. There is more than one way to do this!One Way: You can nest conditionals. That means you can put one conditional within another’s curly braces.

   		if( boolean-expression ) {
   			if( another-boolean-expression ) {
   				if( yet-another-boolean-expression ) {
   					
   				}	
   			}
   		}
   
   

   Another Way: Use a complex Boolean Expression.
   The Boolean AND in processing is represented by two amperstands: &&. The Boolean OR in processing is represented by two pipe (shift-backslash on your keyboard) symbols: || . Order of operation is enforced by using parenthesis like in algebra. This conditional is true if the X-coordinate of the mouse is less than 100 AND the X-coordinate of the mouse is greater than 50:

   		if((mouseX < 100) && (mouseX > 50)) {
   			
   		}
   

5. 5. Save As… a copy of your program. Call it yourname-Area

Create a Clear Button

1. Decide an area on the sketch’s canvas outside of the drawable area, where when the mouse is pressed in it, everything that has been drawn so far is erased.
2. In comments in your code, write the extents of this area. (Just like you did in the previous program.)
3. Draw a rectangle that visually shows where the clear button is. You’ll do this in your program where you initially drew the drawable area. Write a comment describing the clear button in the code.
4. Write a conditional (or nested conditionals) in your program that checks for the mouse being within the button area, and when the mouse is pressed. (This is exacly the SAME structure as your drawable area, except the extents will be different). Put this conditional after the one you previously wrote.
5. In the body of this conditional (between the curly braces), write code clears everything that has been drawn. To do this, just simply re-draw the drawable area that you did at the beginning of the program. This should clear what has been drawn.
6. Save As… a copy of your program. Call it yourname-Final

Bonuses

If things are going well and you have time for another challenge, here’s some additional things you can try to accomplish:

Roll-Over

• Add code to your clear button so that when the mouse rolls-over it, the button’s appearance changes. Roll-overs allow the user to get some feedback from the interface that what the mouse is currently over is in fact a button.

OnMouseClick

• Add code to your clear button so that when the mouse clicks on the button, the button’s appearance changes. This behavior give feedback to the user that they in fact clicked the button.

Save Button

• In the same manner that you created the clear button, create a save button that will save an image of the screen of your program. You will have to look in Processing Reference for a function that will do the saving of the image for you. (Hint: look in the Output section of the Reference)

Save As… a copy of your program. Call it yourname-Bonus