Got the following request from Leo on the Exploring iPhone Graphics Part 1 article:

Could you give me a quick primer on how to draw a sinus curve (or similar curve) with the data coming from an array?

Here it is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

#define PI 3.14159
 
CGContextBeginPath(ctx);
 
int x;
for(int y=rect.origin.y; y < rect.size.height; y++)
{
    x = ((rect.size.width/4) * sin(((y*4) % 360) * PI/180)) + rect.size.width/2;
 
    if(y == 0)
    {
        CGContextMoveToPoint(ctx, x, y);
    }
    else
    {
        CGContextAddLineToPoint(ctx, x, y);
    }
}
 
CGContextStrokePath(ctx);

The CGContextBeginPath function starts a graphics path. Next we loop the y screen coordinate from the top of the screen to the bottom of the screen. For each y position we calculate the x position based on the sin function. The wave will be half the width of the screen and centered. On the first iteration of the loop (y = 0) we use the CGContextMoveToPoint to set the first drawing position. On each subsequent iteration we draw a line from the last point to the current point.

Here’s a screen shot with this code added to the original application: