INFORMATION

• This assignment will be given in two parts.
  • Part I is listed below (given in lab on Thursday Oct 18th).
  • Part II will be given in the lab on Thursday Oct 25th.
• This assignment covers the material from unit D in our syllabus: Event-Driven Programming.
• The purpose of this lab is to give you a working Introduction to Processing, a visual toolkit used by artist, designers, and engineers.
  
• You may find reading Ch. 9 and 11 of the Reed text helpful in understanding the basic concepts of events and conditionals.
• 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 3 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.

Introduction to Processing Environment (0.5 point)

Load Processing from the Persistant Store drive on yoru desktop.

Here is the Processing Web-site, click on the Environment page. This page will help orient you to what the buttons do in the Processing program.

In Processing, load and run an Example, by clicking on the up arrorw (Open)

Open (up-arrow) > Examples > Topics

Pick and Run an Example sketch.

Open up a new text document in TextEdit (Notepad). Write the answer to the following question. into the

Question 1. Which Example did you pick? Describe what you see in the display window.

Introduction to Processing Website (0.5 point)

On the Processing Website: Click on the Learning > Basics link.

Here you will see many topics with examples. Under the Structure heading, click on "Statements and Comments" - read through the example. In Processing load the same example "Statements and Comments" by choosing Open > Examples > Basics > Structure.

In the future when I refer to examples in Processing, I'll refer to the categories under the Examples section with these arrows. So the Example we just loaded will be referred to as Basics > Structure > Statements and Comments.

Find the Discourse section on the website. This is an online community where people post answers they have about Processing and get help.

Question 2. What topics are there in the Discourse section?

Question 3. Where would you go if you had a question about the Processing language?

Structure of a Processing Program (1.0 point)

In Processing, Open a New Sketch.

Write a Processing program that:

1. Has your Name, E-mail in the Comments of the Program

2. Set the size of the sketch to a width of 640 and a height of 480

3. Set the background color to be black.

4. Print a joyful message to the console using the println function.

5. Save As.. this sketch, naming it yourname-Structure, (i.e. my sketch would be called Chipp-Structure). Save it to the Desktop to you can take it home with you at the end of the lab.

You may find the following Examples useful:

• Basics > Structure > Statements and Comments

Here is a .pdf giving detailed instructions on how to begin writing Processing programs.

Your First Sketch (Grey-Scale) (1.0 point)

Open a New Sketch.

Write a Processing Sketch that:

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 carefully placing at least one of each of these primitives in Grey-Scale:

• point
• line
• triangle
• quad
• rect
• ellipse

4. Modify the fill and the stroke of each of these elements. (Read about fill and stroke in the .pdf Document)

5. Save As.. this sketch, naming it yourname-Form, (i.e. my sketch would be called Chipp-Form). Save it to the Desktop to you can take it home with you at the end of the lab.

You may find the following Examples useful:

• Basics > Structure > Coordinates
• Basics > Form > Points and Lines
• Basics > Form > Shapes Primitives

Your Second Sketch (Color) (1.0 point)

Open a New Sketch.

You will create a new sketch like you did previously in Your 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 carefully placing at least one of each of these primitive shapes in Full Color:

• point
• line
• triangle
• quad
• rect
• ellipse

4. Modify the fill and the stroke of each of these elements. (Read about fill and stroke in the .pdf Document)

5. Change the Opacity (i.e. transparency) on one of the filled primitive shapes.

6. Save As.. this sketch, naming it yourname-FormColor, (i.e. my sketch would be called Chipp-FormColor). Save it to the Desktop to you can take it home with you at the end of the lab.

Find out how to add color to the stroke of your lines, and the fill of your primitives by looking up those functions in the Reference section of the Processing Website. (Look for the link entitled Reference).

In the Reference section, look under the Color > Setting for links to the functions that you learned today:

• background()
• fill()
• stroke()

Exhibition (1.0 point)

Go to the Exhibition Section on the Processing website.

Pick one of the pieces from the Exhibitions page, click on it, and play with it in your web-browser.

Question 4. What is this piece about? (1 paragraph)

Question 5. Describe how the piece is interactive to your mouse and keyboard input. (1 paragraph)

• How does the piece react to your mouse?
• What elements are interactive?
• What elements are static (i.e. do not change when you try to interact with them with a mouse)?

BONUS: Hommage to Albers (+ 0.0 to 2.0 points)

Joseph Albers was a German artist in the 20th Century that laid the foundation for modern Color Theory. He taught at Yale and his work was concerned with how colors interact each other in very simple geometric patterns.

Find a piece by Joseph Albers online. (Hint: a Google Image search for "Joseph Albers") will bring up plenty of results.

TO DO: Create a Processing Sketch of one of his pieces (my suggestion: pick one of his pieces involving squares). Make sure you are really working on an Albers pieces (and not an imitation).

Put the name of Joseph Albers piece and the link where you found it in the COMMENTS of your sketch.

Name your sketch yourname-Albers. Mine would be Chipp-Albers.

Turn in the sketch with the rest of your files for HW D.

PART II.

Part II (worth 5 more points) will be done in lab on Thursday October 25.