1. Introduction to Loops/Repetition (while loop)
- while loop general form
- updating the value of a variable
- integer variables
Introduction to Loops -- while loop
In a previous class meeting we created a procedure drawSmiley to draw a single smiley face.
The goal of this example is to write a procedure to draw a row of adjacent smiley faces.
Goal: Given a pair of (x, y) coordinates, a radius value and an integer n draw a row
of n adjacent smiley faces of the same radius such that the left-most smiley face is
drawn at the given location (x, y).
Describing the drawing process in English
It is always helpful to sketch the solution in English and write it out as a sequence
of short but descriptive sentences.
Here is how we might think about executing the drawing process:
At any given moment we need to know the current location where a smiley face is to be
drawn and how many smiley faces have been drawn so far. As long as we have drawn less
than the required number of faces, we need to draw a new smiley face and update the
current location to reflect the coordinates of the upcoming face; we also need to
update the counter of how many faces have been drawn so far.
Here is a step-by-step outline of the above process:
1. Create two PostIt notes to keep track of the location where to draw a smiley face
- the initial values for these PostIt notes are the given values (x, y),
since this is where the first face will be drawn
2. Create a PostIt note to keep track of how many smiley faces have been drawn so far
- the initial value of this PostIt note is 0 -- no faces have been drawn
3. As long as number drawn is less than number requested:
4. draw one smiley face at the location specified by the
PostIt notes from step 1
5. update the values of the PostIt notes from step 1 to
reflect the location of the next smiley face
6. increment by 1 PostIt note from step 2 (one more face drawn)
Here is the partial code that includes the procedure description and the first two steps.
We have replaced (x,y), radius, n with more descriptive names.
void drawSmileyRow( double startX, double startY, double faceRadius, int numSmileys )
{
double curX = startX; // (step 1)
double curY = startY; // (step 1)
int count = 0; // (step 2)
// code for step 3
// code for step 4
// code for step 5
// code for step 6
}
Integer variables -- the keyword int
One new element in the above description is the keyword int. This keyword is similar to
the keyword double except that:
- double specifies that the PostIt note can contain any real number
- int specifies that the PostIt note can contain integers only
Step 3: Expressing repetition in Java
The Java construct that expresses repetition of the form
"as long as some condition is true execute some statements"
is called a while loop. Here is the general form of a while loop:
In Java: In English:
while ( some-condition-is-true ) as long as some condition is true:
{
statement-to-be-executed do something
statement-to-be-executed do something
.... ...
statement-to-be-executed do something
}
Note:
- the while loop stops when the condition is no longer satisfied (becomes false).
- the while loop condition can be formed using the comparison operators < > <= >= == !=
We can now add the code for Step 3 and 4:
void drawSmileyRow( double startX, double startY, double faceRadius, int numSmileys )
{
double curX = startX; // (step 1)
double curY = startY; // (step 1)
int count = 0; // (step 2)
while ( count < numSmileys ) // step 3
{
drawSmiley( curX, curY, faceRadius ); // step 4
// code for step 5
// code for step 6
}
}
Step 5: Updating the location variables
In Step 5 we need to update the variables curX and curY which represent the location
where a smiley face is to be drawn. Since all rows are at the same vertical level
the PostIt note curY remains unchanged.
Horizontally, to get from one center of a smiley to the center of the next smiley we
must move by 2 half faces (right half of current face and left half of next face).
In other words we must add 2*faceRadius to the current value of the PostIt note curX.
This is expressed in Java as follows:
curX = curX + 2*faceRadius;
The statement
curX = curX + 2*faceRadius;
may seem confusing. Think of it as
curX <--- curX + 2*faceRadius;
and interpret it as
"evaluate the expression on the right and store its value in
the PostIt note/placeholder/variable mentioned on the left".
Step 6: Updating the counter variable
In Step 6 we need to increment the variable count by 1 to reflect the fact that a new
smiley face has been drawn. This is expressed as follows:
count = count + 1;
Putting it all together
The final code for the procedure drawSmileyRow is:
void drawSmileyRow( double startX, double startY, double faceRadius, int numSmileys )
{
double curX = startX; // (step 1)
double curY = startY; // (step 1)
int count = 0; // (step 2)
while ( count < numSmileys ) // (step 3)
{
drawSmiley( curX, curY, faceRadius ); // (step 4)
curX = curX + 2*faceRadius; // (step 5)
count = count + 1; // (step 6)
}
}
The overall program is:
public class SmileyApp
{
// draws a row of "n" adjacent smiley faces of the given "radius"
// the left-most face is drawn at the given coordinates "(x,y)"
void drawSmileyRow( double startX, double startY, double faceRadius, int numSmileys )
{
double curX = startX;
double curY = startY;
int count = 0;
while ( count < numSmileys )
{
drawSmiley( curX, curY, faceRadius );
curX = curX + 2*faceRadius;
count = count + 1;
}
}
// draws a smiley face centered at the given "(x,y)" and of the given "radius"
// the face features are scaled relative to the face radius
void drawSmiley( double faceX, double faceY, double faceRadius )
{
// draw the face
canvas.drawCircle( faceX, faceY, faceRadius, "yellow" );
// draw the left eye
double eyeX = faceX + 0.3*faceRadius;
double eyeY = faceY - 0.3*faceRadius;
double eyeRadius = 0.2*faceRadius;
canvas.drawCircle( eyeX, eyeY, eyeRadius, "black" );
// draw the right eye -- only change the X coordinate
eyeX = faceX - 0.3*faceRadius;
canvas.drawCircle( eyeX, eyeY, eyeRadius, "black" );
// draw the mouth using two overlapping "pie slices"
double mouthX = faceX;
double mouthY = faceY;
double mouthRadius = 0.7*faceRadius;
double mouthAngle = 100;
double mouthStart = 220;
canvas.drawPie( mouthX, mouthY, mouthRadius, mouthStart, mouthAngle, "black" );
// draw the cover for the mouth
double coverRadius = 0.8*mouthRadius;
canvas.drawPie( mouthX, mouthY, coverRadius, mouthStart, mouthAngle, "yellow" );
}
public void run()
{
// draw 7 smiley faces of radius 20 starting at (80, 150)
drawSmileyRow( 80, 150, 20, 7 );
// draw 4 smiley faces of radius 35 starting at (100, 300)
drawSmileyRow( 100, 300, 35, 4 );
// draw 10 smiley faces of radius 12 starting at (20, 450)
drawSmileyRow( 20, 450, 12, 10 );
}
}