How to place the hours in a clock dynamically? - algorithm

Question

I made an svg clock using Java by drawing a circle and three animated lines into an svg file. This is how my clock looks like.
Now I want to add the hours to the clock like the following.
How can I do the calculations given the cx, cy, r, and stroke-width of the circle ? I want the user to supply these values and I draw the rest including the hour, minute, and second hand. I am not worried about the clock hands, I can figure that out, but I am not sure how to place the hours in the clock dynamically. I don't want to place them manually.
Here is my SVG file.
<svg xmlns = 'http://www.w3.org/2000/svg' version = '1.1' width="500.0" height="500.0">
<circle cx="100.0" cy="100.0" r="50.0" stroke="none" stroke-width="1.0" fill="rgba(102,205,170,0.4)"/>
<line x1="100" y1="100" x2="100" y2="62" stroke="red" stroke-width="2.0" stroke-linecap="round">
<animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="500ms" repeatCount="indefinite"></animateTransform>
</line>
<line x1="100" y1="100" x2="100" y2="62" stroke="black" stroke-width="2.0" stroke-linecap="round">
<animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="3s" repeatCount="indefinite"></animateTransform>
</line>
<line x1="100" y1="100" x2="100" y2="75" stroke="black" stroke-width="4.0" stroke-linecap="round">
<animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="40s" repeatCount="indefinite"></animateTransform>
</line>
</svg>
How do I do this and what are the variables that I need as part of the calculations ? I'm pretty much looking for a formula in order to place the hours correctly.
Update: The answer by Michaël Lhomme is given me the best drawings
How can I make the hours go inside the circle? They are very close but I would want them inside.
Thanks!

Answer 1

You need to use cos and sin functions to calculate the coordinates of each point on the circle :
/*
* #param radius The clock radius
* #param cx X coordinates of the clock's center
* #param cy Y coordinates of the clock's center
*/
void drawHours(int radius, int cx, int cy) {
for(int i = 1; i <= 12; i++) {
double x = radius * Math.cos(Math.PI / -2 + (2 * i * Math.PI) / 12) + cx
double y = radius * Math.sin(Math.PI / -2 + (2 * i * Math.PI) / 12) + cy
String text = Integer.toString(i);
//draw text at [x, y] using style 'text-anchor' set to 'middle' and 'alignment-baseline' set to 'middle'
}
}
To adjust the locations of the text use svg alignment properties 'text-anchor' and 'alignment-baseline'

Answer 2

Start at the center of your circle, and use sin and cos trig functions to calculate the center of the point at which you are going to display a given numeral for the hour.
To calculate the center point for each numeral, something like this might work (untested):
// This will calculate the center point for the location at which a
// label for the given hour should be:
Point2D.Double getHourLocation(int hour, int clockDiameter)
{
double radians;
double x;
double y;
// assume 360 degrees, so range needs to be 0..360:
// first, adjust hour so 0 is at the top, 15s is at 3 o'clock, etc
// 360/12 = 30, so
hour *= 30;
// calculate x, y angle points relative to center
radians = Math.toRadians(hour * Math.PI / 180);
x = Math.cos(radians);
y = Math.sin(radians);
// sin() and cos() will be between -1.0 and 1.0 so adjust for that
x *= 100;
y *= 100;
// x, y points should now be relative to center of clock
x += clockDiameter;
y += clockDiameter;
return new Point2D.Double(x, y);
}
Once you have calculated this location, you'll have to adjust for your font characteristics. For example, assume that you know that the "12" text should be centered at (-50,50) - you'll need to adjust the x,y coordinates to factor in the text width and height to determine where to actually begin drawing.