Repetition: A Simple, Counting, While Loop

References:

• Pre-requisite: it is assumed that you have read through the prior tutorials, and are familiar with the concepts covered in those tutorials.

Goals:

• In this tutorial, we will:
  • Examine a simple while loop, which is used to repeat some action multiple times (without having to copy-and-paste the code multiple times).
  • Examine a simple, counting loop.

1. Obtain the example code

• Here is the zip file to the source files and compiled executable of this example.
• Here is the keyboard mapping for the XBOX 360 controller.  
• Here is the main tutorial page for working with XNACS1Lib, and here is the complete documentation of the library: html-page or compiled html help file .

When the game starts, you'll see a screen that looks similar to this:

As you can see, this program draws three soccer balls across the screen.  The program also draws a basketball on the screen, and allows you to move the basketball using the right thumbstick.

2. Examining The Program:

Let's examine the C# source code that produces the behavior we see on-screen

• Declaring the instance variables and named constants
  • The program declares several instance variables, and named constants.  In this (and future tutorials) we won't walk through the code for this in detail, unless there's a particularly interesting / difficult detail that justifies the attention.
• InitializeWorld():

  protected override void InitializeWorld() {     World.SetWorldCoordinate(new Vector2(0,0), 100.0f);     m_BasketBall = CreateABallAt((BALL_INIT_X*5), "BasketBall" ); }

  • Similar to the way in which we won't be walking through the declarations of the instance variables and named constants, we won't walk through every single line of code for the InitializeWorld method, either, except where a particularly interesting / difficult detail justifies the attention. 
  • For this InitializeWorld method, all it does is create a new circle at a pre-determined distance from the bottom of the screen ( BALL_Y_POS , as we'll see in a moment), and at a distance of (BALL_INIT_X*5) from the left edge of the screen.  The image (texture) to use for the ball is named "BasketBall" .  Later on, we'll use this same function to create balls with the "SoccerBall" image on them.
  • Let's quickly examine the CreateBallAt method.

    /// <summary> /// Allocates and initialize the memory for a ball with /// y-predefined and x located at xPos and with aTex texture /// </summary> /// <param name="xPos"> x-location to create the new ball </param> /// <param name="tex"> the texture for the ball </param> private XNACS1Circle CreateABallAt( float xPos, String aTex) {     XNACS1Circle aBall = new XNACS1Circle ();     aBall.Center = new Vector2 (xPos, BALL_Y_POS);     aBall.Radius = BALL_RADIUS;     aBall.Texture = aTex;     return aBall; }

    • The CreateBallAt method is responsible for creating a new circle object at a particular location, with a particular radius.  Since all the balls have the same radius, we use a named constant to define their sizes.  Since all (X,Y) coordinate of the center of the balls have the same Y value, we use a named constant for that.  The only differences between the balls are the X value of the (X,Y) coordinate of their centers, so we pass that in as a parameter, along with the string that names the texture to use.  All of this should be familiar from previous tutorials.
    • What's new and interesting about this usage is that this function is set up to return an XNACS1Circle object.  You'll notice that this function will always return a XNACS1Circle object, but the method that called this function does not have to use the returned object ! This may seem odd, but will be a key point of how the UpdateWorld method works.
      • In the InitializeWorld method (above), we store the return value of this method into the m_BasketBall instance variable.  This means that we can use the m_BasketBall variable to manipulate the soccer ball later on.
• UpdateWorld():

  protected override void UpdateWorld() {     if (GamePad.ButtonBackClicked())         this .Exit();     #region Clear the display of all soccer balls and draw new ones!     // Remove all primitives from being drawn! (including the basket ball!!)     RemoveAllFromDrawSet();     // Re-add the basket ball into the set to be drawn     m_BasketBall.AddToDrawSet();     int counter = 0;     float xOffset = 0.0f;     // here is the while loop     while (counter < 3)     {         CreateABallAt(xOffset + BALL_INIT_X, "SoccerBall" );         counter = counter + 1;         xOffset = xOffset + SPACE_BETWEEN_BALLS;     }     #endregion     m_BasketBall.CenterX += GamePad.ThumbSticks.Right.X;     m_BasketBall.CenterY += GamePad.ThumbSticks.Right.Y;     String msg = "Interaction: Can only interact with variables!" ;     EchoToTopStatus(msg);     EchoToBottomStatus( "but ... while loop is cool?" ); }

  • You'll notice that we have grayed-out many of the lines of code for the UpdateWorld method - we will not be discussing these, as they should be familiar from previous tutorials.  In future tutorials, we may leave out these lines entirely.
  • The basic approach that we're using in this method is this:
    
    1. Remove everything from the screen, leaving us with a blank screen.  This includes both the basketball, and all the soccer balls.
    2. Now that the screen is blank, we can create a set of brand-new soccer balls on the screen (as well as putting the basketball back on the screen)
    In this tutorial, we will put the new soccer balls exactly where the old ones were, just so that you can see how this all works.  In future tutorials, we will put the new soccer balls down in a different location than the old ones were, which will allow us to do some simple animation in our game.
    • It's worth noting that this approach will consume substantial amounts of memory, as we constantly create, then discard, large numbers of objects.  If UpdateWorld is called 20 times per second, and we create even just three soccer balls each time, we're still generating 60 objects per second .  If we were to run the game for a minute, that's 3,600 circle objects !
      • While it's true that the C# garbage-collector will reclaim the memory occupied by these unused objects, it's better to avoid allocating objects at all, rather than allocate them, briefly use them, then discard them, and rely on the garbage-collector to reclaim their space.
    • A much more memory-efficient approach would be to keep track of all three soccer balls, and instead of creating new ones, update the ones that we created.  This way, we'll only create three circle objects throughout the life of the program.  This is the approach that we've been using up till now, because we've only had a small number of objects on the screen at once.  Therefore, we can keep track of each of the objects using a variable for each one.  In future tutorials, we'll want to draw dozens, maybe hundreds of objects on the screen, which would be excruciating to attempt using a variable for each object.
      • A better way to do this would be using array s, which would allow us to keep track of all the objects using a single variable.  But we won't cover that topic until next chapter, so we'll use the 'discard and recreate' approach for this chapter, even though it is wasteful of memory.
  • The first step is to remove all the objects that are currently on the screen:
        // Remove all primitives from being drawn! (including the basket ball!!)

        RemoveAllFromDrawSet();

    This command will remove all the circles (and rectangles) that are currently being drawn on the screen.  This includes the soccer balls (that we want to remove) and the basketball (which we want to leave on the screen).

  • Because the previous step removed the basketball (despite the fact that we want the basketball to stay on the screen), we will need to re-add the basketball back to the set of things that are drawn on-screen:
        // Re-add the basket ball into the set to be drawn

        m_BasketBall.AddToDrawSet();

  • The second step is to create a new set of brand-new soccer balls on-screen.  We will do that with the aid of a simple while loop.  Let's start off by examining the parts of the loop:
    
    • Lines 54 and 55 (in the pink box, in the above example) consist of the 'initialization' for the loop.  Not all loops require initialization, so this part may be absent.  It's also good to keep in mind that these lines, while critical to the correct operation of the loop, aren't technically part of the loop itself.
    • The loop itself is found on lines 57 through 63, and is in the blue box in the above picture.
    • The most important parts of the loop can be broken down into the condition , in the yellow box on line  58, the body of the loop , in the green box on lines 60 through 62.  and the counting expression on line 61 (in the purple box). 
      • This loop serves to count from one number (zero) up to another number (three), so we initialize the counter variable to zero, and increment that variable each time through the loop.  We could just as easily have started counter at three, and counted down to zero, if we had wanted to.  Keep in mind that while most of the counting loop you'll see count up, there's nothing that says that they are required to count up.
    • The basic way that the loop operates is this: the program will first do the pink initialization (if any), then it will repeatedly do the following: check if the yellow condition is true, and if so, execute the green body of the loop.  Once the loop has been executed, the program goes back to the condition, and if the condition is true, it executes the body of the loop again.  It repeats this sequence (test the condition, and if it's true, then execute the body of the loop) again and again, until the condition becomes false, at which point it stops.
      • It's important to note that if the program does the initialization, and at that point the condition is false, then the body of the loop is never executed.  This is an important point, but easy to miss since we normally only create a loop if we're intending to do something repeatedly.
  • One way to visually depict how the loop executes is shown here:
    
    • The program generally executes statements starting at the top, and working it's way down.  For example, the program does the 'initialization' steps first, as indicated by the top-most blue arrow.
    • The program then checks the condition, and if it's true, it executes the body of the loop from top to bottom, as indicated by the middle blue arrow.  An important part of the body of the loop is the counting expression, which increment counter by one, and therefore will ensure that the loop eventually terminates.
      • A very common mistake is to accidentally leave out the counting expression, so that counter's value never changes, and always remains at zero.
    • Once the body has been executed, the program follows the pink arrow back to the condition.  If the loop gets executed many times, then the blue arrow over the body of the loop and the pink arrow will be executed many times.  This is why repetition structures are frequently called " loops " - the pink arrow loops back to the top.
    • Once the condition becomes false, the program jumps from the condition, all the way past the body of the loop, and to whatever code comes after the loop.  Visually, this is depicted using the green arrow in the above picture. 
    • Once the loop has finished executing, then the program proceeds on to other statements (if any), as indicated by the bottom-most blue arrow.
  • Some quick vocabulary: to iterate means to do something repeatedly.  Thus, we can say that the program repeatedly iterates through the loop, although this is spoken as "the program iterates through the loop".  One, single execution of the entire body of the loop is sometimes referred to as "an iteration" (of the loop).
  • Let's examine the details of how the loop operates by tracing through the execution of the loop, in detail, using the code in the above diagram .
    1. While it's not technically part of the loop itself, line 54 creates a variable named counter , and initializes it with the value zero.  Let's summarize the variables (and their values) in the following table:
       

       Variable Name	Value
       counter	0

    2. Line 55 creates a variable named xOffset , and initializes to with the value 0.0f.
       

       Variable Name	Value
       counter	0
       xOffset	0.0f

    3. Next, the condition (on line 58) is checked:
           counter < 3
       This asks "Is the current value of counter (which is zero) strictly less than 3?"  This is true, so the program will execute the body of the loop.
    4. The body of the loop consists of the following lines of code:
               CreateABallAt(xOffset + BALL_INIT_X, "SoccerBall" );

               counter = counter + 1;

               xOffset = xOffset + SPACE_BETWEEN_BALLS;

       Once the body of the loop has executed, there will be a new ball (located at ( BALL_INIT_X , BALL_Y_POS ), aka (10.0f, 30.0f), because xOffset has the value 0.0f),
       
       

       • You'll notice that the CreateABallAt method returns a reference to the new XNACS1Circle that it creates, and yet this method doesn't do anything with that return value.  C# has no problem with this (i.e., this compiles and runs just fine), and as long as you intended for this to happen, it's perfectly ok to not use a method's return value.  Not using the return value is sometimes called 'dropping the return value'.
       • We're doing it here because, as was mentioned above, we don't have a way of keeping track of many, many circles.  You'll see this approach used in future tutorials, too, where we end up creating hundreds (or more) circles on each UpdateWorld call.

       Additionally, the variables will have the following values after the body of the loop has executed:
       

       Variable Name	Value
       counter	1
       xOffset	15.0f

    5. The program returns to line 58, and again checks the condition.  Since the value of counter (1) is strictly less then three, the program executes another iteration of the loop.
    6. The body of the loop consists of the following lines of code:
               CreateABallAt(xOffset + BALL_INIT_X, "SoccerBall" );

               counter = counter + 1;

               xOffset = xOffset + SPACE_BETWEEN_BALLS;

       Once the body of the loop has executed, there will be second new ball (located at (25.0f, 30.0f), and the variables will have the following values:
       

       Variable Name	Value
       counter	2
       xOffset	30.0f

    7. The program returns to line 58, and again checks the condition.  Since the value of counter (2) is strictly less then three, the program executes another iteration of the loop.
    8. The body of the loop consists of the following lines of code:
               CreateABallAt(xOffset + BALL_INIT_X, "SoccerBall" );

               counter = counter + 1;

               xOffset = xOffset + SPACE_BETWEEN_BALLS;

       Once the body of the loop has executed, there will be second new ball (located at (40.0f, 30.0f), and the variables will have the following values:
       

       Variable Name	Value
       counter	3
       xOffset	45.0f

    9. The program returns to line 58, and again checks the condition.  Since the value of counter (3) is NOT strictly less then three, the program does NOT execute another iteration of the loop.
       • It's extremely important to emphasize this point: the loop ends after the program has done it's final iteration of the loop.  And since counter is incremented in the loop, counter will have the value of 3, NOT 2 , after the loop has ended!!
  • Once the loop is done, then the program proceeds to execute the next line of code after it, namely:
        m_BasketBall.CenterX += GamePad.ThumbSticks.Right.X;

    After that, it will execute the remainder of UpdateWorld, as you are already familiar with.

  • What we saw here was actually a simple while loop that counted (the value of counter went from from 0 up to 2).  We will very, very frequently need to use a loop that repeats something a particular number of times - so much so that it would be good for you to give this type of loop a name, in your own head.  A name like " counting loop " would be accurate, but isn't really industry-standard terminology.

FURTHER EXERCISES::  

1. Start from a blank starter project (1000.201, if you need it), and re-do the code from memory as much as possible.  On your first try, do what you can, and keep the above code open so that when you get stuck, you can quickly look up what you forgot (and that after you finish a line, so that you can compare your line to the 'correct' line).  On the next try, do the same thing, but try to use the finished code less.  Repeat this until you can type everything, without refering the tutorial's code.
   • Repeat this exercise daily for several days, so that you really get the hang of this.  As you go on, periodically review this by re-doing this exercise.
2. Familiarizing Yourself With Loops: Practice
   For this exercise, you should use the same project that was explained in the above tutorial.
   Try modifying the program so that the program will draw five soccer balls on the screen, rather than three.  Can you draw 2, instead of 5 (or 10?)? 
3. Familiarizing Yourself With Loops: Experimenting With The Loop
   For this exercise, you should use the same project that was explained in the above tutorial.
   Try setting the condition on the loop to be "counter < 0", and observe what happens.  Explain your observations.
4. Familiarizing Yourself With Loops: Infinite Loops
   For this exercise, you should use the same project that was explained in the above tutorial. 
   Try commenting out the line that increments the counter variable, and observe what happens.  Next, think about the code, and explain what you're seeing.
   Hint: If UpdateWorld never ends, then the Update step in the Great Draw and Update Cycle never finishes - what do you think will happen to the cycle?
5. Moving The Soccer Balls
   For this exercise, you should use the same project that was explained in the above tutorial.
   The goal for this exercise is to 'animate' the soccer balls, so that all the soccer balls slowly move rightwards across the screen. 
   Modify the provided solution so that your program contains another instance variable, initialized with a value like 0.0f.  Each time UpdateWorld is called, make sure that you first add, say, 5.0f to the instance variable, and then when you create the soccer balls, you add this number to the 'X' value of the new soccer balls' location.  Don't worry if the soccer balls leave the screen.
6. Moving The Soccer Balls
   For this exercise, you should use the same project that was explained in the above tutorial.
   The goal for this exercise is to 'animate' the soccer balls, so that all the soccer balls slowly move leftwards across the screen.  Don't worry if the soccer balls leave the screen.  You should do this using a technique similar to the technique that was explained in the previous exericse.

	This work is supported in part by a grant from Microsoft Research under the Computer Gaming Curriculum in Computer Science RFP, Award Number 15871 and 16531.
2/8/2010