Objectives

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.

Regardless of whether you work in teams in the lab, you must always do your prelab questions individually.

Basic Drawing Primitives and Coordinates

Based on the text and lecture examples, do the following exercise.

Exercise 2.1

You create several sketches/programs in these lab exercises, so it is a good idea to create a lab02 directory in your course directory now and then save all your programs for this lab in that directory. For this exercise, do the following:

  1. Use a sequence of graphical methods to draw a close approximation of the simple face shown here. Save this program so that you can turn it in at the end of the lab period (named Ex21a). Remember to take a screenshot of your resulting image (and do so for each exercise. This will be your only reminder.)
  2. When you have your basic face working, modify the program to draw the same face at double the size. To do this, you’ll need to increase the default sketch size and increase the size of your geometric elements. Save a copy of this program in a different sketch (named Ex21b).

Using the Color

The Processing environment provides a “Color Selector” tool that makes finding the right color a bit easier. This tool, shown here, allows you to either choose a color from the color palette or to directly specify the RGB values.

Note that it also supports HSB (Hue-Saturation-Brightness), another color encoding scheme.

Exercise 2.2

Create a new upgraded smiley face similar to the one shown here (call it Ex22). Note the oblong eyes, smooth curves, reflection dots in each eye, the curved smiley mouth with dimples, and the use of color. Feel free to modify your smiley face from this example sketch, but make sure that you can use all the geometric elements illustrated there.

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 the 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

Add a text annotation to your smiley face, such as the one shown here. You may choose the font, the size and the message. Save this new version as a separate sketch (named Ex23).

Displaying Predefined Images

Processing can load and display predefined image files. Processing currently supports GIF, JPG, TGA and PNG formats.

When your code references an image file, or any other sort of supporting file, Processing will look in the data sub-directory discussed in the previous section or in the directory that contains the program file. Thus, you should load supporting files in one of those two places.

Exercise 2.4

Download a pre-defined smiley face image from the web and display it using a Processing program (named Ex24). Download the file into the appropriate place and be sure to set your sketch size and background colors appropriately. If necessary, you can use a photo-editing application to determine the precise size in pixels of your image. Include an image citation message such as the one shown here.

Consider the question of why you would go to the trouble of using Processing code to construct a smiley face image rather than just downloading an image or creating one with a WYSIWYG (What You See Is What You Get) tool like MacPaint. Write a one-paragraph response to this question (saved as comments in your code).

Checking In

Submit all the code and supporting files (including your paragraph response from the last question) for all the exercises in this lab.

If you work in a team of two, be sure to: