INFORMATION

• This assignment will be given in two parts.
  • Part I is listed below (given in lab on Thursday Nov 1st).
  • Part II will be given in the lab on Thursday Nov 8 th.
• This assignment covers the material from unit E in our syllabus: Solvability and Feasibility.
• The purpose of this lab is to give you a working Introduction to Processing, a visual toolkit used by artist, designers, and engineers.
  
• Refer to the Processing Website for help, it has an extensive listing of tutorials and language references.

• Part I of this assignment is worth 5 points, or 5% of your term grade.

1. For this assignment, you will create 2 Processing sketches, which will be saved as folders on your desktop, and you will be writing answers to the questions in a text file.
   
2. Type your name in the files and your email address as comments. Learn how to write comments in Processing..
3. Save your work!!!
   BEFORE YOU LEAVE THE LAB, make sure that you save your work (all of the sketch folders that you create) by storing them on a USB flash drive or by mailing them to yourself.
4. When you are completely finished with all the steps, zip all your files together and email the zip file to me as an attachment. To do this, put everything that you want to turn in, into a folder:
5. 1. Mac OS X: Right-click on the folder and choose "Create Archive"
   2. Win PC: WinZip program and adding the homework files to the zip archive when it is created.
   3. Send me the .zip file as an attachment. Do not send me the files individually!
   4. Some links as to how to create .zip files:

• Create a .Zip file on a PC using Win XP
• Create a .Zip file on a PC using WinZip
• Create a .Zip file in Mac OS X

1. My email address is: chipp@sci.brooklyn.cuny.edu

BE SURE TO ASK IN THE LAB IF YOU NEED HELP WITH ANY STEPS!!!!

PART I.

1. Shape Buttons (1.0 point)

Start with a the TwoShape painting program from lecture.

Question 1. How are we storing the user's choice for which shape to draw in our current program?

Step 1. Change the shapes to two of your own design. (i.e. a triangle, or an oval).

Step 2. Move the shape buttons to the bottom of the page.

Save As.. this sketch, naming it yourname-Shape, (i.e. my sketch would be called Chipp-Shape).

Turn this sketch (yourname-Shape) in with your HW E

2. Color Swatches (1.0 point)

Many painting programs have color swatches. These are little buttons that allow you to pick the color that shapes are drawn in. Shown below is a color swatch from Photoshop.

Step 1. Start with this simple drawing program with two buttons. There are two square buttons at the bottom of the screen. When the user clicks on the buttons a simple message is printed to the console.

Step 2. Pick two colors from the Color Selector. You will have to remember the R, G and B values from the Color Selector.

Step 3. Turn these buttons into color swatches for the two colors you picked from the Color Selector. When the user clicks on a swatch, they will be able to draw in the color of that swatch. You will have to add 3 variables to store the red, green, and blue color levels to store the current color that is being drawn in.

(Hint: This is very similar to the Variable Tutorial in Part II of HW E. Be sure to work through that first. You will use the variables you create in multiple functions that set the color of the shapes and buttons that are drawn.)

Question 2. What information does the program need to store when the user picks a color from the swatch pallete (shown above) ?

Question 3. How would you store this information in your program? Think about how we stored which shape the user picked when they clicked on one of the two shape buttons.

Save As.. naming it yourname-Swatches, (i.e. my sketch would be called Chipp-Swatches).

Here is an example of a completed program.

Turn this sketch (yourname-Swatches) in with your HW E

3. Create a Character to Animate (1.0 point)

Begin a New sketch in Processing.

Create a simple 2-5 shape "character" (think back to the teddy bear that I created in class), that you will animate on the screen.

Step 1. Design/Plan your character on a piece of paper. (You will not turn this paper in, so it may be on scrap paper). Compose the character out of shapes that you know how to draw in Processing.

Step 2. Pick a "reference" point on your character. Think of this point as the handle with which you will be able to move it around the screen. (In this TeddyBear example, the reference point is in the belly of the Teddy Bear).

Step 3. Put your character in Processing so that is moves with the mouse at the reference. In Processing you will draw the shapes that make up your character around this reference point (using offsets etc...). Take a look at the source code for the purple teddy bear, notice that every ellipse shape uses the mouseX and the mouseY variables. The same should be for your shape.

Save As.. the sketch you were previously working on, naming it yourname-Character, (i.e. my sketch would be called Chipp-Character).

Turn this sketch (yourname-Swatches) in with your HW E

4. Simple Animation (1.0 point)

Take a look at this sketch. It moves the TeddyBear across the screen from the lower-lefthand corner to the upper-righthand corner.

Copy the code from the this sketch into a New Processing sketch.

Answer the following questions about it's code:

Question 4. Notice that the mouseX and the mouseY variables are removed from the shapes that make up the TeddyBear. What replaced the mouseX and the mouseY variables? Where are these variables declared?

Question 5. How are the values for these variables changing every time the draw()function is called?

Question 6. What happens to the value of these variables when the TeddyBear either reaches the right edge or the upper edges of the sketch?

Step 1. Change the code, so the TeddyBear moves across the screen diagonally from the upper-lefthand corner to the lower-righthand corner.

Step 2. Replace the TeddyBear with the Animated Character that you designed in the previous problem. You will want to copy and paste your code and don't forget to replace the mouseX and the mouseY variables with the appropriate variables from this sketch.

Save As.. the sketch you were previously working on, naming it yourname-Animated, (i.e. my sketch would be called Chipp-Animated).

Turn this sketch (yourname-Animated) in with your HW E

5. Maeda and Simplicity (1.0 point)

John Maeda is a computer scientist and graphic designer that integrated design and computers before many of the tools like processing existed. He is a professor at the MIT Media Lab, he designed a tool called Design By Number which became inspiration for the Processing program.

Recently he has been talking alot about simplicity with respect to digital design and tools. Look at this video where he talks about his life and work with respect to simplicity. He too made drawing programs just like you now.

Question 7. Look at his artwork web-site. Pick an art-piece that you like, and describe what it is about.

Question 8. Find his blog about simplicity. He mentions 10 Laws of Simplicity (look on the site for the NEW LAWS). What are they?

Question 9. Pick one of the New Laws of Simplicity. Think of an example of a tool (it can be digital /or/ not), an experience, or a website that upholds (or breaks) this Law of Simplicity (Lacking inspiration? Try looking at his examples).

BONUS: Complex, Random, and Interactive Animation (+ 0.0 to 4.0 points)

(+1 point) Have your character move around the screen a rectangular fashion. Save As.. the sketch , naming it yourname-Rect, (i.e. my sketch would be called Chipp-Rect).

(+1 point) Have you character move around the stage in a circular fashion (hint: you will want to use the sin() and cos() triganometry functions). Save As.. the sketch , naming it yourname-Circle (i.e. my sketch would be called Chipp-Circle).

(+1 point) Have your character move around the screen in a random fashion (look at the random() function). Save As.. the sketch , naming it yourname-Random (i.e. my sketch would be called Chipp-Random).

(+1 point) Have your character move around the screen, but avoid the mouse. (You may want to use the dist() function to calculate the distance between the mouse and your character). Save As.. the sketch , naming it yourname-Shy (i.e. my sketch would be called Chipp-Shy).

(+1 point) Old Color Swatch Program. Many painting programs have color swatches. These are little buttons that allow you to pick the color that shapes are drawn in. Shown below is a color swatch from Photoshop.

Step 1. Add three (3) color swatches to the TwoShape example from problem 1.

Make them small buttons like the shape buttons. They should have the SAME color that will appear when the user clicks on that button and starts drawing with it.

Here is an example of three color swatches.

PART II.

Part II (worth 5 more points) will be done in lab on Thursday Novemeber 8th.