CS10, Fall 2009, lab06

Instructor: Phill Conrad
TAs: Esra Kucukoguz, Yiming Li, Murali Yeleswarapu

Primary TA for this lab: Esra Kucukoguz

(The lab06 preview is still available, but you no longer need to look at it—this file has everything you need.)

What you'll be doing in this lab:

• In this lab, you'll combine your drawings from lab03 together with those of your pair partner.
• You'll learn how to generalize your drawing into someting that can be drawn in any color, size, and at any place on the screen.
• You'll learn how to draw both to the screen, as well as to a graphics file (a .png, .jpg, .gif, etc.)
• You'll then combine your drawings together, and put them up on the web.

Step 1: Converting hard coded drawings into classes

Start by working with your pair on one of your two lab03 submissions. Open up this submission in BlueJ, or at the command line—however you prefer to work.

Create a ~/cs10/lab06 directory, and save your lab03 work as lab06Step1Project in this new dircectory.

Now, make a a specific class that implements the "Shape" interface, and represents your drawing.

For example, if you drew an skateboard, you want to make a class:

public class Skateboard implements Shape 
{

  

  private GeneralPath skateboard;
  public Skateboard(double x, double y, double width, double height)
  {
    etc ...
  }

 etc ...
}

This is instead of having code in your DrawSkateboardComponent that has hard coded calls to Rectangle, Ellipse, Line2D, GeneralPath, etc. that draw the skateboard.

If you used the GeneralPath technique to make your drawing, you can see an example online here of how to convert hard-coded drawings into a class that implements Shape

• http://www.cs.ucsb.edu/~pconrad/cs10/09S/labs/lab06/lab06CoffeeCupExample
• (You can copy this code into your directory using the same form of "cp -r" command you used in all the previous labs—see those for an example of that command.)
• This code is also available as lab06CoffeeCupExample.zip

What to look for in this code:

• Compare the way that the coffee cup is drawn with "hard coded points" in the HardCodedCoffeeCupComponent.java to the CoffeeCup.java class that implements Shape
• Notice how this makes the AbstractedSnowmenHousesAndCoffeeCupsComponent.java file much easier to follow.

The main idea is to draw the points the same way as you did before, but include a few key lines of code:

• parameters x,y, width, height in the constructor:
public CoffeeCup(double x, double y, double width, double height)
• constants for the original hard coded x,y,width, height:
  // Specify the upper left corner, and the
// width and height of the original points used to p
// plot the coffee cup

final double ORIG_ULX = 100.0;
final double ORIG_ULY = 100.0;
final double ORIG_HEIGHT = 300.0;
final double ORIG_WIDTH = 400.0;
  
  
• Code to combine all the pieces of the thing you are drawing into one GeneralPath object:
  
  

  // now we put the whole thing together ino a single path.
  
          
  
  cup = new GeneralPath ();
  cup.append(topAndBottom, false);
  
  cup.append(leftSide, false);
  cup.append(rightSide, false);

• Code at the end of your routine that translates the shape and scales it, using those constants:

Shape s = ShapeTransforms.translatedCopyOf(cup, -ORIG_ULX + x, -ORIG_ULY + y);

// scale to correct height and width

s = ShapeTransforms.scaledCopyOf(s,
    width/ORIG_WIDTH,
    height/ORIG_HEIGHT);


cup = new GeneralPath(s); // convert the scaled cup back to a GeneralPath


  

You'll need to copy the ShapeTransforms class into your project so that you can scale, translate, and rotate the shapes you draw—this comes from the CoffeeCup example mentioned above.

In your new class, you also need to implement all the methods that implement Shape—this is easy. You can see that the underlying GeneralPath object already has all these methods, so we just provide a wrapper around those, as we went over in Lecture on Wednesday May 13. You'll only need to replace the variable cup with whatever GeneralPath instance variable you use to represent your object (e.g. skateboard, ipod, beachScene, etc.)

 /**
 Tests if the specified coordinates are inside the boundary of the
 Shape.
 */
 
 public boolean contains(double x, double y)  { return cup.contains(x,y); }
 
 /**       Tests if the interior of the Shape entirely contains the
 *       specified rectangular area.
 */

 public boolean contains(double x, double y, double w, double h) { return cup.contains(x,y,w,h); }

etc...

Work with your pair first to try to understand the code in the CoffeeCup class. You may need to consult the Javadocs for the methods you see there—be sure you know what kind of object the method is being invoked on (e.g. append() is being invoked on cup, which is an example of a GeneralPath object, so look up the javadoc for GeneralPath to know how append() works.)

If you used things other than GeneralPath in your drawing, you can still use this technique. You can use the append method of General Path to simply append anything that implements the Shape interface directly to a GeneralPath object. This means you can use the code above, and just use append() on your Rectantgles, Circles, Ellipses, Line2D.Doubles, etc. just like I used it on GeneralPath objects. Here are some examples:

• See the file Snowman.java for an example of combining Circles into a GeneralPath object
• See the file House.java for an example of combining Rectangles and Lines into a GeneralPath object
• Although I don't have an example, you should also be able to combine Circles, Ellipses, Rectangles, GeneralPaths, and Lines together—anything that implements the Shape interface.

What if I used fills?

(Note: If you didn't use fills, you can skip down to the part that says: "What you should have when you are finished with Step 1")

During the 4PM lab on Thursday, I became aware that some of you had used the "fill" method of the Graphics2D class to create some great drawings with filled in color, such as these Tanks created by your classmate Moises:

Drawing done with fills require a different approach to combine the pieces together. That approach is illustrated in the following BlueJ Project:

• http://www.cs.ucsb.edu/~pconrad/cs10/09S/labs/lab06/lab06FillsExamples
• (This is also available as lab06FillsExamples.zip)
  

The key to this method is to look at the examples inside the following files.

First, look at a very simple example. This example draws an Italian flag using fills, like this one:

• ItalianFlag.java
  • This file draws a simple Italian Flag using a Rectangle object for the outline, and Green, White and Red fills for the three parts of the flag. (I thought of this because I had pizza for lunch.)
  • This illustrates how you can combine fills into an object that has a private BufferedImage instance variable, and a getImage() method.
• DrawItalianFlagComponent.java, ItalianFlagViewer.java
  • The first two are Java Classes that make an ItalianFlag object you can see it on the screen. The main method is inside ItalianFlagViewer.
• WriteItalianFlagToFile.java
  • This file illustrates how to save an ItalianFlag image to a file (e.g. a .png file) so that you can see it on the web (we'll cover this more in Step 2).

When you have looked at this files, look at the ones that draw the Tank images:

• MoisesTank.java
  • This file illustrates how to take a hard coded drawing from lab03 that was done with fills, and adapt it into a class that can draw your drawing multiple times. We copy the code from the paintComponent() method at the place indicated in this file.
• AllMyDrawings.java
  • This class contains static method that can draw various kinds of drawings—this is where the code is that can draw one or more tanks. We factored this out so that we could call it both from a component such as MoisesTankComponent.java (to see the drawing on the screen) and from WriteTanksPictureToFile.java
• MoisesTankComponent.java, MoisesTanksViewer.java
  • These files are used to view the tanks on the screen. The main method is in MoisesTanksViewer
• WriteTanksPictureToFile.java
  • This file contains a main method to generate an image file (suitable for putting on a web page) with the images of the tanks.

To adapt the code in MoisesTank.java for your own drawings with fills:

• The general approach is that we first create a local variable with BufferedImage on which to draw your picture, of the same size as the component you used in lab03 (that's where ORIG_TOTAL_HEIGHT and ORIG_TOTAL_WIDTH need to come from.)
• We then draw the picture using the same code from your lab03 paintComponent method—perhaps with all the hard-coded points.
• We then excerpt of the section of that entire image that contains your picture (that's what ORIG_ULX, ORIG_ULY, ORIG_WIDTH, and ORIG_HEIGHT are for).
• Finally, we scale that to the appropriate size, and store it in the instance variable that stores the drawing as a BufferedImage.
• Note that for this to work, you need to correctly define the variables ORIG_ULX, ORIG_ULY, ORIG_WIDTH, ORIG_HEIGHT, ORIG_TOTAL_WIDTH, and ORIG_TOTAL_HEIGHT in the manner indicated in the comments.
• Finally, you need to change the code at the top and and the bottom, every where it references "tank" to instead refer to your drawing.

What you should have when you are finished with Step 1:

• For each of the objects you are drawing (two for you, and two for your pair-partner), you should have a class that can draw that object, and either
  • has a GeneralPath instance variable, and the class implements the Shape interface (so that you can draw it directly), or
  • it has a BufferedImage instance variable, and the class has a getImage() method that can be used with code such as g2.draw(myThing.getImage(), x, y).
• You should have tested those classes by
  • drawing them in a class such as MyDrawingComponent (that extends JComponent),
  • which is then added to a MyDrawingViewer (that creates a JFrame and displays it.)

When you've done that, you are ready for Step 2:

Step 2: Understanding how to create image files (.png, .jpg, .gif)

Now, copy this project to your directory:

• http://www.cs.ucsb.edu/~pconrad/cs10/09S/labs/lab06/GraphicsToFileExample.project
• or copy it from this zip file: GraphicsToFileExample.project.zip

You can copy this file to your directory with the usual "cp -r" command.

Read through this code together with your pair.

Then, compile the code (either in BlueJ, or at the command line, using "javac *.java".

Then, run the main program WritePictureToFile, but run it AT THE COMMAND LINE with the command:

 java WritePictureToFile cups

You should see a file appear in your directory called cups.png. You can use the web browser to open this file (use the File / Open File command and navigate to this file). You should see that you now have an image file that contains a drawing.

Whatever you supply on the command line is what the file will be called—for example:

 java WritePictureToFile fred

creates the file fred.png.

Try to understand how this code works before moving on to the next step.

Also note one other thing: there is a new class in this example called PhillsPictures. Here, we've taken the code to draw the pictures out of the Component class and moved it into its own class—we've "factored it out" so that we can call it from the DrawLotsOfStuffComponent class, or the WritePictureToFile class.

This process of moving code around—factorig things out so that they can be reused—is called refactoring, and is an important skill in software development.

Step 3: Putting it all together

Now, save a copy of GraphicsToFileExample.project as lab06Project in your lab06 directory. Add the classes for your four drawing objects into the lab06Project.

In this new project, each drawing object should now have its own class that either:

• implements Shape, and has a constructor that takes(double x,double y,double width,double height)—or some other appropriate parameters that allow it to be drawn anywhere on the screen at any size, or
• has a constructor that takes (int width, int height), and has a getImage() method returning a BufferedImage that can be drawn anywhere on the screen

(This is exactly the same as where you were supposed to be at the end of Step 1.)

Some notes:

• As an example of "other appropriate parameters" for some objects, such as a sun, moon, star, pizza, etc. a radius and center point might be more appropriate than x,y,width,height
• As an example of how you can make a "convenience constructor", see the Snowman.java file.
  • One constructor takes parameters upperLeft x, y, width and height
  • The other, which is more convenient for users, takes center-bottom x,y, and height. (That's how we'd normally think about placing a snowman in a picture.)
  • The second constructor calls the first one to do its work with the line of code:
    
    

    this(centerBottomX - height/4.0,  /* upper left x */
    
        centerBottomY - height, /* upper left y */ 
    
        height/2.0,  /* width */
    
        height); /* height */
    
              

Once you've combined your objects into a single project, make a class similar to either:

• PhillPictures.java class from GraphicsToFileExamples.project, or
• the AllMyDrawings.java class from the lab06FillsExamples project.

That is, write a class with methods that illustrates how you can put examples of all four of your drawings in a single drawing, together, at different locations, and sizes. You may like to make them different colors too, following the example from PhillsPictures, and/or use for loops to make lots of different objects in lines or other patterns.

When you are done, create a JComponent and Viewer class (with a main method that creates a JFrame) to view your drawing, and also modify the WritePictureToFile class so that it draws your picture.

Be sure your picture has a text label in it (like the examples) with the names of you and your pair partner, and a description of your drawing.

(Note: earlier in class, I mentioned you'd have to come up with a fifth item to draw—that is no longer a requirement, though you are free to do so if you want. Draw as much as you like—it's your drawing! It just has to have at least four different types of items.)

Step 4: Putting your picture on the web

Now, its time to show off.

Run your main program—the one that make the .png file—and create a file like ourDrawing.png.

Now, use the "cd" command (by itself) to get back to your home directory, and then create a cs10 directory under public_html—this is a directory where you can put your drawing on teh web:

cd 

mkdir -p public_html/cs10

Copy your .png file into that directory, for example:

cp cs10/lab06/lab06Project/ourDrawing.png public_html/cs10

Then use the following command to make that file readable on the web:

chmod -R a+rx ~/public_html

You should then be able to see your drawing at the URL:

www.cs.ucsb.edu/~yourusername/cs10/ourDrawing.png

When that is working, make a posting on the Gauchospace Forum called "Drawings from lab06", that has your name, and that of your pair partner in the subject line, and the URL of your drawing in the body of the post. You can make it a clickable link using the little link icon (the picture of a chain link).

With that, you are finished with lab06—except for the turnin step.

Turning in lab06

Use the turnin command on just the directory containing the code you are submitting (if you copied other projects into your lab06 directory for practice, don't submit those.)

Grading Rubric:

Grading: This lab is worth Total points: ?, distributed as follows. Partial credit may be awarded for each step at the discretion of the TA/Instructor.

• Steps 1 and 3: Creating your drawing classes
  • You should have created "at least four" (*see excptions below) classes that either allow your drawing to be placed anywhere on the screen, at any size. There are two possible approaches:
    • a class that implements the Shape interface (this works for simple single color line drawings), e.g. CoffeeCup.java
    • a class that encapsulates a BufferedImg, and provide a gettter to return this item, e.g. ItalianFlag.java, or MoisesTank.java
• *Exceptions to the "at least four" rule:
  • Although he rubric calls for four distinct shapes—the idea being that each member of the pair contributes two shapes from their lab03 submission—there are certain exceptions, and the grader may use discretion here:
  • The TA may use discretion—if a shape is particularly complicated, it may count as "two" shapes.
  • If, for reasons of difficulty in making a pair, your team consists of three students, or only one students, there may be fewer than four, or more than four items.
  • If you are unsure what situation applies to you, please email the TA listed as the grader for this assignment (Esra Kucukoguz) and cc your instructor using the pconrad@cs.ucsb.edu email address (do not use the address for this purpose.)
• (100 pts): Creating the four* (see *exceptions) above classes that implement the Shape interface.
  • Be sure that your classes use proper variable names, and that the comments reflect what your class is drawing
  • Points may be deducted, for example, if you are drawing a baseball cap, but your variable names or the comments refer to a coffee cup.
  • Be sure that all methods have appropriate Javadoc comments.
• Step 3: Factoring out the step that combines your drawings into a single picture
  • (50 pts): Creating a class similar to the AllMyDrawings class, or the PhillsPictures class—with static methods that take a Graphics2D object and use that object to draw.
• Step 3: Creating classes to view your image on the screen
• (50 pts): Creating an appropriate classes to be able to view your picture:
  • Some component class that extends JComponent (using inheritance)
  • Some Viewer class with a main() method that puts a JFrame on the screen to be able to see your picture.
• Step 3: Creating a class to draw your picture in an image file (Step 3)
  • (25 pts) Modifying the WritePictureToFile class so that it creates a copy of your drawing
  • (25 pts) Running that program so that a copy of your drawing is included in your project directory
• Step 4: Publishing your results on the web
  • (20 pts) Creating a link on the web
  • (20 pts) Announcing that link on the forum on Gauchospace.
• General:
  • Overall style: applies to ALL .java files you submit where you wrote all or part of the code:
    • Code should not have stray comments left over from unrelated examples (e.g. no "coffee cup comments" if your code is drawing an laser printer).
    • code should have YOUR NAME(S) in the Javadoc comments at the top of each class file, where appropriate.
    • you do not need to—and should not—add your names to code such as ShapeTransforms.java if you just copied the file and did not modify it.
    • Good choices for variable names, method names, class names, etc.
    • No stray @@@ comments that no longer apply, such as "@@@modify this line to make your picture appear ... "
  • (10 pts): Correctly executing the turnin step on the directory containing your code.

Deadline:

Lab06 will be due by 5pm on Monday June 1st (Note—this is after lab07, so get that one done first.)

• Extended to 5pm on Wednesday June 3rd—though earlier is better.
• Submissions that are completed by the original deadline of 5pm Monday June 1st—and have an link to their image posted on Gauchospace—may be eligible for extra credit points in a "best picture" competition.
  

End of lab06