# OpenGL ES for iPhone: Drawing a Circle - Part II

Posted by Jan Vantomme on 19 May 2009.
Tags: , , ,

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.

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 valuesGLfloat colors[1440];// fill array with color valuesfor (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 722GLfloat 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 perfectvertices[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.