CS 161: Introduction to Computer Science • Spring 2013 • University of Puget Sound

Quick Links: Home • Calendar • Labs • Homeworks • Resources

CS 161 Homework 5 - Sampler Quilt

Due Wed Mar 06 at 2:00pm

Overview

In this assignment, you will write a program that draws a picture of a particular type of quilt called a sampler quilt, which is composed of several different block types that illustrate a variety of quilting styles. You will use the java.awt graphics library to generate a drawing such as the one below:

The quilt consists of five patterns, illustrated by the first 5 patches in the top row:

1. A "log cabin" block consisting of a nested pattern of rectangles
2. A bullseye deisgn of concentric circles
3. A hybrid pattern combining elements of the log cabin and the bullseye
4. A patch with a written message
5. A design of your choosing (indicated by a question mark in this diagram)--you are free to replace this pattern with whatever design you like

You can use whatever colors you want for these designs; hopefully your quilt will look less garish than mine! More details about how to create each of these designs are given below.

This assignment should be completed individually. You are welcome to ask for help (either from me or from your classmates), but remember the Gilligan's Island rule!

Objectives

• To practice writing whole classes
• To practice organizing your program into re-usable methods
• To practice with loops and conditionals
• To experiment with the built-in Java Graphics package, including drawing and colors
• To practice reading, using, and writing Java documentation

Necessary Files

You should download and extract the BlueJ project from the Homework5.zip file. This project includes the beginnings of your Quilt class to provide an example and get you started. It also includes a README.txt file that you will need to complete.

Details

To create this program, you will be making a single Java class called Quilt. I have provided the beginnings of this class for you, so you don't need to start from scratch. In this class you will define methods to draw each patch, calling this methods from a single paint() method in order to paint a picture of the quilt. More details about the program can be found below, and an example documentation can be found at the bottom of the page.

Applets and Graphics

• Your quilt class will be drawn using a Java Applet, shown using the built-in appletviewer program. Applets are designed for displaying content on the web, but they suit our needs because they provide an easy way to show a window on the screen and draw on it (you can also use the JFrame class discussed in Chapter 2, but it's more complicated). The overhead is already set up in the Quilt class you downloaded, all you need to do is run the program.
• To run your program, right-click on your compiled Quilt class and select "Run Applet" (the first option in red). This will then pop up a window asking for some further details. Make sure that "Run Applet in appletviewer" is selected at the top, and specify the Height as 500 and the Width as 700 (you should only need to select these options once, then BlueJ will remember). See the images below:
• In order to draw on your Applet, you will need to fill in the public void paint(Graphics g) method. This is like the "main" method of a drawing program: it is the method that is called automatically whenever Java wants to make the applet show up on the screen (you never have to call it; Java does it for you).
• When this method is called, it is give a Graphics object as a parameter. A Graphics object is an object you can draw on, using a number of built-in methods (see the Java documentation for more details, as well as Chapter 5.6 in the book). Methods you might be interested in include:
  • drawLine()
  • drawOval()
  • drawRect()
  • drawString()
  • fillOval()
  • fillRect()
  • setColor()
• There are many more methods, and you are welcome to explore them all and use them as desired (and if you have any questions about a particular method, just ask!)
• Note that you will want to specify the Color by using a Color object. You can use the constants defined in Color class, or you can use a constructor to make a new Color object with your choice of red, green, and blue values. You can look up these RGB values for different colors online.

The Patch Grid

• If you look at the quilt as a whole, one of the first things to notice is that the different block types are arranged in the quilt so that they form a regular pattern. Each successive row in the quilt has the same blocks in the same cyclic order. You can produce a cycle by using the modulo operator. Notice how

        0%3 => 0
        1%3 => 1
        2%3 => 2
        3%3 => 0
        4%3 => 1
        5%3 => 2
        ...

That is, if you keep modding by the number of options, you can simply add one to a count in order to form a cycle!

• In addition, each "patch" will need to be able to be drawn anywhere in the quilt. This means that you'll need to give arguments to the drawing methods that are relative to some position on the screen--generally the upper left corner of the patch. This acts as the "origin" (kind of like (0,0)) for the patch. Notice that the origin for the first patch in the first row is at (0,0), the second is at (PATCH_SIZE,0) the third is at (2*PATCH_SIZE,0)... etc. (do you see a pattern?).
• By making the origin a variable and drawing relative to that origin, we can easily redraw the panel just by changing the origin. So instead of drawing a dot at (50,50), you'd draw a dot at (rx+50, ry+50), where (rx,ry) is the origin for the patch. For this reason, all of the patch drawing methods will take an rx (relative x) and ry (relative y) as parameters--you can experiment with seeing your pattern drawn multiple times in different spots by simply calling the method repeatedly.
• In short, inside your paint() method you'll want to use some kind of loop to cycle through all the patches, and then for each patch you can use the modulo operator to choose which pattern to draw, and then call the appropriate method with the correct (rx,ry) parameters to actually draw the pattern.

Log Cabin Patch

• This patch is a representation of an authentic quilt pattern that is widely used in traditional quilting. It is composed of a series of frames, each of which is nested inside the next larger one. Each frame is in turn composed of four rectangular boxes laid out to form a square. The outer frame, for example, looks like this: The next frame fills the space inside the outer frame, as follows: This same pattern continues for a specified number of frames, giving rise to the completed picture:
• To aid in this repetition, you will want to make a second helper method that draws a single frame of a specific width and length. Then you can simply call that method repeatedly (with successively smaller lengths) in order to draw the grid.
• Note that the width (the short distance) of each rectangle is the same no matter how far you nest, but the length decreases as you move in. In fact, the length is shortened by twice the width at each step (can you see why?)

Bullseye Patch

• This patch is made up of a series of concentric circles centered on the block. You should use a loop to draw multiple circles.
• Note that since the Graphics method for drawing circles (drawOval()) measures an x and y position not from the center of the circle where you would expect, but from the upper left corner of the enclosing rectangle. So drawing an oval involves specifying a rectangle in which the circle will appear.
• You can make a circle "filled in" by using the fillOval() command. If you want to put an outline on it, try using fillOval(), then changing the color, then using drawOval() with the same parameters. (Can you see why this works?)
• Your circles should be at least two different colors.

Hybrid Patch

• This patch combines elements from the log cabin (the outer frame) and from the Bullseye. The point of including this patch is to emphasize the benefits of writing re-useable code. Since you should have a helper method from drawing a single frame, and you already have a method for drawing a Bullseye, drawing this patch should be simply a matter of calling those two methods.

Text Patch

• In this patch, you should write a short text message (it does not need to profess your enjoyment of a particular programming language). You can put text on separate lines by using separate calls to the drawString() method.
• You can make the text larger by changing the font. See the Font class for more details. It is not required that you change the font.

Personal Patch

• The last patch is one of your own choosing---a chance for you to flex your creative muscles! You have to include some kind of design, but what that design is remains totally up to you (please keep it appropriate though). You might draw a picture using circles, rectangles, and lines, create another geometic pattern, play with colors, or do whatever you like.
• Be sure to give this method a signature of public void draw<YourName>(Graphics g, int rx, int ry). I intend to take the patches everyone designs and copy them all into a single program so that we can generate an entire class quilt!

Documentation & Style

• While writing your program, be sure to include plenty of comments to explain what you are doing! Use inline comments to explain the "why" of your code, not the "what." Also include a full Javadoc comment (complete with @param and @return tags) for each method in your program.
• Also be careful about using proper coding style in writing your program. Use descriptive variable names with appropriate letter casing (i.e., all variables start with lower-case letters). Make sure braces are on their own lines, and use Auto Layout to clean up your layout. Neatness and readability count! Also try to avoid repeating code--instead write "helper" methods or use loops to avoid a lot of copy and pasting.

Timeline

You may be thinking there is a lot to do for this assignment---and you'd be right. This is not an assignment you can just do over the weekend--get started early! Try writing a pattern each day, and then by the due date you'll be all finished!

As a basic plan of attack: try getting the pattern to just show up in the first box (with rx and ry of 0). Then see if you can adjust the parameters and have the pattern show up in ANY box. Once this works, your pattern is finished and you can move on to the next. Once you have all the patterns created, fill in the paint() method so that it draws all of the patterns on the quilt. You can then fix any remaining bugs (and maybe finalize your color scheme) before turning in the assignment.

Submitting

Be sure to complete the provided README.txt file with details about your program.

Upload the entire BlueJ project to the Hwk5 folder on the submission folder on hedwig. Make sure you upload your work to the correct folder!. This assignment is due at the start of class on Wed March 06.

Grading

This assignment will be graded on approximately the following criteria:

• Your quilt includes the log cabin patch [11%]
• Your quilt includes the bullseye patch [11%]
• Your quilt includes the hybrid patch [11%]
• Your quilt includes the text patch [11%]
• Your quilt includes your personal patch [11%]
• Your quilt shows all the patches in a repeating cyclical pattern [20%]
• Your code is well documented, with complete Javadoc comments for each method [10%]
• Your code adheres to proper style guidelines, including well organized helper methods [10%]
• You have completed the included README.txt file [5%]

Documentation

public class Quilt extends java.applet.Applet

public void drawGrid(java.awt.Graphics g)

public void drawHybridPattern(java.awt.Graphics g,
                              int rx,
                              int ry)

public void drawLogCabinLayer(java.awt.Graphics g,
                              int rx,
                              int ry,
                              int width,
                              int height)

public void drawLogCabinPattern(java.awt.Graphics g,
                                int rx,
                                int ry)

public void drawTextPattern(java.awt.Graphics g,
                            int rx,
                            int ry)

public void drawYOURNAMEPattern(java.awt.Graphics g,
                                int rx,
                                int ry)

public void paint(java.awt.Graphics g)

Joel Ross • jross@pugetsound.edu

Assignment adapted from Julie Zelenski and Eric Roberts

Page Last Modified: 2013-02-26 11:50:41 -0800

Mathematics and Computer Science Department • University of Puget Sound