What’s the Plan?
� Topic 1: A Little Review
� ACM GUI Apps, Buttons, Text and Events
� Topic 2: Learning about Loops
� Different kinds of loops
� Using loops to modify Picture objects
� Writing loop functions that work with String objects
� Topic 3: Introducing Animation
� Using loops to animate your GUI objects
Your "IC" or "Lab" Document
� Use Word or OpenOffice to create a new document
� Save the file as IC09.doc (Office 97-2003 compatible)
� Place on your network U: drive or on a thumb drive
� Put your name and today's date at the top of the sheet
� Title it "CS 170 Lab Exercises Week 9"
� Start DrJava and we'll start with a little GUI review
� Open TurtleWorld.java in your week09 folder
ACM GraphicsProgram Review
� Notice how ACM GUI apps are different
� Three different import statements
� Inheritance: extends GraphicsProgram
� Two different methods you will override
� The acm.graphics package contains graphical shapes
� Exercise 9.1 – create a GTurtle variable
� Create the variable outside of your methods
� Put the word private in front of it
� This is called an instance variable
Creating Graphical Objects
� Exercise 9.2 – create a GTurtle object
� Put inside init() method (means initialization)
� Initialize GTurtle instance variable (NOT NEW VAR)
� Look up GTurtle docs on class Web site
� Add it to the center of your program's canvas
� Find out the width and height of canvas
� Use width / 2 – half the width of the turtle
� Run and shoot a picture
Using Interactors (aka Widgets)
� The javax.swing package contains interactors
� JButton: push buttons
� JLabel: labels
� JTextField: text input areas
� Exercise 9.3 – create three JButton objects
� Create them inside the init() method
� "Turn Left", "Turn Right", "Move"
� Add them to the SOUTH panel of your program
� Run and snap a screen-shot
Hooking Up Events
� Buttons don't do anything without an event handler
� Event handling is in the java.awt.event package
� For ACM GUI apps, "activate" all buttons in program
addActionListeners(); // bottom of init()
� Respond to Action events with this method
public void actionPerformed(ActionEvent e)
{
// Your code goes here}
Responding to Events
� First, you need to know which button was clicked
� ActionEvent variable has two methods
� e.getActionCommand(): String on button
� e.getSource(): reference to button
� Exercise 9.4 – Activate your turtle
� Get the text on the button
� Use sequential if statements to decide what to do
� Call the methods in your GTurtle variable
� Run, move your turtle around and snap a picture
Other Event Listeners
� We can listen for mouse events as well
� In ACM programs, just add this to your init() method
addMouseListeners(); // bottom of init()
� Respond to different mouse events with these handlers:
� mouseClicked(), mouseMoved(), etc.
� All are void methods that take a MouseEvent parameter
� Exercise 9.5 – hook up mouse events for your program
� When clicked, use setLocation() to move the turtle
� A CS term that means repeating a set of actions� Also called repetition or looping
� Statements used in iteration are called loops
� Loops are flow-of-control statements similar to if
� Like the if statement, a loop evaluates a condition
� If the condition is true, a group of actions are performed
� If the condition is false, the actions are skipped
Iteration and Loops
Iteration and Selection
� Iteration is not the same as selection, though
� A loop returns to its test
after performing its actions
� If the test is still true,
then the actions are
performed again
� A selection statement only
performs its actions once
� You cannot replace a loop with a selection statement
Java and Iteration
� Test at the bottom � Test at the top
{
// Loop Body}
{{
// Loop Body// Loop Body}}
Loop TestLoop Test
� Java has three loops: while, do-while, and for� Each is designed to work best in a specific situation
� One difference is where the test is made
{
// Loop Body}
{
// Loop BodyLoop Body}
Loop TestLoop Test
� Not the most useful method of classification� Doesn't give you any empirical guidance for designing
� Better: ask how each loop is controlled
� Two basic methods of loop control� Simplest method relies on a counter
� Called counting or counted loops
� "Repeat these actions 10 times"
� More complex loops test the occurrence of a particular event, or combination of events.
� These are called indefinite or indeterminate loops
Loop Classification
For Loops
� A counted loop is simplest kind of loop
� The loop is controlled by a or counter variable
� Also known as the loop index
� Use it to for "perform this action 10 times"
� Java's for loop specializes in this
for (int idx = 0; idx < 10; idx++){
System.out.println("idx = " + idx);}
The for Loop Syntax
� The for loop has both a header and body (like if)
� Header has 3 expressions: initialize, test, and update
Your Turn
� Exercise 9.6 – Try these in the Interactions pane
� Write a loop that prints 40 asterisks to the screen
� Write a method that prints n asterisks to the screen
� Call your method with 5 and 10
� Write a loop that adds 5 numbers input by the user
Modifying Pictures
� Let's use some loops to modify some Picture objects
� Open your own (640 x 480) picture in the Interactions Pane
� String fname = FileChooser.pickAFile();
Picture p = new Picture(fname);
p.explore();
� Now, find out how large the Picture is and save the info
� int width = p.getWidth();
int height = p.getHeight();
The Pixel class
� The Pixel class models individual pixels in your picture
� Each object of the Pixel class has
� An (x, y) position in a picture (x = horizontal, y = vertical)
� A red, green, and blue value (between 0 and 255)
� We can get a pixel at a specific location in a picture by using the getPixel() method of the Picture class
� Pixel pix1 = p.getPixel(0,0);
Pixel Methods
� Pixels "know" how to do certain things
� You can ask a Pixel for its color values, or change them
� int red = pix.getRed();
pix.setRed(red / 2); // half as much
� You can also ask a Pixel for the entire Color
� Color pc = pix.getColor();
pix.setColor(pc.darker());
� You can ask a Pixel to tell you where it is located
� int x = pix.getX();
Your Turn
� Exercise 9.7 – Let's continue modifying our Picture
� Start by drawing a green line vertically down the center
� import java.awt.* so we can use Color
� Write a loop that starts at 0 and goes until height
� Inside, grab a Pixel from your Picture, using
width / 2 for x and the loop index for y
� Set the Pixel Color to green
� Show the picture again
� When it works, draw a horizontal red line and snap a pic
Nested Loops
� Nested loops let us process all of the pixels in a picture
� Write one loop that processes all rows
� Inside that loop, write another loop that visits the columns
� for (int y = 0; y < height; y++) {
for (int x = 0; x < width; x++) {
Pixel pix = p.getPixel(x, y);
Color col = pix.getColor();
col = col.darker().darker();
pix.setColor(col);
}
}
Your Turn
� Exercise 9.8 – Let's use some nested loops
� Process the upper-left quadrant: make all pixels darker
� Process the lower-right quadrant: make all pixels brighter
� Process the upper-right quadrant: add vertical stripes� Only process every other x position in your loop
� Process the lower-left quadrant: add a checkerboard� If the row is even, process the odd pixels
� If the row is odd, process the even pixels
� Save as a new file name and paste into your IC doc
Step 1: The Skeleton
� Same steps for all function problems
� 1. Write the header
� 2. Create a result variable
� 3. Return the result
� 4. Run your tests
Step 2: Loop Through Strings
� Normally String problems require you to visit every
character (or set of characters) in the String
� You can write a "skeleton" for this part too
int len = str.length()
for (int i = 0; i < len; i++)
{
// do your processing here}
Step 3: Processing
� Inside the loop, process characters or substrings
� Use the charAt() or substring() method to
extract
int len = str.length();
for (int i = 0; i < len; i++)
{
// Use only one of these belowchar ch = str.charAt(i);
String sCh = str.substring(i,
i+1);
}
Introducing the while Loop
� Counted loops with for are easy
� All of the pieces are in one place
� The initializer for your counter
� The test expression
� The update expression
� The simpler, general-purpose while loop can
also be used to create counted loops
� It's just not quite as convenient as for
Counted while Loops
� To use the while statement to build a counted loop,
you must do three things:
� 1. Create a counter variable, and initialize it
before the loop is encountered.
� 2. Test the counter variable inside the while
loop's boolean condition expression
� 3. Update your counter at the end of the loop
body. This takes the place of the for loop's
update expression.
A Counted while Skeleton
� Here is a skeleton for building counted while loops:
int counter = 0;
while (counter < 10)
{
// Loop body statementscounter++;
}
� Use this basic structure for many of exercises this week
While Loop Functions
� Exercise 9.10 –mixString in WhileLoopProblems
� Always start with the basic function skeleton
� Notice that these problems require a while loop
� Add basic while loop pattern (skeleton) to code
� Use shorter string for length of variable
� Add character from a to result, then from b
� After loop, see if index is < length� Add remaining characters to end
� Shoot a screenshot of tests passing
Animation
� Appearance of motion by changing the shape or position
of objects as a fixed, but rapid rate
� Provides the illusion of motion, similar to movies
� Similar (but different) techniques for applets and ACM
� Four steps:
� 1. Create objects to be animated as instance vars
� 2. Paint object at current location, shape, color
� 3. Call mutator methods to update state of object
� 4. Advance to next frame of animation
Frame-Rate and Skeleton
� Normally want to redisplay from 12-30 frames per sec
� Create constant in terms of milliseconds inside run()
� final int FRAME_RATE = 1000 / 30;
� ACM animation: endless loop inside run() method
public void run() {
advanceOneFrame(); // update objectspause(FRAME_RATE); // wait for next
}
Your Turn
� Let's animate our GTurtle so that it moves automatically
� It's up to you to keep it "on the table"; if it crawls off, it dies
� Add the advanceOneFrame() method
� Inside, move your turtle forward 5 spaces
� Start by adding the skeleton animation loop to run()
� Add the constant FRAME_RATE
� Add a loop that continues while the turtle is visible
� Have to approximate using getX() and getY()
� When the loop ends, display a message box
Finishing Up
� To complete your IC "lab" document:
� Complete Exercise 9.11 in the For Loop lesson, Exercise
9.12 in the While Loop lesson, and Exercises 9.13 in the
Loop Functions lesson, and Exercises 9.14-15 in the
Introducing Animation Lesson.
� Submit to Blackboard when done
� Reading for next week:
� Mediacomp: read Chapter 4 for modifying Pictures
� Gaddis: finish Chapter 3, start Chapter 5
Homework and Quiz
� Homework, Quiz and Assignments
� Deadline is Monday at noon
� 11 homework problems
� 5 for loop functions (similar to exam)
� 5 while loop functions (similar to exam)
� 1 animation, GUI program
� Upload to Assignment Dropbox, press Submit
� Proficiency Quiz 6: Simple for and while loop functions
� Practice on assignments
� You will have ½ hour, assigned seating