Basic Table Tennis Game Sample Code: Ball Animation

The original post about Basic Table Tennis Game Sample Code has generate a lot of interest to an extend that I am now considering producing a more complete code sample. I have most of the aspects of the table tennis game working but since it is a project of my computer graphics unit that is yet to be marked, I am not in a position to reveal all and/or specific details of my implementation. However, for now I can pick out a specific aspect of my working, including the background research I did to get the part working. That explains what your expectations should be for this post.

In the game you have a ball which needs to move between the opposite ends of the table. I suggested that all the various aspects of the game are rectangles (assuming a square is a rectangle with the length and width being of the same magnitude). Keep in mind that this game is basic which means that it is not meant to implement the specific details and/or requirements of a real world table tennis game though that would be an interesting challenge in itself but for now it shall be left for yet another day. The ball, in its motion, needs to be confined to the boundaries defined by the table. For the objective of this post, we need to get the ball moving using OpenGL.

Animation in OpenGL

The books I have read about OpenGL describes it as a state engine which in my understanding means that OpenGL maintains a specific state of the graphics that it renders and any changes are made to the state as a whole and not a single part of it. OpenGL makes use of buffers in rendering graphics on the screen. You have a choice of using single buffer which does not work for animation or double buffer which is what is preferred for animation. Here is how it works with the double buffer: you render a series of graphics on to one of the buffer and this buffer is shown on the screen. In order to achieve animation, you render another image (with changes in the position of specific elements of the image rendered in the first buffer) on to the second before which is then swapped with the first buffer. You use the GLUT function glutInitDisplayMode() to specify your buffer preference (GLUT_DOUBLE OR GLUT_SINGLE).

OpenGL uses callback mechanisms which means that you “tell” OpenGL which function you want to be called when a particular event of interest occurs. Generally the function/method that realizes animation in your application is passed on to the glutIdleFunc(). When your application enters GLUT events loop by calling glutMainLoop(), the function specified in glutIdleFunc() is called repeatedly and this is the best place to cause changes in the image that you display on the screen.

The sample code below does the initial rendering of the image as well as subsequent changes to the original image. This code sample builds on this tutorial here.

float x = 0.0;
float y = 0.0;

drawBall(){

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glPushMatrix();
int no_pts = 25;

float radius = 0.17f;

glColor3f(0.9f, 0.9f, 0.2f);
glBegin(GL_POLYGON);
for (int i = 0; i < no_pts; i++) {
    float angle = (2 * PI* i) / no_pts;
    glVertex2f(x + radius * cos(angle), y + radius * sin(angle));
}
glEnd();
glPopMatrix();
glutSwapBuffers();

x += 0.009;

}

This are what your includes look like:

#include <math.h>
#include <GL/glut.h>

 The math.h include is needed for the mathematics of calculating the sine and cosine of the angle and of course glut.h gives you your graphics rendering functions. The initial x and y coordinates of the center of the ball are provided as global variables (they are not inside the function) – we don’t want these values to change (e.g. by resetting them to 0.0 at the start or end of the call to drawBall. However their values can be increased or decreased.

To have your animation run, you need to hook your function into OpenGL; recall glutIdleFunc? If you are using the tutorial link provided in this post, you can go ahead and replace every call to renderScene with a call to drawBall.

Note the following calls in the animation code sample:

  • glClear
  • glPushMatrix
  • glPopMatrix
  • glutSwapBuffers

Next time, I will post a sample that includes code to ensure that the ball doesn’t go beyond the boundaries of the table.

Advertisements
  1. #1 by Try this on July 24, 2013 - 12:24 am

    Great article! We are linking to this great post on our site.
    Keep up the great writing.

  2. #2 by free binary option trading on August 8, 2013 - 6:48 am

    I’m amazed, I have to admit. Seldom do I come across a blog that’s both equally educative and
    amusing, and without a doubt, you’ve hit the nail on the head. The issue is something which too few men and women are speaking intelligently about. Now i’m very happy I
    found this in my search for something concerning this.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: