University of Washington, CSE 142

Lab 2: For loops, Parameters, Graphics

Except where otherwise noted, the contents of this document are Copyright 2012 Stuart Reges and Marty Stepp.

lab document created by Marty Stepp, Stuart Reges and Whitaker Brand

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 : 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-

5

1

4

3

3

5

2

7

1

9

-1

6

2

-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 : 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.

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

0

22

0

2

18

2

4

14

4

6

10

6

8

6

8

10

2

10

2

-4

2

-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.

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.

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

0

14

0

2

10

2

4

6

4

6

2

6

-2

-2

-2

26

18

4

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
  !!!!!!!!!!!!!! \\!!!!!!!!!!// \\\\!!!!!!//// \\\\\\!!//////	!!!!!!!!!!!!!!!!!!!!!!!!!! \\!!!!!!!!!!!!!!!!!!!!!!// \\\\!!!!!!!!!!!!!!!!!!//// \\\\\\!!!!!!!!!!!!!!////// \\\\\\\\!!!!!!!!!!//////// \\\\\\\\\\!!!!!!////////// \\\\\\\\\\\\!!////////////

Test your code in the Output Comparison Tool.

Exercise : jGRASP Debugger

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

  1 2 3 4 5 6 7 8 9 10

  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

Variable Scope

A variable's scope is the part of a program in which it exists. In Java, the scope of a variable starts when it is declared and ends when the closing curly brace for the block that contains it is reached. A variable is said to be in scope where it is accessible.

public class Example {
    public static void main(String[] args) {
        performTest();
    }
	
    public static void performTest() {
        int count = 12;
        for (int i = 1; i <= 12; i++) {
            runSample();
            System.out.print(count);   
        }
    }

    public static void runSample() {
	    System.out.print("sample");
    }
} 

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 : 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));
      }
  }
  

Exercise : Parameter Mystery

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

  public class Mystery {
      public static void main(String[] args) {
          String hear = "bad";
          String song = "good";
          String good = "hear";
          String walk = "talk";
          String talk = "feel";
          String feel = "walk";
          claim(feel, song, feel);       // to walk the walk is good
          claim(good, hear, song);       // to hear the good is bad
          claim(talk, "song", feel);     // to feel the walk is song
          claim("claim", talk, walk);    // to claim the talk is feel
      }
  
      public static void claim(String hear, String good, String song) {
          System.out.println("to " + hear + " the " + song + " is " + good);
      }
  }
  

Exercise : Syntax errors

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

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  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

1. line 5: cannot use variable y without declaring and initializing it
2. line 5: cannot declare the type of y in the method call
3. line 6: cannot call printer without the correct number of parameters (2, in this case)
4. line 7: cannot call printer by passing the correct type of parameters (double, in this case)
5. line 8: cannot refer to the variable z: it is in scope inside printer, not main
6. line 11: must provide a type for x
7. line 11: must provide a variable name for the second parameter
8. line 12: must refer to the parameters using the exact same spelling
9. 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(String[] args) {
          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;
      }
  }
  

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....

Parameterized methods and Graphics

When you want to divide a graphical program into multiple drawing methods, you must pass Graphics g as a parameter in addition to any other parameters. Example:

public static void main(String[] args) {
    DrawingPanel panel = new DrawingPanel(400, 300);
    Graphics g = panel.getGraphics();
    ...
    drawStuff(g, 13, 52, 7);
}

public static void drawStuff(Graphics g, int a, int b, int c) {
    g.drawLine(a, 45, b, c);
    ...
}

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.

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  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

1. line 1: incorrect import statement; should import java.awt.*
2. line 5: missing word new before 2nd occurrence of DrawingPanel
3. line 6: method name should be setBackground
4. line 6: missing panel. before setBackground
5. line 8: method name should be getGraphics
6. line 9: the setColor method is part of object g, not panel
7. line 9: should not write new before Color.BLUE
8. line 10: method name should be drawRect
9. line 10: missing two parameters from drawRect (width and height)
10. line 11: color should be specified as Color.RED, not "RED"
11. line 12: method name should be fillOval
12. 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 : Stairs loop table

Consider the output at right. The first stair's top-left corner is at position (5, 5). The first stair is 10x10 px in size. Each stair is 10px wider than the one above it.

Fill in the table below with the coordinates and sizes of the first five stairs. Note which values change and which ones stay the same.

5

5

10

10

5

15

20

10

5

25

30

10

5

35

40

10

5

45

50

10

Exercise : Stairs

Write a complete Java program to draw the stairs. Copy/paste the code template below into jGRASP and fill in your own expressions or values for each stair's x, y, width, and height.

Use your table from the previous slide to help you find the correct expressions. The values that change for each stair should become expressions in terms of the loop counter variable, i.

import java.awt.*;

public class Stairs1 {
    public static void main(String[] args) {
        DrawingPanel panel = new DrawingPanel(110, 110);
        Graphics g = panel.getGraphics();
        for (int i = 0; i < 10; i++) {
            g.drawRect(x, y, width, height);
        }
    }
}

Exercise : Stairs 2

Modify your stairs program to draw one (or all) of the following outputs. Modify only the body in your for loop. (You may want to make a new table to find the expressions for x, y, width, and height.)

→

Exercise - answer

To get each output, change the for loop body to the following:

// output 2
g.drawRect(5, 5 + 10*i, 100 - 10*i, 10);

// output 3
g.drawRect(95 - 10*i, 5 + 10*i, 10 + 10*i, 10);

// output 4
g.drawRect(5 + 10*i, 5 + 10*i, 100 - 10*i, 10);

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);
    }
}

Exercise : Number lines, part 1

• Write some nested for loops to produce the following output:

  000111222333444555666777888999
  000111222333444555666777888999
  000111222333444555666777888999
  

• You can use the Output Comparison Tool to check your work.

Exercise : Number lines, part 2

• Modify the previous code to have it do something a little different:

  99999888887777766666555554444433333222221111100000
  99999888887777766666555554444433333222221111100000
  99999888887777766666555554444433333222221111100000
  99999888887777766666555554444433333222221111100000
  99999888887777766666555554444433333222221111100000
  

• You can use the Output Comparison Tool to check your work.

Exercise : Number lines, part 3

• Modify the code to have it produce this output:

  999999999888888887777777666666555554444333221
  999999999888888887777777666666555554444333221
  999999999888888887777777666666555554444333221
  999999999888888887777777666666555554444333221
  

• You can use the Output Comparison Tool to check your work.

Exercise : printGrid

• Write a method named printGrid that accepts two integers representing a number of rows and columns and prints a grid of integers from 1 to (rows*columns) in column-major order.
• For example, the call:

  printGrid(4, 6);
  

  should produce the following output:

  1 5 9 13 17 21
  2 6 10 14 18 22
  3 7 11 15 19 23
  4 8 12 16 20 24
  

• Check your answer using Practice-It from the check-mark icon above.

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 or think of each lines as having two parts...

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!