OpenGL ES for iPhone: Drawing a Circle - Part II

Posted on 2009-05-19 by Jan Vantomme
Tags: tutorial

In the previous article you learned how to draw a circle in OpenGL ES on the iPhone. In this article You will learn how to draw an even better circle.

Adding Random Colors

Random colors are something widely used in generative design and are easy to implement on the iPhone. We have 360 vertices on the perimeter of our circle and we want to give each one a random color every time the circle gets drawn. Colors are made of 4 components (red, green, blue and alpha) so we will need an array to store 4 components for every vertex. The following piece of code creates an empty GLfloat array and fills it with random values between 0.0 and 1.0 for the red, green and blue component and a 1.0 value for the alpha component.

// create empty array to store color values
GLfloat colors[1440];
// fill array with color values
for (int i = 0; i < 1440; i += 4) {
    // red value
    colors[i]   = RANDOM_FLOAT_BETWEEN(0.0, 1.0);
    // blue value
    colors[i+1] = RANDOM_FLOAT_BETWEEN(0.0, 1.0);
    // green value
    colors[i+2] = RANDOM_FLOAT_BETWEEN(0.0, 1.0);
    // alpha value
    colors[i+3] = 1.0;
}

To draw the circle with these random colors you will need to remove the glColor4f() method and replace it with glColorPointer() and enable color arrays. These lines of code will do:

glColorPointer(4, GL_FLOAT, 0, colors);
glEnableClientState(GL_COLOR_ARRAY);

Run the app and you will see that the starting point of the circle is on the right creating an odd looking circle like the one in the picture below.

It would be better if the circle gets drawn from the middle so all triangles would be of the same size.

A better circle

Creating a better looking circle is easy. You'll need an extra vertex at x = 0.0 and y = 0.0 at the beginning of the vertex array so every triangle will start from here. The vertex array will now have a size 722.
There was a small bug in the code of the previous article so you'll have to change the calculation of the vertices to DEGREES_TO_RADIANS(i/2) to get values between 0 and 360 for the angle. Change your code so it looks like this:

// create an array with a size of 722
GLfloat vertices[722];
// add 2 vertices at 0.0 (x and y for the first point)
vertices[0] = 0.0;
vertices[1] = 0.0;
// fill the rest of the array with x and y values
// on the perimeter of the circle.
for (int i = 0; i < 720; i += 2) {
    vertices[i+2] = (cos(DEGREES_TO_RADIANS(i/2)) * 1);
    vertices[i+3] = (sin(DEGREES_TO_RADIANS(i/2)) * 1);
}
// 2 vertices to close the circle so it looks perfect
vertices[719] = 0.0;
vertices[720] = 1.0;

You'll also need to add one extra color to the colors array. Change the colors code to this:

GLfloat colors[1444];
for (int i = 0; i < 1444; i += 4) {
    colors[i]   = RANDOM_FLOAT_BETWEEN(0.0, 1.0);
    colors[i+1] = RANDOM_FLOAT_BETWEEN(0.0, 1.0);
    colors[i+2] = RANDOM_FLOAT_BETWEEN(0.0, 1.0);
    colors[i+3] = 1.0;
}

And the final tweak to the code is telling OpenGL to draw 361 vertices in stead of 360.

glDrawArrays(GL_TRIANGLE_FAN, 0, 361);

Run the program and you'll see a nice circle drawn from the center.

Downloads

You can download the project files for this tutorial right here: openglcircle2.zip (XCode project with sample code to draw a better circle in OpenGL ES.). In part three of this article I’ll show you how to optimize the code a little more to make the application run smoother.

Tweet this article