Pair Programming

Your instructor may choose to divide you into programming teams of two. One approach for working in such teams is called Pair Programming.

If you work in a team, only one computer will be used. Each member of the team will take turns typing, but both team members will constantly be thinking. Be sure to include both of your names in a comment at the beginning of every file you work on together. At the end of lab, you will share the completed files.

The Processing Environment

Programs are developed using a development environment such as Eclipse, Visual Studio, or Netbeans. You develop Processing programs, called sketches, using the Processing development environment.

You write program instructions in the program editor pane, press the run button, and Processing displays a new window showing your visual output. Text output, if there is any, is shown below the text output pane. As one would expect, this empty program produces an empty visual output pane and no text output.

Do this...
Configure Processing to store and look for its files in the directory you created for this course. You can do this by choosing "File"-"Preferences" and changing the default directory.

Processing.org provides a reference for the Processing IDE.

You can find a description of all of Processing’s methods and how to use them in the Processing reference documentation, see: Processing API.

Do this...
If you haven’t already done so, create a new directory inside your cs108 directory called lab02 . Each of the exercises below indicates the name the sketch created should be saved with, and each sketch should be saved in this new directory.

Drawing Figures

Exercise 2.1

Begin by saving a sketch in your lab02 directory with the name Smiley , and then adding documentation with your name (and your partner's name if pair programming).

Use a sequence of figure drawing method calls to create a smiley face similar to the one shown here. Use a 200x200 pixel canvas. You don’t need to match the example sketch exactly, but try to include all the elements as shown.

When you are finished, be sure to save the completed version of your code.

Using Color and Attributes

Exercise 2.2

Save a new copy of your smiley face from exercise 2.1 using “File”->“Save As...” and give it the new name SmileyColor . Before continuing, verify you have two copies of your smiley face program.

Modify this new copy of your smiley face to include color, attributes and additional figures as appropriate. Note the oblong eyes, smooth curves, reflection dots in each eye, the curved smiley mouth (the dimples are optional!), and the use of color. Again, you need not copy the face exactly, but try to follow the example sketch as a guide.

For more shape methods, see the Processing reference manual (http://processing.org/reference/) under “2D Primitives”. Because text books tend not to discuss all the methods provided by a language, it is important for programmers to have the ability to use an application programming interface (API) reference manual such as this one to learn new methods. One useful method for this exercise is the arc() method.

Using Fonts

Processing can create, load and render text fonts, but it does not create them automatically. You need to create the fonts ahead of time using the “Create Font” tool. This tool, shown here, allows you to select the font face (e.g., “Papyrus”), its weight (e.g., “Regular”) and its size (e.g., “80” points).

Processing automatically creates the font definition files and stores them in a data sub-folder of your sketch project. When you run your program, Processing will look for the font definitions in the data sub-folder.

Exercise 2.3

Save a new copy of your smiley face from exercise 2.2 and give it the new name SmileyText . Before continuing, verify you now have three copies of your smiley face program.

Add a text annotation to your new smiley face sketch, such as the one shown here. You may choose the font face, the font size and the message. You will probably need to resize your canvas to accomodate your message.

For this exercise, feel free to modify the face as you see fit. Just be sure to include geometric elements, text and appropriate documentation.

Checking In

We will grade this exercise according to the following criteria:

Correctness:
- 50% - Figure-drawing functions - Draw appropriately-sized figures in the appropriate places.
- 20% - Color and attributes - Demonstrate effective use of color, smoothing and stroke width.
- 20% - Text - Demonstrate effective use of text and fonts.
Understandability:
- 5% - Header Documentation - Document the code’s basic purpose, authors and assignment number.
- 5% - Code Documentation - Separate the logical blocks of your program with useful comments and white space.

Note the following:

If you worked in a team of two, be sure to:
- List both of your names in the code documentation;
- Send a copy of all the files to all partners.
  - Windows - Send copy of files
  - UNIX/Linux - Send copy of files
- If you work as a team, only one team member should submit the exercises.
These notes hold true for both labs and homeworks.
Submit your solutions to the lab exercises using your appropriate submission environment:
- Moodle - Assignment Submission
- UNIX/Linux - Assignment Submission
If you’re working on a lab computer, don’t forget to log off of your machine when you are finished!