Comp 170 Lab 1 - Picture - Sept 10

Goals

1. The picture project is here. Download this zip file, save it somewhere persistent, open it, and run the project within BlueJ. I have made two changes from the book's version: I have replaced class Square with class Rect, to give you more flexibility in drawing, and I've added colors gray, brown, and violet.

You might start by making some modest changes to the picture, such as changing the position and color of various components. You might also try adding a Rect.

2. Edit the source code to create an entirely different picture. Try to eliminate the house entirely, perhaps replacing it with a landscape (trees can be rectangles topped with circles or triangles), or a vehicle, or a face.

3. Add a moveHorizontal(int distance) method to the Picture class, and make it work. It should move the entire picture, as a unit. You won't need the setBlackandWhite() or setColor methods; you can take over one of those. The way to move the entire picture left is simply to move each component left.

4. Add a new constructor for Rect, that takes width and height as parameters. Using this constructor, you can compress
    Rect r = new Rect();
    r.changeWidth(50);
    r.changeHeight(100);
into
    Rect r = new Rect(50, 100);
Note that your new constructor goes into class Rect; everything else you do here should go into class Picture.

5. Add a moving element, such as my Blue Meteor, and a persistent repeating element, such as my LawnGrow (or rain, or bubbles, or maybe a fence). Each of these is to be drawn by its own method, and Picture.moveHorizontal (above) is not to affect them (mainly because that's hard). Each of these will need a loop; in the moving element something is repeatedly erased and redrawn in a new position and in the repeating element it is repeatedly constructed and drawn. Here are the steps for a meteor:

(a). Create the outline for a new method: 

    public void meteor() {
    }

(b). Create the moving object (it doesn't have to be a circle) inside the method above: 

    Circle m = new Circle();

(c). Set its initial size and position and color. Here's one sample change, plus the line needed to make the shape visible: 

    m.changeSize(20);
    m.makeVisible();

(d). Now keep redrawing it in a loop. Shown here is a while loop; the for loop is another option. Each time "through" the loop the variable i is incremented; we stop when i reaches 30. Each time we move, we move right by 6 pixels and down by 3; the net effect is an animated slide from upper-left to lower-right. 

    int i = 0;
    while(i<30){
        m.moveHorizontal(6);
        m.moveVertical(3);
        i=i+1;
    }
What do you think would happen if you deleted or commented out the i=i+1 line?

To do the repeating element, create another method again with a loop. This time you will put the construction of the shape inside the loop (so you have multiple shapes, rather than one shape moving multiple times). You will also need to have the position depend on the loop variable, so that each shape is drawn in a different place.) Here is some sample code from my lawnGrow method; each triangle has width 10 and so the moveHorizontal is by multiples of 10:

        while (i<24) {
            t = new Triangle();            // inside the loop!
            t.moveHorizontal(i*10);    // note that x-Position is multiples of 10
            t.changeSize(20,10);
           ....                        // other parts
            i=i+1;                    // don't forget this!
        }

If you get very ambitious, look in the Canvas class for where colors are defined (try searching for "violet"), and add a new color. To get numeric RGB color values, find an online colorwheel using google.

Show your project to either me or Maria, or else zip it all up and email it to me (pld@cs.luc.edu).