wood burning stoves 2.0*
The moose likes Beginning Java and the fly likes Drawing a simple clock in java Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Java » Beginning Java
Bookmark "Drawing a simple clock in java" Watch "Drawing a simple clock in java" New topic
Author

Drawing a simple clock in java

O Joseph
Ranch Hand

Joined: Jun 27, 2003
Posts: 75
hi,
can anyone explain how to draw a simple clock in java? i dont need to make it work yet. just the circle with the hour and minute hand. thanks


XX.
Michael Dunn
Ranch Hand

Joined: Jun 09, 2003
Posts: 4632
if you have installed the java sdk, you already have a clock applet

C:\Program Files\Java\jdk1.5.0_03\demo\applets\Clock
O Joseph
Ranch Hand

Joined: Jun 27, 2003
Posts: 75
isn't there a way i can design it without using the applet?
Michael Dunn
Ranch Hand

Joined: Jun 09, 2003
Posts: 4632
the folder contains the source code.

have a look at the code, see how sun did it, then adapt the code to your own requirements
Campbell Ritchie
Sheriff

Joined: Oct 13, 2005
Posts: 39865
    
  28
You have to work out the centre of your circle for the face (call it x, y), then your hand runs from x, y, to x + cos (a)*l, y - sin(a)*l,
where a is the angle of the hand and l is its length.
Remember that the angles start from 0 at 3o'clock and run anti-clockwise to PI/2 (= 0.5PI) at 12o'clock, PI at 9 o'clock, 3/2PI (=1.5PI) at 6o'clock, and back to 2PI at 3o'clock again.
PI is of course the ratio between the circumference and diameter of a circle, and is available as java.lang.Math.PI. You use PI because you work out all trig functions in radians, not degrees.

You will of course remember that you always quote x coordinates before y. On a computer, x runs from left to right across the screen, and y runs from top to bottom down the screen, which is why you write -sin and not +sin.

Have I lost you yet? If not, read on and all will become even more confusing . . .

To work out the angle a, remember you start from 12 o'clock (PI/2), and go clockwise, so you subtract 2PI/12 = PI/6 for every hour (use h % 12 for your hour), and on the hour hand 2PI/720 for each minute, using m % 60 for the minute.
So, when you work out the angle a for the hour hand,
a= PI/2 - h % 12 * PI / 6 - m % 60 * PI / 360,

and for the minute hand you can use the simpler formula of
a = PI / 2 - m % 30 * PI.

See, it's easy isn't it.
Campbell Ritchie
Sheriff

Joined: Oct 13, 2005
Posts: 39865
    
  28
Thank you for the e-mail. We had this exercise ourselves in our MSc class about two weeks ago, and most people had no end of trouble with the mathemitcal side of the problem.

So it's the maths you need to revise . . .

And it's not going to be easy.

You know the coordinates in any GUI are x, y, rather like when you drew graphs at school, but they don't run in the same directions.
The x numbers run from 0 at the left of the screen, which is not too confusing, but the y coordinates run from top to bottom with 0 at the top.
You measure in pixels; get a powerful magnifying glass (or if you have very good eyes, screw your eyes up and look at the screen from as close as you can get), and each of the tiny spots you see in front of you represents a pixel. [Pixel is short for "picture element."] I have my screen set at 1280x1024, which means I have about 1280 pixels fro left to right and about 1024 from top to bottom.
So, the pixel at the very top left of my screen is (0, 0), at the top right it is (1280, 0), at the bottom left (0, 1024), and the bottom right (1280, 1024). It is also useful to know where the middle pixel is, about (640, 512). That might not be the absolute centre of the screen, but it's as near as you will get and nobody will notice the difference.
If you have the average GUI window occupying about 1/3 of the average computer screen, you might have it set to 400x400. A bit like this, only with a JFrame you have to allow a little extra height and width because it has a title bar and margins:-

Then you put a JPanel in the middle of your JFrame in the usual fashion, and the JPanel ought to be about 400x400.
So, your centre pixel is (200, 200) near as makes no difference.
Now, if you draw a face, and try something like,you get the circumference of a circle set in a box 300x300 px, 50 px from the top and left of the panel.
[If the 3rd and 4th int parameters which represent width and height are different, you get an oval, only they ought to have given it its proper name, an ellipse.]

If you can lay your hands on a mathematics book with the definition of sine and cosine using a circle in, you won't need to do the next exercise:-
Now, a maths lesson. Take a sheet of paper, draw a pair of lines across it, crossing in the centre, forming a cross like a +, and now you have a pair of x and y axes. Draw a circle with its centre on the crossing of the two lines (which you call the origin). Label the line from left to right -x on the left and +x on the right, and label the line from top to bottom with y at its top and -y at its bottom. Later you will change the y.
Draw four radii of the circle, from the centre to the top right, to upper left, to lower right, and then to lower left, rather like hands on a clock. Draw curves from the right x-axis round to each of the four radii, only going anti-clockwise; one of your curves will go nearly round the whole circle.
Say that the radius of the circle is 1. Make up a new unit the same size as the radius of the circle, so it's 1 of them.
Draw a line vertically from one of your radii to the x-axis, and the length of that line represents the sine of the angle.
Similarly, draw a line from the end of the radius to the y-axis, which line represents the cosine.

Now, you will see that a sine going up is positive, and a cosine going right is positive, and they are negative in the opposite directions.

It gets even more confusing now.

Remember that on a computer screen down is positive and up is 0. Well, change the y on your diagram to read -y and the -y at the bottom to read +y.

Now write the numbers 0 at the right (near +x), PI / 2 (or 1/2 PI or 0.5PI) at the top, PI on the left, and 3 PI / 2 (or 1 1/2 PI or 1.5 PI) at the bottom, which represent the angles in radians. Note that the increase as you go round anti-clockwise.
PI is of course the static double field in the Math class, which represents the Greek letter pronounced similarly, which represents the ratio of the diameter of a circle to its circumference.

I did say this was difficult, didn't I?

Now what you are trying to do is draw a line from your centre spot to your circumference. You start about 5 pages back at 200, 200, remember. Now you have to add the cos of the angle, multiplied by the length of the "hand" (say, 150) to the x figure, so your 3rd argument comes out as 200 + (int)(150*Math.cos(PI/2 - PI/30*m)) for the minute hand.
Now you have to subtract the length of the "hand" multiplied by its sin from the y figure, so your 4th and final argument is 200 - (int)150*Math.sin(PI/2 - PI/2*m)), where m means minutes.
Or you can have
Try it. then work out the angle for the cosine for the hour hand as I told you the other day . . .
Jeff Albertson
Ranch Hand

Joined: Sep 16, 2005
Posts: 1780
In the 2D API you can do things like:
* flip the y axis so that "up" is the positive direction
* translate so that the origin is in the middle of the component
* rescale so that units are more appropriate for what you are doing

2D graphics tutorial


There is no emoticon for what I am feeling!
Campbell Ritchie
Sheriff

Joined: Oct 13, 2005
Posts: 39865
    
  28
Thank you. And there I was putting - in.
Campbell Ritchie
Sheriff

Joined: Oct 13, 2005
Posts: 39865
    
  28
Are you the same chap who went forward as a Star at Teesside the other day?
Why don't you ask me about the clock face to face tomorrow?
Jeff Albertson
Ranch Hand

Joined: Sep 16, 2005
Posts: 1780
Who me? No, that's not me, although I am a bit of a celebrity in my own right.
Click on the profile icon above (The first one, with the face+"?") to see if you recognize me.
Campbell Ritchie
Sheriff

Joined: Oct 13, 2005
Posts: 39865
    
  28
Yes, it was you. I recognise you from the photo. And I did explain it to you this morning face to face.












Oh, no it was Jo Onibokun
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: Drawing a simple clock in java