University of Washington, CSE 142

Lab 2: For loops, Parameters, Graphics

lab document created by Marty Stepp, Stuart Reges, Whitaker Brand and Hélène Martin

Basic lab instructions

Talk to your classmates for help. You can even work on the lab with a partner if you like.
You may want to bring your textbook to future labs to look up syntax and examples.
Stuck? Confused? Have a question? Ask a TA for help, or look at the book or past lecture slides.
Complete as many problems as you can within the allotted time. You don't need to keep working on these exercises after you leave the lab.
Feel free to complete problems in any order.
Before you leave today, make sure to check in with one of the TAs in the lab to get credit for your work.

Today's lab

Goals for today:

draw patterned figures of text using loops
use class constants to represent common unchanging values
practice declaring and passing parameters to methods
use the instructor-provided DrawingPanel and Java's Graphics and Color classes

Exercise : jGRASP Debugger

Breakpoints help you debug programs (). Copy/paste this code into jGRASP:

public class Numbers {
    public static void main(String[] args) {
        int number = 42;
        for (int i = 1; i <= 1000; i++) {
            number = number * 37 % 103;
        }
        int number2 = number * number;
        System.out.println("result = " + number2);
    }
}

Set a breakpoint on the statement inside the for loop (line 5). Do this by moving your cursor to the beginning of that line until you see a stop-sign icon and then clicking.

continued on the next slide...

Exercise - jGRASP Debugger

Now you can debug the program by clicking on the debug icon (looks like a ladybug).
It will stop every time it hits line 5. Then you can see the values of variables i and number.
To continue running, press the top-left play or step buttons.
Using this approach, fill in the table below indicating what value number has when i has the given value. Keep in mind that you are figuring out what value number has just before it executes this line of code.
i = 1, number =
42
i = 2, number =
9
i = 3, number =
24
i = 4, number =
64

continued on the next slide...

Exercise - jGRASP Debugger

Click on the stop-sign a second time to get rid of it and then set a new stop point on line number 7. This will allow you to find out the value of number after the loop is done executing.
Again press "play" to start the programming running again.
At line 7, what is the value of number? 69

Exercise : printing a design

Write a program to produce the following output using nested for loops. Use a table to help you figure out the patterns of characters on each line.

-----1-----
----333----
---55555---
--7777777--
-999999999-

Line	Dashes	Numbers
`1`	5	1
`2`	4	3
`3`	3	5
`4`	2	7
`5`	1	9

dashes expression
-1 `* line +` 6

numbers expression
2 `* line +` -1

Test your loop expressions in Practice-It! using the checkmark icon above. Use your expressions in the loop tests of the inner loops of your code.

Exercise : neighbor's design

Draw out a 2D ASCII figure that could be produced using nested for loops.
Give your picture to your neighbor and ask him/her for a similar drawing.
Write a method named neighborDesign that produces the ASCII drawing specified by your neighbor.
Discuss each other's images and code.

Exercise : SlashFigure

Write a Java program in a class named SlashFigure to produce the following output with nested for loops. Use a loop table if necessary to figure out the expressions.

!!!!!!!!!!!!!!!!!!!!!!
\\!!!!!!!!!!!!!!!!!!//
\\\\!!!!!!!!!!!!!!////
\\\\\\!!!!!!!!!!//////
\\\\\\\\!!!!!!////////
\\\\\\\\\\!!//////////

Line	`\`	`!`	`/`
`1`	0	22	0
`2`	2	18	2
`3`	4	14	4
`4`	6	10	6
`5`	8	6	8
`6`	10	2	10
multiplier	2	-4	2
shift	-2	26	-2

Test your code in Practice-It! or the Output Comparison Tool.

Class constants

A class constant is a global value that cannot be changed.

public static final type name = expression;

Example:

public static final int DAYS_PER_WEEK = 7;
public static final double TAX_RATE = 0.10;

`for` loop expressions w/ constant

When adding a class constant to a loop expression, it affects the constant that must be added in the expression. Suppose we have the two loop expressions below for figure sizes of 5 and 9. The third line of the table shows the general formula that would be used if we turned our figure's size into a constant named SIZE.

size	expression	relationship
`5`	`8 * line + 16`	`16 = 3 * 5 + 1`
`9`	`8 * line + 28`	`28 = 3 * 9 + 1`
`SIZE`	`8 * line + (3 * SIZE + 1)`

continued on the next slide ...

Exercise : `for` loop table w/ constant

You already found loop expressions for the slash figure at size 6. Now make a table at size 4 and use the two to generalize the loop expression in terms of a constant for the figure size.

!!!!!!!!!!!!!!
\\!!!!!!!!!!//
\\\\!!!!!!////
\\\\\\!!//////

Line	`\`	`!`	`/`
`1`	0	14	0
`2`	2	10	2
`3`	4	6	4
`4`	6	2	6

`\` and `/`
size 6	`2 * line +`	-2
size 4	`2 * line +`	-2
size SIZE	`2 * line +`	-2

`!`
size 6	`-4 * line +`	26
size 4	`-4 * line +`	18
size SIZE	`-4 * line +`	`(` 4 `* SIZE +` 2 `)`

Exercise : SlashFigure2

Add a class constant to your slash figure program so that it can be resized from its default of 6:

size 4	size 7
!!!!!!!!!!!!!! \\!!!!!!!!!!// \\\\!!!!!!//// \\\\\\!!//////	!!!!!!!!!!!!!!!!!!!!!!!!!! \\!!!!!!!!!!!!!!!!!!!!!!// \\\\!!!!!!!!!!!!!!!!!!//// \\\\\\!!!!!!!!!!!!!!////// \\\\\\\\!!!!!!!!!!//////// \\\\\\\\\\!!!!!!////////// \\\\\\\\\\\\!!////////////

size 4

size 7

!!!!!!!!!!!!!!
\\!!!!!!!!!!//
\\\\!!!!!!////
\\\\\\!!//////

!!!!!!!!!!!!!!!!!!!!!!!!!!
\\!!!!!!!!!!!!!!!!!!!!!!//
\\\\!!!!!!!!!!!!!!!!!!////
\\\\\\!!!!!!!!!!!!!!//////
\\\\\\\\!!!!!!!!!!////////
\\\\\\\\\\!!!!!!//////////
\\\\\\\\\\\\!!////////////

Test your code in the Output Comparison Tool.

Parameters

A parameter allows you to pass in a value to a method as you call it.

public static void name(type name) {   // declare

methodName(expression);                // call

Example:

public static void squared(int num) {
    System.out.println(num + " times " + num + " is " + (num * num));
}
...
squared(3);          // 3 times 3 is 9
squared(8);          // 8 times 8 is 64

Exercise : Parameters output

What two values are printed by each call below? Write them in the boxes provided.

public class MysteryNums {
    public static void main(String[] args) {
        int x = 15;
        sentence(x, 42);      // 15 42

        int y = x - 5;
        sentence(y, x + y);   // 10 25
    }
    
    public static void sentence(int num1, int num2) {
        System.out.println(num1 + " " + num2);
    }
}

Solving "Parameter Mystery" problems

Note the values passed, the order in which they are passed, and the order the method prints them.

public class MysterySoda {
    public static void main(String[] args) {
        String soda = "coke";
        String pop = "pepsi";
        String pepsi = "soda";
        
        // #1 = "coke", #2 = "pepsi", #3 = "soda"
        carbonated(soda, pop, pepsi);
    }
    //                                    #1           #2           #3
    public static void carbonated(String coke, String soda, String pop) {
        //                           #2               #3             #1
        System.out.println("say " + soda + " not " + pop + " or " + coke);
    }
}

output: // say#2pepsi not#3soda or#1coke

Exercise : Parameter Mystery

Fill in the boxes with the output that each method call would produce:

public class MysterySoda {
    public static void main(String[] args) {
        String soda = "coke";
        String pop = "pepsi";
        String coke = "pop";
        String pepsi = "soda";
        String say = pop;

        carbonated(soda, pop, pepsi);        // say pepsi not soda or coke
        carbonated(coke, soda, pop);         // say coke not pepsi or pop
        carbonated(pop, pepsi, pepsi);       // say soda not soda or pepsi
        carbonated("pop", pop, "koolaid");   // say pepsi not koolaid or pop
        carbonated(say, "say", pop);         // say say not pepsi or pepsi
    }
    public static void carbonated(String coke, String soda, String pop) {
        System.out.println("say " + soda + " not " + pop + " or " + coke);
    }
}

Exercise : Syntax errors

The following Java program has 9 errors. Can you find all of them?

public class Parameters {
    public static void main() {
        double bubble = 867.5309;
        double x = 10.01;
        printer(double x, double y);
        printer(x);
        printer("barack", "obama");
        System.out.println("z = " + z);
    }

    public static void printer(x, y double) {
        int z = 5;
        System.out.println("x = " + double x + " and y = " + y);
        System.out.println("The value from main is: " + bubble);
    }
}

Copy and paste the code into jGrasp and see if you can fix the errors.

Exercise - answer

line 5: cannot use variable y without declaring and initializing it
line 5: cannot declare the type of y in the method call
line 6: cannot call printer without the correct number of parameters (2, in this case)
line 7: cannot call printer by passing the correct type of parameters (double, in this case)
line 8: cannot refer to the variable z: it is in scope inside printer, not main
line 11: must provide a type for x
line 11: must provide a variable name for the second parameter
line 12: must refer to the parameters using the exact same spelling
line 13: cannot refer to variables in main that were not passed into printer as a parameter

Exercise - Corrected version

Here is a corrected version of the program:

public class Parameters {
    public static void main() {
        double bubble = 867.5309;
        double x = 10.01;
        double y = 5.3;
        printer(double x, double y);
        printer(x, 0.0);
        printer("barack", "obama");
        int z = 5;
        System.out.println("z = " + z);
    }

    public static void printer(double x, double y) {
        System.out.println("x = " + x + " and y = " + y);
        System.out.println("The value from main is: " + bubble);
        int z = 5;
    }
}

Exercise : `printSquare`

Write a method printSquare that accepts min and max integers and prints a square of lines of increasing numbers. The first line should start with the minimum; each line that follows should start with the next-higher number. The numbers on a line wrap back to the minimum after it hits the maximum. For example, the call:
```
printSquare(3, 6);
```
should produce the following output:
```
3456
4563
5634
6345
```
If the maximum passed is less than the minimum, the method produces no output. Check your answer using Practice-It from the check-mark icon above.
Hint: remember the mod operator...

Exercise : Parameter Mystery

Fill in the boxes with the output that each method call would produce:

public class MysteryNumbers {
    public static void main(String[] args) {
        String one = "two";
        String two = "three";
        String three = "1";
        int number = 20;

        sentence(one, two, 3);                  // three times two = 6
        sentence(two, three, 14);               // 1 times three = 28
        sentence(three, three, number + 1);     // 1 times 1 = 42
        sentence(three, two, 1);                // three times 1 = 2
        sentence("eight", three, number / 2);   // 1 times eight = 20
    }
    public static void sentence(String three, String one, int number) {
        System.out.println(one + " times " + three + " = " + (number * 2));
    }
}

Graphics

Now we'll explore several exercises related to drawing graphics.

We'll use a provided class DrawingPanel that works with Java classes Graphics (a "pen" for drawing) and Color.
Download DrawingPanel.java to your program directory.
To check your output in the DrawingPanel, click File, Compare to URL....

Exercise : Syntax errors

The following program contains 12 mistakes! What are they? Once you think you've found them all, compile/run your corrected code.

import Java.*;

public class PrettyPicture {
    public static void main(String[] args) {
        DrawingPanel panel = DrawingPanel(220, 150);
        setBackgroundColor(Color.YELLOW);
        
        Graphics g = panel.Graphics();
        panel.setColor(new Color.BLUE);
        g.drawRectangle(50, 25);
        g.setColor("RED");
        g.fillEllipse(130, 25, 42.1, 40.5);
    }
}

answer on next slide...

Exercise - answer

line 1: incorrect import statement; should import java.awt.*
line 5: missing word new before 2nd occurrence of DrawingPanel
line 6: method name should be setBackground
line 6: missing panel. before setBackground
line 8: method name should be getGraphics
line 9: the setColor method is part of object g, not panel
line 9: should not write new before Color.BLUE
line 10: method name should be drawRect
line 10: missing two parameters from drawRect (width and height)
line 11: color should be specified as Color.RED, not "RED"
line 12: method name should be fillOval
line 12: wrong parameter types; width/height must be integers

Exercise - corrected version

Here is a corrected version of the program:

import java.awt.*;

public class PrettyPicture {
    public static void main(String[] args) {
        DrawingPanel panel = new DrawingPanel(220, 150);
        panel.setBackground(Color.YELLOW);
        
        Graphics g = panel.getGraphics();
        g.setColor(Color.BLUE);
        g.drawRect(50, 25, 10, 10);
        g.setColor(Color.RED);
        g.fillOval(130, 25, 42, 40);
    }
}

Exercise : Face

Write a complete Java program that draws the following output:

window size: 220 x 150 px
overall face circle: 100 px diameter; top-left corner at (10, 30)
eyes: blue circles, 20 px diameter; top-left at (30, 60) and (70, 60)
mouth: red line from (40, 100) to (80, 100)

Exercise - answer

import java.awt.*;

public class Face1 {
    public static void main(String[] args) {
        DrawingPanel panel = new DrawingPanel(220, 150);
        Graphics g = panel.getGraphics();
        
        g.drawOval(10, 30, 100, 100);   // face outline
        g.setColor(Color.BLUE);
        g.fillOval(30, 60, 20, 20);     // eyes
        g.fillOval(70, 60, 20, 20);
        g.setColor(Color.RED);          // mouth
        g.drawLine(40, 100, 80, 100);
    }
}

Exercise : Face 1+2

Suppose you have an existing program that draws the "face" figure at right. Let's modify the program using methods and parameters so that we can draw several faces at different locations.

Face.java

continued on the next slide...

Exercise : Face 2

Modify the Face program to draw the following output. Write a parameterized method that draws a face at different positions.

window size: 320 x 180 px
faces' top-left corners at (10, 30) and (150, 50)

Exercise - answer

import java.awt.*;

public class Face2 {
    public static void main(String[] args) {
        DrawingPanel panel = new DrawingPanel(320, 180);
        Graphics g = panel.getGraphics();
        drawFace(g, 10, 30);
        drawFace(g, 150, 50);
    }
    
    public static void drawFace(Graphics g, int x, int y) {
        g.setColor(Color.BLACK);
        g.drawOval(x, y, 100, 100);
        g.setColor(Color.BLUE);
        g.fillOval(x + 20, y + 30, 20, 20);
        g.fillOval(x + 60, y + 30, 20, 20);
        g.setColor(Color.RED);
        g.drawLine(x + 30, y + 70, x + 70, y + 70);
    }
}

Exercise : Face 3

Modify your previous Java program to draw the following output. Use a for loop with your parameterized method to draw faces at different positions.

window size: 520 x 180 px
faces' top-left at (10, 30), (110, 30), (210, 30), (310, 30), and (410, 30)

Exercise - answer

import java.awt.*;

public class Face3 {
    public static void main(String[] args) {
        DrawingPanel panel = new DrawingPanel(520, 180);
        Graphics g = panel.getGraphics();
        for (int i = 0; i < 5; i++) {
            drawFace(g, 10 + i * 100, 30);
        }
    }
    
    public static void drawFace(Graphics g, int x, int y) {
        g.setColor(Color.BLACK);
        g.drawOval(x, y, 100, 100);
        g.setColor(Color.BLUE);
        g.fillOval(x + 20, y + 30, 20, 20);
        g.fillOval(x + 60, y + 30, 20, 20);
        g.setColor(Color.RED);
        g.drawLine(x + 30, y + 70, x + 70, y + 70);
    }
}

If you finish them all...

If you finish all the exercises, try out our Practice-It web tool. It lets you solve Java problems from our Building Java Programs textbook.

You can view an exercise, type a solution, and submit it to see if you have solved it correctly.

Choose some problems from the book and try to solve them!

`i = 1, number =`		42
`i = 2, number =`		9
`i = 3, number =`		24
`i = 4, number =`		64

University of Washington, CSE 142

Lab 2: For loops, Parameters, Graphics

University of Washington, CSE 142

Lab 2: For loops, Parameters, Graphics

Basic lab instructions

Today's lab

Exercise : jGRASP Debugger

Exercise - jGRASP Debugger

Exercise - jGRASP Debugger

Exercise : printing a design

Exercise : neighbor's design

Exercise : SlashFigure

Class constants

for loop expressions w/ constant

Exercise : for loop table w/ constant

Exercise : SlashFigure2

Parameters

Exercise : Parameters output

Solving "Parameter Mystery" problems

Exercise : Parameter Mystery

Exercise : Syntax errors

Exercise - answer

Exercise - Corrected version

Exercise : printSquare

Exercise : Parameter Mystery

Graphics

Exercise : Syntax errors

Exercise - answer

Exercise - corrected version

Exercise : Face

Exercise - answer

Exercise : Face 1+2

Exercise : Face 2

Exercise - answer

Exercise : Face 3

Exercise - answer

If you finish them all...

`for` loop expressions w/ constant

Exercise : `for` loop table w/ constant

Exercise : `printSquare`