Animating Sinusoidal Motion

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 move something on the screen in a sinusoidal, "wavy" motion
  • NOT do anything new using loops.  All the techniques that this tutorial uses should already be familiar with from prior tutorials

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:

This program is extremely similar to the program featured in the previous tutorial - the only visible difference is that there's now a small basketball moving along the path that has been plotted out by the soccer balls.   Internally, we've also set up a couple of new functions to make our programming easier.

Note that while this tutorial does demonstrate a very cool, and very useful game-programming technique, it doesn't do anything new with loops.

2. Examining The Program:

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

• InitializeWorld():

  // Create the plotting basketball     m_SinBasketBall = new XNACS1Circle();     m_SinBasketBall.Center = new Vector2(0.0f, BALL_INIT_Y);     m_SinBasketBall.Radius = BALL_RADIUS * 2.0f; // twice the size of the soccer balls on the plot     m_SinBasketBall.Texture = "BasketBall";

  • In addition to the things that we're already doing to support the wave of soccer balls, and the large basketball, we also need to create the smaller basketball that moves along the sine wave.
  • Note that we're assigning the new, small basketball object to the m_SinBasketBall variable.  Since there's only one moving basketball that we're animating, we have the option of keeping track of it using an instance variable.  It will be substantially more memory-efficient for us to do so, so it makes sense to use an instance variable.
• UpdateWorld():

  #region compute the position of the plotting-basketball     m_SinBasketBall.AddToDrawSet(); // make sure it will be drawn     float newX = (m_SinBasketBall.CenterX + X_SPEED) % World.WorldMax.X;     float xInRad = ComputeRadianFromXPos(newX);     m_SinBasketBall.CenterX = newX;     m_SinBasketBall.CenterY = ComputeSineYPos(xInRad);     #endregion

  • Most of UpdateWorld is the same as in the prior tutorial, with two exceptions: (1) the addition of the code above, and (2) the use of the ComputeRadianFromXPos and ComputeSineYPos functions.
  • The will continue to use the same basic approach that we've used in previous tutorials:
    
    1. Remove all the current soccer balls from the screen
    2. Create a new set of brand-new soccer balls on the screen
  • Since we start by clearing out all the objects from the drawing set, the first thing we need to do for the moving basketball is to put it back into the drawing set:
        m_SinBasketBall.AddToDrawSet(); // make sure it will be drawn
  • Next, we need to calculate the new position of the basketball.  Note that the approach we're using is to take the current centerpoint, add X_SPEED to it, then use modulus to make the basketball 'wrap around' to the left side, if it goes too far to the right.
        float newX = (m_SinBasketBall.CenterX + X_SPEED) % World.WorldMax.X;
  • Once we've got the new X value, we calculate how many radians that corresponds to, using the new ComputeRadianFromXPos function.

        float xInRad = ComputeRadianFromXPos(newX);

  • At this point, we save the new value of X back to the small basketball, so that when it's next drawn, it will appear to have been moved rightwards m_SinBasketBall.CenterX = newX;
  • Finally, we adjust the vertical height (from the bottom of the screen) using the new ComputeSineXPos function:
        m_SinBasketBall.CenterY = ComputeSineYPos(xInRad);
  • You'll notice that the code for placing the wave of soccer balls also uses the ComputeRadianFromXPos and ComputeSineYPos functions (this code is not pictured here)
• ComputeRadianFromXPos():

  /// <summary> /// Access the instance variables: /// m_Freqwuency /// World.WorldMax.X /// and compute an angle (in radian) where m_Frequency number of revolusion can be /// fitted into the World.WorldMax.X space. /// </summary> /// <param name="xPos">a position</param> /// <returns>Angle in radian</returns> private float ComputeRadianFromXPos(float xPos) {     return ((xPos / World.WorldMax.X) * (2.0f * ((float)Math.PI)) * m_Frequency); }

  • As you can see, this does the exact same thing as the line
            float radian = (xPos / World.WorldMax.X) * (2.0f * ((float)Math.PI)) * m_Frequency;

    from the previous tutorial.  However, now that this is a function, we can use it in several different places (instead of just one).  Not only is this convenient, but it also makes the code easier to understand - rather than worrying about the details of this in the UpdateWorld function, we can just call
    ComputeRadianFromXPos, instead.

• ComputeSineYPos():

  /// <summary> /// Access the instance variable: /// m_Amplitude /// and Constant: /// BALL_INIT_Y /// to compute the y-position on the the since curve /// </summary> /// <param name="xInRadian">x value (in radian)</param> /// <returns>y position</returns> private float ComputeSineYPos(float xInRadian) {     return BALL_INIT_Y + (m_Amplitude * ((float)Math.Sin(xInRadian))); }

  • As you can see, this does the exact same thing as the line
            yPos = BALL_INIT_Y + (m_Amplitude * ((float)Math.Sin(radian)));

    from the previous tutorial.  Creating a function to compute this for us gives us the same advantages as we gained by creating the ComputeRadianFromXPos.

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. Improving The Game: Changing the speed of the moving basketball
   For this exercise, you should use the same project that was explained in the above tutorial.
   Modify the provided program, so that when the user presses the X button, the small basketball moves faster, and when the user presses the Y button, the basketball moves slower.
   Hint: You may find it useful to use the GamePad.ButtonXClicked() and GamePad.ButtonYClicked() functions.
3. Improving The Game: Graphing Two Functions Simultaneously
   For this exercise, you should use the same project that was explained in the above tutorial.
   Modify the provided program, so that the program does two things, at the same time:
   1. Draw a sine wave with small soccer balls, and moves a small basketball along it.  (This is what the provided program already does)
   2. Draw a cosine wave with small basketballs, and moves a small soccerball along it.  (You will need to add this part)

	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