Adding numbers to a clock face? - ios

Question

I saw this clock example on objc.io and I wanted to add the numbers to the clock face.
http://www.objc.io/issue-12/animating-custom-layer-properties.html
So, in the -(id)init{} method I added this code using a formula that I found on the Internet:
float Cx = self.bounds.size.width / 2;
float Cy = self.bounds.size.height / 2;
float Rx = 100;
float Ry = 100;
for (int i=1; i<=12; i++) {
float theta = i / 12.0 * 2.0 * M_PI;
float X = Cx + Rx * cos(theta);
float Y = Cy + Ry * sin(theta);
CATextLayer *aTextLayer = [[CATextLayer alloc] init];
[aTextLayer setFont:#"Helvetica-Bold"];
[aTextLayer setFontSize:20];
[aTextLayer setFrame:CGRectMake(X, Y, 50, 20)];
[aTextLayer setString:[NSString stringWithFormat:#"%d", i]];
[aTextLayer setAlignmentMode:kCAAlignmentCenter];
[aTextLayer setForegroundColor:[[UIColor greenColor] CGColor]];
[self addSublayer:aTextLayer];
}
For some reason, my 12 o'clock has shifted to 3 o'clock.
Can anyone spot what I'm doing wrong?

Answer 1

The trig functions wind from the positive x-axis toward the positive y-axis. In a CALayer, positive y is down, so the start of your loop is 3 o'clock, and the angle proceeds clockwise, which is how you want it for a clock, and the opposite of how things work on the standard (+y==UP) cartesian plane.
The next thing to notice is that it's simpler to loop twelve positions 0..11 and compute the hours and angles from the position.
Finally, the frames of your labels are set to an arbitrary size #{50,20} and the text is centered, this is probably the cause of the x offset. You want the computed x,y to be the labels' centers, so you'll need to fudge the origins a little...
for (int position=0; position <12; position ++) {
int hour = (position+3) % 12;
float theta = position / 6.0 * M_PI;
float X = Cx + Rx * cos(theta);
float Y = Cy + Ry * sin(theta);
// X,Y calculated as you have done here should be the center of the layer
// the quick fix is to subtract half the width and height to get the origin
CGRect frame = CGRectIntegral(CGRectMake(X-25, Y-10, 50, 20));
CATextLayer *aTextLayer = [[CATextLayer alloc] init];
[aTextLayer setFont:#"Helvetica-Bold"];
[aTextLayer setFontSize:20];
[aTextLayer setFrame:frame];
// note that we use "hour" here...
[aTextLayer setString:[NSString stringWithFormat:#"%d", hour]];
[aTextLayer setAlignmentMode:kCAAlignmentCenter];
[aTextLayer setForegroundColor:[[UIColor greenColor] CGColor]];
[self addSublayer:aTextLayer];
}
You might find it helpful to use a radius for the positioning of these labels that's distinct from the radius used to draw the circle. To position the numbers inside, use a smaller radius, or use a larger one to draw them outside the filled dial.

Answer 2

From your formula it looks like if you swapped the Cos and Sin then negated the Cos term you might get what you're looking for.
Edit: meant to include this too. I noticed that they did this too at the link you posted one of there lines of code where they draw the clock hands is this:
CGContextAddLineToPoint(ctx, center.x + sin(angle) * 80, center.y - cos(angle) * 80);
it looks like they also swapped the cos and sin and negated the cos term