Arrays: Using Loops To Traverse Arrays

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 how to iterate through all the elements in an array, using a for loop.  We will examine both how to assign values to the elements in the array, and how to read values back out of the elements of the array.

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 five 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.  Finally, the program continues to draw the contents of the array at the bottom of the screen.

While this program behaves almost identically to the prior program, we've made a major change in how our code accesses the elements of the array: instead of hard-coding access to the five individual slots, this program uses a single loop to traverse the entire array.  In this context, when we say "traverse", we mean "go through all the elements of the array, and access any of the elements that we want to"

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 a new constant, named ARRAY_SIZE, which is an integer.  This allows us to have a single, clear definition of what the size of the array is, and use that consistently throughout the program.
    • In languages like C++, you (the programmer) will need to keep track of the size of your arrays yourself, using a named constant(s), or using variables.  So it's good to see this style of coding, in case you ever use a language like that.
    • However, in C#, each array stores it's Length, in addition to storing all the elements.  In future tutorials we'll switch to using the .Length property of the array(s), which is generally easier and less error-prone (since there aren't as many chances to accidentally use the wrong variable/named constant).
• InitializeWorld():

  protected override void InitializeWorld() {     World.SetWorldCoordinate(new Vector2(0,0), 100.0f);     // Allocate memory for the array     m_MyArray = new int[ARRAY_SIZE];     for (int i = 0; i<ARRAY_SIZE; i++)         m_MyArray[i] = 10; #region From previous example (create and allocate 5 soccers and one basketball     // initialization for the soccer balls <code omitted, for clarity>

  
  
  • You'll notice that the line we're using to create the array,

        m_MyArray = new int[ARRAY_SIZE];
    is almost identical to the line we used in the prior tutorial,
        m_MyArray = new int[5];

    The only difference being that the literal number 5 has been replaced by the named constant ARRAY_SIZE, which has the value 5.

  • However, the next five lines of code in the prior tutorial have been replaced by a single loop:
        for (int i = 0; i<ARRAY_SIZE; i++)

            m_MyArray[i] = 10;

    • You've seen for loops already, and you've seen how to access arrays, so with that knowledge, you should be able to understand this code already.  Let's walk through a couple iterations anyways, just to make sure that you're clear on what's going on here, starting with the work that's done prior to the first iteration of the loop:
      • First, we create the array (on line 45, in the below picture) with five integer elements.  Remember that C# initializes all the elements in the array to zero for us.
      • Next, we reach line 48 (in the picture), and execute the statement
            int i = 0
        which creates the variable i, and puts the value 0 into it.  Remember that this is always done, and done once, before we proceed to the repetitive section of the for loop.  At this point, our variables look like:
        
    •  During the first iteration through the loop, the following things happen:
      1. The program executes the check:
             i<ARRAY_SIZE
         And finds that i ( with the value 0) is less than ARRAY_SIZE (with the value 5), therefore the check is true, and the body of the loop is executed.
      2. The body of the loop consists of a single line (which is why we're allowed to leave off the opening and closing curly braces):
             m_MyArray[i] = 10;
         However, we know that i has the value zero, so this is really the same as:
             m_MyArray[0] = 10;
         We know from the prior tutorial that this simply assigns 10 to the first element of the array.
      3. Since the body of the loop is done, we go back to the increment portion of the for loop, and execute that:
             i++
         This increments i by one, so that after executing the complete first iteration of the loop, the variables now look like:
         
    •  During the second iteration through the loop, the following things happen:
      1. The program executes the check:
             i<ARRAY_SIZE
         And finds that i ( with the value 1) is less than ARRAY_SIZE (with the value 5), therefore the check is true, and the body of the loop is executed.
      2. The body of the loop consists of a single line (which is why we're allowed to leave off the opening and closing curly braces):
             m_MyArray[i] = 10;
         However, we know that i has the value one, so this is really the same as:
             m_MyArray[1] = 10;
         We know from the prior tutorial that this simply assigns 10 to the first element of the array.
      3. Since the body of the loop is done, we go back to the increment portion of the for loop, and execute that:
             i++
         This increments i by one, so that after executing the complete first iteration of the loop, the variables now look like:
         
    • This pattern continues through the third, fourth, and fifth iterations of the loop, which serves to fully initialize each element of the array to have the value 10.  We say that the loop has traversed the array, because the loop allows us to access each and every element of the array (if we want - we don't have to change the value of all the elements if we don't want to)
  • You will see this pattern used repeatedly, throughout many different situations, in order to access all elements of an array.
    • This is because there's no way to operate on the array as a whole.  The C# language does not have a way to say "assign 10 to all elements in this array".  Further, this is normal for programming languages - very few (if any) have language syntax for operating on an entire array at once.
• UpdateWorld():

  String arrayMsg = "Array Contents:";     for (int i= 0; i<ARRAY_SIZE; i++)         arrayMsg = arrayMsg + " [" + i + "]=" + m_MyArray[i];       EchoToBottomStatus(arrayMsg);

  • UpdateWorld is identical to the code that we saw in the prior tutorial, with the exception of the lines listed above, which replace the call to EchoToBottomStatus in the prior tutorial
  • Let's walk through part of this code, in order to see what it's doing, starting with the work that's done prior to the first iteration of the loop.  For now, let's assume that the player has pressed the B button once, so that all the array elements have the value 10, except for element #1, which has the value 11.
    1. First, we create a string variable, and assign the string "Array Contents:" to it, which means that the variables (that we're concerned with here

       Variable Name	Value
       m_MyArray	an array with these values: Index 0 1 2 3 4 Value 10 11 10 10 10
       arrayMsg	"Array Contents:"

    2. Next, we execute the initialization step of the for loop:
           int i= 0
       which creates a new variable i, and gives it the value 0, so our variables now look like:

       Variable Name	Value
       m_MyArray	an array with these values: Index 0 1 2 3 4 Value 10 11 10 10 10
       arrayMsg	"Array Contents:"
       i	0

  • The first iteration of the for loop executes like this:
    1. The program executes the check:
           i<ARRAY_SIZE
       And finds that i ( with the value 0) is less than ARRAY_SIZE (with the value 5), therefore the check is true, and the body of the loop is executed.
    2. The body of the loop consists of a single line (which is why we're allowed to leave off the opening and closing curly braces):
           arrayMsg = arrayMsg + " [" + i + "]=" + m_MyArray[i];

       However, we know that i has the value 0, so this is really the same as:
           arrayMsg = arrayMsg + " [" + 0 + "]=" + m_MyArray[0];

       Checking the above table of variable values, we can see that arrayMsg has the value "Array Contents:", and m_MyArray[0] stores the value 10, so we can mentally rewrite the above statement as
           arrayMsg = "Array Contents:" + " [" + 0 + "]=" + 10;

       At this point, the concatenations proceed left to right, one at a time.  Thus, the statement will go through the following steps of evaluation (remember that C# will actually translate the numbers into strings before doing the concatenation:
       

           arrayMsg = "Array Contents [" + 0 + "]=" + 10;

           arrayMsg = "Array Contents [" + "0" + "]=" + 10;

           arrayMsg = "Array Contents [0" + "]=" + 10;

           arrayMsg = "Array Contents [0]=" + 10;
           arrayMsg = "Array Contents [0]=" + "10";

           arrayMsg = "Array Contents [0]=10";

       
       At this point, the new string "Array Contents [0]=10" is assigned to arrayMsg, replacing the previous string.

    3. Since the body of the loop is done, we go back to the increment portion of the for loop, and execute that:
           i++
       This increments i by one, so that after executing the complete first iteration of the loop, the variables now look like:
       
       

       Variable Name	Value
       m_MyArray	an array with these values: Index 0 1 2 3 4 Value 10 11 10 10 10
       arrayMsg	"Array Contents [0]=10"
       i	1

  • The second iteration of the for loop executes like this:
    1. The program executes the check:
           i<ARRAY_SIZE
       And finds that i ( with the value 1) is less than ARRAY_SIZE (with the value 5), therefore the check is true, and the body of the loop is executed.
    2. The body of the loop consists of a single line (which is why we're allowed to leave off the opening and closing curly braces):
           arrayMsg = arrayMsg + " [" + i + "]=" + m_MyArray[i];

       However, we know that i has the value 1, so this is really the same as:
           arrayMsg = arrayMsg + " [" + 1 + "]=" + m_MyArray[1];

       Checking the above table of variable values, we can see that arrayMsg has the value "Array Contents [0]=10", and m_MyArray[1] stores the value 11, so we can mentally rewrite the above statement as
           arrayMsg = "Array Contents [0]=10" + " [" + 1 + "]=" + 11;

       At this point, the concatenations proceed left to right, one at a time.  Thus, the statement will go through the following steps of evaluation (remember that C# will actually translate the numbers into strings before doing the concatenation:
       

           arrayMsg = "Array Contents [0]=10 [" + 1 + "]=" + 11;

           arrayMsg = "Array Contents [0]=10 [" + "1" + "]=" + 11;

           arrayMsg = "Array Contents [0]=10 [1" + "]=" + 11;

           arrayMsg = "Array Contents [0]=10 [1]=" + 11;

           arrayMsg = "Array Contents [0]=10 [1]=" + "11";

           arrayMsg = "Array Contents [0]=10 [1]=11";

       
       At this point, the new string "Array Contents [0]=10 [1]=11" is assigned to arrayMsg, replacing the previous string.

    3. This increments i by one, so that after executing the complete first iteration of the loop, the variables now look like:
       

    Variable Name	Value
    m_MyArray	an array with these values: Index 0 1 2 3 4 Value 10 11 10 10 10
    arrayMsg	"Array Contents [0]=10 [1]=11"
    i	2

  • The third, fourth, and fifth iterations of the loop continue this pattern, slowly building up the arrayMsg string, so that the EchoToBottomStatus command can display it at the bottom of the screen.

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. Changing What The Buttons Do
   For this exercise, you should use the same project that was explained in the above tutorial.  Modify the above program so that the button accomplish different things than they currently do.  Some ideas:
   1. When the user presses the A button, increment ALL the elements of the array.  You may want to start by using five separate statements to do this, and once you've got that working, then try doing this using a loop.
   2. When the user presses the B button, decrement all the elements of the array.  You may want to start by using five separate statements to do this, and once you've got that working, then try doing this using a loop.
   3. When the user presses the X button, randomly add a number to each element in the array.  For this exercise, randomly generate a single number, and add that to all the elements.  Example: Your program randomly generates 5, which you then add to all elements of the array.
   4. When the user presses the Y button, randomly add a number to each element in the array.  For this exercise, randomly generate a number for each element of the array.  Example: Your program randomly generates 5 (which is adds to the element #0), then randomly generates 2 (which is adds to the element #1), then randomly generates 15 (which is adds to the element #2), then randomly generates 5 (which is adds to the element #3), then randomly generates 52 (which is adds to the element #4).
3. Changing The Size Of The Array
   For this exercise, you should use the same project that was explained in the above tutorial.
   Modify the provided program so that the array is three elements long, instead of five.  Once you've got that working, modify the program again so that the array is 10 elements long (don't worry if the message displayed at the bottom of the window goes off the screen)
4. Initializing the Array With Different Values
   For this exercise, you should use the same project that was explained in the above tutorial.
   Modify the provided solution so that your program does the following:
   1. Instead of initializing the array elements to all store the value 10, have element #0 store the value 0, element #1 store the value 1, and so on.  Here's a table of values showing what the array should look like when InitializeWorld is finished:

      Index	0	1	2	3	4
      Value	0	1	2	3	4

   2. Instead of initializing the array elements to all store the value 10, have element #0 store the value 1, element #1 store the value 2, and so on.  Here's a table of values showing what the array should look like when InitializeWorld is finished:

      Index	0	1	2	3	4
      Value	1	2	3	4	5

   3. Instead of initializing the array elements to all store the value 10, have element #0 store the value 0, element #1 store the value 10, and so on.  Here's a table of values showing what the array should look like when InitializeWorld is finished:

      Index	0	1	2	3	4
      Value	0	10	20	30	40

   4. Instead of initializing the array elements to all store the value 10, have element #0 store the value 10, element #1 store the value 20, and so on.  Here's a table of values showing what the array should look like when InitializeWorld is finished:

      Index	0	1	2	3	4
      Value	10	20	30	40	50

	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