Lab 5
Modularity and Abstraction

Due: Fri 10/10 at the start of class

Introduction

This week's lab deals with functions, an important tool for modularity and reuse. Declaring a function bundles a series of related instructions (such as the instructions to draw a complex shape) into one package distinct from the rest of the program, and adding parameters allows the same basic steps to be reused with different values without having to rewrite the steps themselves. Both of these aspects of functions become increasingly important as programs get larger and more complex.

Several of the exercises are based on traditional quilt patterns. These kinds of quilts are an excellent real-world example of modularity and abstraction — first individual pieces of fabric are assembled into blocks, then the blocks are assembled to create the whole quilt.

Successfully completing this lab means that you are able to:

• identify when drawing functions are appropriate, and use the drawing functions questions to identify the key elements of function definitions and calls
• leverage the power of abstraction to create complex scenes more easily
• write syntatically correct function definitions and calls
• choose appropriate names for functions and parameters
• write descriptive comments for functions

Handin and Presentation Meeting

Handin

Hand in a hardcopy (paper) of your worksheet in class.

To hand in your sketches:

• Make sure that your name and a short description of the sketch are included in a comment at the beginning of each sketch.

• Make sure that you've auto-formatted each sketch.

• Copy the entire lab5a, lab5b, lab5c, and lab5d directories from your sketchbook (~/cs120/sketchbook) to your handin directory (found inside /classes/cs120/handin).

It is OK if you copy your files to the handin directory at the very beginning of class.

Presentation Meeting

Presentation meetings for this lab will be the week of Oct 13.

Exercise #4 is the presentation problem. Come to the presentation meeting prepared to discuss your sketch. You may be asked to point out and explain how your code meets the requirements of the problem, explain how portions of your code work, and/or apply skills from the problem to a new situation.

Policies

The policies on late work and extensions, academic integrity, and the use of AI for this lab are the same as for lab 2. Review them there.

Preliminaries

Reference

Review this week's slides, in-class exercises handouts, and in-class exercise solutions for information, templates, and examples.

Exercises

1. 

   In this exercise you'll create a sketch which draws the hourglass quilt shown. The requirements for your sketch:

   • Name the sketch lab5a.

   • Make the drawing window 400x400.

   • Use the same pattern of colors as shown — you can choose your own colors (you don't need to use white, red, and green) but you must use three different colors and those areas that are the same color in the picture should be the same color in your sketch.

   To do this:

   • Create a new sketch, add your name and a description of the sketch in comments at the beginning, and save it as lab5a.

   • Start with the basic sketch structure: open a drawing window and clear the background.

   • Complete the Exercise 1 section of the lab 5 worksheet.

   • Complete the sketch:

     • Write the function definition for the upright hourglass pattern, then use it to draw the upper left and lower right blocks.

     • Write the function definition for the sideways hourglass pattern, then use it to draw the other two blocks.

2. 

   In this exercise you'll create a sketch which draws the quilt shown. The requirements for your sketch:

   • Name the sketch lab5b.

   • Make the drawing window 700x700.

   • Use the same pattern of colors as shown — you can choose your own colors but you must use five different colors and those areas that are the same color in the picture should be the same color in your sketch. Note that the center diamond in the biggest block is the same color as the border around the edge.

   Use quad() to draw the center diamond in each block. Look it up in the Processing API to find out how to use it.

   To do this:

   • Create a new sketch, add your name and a description of the sketch in comments at the beginning, and save it as lab5b.

   • Start with the basic sketch structure: open a drawing window and clear the background.

   • Complete the Exercise 2 section of the lab 5 worksheet.

   • 

     Draw the first layer of blocks as shown:

     • Write the draw block function, then use it to draw the upper left block.

     • One by one, add each of the other seven blocks.

     
     
   • 

     Add the larger copy of the block in the center.

     
     
   • 

     Add the final copy of the block in the center to complete the sketch.

     
     
3. 

   In this exercise you'll create a sketch which draws the quilt shown. (This is a traditional pattern known as Drunkard's Path.) The requirements for your sketch:

   • Name the sketch lab5c.

   • Make the drawing window 400x400.

   • Use the same pattern of colors as shown — you can choose your own colors but you must use two different colors and those areas that are the same color in the picture should be the same color in your sketch.

   You'll need to use arc(). Look it up in the Processing API to find out how to use it.

   To do this:

   • Create a new sketch, add your name and a description of the sketch in comments at the beginning, and save it as lab5c.

   • Start with the basic sketch structure: open a drawing window and clear the background.

   • Complete the Exercise 3a section of the lab 5 worksheet.

   • Write the drawing functions for the four building blocks and test them by calling them from draw. Draw the blocks anywhere in the drawing window — this is just to see that they work. When your functions work, remove the calls from draw().

   • Complete the Exercise 3b section of the lab 5 worksheet.

   • Write the drawing function for a whole quilt block, then use it to draw the quilt block in the upper left corner.

   • One by one, add the function calls to draw the other three quilt blocks to complete the pattern.

4. In this exercise you'll create a sketch of your own design. What the sketch depicts is up to you (here's a chance to be creative!) but for full credit it must include the following elements:

   • Name the sketch lab5d.

   • The scene must be recognizable as something. Include a comment at the beginning of the sketch describing what it depicts. The intent is that you should deliberately choose positions and colors for the shapes — simply drawing a bunch of shapes at whatever location they happen to end up at is not acceptable. Simplifying things (like making a tree out of a rectangle and a triangle) is fine.

   • The scene must be original and created by you — it can be something entirely new for this exercise or you can extend your sketches for #4 in previous labs. You may not, however, copy code from other exercises in this lab, examples or solutions in the textbook or from class, or other sources even if you then make some changes — create your own version (such as a fancier car) from scratch.

   • You must use drawing functions and parameters when it is appropriate to do so. For example, if your scene contains two otherwise-identical cars in different positions, for example, there should be a single car-drawing function with parameters for the position rather than just a list of drawing commands for both cars in draw or separate drawing functions for each car.

   • Each function must have a descriptive name related to its purpose (e.g. drawTree would be a good name for a tree-drawing function) and a comment immediately before the function describing the purpose of the function and what each of its parameters are for. For example:

      // draw a tree
      //  (x,y) is the position of the bottom center of the tree trunk
      
      void drawTree ( int x, int y ) {
        ...
      }
     

   • You must have at least four different compound things built out of three or more shapes each, with a drawing function to draw each kind of thing. For example, if you have a car and a (three-shape) tree and a snowman in your scene, you must create a car-drawing function, a tree-drawing function, and a snowman-drawing function.

   • You must demonstrate variation in position, size, and color using functions with parameters. The three properties (position, size, and color) can be covered together or in other combinations — a red car, a blue car, a large snowman, and a small snowman all in different positions covers all three properties, as does just a large red car and a small blue car in different positions.

   • At least one instance where different copies of a compound thing are interactive and/or animated in different ways. For example, two cars could each move in different directions and at different speeds, or one car could move while another changes color, or one car could be animated in some way while the other tracks the mouse, or one car follows the mouse's x coordinate while another follows the mouse's y coordinate. Note: remember not to use mouseX, mouseY, or animation variables in the body of your drawing functions! (While it is legal to do so, it is better programming style in many cases not to.)

   To do this:

   • Complete the Exercise 4a section of the lab 5 worksheet.

   • Create a new sketch, add your name and a description of the sketch in comments at the beginning, and save it as lab5d.

   • Start with the basic sketch structure: open a drawing window and clear the background.

   • Build up your sketch bit-by-bit. When you get to something that you identified as needing a drawing function, complete that part of the Exercise 4b section of the lab 5 worksheet before writing code.

Extra Credit

Challenge yourself and earn extra credit by going substantially beyond the required elements. (See the assignments and evaluation policy for more details on extra credit.) Some possibilities for #4:

• Lots more stuff, particularly more — and more complex — compound shapes drawn with parameterized functions.

• Build up more complex shapes by creating drawing functions which call other drawing functions (as in #3). Incorporate some additional complexity — functions which call functions which call functions (etc) or animated elements (such as a windmill with rotating blades).

• 

  Draw a quilt like the one shown as an element in or as the background for your scene. Make use of parameterized functions to save work! (Very little credit will be given if you just draw lots of individual rectangles and triangles, or if you have lots of very similar functions when a single parameterized one would do.) You can pick your own colors, but keep the spirit of the pattern shown — each colored region should have a base color and the shapes within that region should have variations of that base color. A clever way to handle the color variations would be to add/subtract small random amounts to/from the components of the base color. To avoid flickering effects when random() is used in active mode, put the statement

    randomSeed(0);
  

  at the beginning of draw(). This means that the same sequence of random numbers will be generated each time draw() occurs.

  
  

It's OK to add on to your lab5d sketch but be sure to include a brief description of what you've done for extra credit in a comment at the beginning of the sketch.