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

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

Moving from Processing to iPhone development is hard. The OpenGL implementation is a little different and there is little documentation available. I’ve learned a lot by reading Beginning iPhone Development by Dave Mark and Jeff Lamarche and the iPhone Development blog. In these articles I want to share some of the things I’ve learned. Read this article as an introduction to Generative Design on the iPhone. So let’s do some OpenGL programming.

### Step 1: Seting up the Project

Create a new project using the OpenGL ES Application template and save your project with the name openglcircle. Make sure you use the “UIStatusBarHidden trick”:http://vormplus.be/weging/how-to-create-a-fullscreen-iphone-application/ to hide the status bar and get a true fullscreen application.

### Step 2: Some Handy Functions

Add a file with the name `Constants.h` to your project. This file is going to hold some handy functions that are used a lot in generative design. One to convert degrees to radians and one to generate a random float between two numbers. Add the following lines of code to this file.[1]

``` #define DEGREES_TO_RADIANS(x) (3.14159265358979323846 * x / 180.0)#define RANDOM_FLOAT_BETWEEN(x, y) (((float) rand() / RAND_MAX) * (y - x) + x)  ```

### Step 3: Slowing Down the Application

Open `openglcircleAppDelegate.m` and change the `animationInterval` to `1.0 / 2.0` so the view will only update twice a second. You can change this back later when the project is finished. But you’ll need a slow speed now to see what happens on the screen.

### Step 4: Editing the View

Open `EAGLView.m` and add an import statement for the `Constants.h` file. Next up is deleting the code in the `drawView` method to do your own custom drawing. Leave these lines of code in there so you won’t have to type them all over again.

``` - (void)drawView {    [EAGLContext setCurrentContext:context];    glBindFramebufferOES(GL_FRAMEBUFFER_OES, ¬        viewFramebuffer);    glViewport(0, 0, backingWidth, backingHeight);    glMatrixMode(GL_PROJECTION);    glLoadIdentity();    glOrthof(-1.0f, 1.0f, -1.5f, 1.5f, -1.0f, 1.0f);    glMatrixMode(GL_MODELVIEW);    //    // custom drawing will be done right here ...    //    glBindRenderbufferOES(GL_RENDERBUFFER_OES, ¬        viewRenderbuffer);    [context presentRenderbuffer:GL_RENDERBUFFER_OES];}  ```

### Step 5: Clear the background

In processing you would use `background(0)` to clear the background with black. In OpenGL ES you will need to use `glClearColor()` in combination with `glClear()`. `glClearColor()` sets the color that will be used to clear the background. This function takes 4 color components (red, green, blue and alpha) as arguments. Values should be between `0.0` and `1.0`. `glClear()` will clear the display and takes `GL_COLOR_BUFFER_BIT` as the argument. Add these two lines right after the call to the `glOrthof()` function. Add these lines to the project:

``` glClearColor(0.0f, 0.0f, 0.0f, 1.0f);glClear(GL_COLOR_BUFFER_BIT);  ```

### Step 6: Drawing the circle

To draw a nice looking circle you’ll need to define 360 points on the perimeter of the circle. For each of those points you’ll need an x and y value so you’ll will need to calculate 720 values. To do this you’ll need an empty `GLfloat` array with a length of 720. See the line of code below.

``` GLfloat vertices[720];  ```

Next up is filling the array with the right x and y values for the points on the perimeter of the “unit circle”:http://en.wikipedia.org/wiki/Unit_circle.

``` for (int i = 0; i < 720; i += 2) {    // x value    vertices[i]   = (cos(DEGREES_TO_RADIANS(i)) * 1);    // y value    vertices[i+1] = (sin(DEGREES_TO_RADIANS(i)) * 1);}  ```

To draw the circle you need to tell OpenGL what array of vertices to use. This can be done with the `glVertexPointer()` method. You’ll also have to use the `glEnableClientState()` method to enable the use of vertex arrays.

``` glVertexPointer(2, GL_FLOAT, 0, vertices);glEnableClientState(GL_VERTEX_ARRAY);  ```

Before you can draw the circle, OpenGL needs to know what color to use. In Processing you would use the `fill()` function. In OpenGL you can set this color with the `glColor4f()` method. This method takes 4 color parameters just like `glClearColor()`. The line below will set the fill color to red.

``` glColor4f(1.0f, 0.0f, 0.0f, 1.0f);  ```

And finally you can draw the circle with the `glDrawArrays()` method.

``` glDrawArrays(GL_TRIANGLE_FAN, 0, 360);  ```

If you run the application in the iPhone Simulator and everything goes ok, your application will look like this.

You can download the project files for this tutorial right here: openglcircle.zip (XCode project with sample code to draw a circle in OpenGL ES.). In part two of this article I’ll show you how to draw a better circle by changing some little things.