OpenGL ES for iPhone: Drawing a Circle - Part I

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

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":https://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":https://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.

Downloads

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.

Tweet this article