Often one get these small challenges that are easy solved in your mind. But frankly, nothing is really solved until it is shown to work.

On August 13, 2009 Jont Olof Lyttkens posted a request on the CocoaHeads Stockholm group for some tutorial to make an EKG curve on the iPhone.

As I’m somewhat familiar with OpenGLES on the iPhone I thought it would be a pretty easy task and shouldn’t take that much time. So why not have a go at it. How hard can it be?

The OpenGLES template in Xcode is pretty nice. Before the iPhone SDK I’d often use a simple GLUT program to tryout OpenGL code snippets. GLUT is very easy and with a few lines one can get a program drawing some OpenGL. But today I think that using Xcode and the iPhone SDK it is even more easy. With a simple mouse click one get a fully functional OpenGLES program running. Well, OpenGL and OpenGLES isn’t really the same thing, but for my purpose it often works fine with OpenGLES too.

I looked at the image Jont Olofs posted along with the request (seen above) and identified a few details:

• EKG curve, the line itself is pretty wide
• Drawing point is a little wider than the curve
• Halo have a small circle a little bit out
• Halo light a grid

I then saw my solution in the form of these parts:

• Use a float vector and fill+read it circular with a single index (using the % operator)
• Draw curve with a simple GL_LINE_STRIP
• Draw halo with a texture
• Draw grid using the texture by recalculating the texcoords

This order of the parts was also the steps I decided to build it in. Then I could end it and pass the project to Jont Olof and say – “Continue here”.

The first thing I created (after click create the OpenGLES project) was to make a float vector to hold the curve data. I filled this with some random data just to show that it’s not a static curve. Later on Jont Olof added some code to fill this with a nice heart beat curve.

Next part was to add the drawing of the curve. I added drawing of the line three times, with different width and colors.

By doing something one also get to learn somethings. I learnt that the iPhone does not support GL_LINE_SMOOTH. Something I’ve always seen being supported elsewhere. The new iPhone 3GS should support it from what I can read in the specs. But as the curve is moving maybe the lack of it doesn’t do that much. On the group page Finn Ericson suggested to render to a FBO, a manual way to create anti-aliasing. Can be a good idea but is out of what I was aiming for now. Might add this later on when I feel up to more challenges.

I also didn’t like the look of the line joints when drawing wide lines. Next thing I then learnt was that placing points at the joints looked ok and was very easy. It was basically the same call as drawing the line, one only changed the glDrawArray parameter GL_LINE_STRIP to GL_POINTS.

I added a texture for the next step. A transparent png image created with GIMP. Loading and drawing is also very easy if one have access to the iPhone SDK sample code. Apple supply a code sample called GLSprite which loads a texture and rotates it. Doing this my old way with the GLUT code would require much more effort.

Well, now when I had the halo working there was only one part left, the lit grid. The grid should be stationary and only the texture coordinates should change. How hard can it be? I set up the code and entered some numbers out of my head. Either I should work on my arithmetics or have used a paper and pen. I ended up in a modifying numbers and testing loop. This is fun, the tweaking, but not a recommended developing style.

Feel free to play with the project. Keep in mind that it was written very very quickly and the code contain things even I don’t like, ie there are hardcoded numbers in there and parts of the grid that will never be visible is drawn.

The source code for this little challenge is available at github

I think writing this post took longer :-)