Lab 2: Repetition, Looping, and Making Choices
CS145: Images and Imagination, Fall 2010

Reading

• Text: Chapters 4: Variables
• Text: Chapters 5: Response
• Text: Appendix A: Coding Tips
• Text: Appendix B: Data Types
• Text: Appendix C: Order of Operations

Summary of Goals

The main goal of this lab is to learn how to use for-loops. To do this, one needs to understand:

• variables
• arithmetic syntax
• syntax of for-loops
• conditionals (if-else blocks) and booleans

The following topics are covered in the reading and will discussed in class. If you wish to use them in the lab assignment, you may, but they are not required.

• Interaction: the setup/draw functions, mouse control
• Misc: map function, text
• Random numbers

Suggested Folder Structure

On your H-drive, in the same CS145 folder you created in the first lab, create a subfolder called Lab2. In this folder, created two subfolders, one named Practice, and the other named Lab2Final. Save all of the practice sketches for this lab into the Practice folder. In the Lab2Final folder, save all of the sketches that you plan on submitting.

Practice Activities

You will not be asked to turn these in.

• Types of loops: Loops are one of the most commonly used program structures. For this reason, we focus on them in this lab. There are a number of ways to do looping (i.e. repetition):

  • "for" loops - right now, we will focus on this type of loop
  • "while" loops - not discussed right now
  • "do-while" loops - not discussed right now
  • using the setup()/draw() functions - this will discussed in class and in the text

• Read and Experiment: Carefully read through the assigned chapters in the text. As examples are presented, try them out yourself in the Processing. Try making small changes to the examples - can you predict what will happen before running the code? If you have questions on any of the concepts, please ask the instructor for additional help.

• Looping with Shapes: After reading through the text, test your skills by trying to generate the images below in Processing (you don't have to re-create them exactly). Some of them require a single loop and some of them require what are called "nested" loops. Can you tell which are which by just looking at them?

  

• Looping with Color: By setting the color mode to HSB (lookup colorMode(HSB) in the online reference), and applying looping, one can get a rainbow effect. The first image below is a single loop over the Hue component of the color. The second and third images were created using nested loops where the Hue changed along one axis and the Saturation or Brightness changed along the other axis. Try recreating these images (the code for one of them is given in the reference for ColorMode)

  Varying the Hue	Varying the Hue and Saturation	Varying the Hue and Brightness

• Looping on Multiple Elements: Once you understand how to vary color as above, you can start to combine elements within the loop, e.g. vary the color while also drawing rectangles:

  Varying the Hue	Varying the Hue and Saturation	Varying the Hue and Brightness

• Order Matters: You can also combine shape elements in either a single loop or two separate loops. It is important to pay attention the order in which shapes are drawn because the order determines which shapes are drawn on top. For example, the images below contain both horizontal and vertical lines. The only thing that changes from picture to picture is the order in which the lines are drawn and whether the lines are drawn in separate loops (one for the vertical and one for the horizontal) or a single loop. Can you reproduce the effects?

• Random Numbers: Random numbers, when used judiciously, can add interesting variety to an image. Look up the command random() in the Processing reference (go to Help->reference) to read how it works. For example, if I want to generate a random color I could use the statement:

  stroke(random(255),random(255),random(255));

  Or, if I wanted to generate a rectangle whose sides were random numbers in the range from 5 to 10, I could use the statement: rect(i,j,random(5,10),random(5,10)); For example, using random numbers to vary the color and the rectangle size as above, one can obtain the image on the right.

To Be Submitted

This portion of the lab will be graded based on the list of criteria listed here.

Your goal is to create interesting patterns or scenes by combining for-loops (and/or nested loops) which simultaneously vary color, shape, and position of shapes. You are to produce 2-3 unique images (png format). If you have trouble knowing where to begin, pick a theme as you did in the first lab to help narrow down an idea. Otherwise, just stay abstract. Be prepared to discuss what you did.

For example:

Preparing the files for submitting to WISE:

Folder Structure: Each Processing sketch (*.pde) will be in its own folder. Each of these folders should be in your CS145/Lab2/Lab2Final folder. Each sketch folder should contain your Processing code (*.pde) and an image (*.png).

Saving an Image: For each Processing sketch, make sure that you also save an image into the sketch folder by using the Processing save() command. Use the png image format. Please name the images using the lab number, your last name, and a word describing the image. For example, if I had several images containing circles, I would name the images: Lab2_orr_circles1.png and Lab2_orr_circles2.png

Cleaning up the Code: For each sketch, make sure that you have cleaned up the Processing code as follows:

• Delete any unused sections of code.
• At the top of the code, add comments containing your name, the lab number, the course number, and a one sentence description of what the code does. Add additional comments, if ncessary, so that someone else looking at the code can follow what the code does. This will become more useful as your programs get longer and more complex.
• (THIS IS REALLY IMPORTANT) Run the Auto-format command by going to the Processing menu: Tools→AutoFormat. You may have to do some additional formatting by hand.

Zipping: When you are done doing all of the above, zip together your entire Lab2Final folder into a single zip file.

Submitting to WISE:

By midnight of Sept 15 submit the single zipped file via WISE as an attachment.