The basic clock you made in the last challenge is awesome, but it’s got two major flaws: first, the time is wrong; second, the hands don’t move. We’ll take care of the animation part in the next challenge.
However, the time problem is more complex than you might first think: can you identify what’s wrong with the time on this clock that has nothing to do with the actual time? Let’s learn to set the clock.
Start by finding your Thimble Project from the previous challenge. If you did not complete the "Assemble a CSS Clock" challenge, make sure to do that firs. To find your project:
Your clock should look like this:
You should also have these basic files in your Thimble project:
We'll be spending most of our time in this challenge hacking style.css.
It's really quite simple to move the hands of this clock around the face to point at different numbers. You've probably already discovered how to do that the previous challenge.
You can just find and change the ###deg value in the
transform: rotateZ(45deg); line for each of the .hours, .minutes and .seconds classes in the style.css file.
The letter Z in rotateZ provides a clue.
In space, we occupy 3 spatial dimensions. Two of them are sometimes called cardinal directions on a map or a compass and labeled E/W and N/S. In geometry, we imagine these directions to be just like number lines, called "axes". We label the three axes of 3D space X, Y, and Z. You can imagine X to be like E/W on a map and Y to be like N/S.
A web browser can simulate and visualize a 3D space as a virtual world. So just like in real space there are three different directions that we can rotate objects in and three corresponding rotate functions we could use to transform elements in our web page:
The virtual browser space has a very specific orientation as well: the Z-axis points in/out of the screen, the Y-axis points up/down and the X-axis points right/left. So when we use transform: rotateZ(45deg);, it rotates an element 45 degrees around an imaginary line pointing out of page. If that element is an hour hand, it spins it around the clock face.
Try to change the transform: rotateZ() degree values in the style.css file.
Try replacing rotateZ() with rotateX() or rotateY(), or add all three to see how you can manipulate the elements in 3D space. Can you see it?
Two more points that are helpful to know:
So now that we know how to move the hands around the clock, we need to determine their precise positions for any given time.
For example, if I told you it was 4:27:51 (4 hours, 27 minutes and 51 seconds, or 4h27m51s) can you tell me what the hour hand, minute hand and second hand angle values should be for rotateZ() function?
The problem above is basically a conversion problem: convert from time to angle.
We need to know the conversion factors to do the calculation: degrees per hour (deg/h), degrees per minute (deg/m) and degrees per second (deg/s). Finding them is easier than it seems.
First, you need to know the number of degrees in a circular clock face. How many degrees are there in a circle?
Second, you need to know the number of hours, minutes and seconds on that same clock face. So, how many hours, minutes and seconds are there on a clock?
Once you have all of these numbers you will be able to calculate the conversion factors:
Figuring out the angular position of the hour hand at 4:00:00 is as simple as converting 4 hours into degrees. The math is simple:
hour hand angle = 4h x ( deg/h )
The answer is 60º for the position of the hour hand at 4:00:00. However, this is not so simple for more complicated times like 4:27:51. This is because the position of the hour hand also depends on the minute and second values.
It may be hard to notice on a clock, but the hour hand moves continuously every second. It doesn't just jump from the 4 to the 5 position. When the hour changes the hour hand moves a little bit at a time. At 4:30:00, you'll find the hour hand halfway between 4 and 5 position on the clock.
Having some trouble picturing it? Well take a look at the two examples below. Which one looks "right" for 4:27:51 to you? Notice the minute and second hands are in the same places for both, but the hour hands are not.
The clock on the left looks wrong because the hour hand should be somewhere between 4 and 5 at 4:27:51. So how far should the hour hand be when the minute hand is at 27 minutes? It's a little tricky. What we actually have to do is convert 4:27:51 into a decimal time value.
To convert the time into a decimal is actually pretty simple and the equation is:
decimal hour = hour + (minute / minutes in an hour) + (second / seconds in an hour)
For 4:27:51 this becomes:
decimal hour = 4h + 27m * ( 1h / 60m ) + 51s * ( 1h / 360s ) = 4.46h
Now we can go back to the conversion to figure out the angle for 4:27:51
h-angle = 4.46h * ( deg/h )
The answer is 69.6º for the position of the hour hand at 4:27:51.
So following the logic of the previous sections, the hour hand position depends on the hour, minute and second. Likewise, the minute hand position depends on the minute and second. Only the second hand position is completely independent. Therefore, the following equations can be used to calculate the positions:
h-angle = [deg/h] * [ h + m * ( 1h / 60m ) + s * ( 1h / 360s ) ]
m-angle = [deg/m] * [ m + s * ( 1m / 60s ) ]
s-angle = [deg/s] * s
Now that we know how to calculate the angular position of the hour, minute and second hands for any given time, lets test out our understanding by setting our clocks for a couple of fun times.
Once you've got the hang of setting the time, pick your favorite time to set. Edit your thimble to show the time and add a heading/title to your clock page. Take a screenshot and submit to Edmodo