INFORMATION
BE SURE TO ASK IN THE LAB IF YOU NEED HELP WITH ANY STEPS!!!!
PART II.
A Simple Drawing Program
Create your own Paint-Brush (1.0 point)
Create a Processing Program that has a setup() and a draw() function that repeatively draws the same shape on the canvas (much like the DynamicSetupDraw example we saw in lecture).
Criteria:
Save As... a copy of your program. Call it yourname-Paintbrush (i.e. mine would be call Chipp-Paintbrush).
Draw only when the Mouse Is Pressed (1.0 point)
Make a COPY of your previous program for you to use:
Change your draw() function so that when the Mouse is Pressed your paint brush will make marks on the canvas.
(Hint: you will add a conditional to the draw()function, you may want to look at ConditionalSetupDraw as an example).
Save As... a copy of your program. Call it yourname-Mousebrush (i.e. mine would be call Chipp-Mousebrush).
Make a Drawable Area (2.0 point)
Make a COPY of your previous program for you to use:
Step 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.
Step 2. Think back to how we described a clickable area in the imagemaps. We used 4 values to describe a rectangle area. What are the 4 pixel coordinates of your area? In comments in your code, write down the extents of this area.
Step 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.
Step 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.
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)) {
}
Save As... a copy of your program. Call it yourname-Area (i.e. mine would be call Chipp-Area).
Create a Clear Button (1.0 point)
Now create a clear button that clears the drawable area when you click on it.
Step 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.
Step 2. In comments in your code, write the extents of this area. (Just like you did in the previous program.)
Step 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.
Step 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.
Step 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.
Save As... a copy of your program. Call it yourname-Final (i.e. mine would be call Chipp-Final).
CONGRATULATIONS you have created Your Very Own Drawing Program!
BONUS
Roll-Over (+0.5 point)
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.
Save As... a copy of your program. Call it yourname-RollOver (i.e. mine would be call Chipp-RollOver ).
OnMouseClick (+0.5 point)
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 As... a copy of your program. Call it yourname-OnMouseClick (i.e. mine would be call Chipp-OnMouseClik ).
Save Button (+1 point)
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-SaveButton (i.e. mine would be call Chipp-SaveButton ).