In this challenge you are going to use math to set a simple clock simulation in Scratch. You’re definitely going to need a pencil and some paper to do this!
Once you know how to set a clock, you can dig into the Scratch code to animate and customize your clock.
Visit the Clock Simulation by Greatguy123 project to see how it behaves when it is working correctly.
The clock simulation provides two style of clock: a digital and an analog. The digital clock displays the numerical time, but the analog displays the time by changing the angles of the hour, minute and second hands along the clock face.
Make sure to login to the Scratch site. You can use a personal login, or our shared STEM Scholar account. Do this before remixing the projects below.
In order to learn more about how Greaetguy123's original clock simulation works, we're going to remix a HackShop copy that has been disabled to give you chance to learn.
This copy has a functional digital clock, but a broken analog one. In this tutorial, you will fix the analog clock, but also learn how both work.
Let's begin by unpacking the simulation:
The digital clock code uses costumes to change the numbers. The simulation uses one variable, called
clockand two lists, called
analog time. You can find these variables and lists under the
Datacode block menu. Click on the checkboxes to the left of the variables or lists to view them on screen.
It's really quite simple to move the hands of this clock around the face to point at different numbers.
You will find the code that controls the angle of the clock hands attached to the sprites for each hand. Click on any of the three clock-hand sprites and review their scripts.
To change the angle of the clock hand, find and change the value in the
point in direction (##) block for each of the hour, minute and second sprites in the project. Can you set the current time by adjusting these angles?
point in direction (##)block work?
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.
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
point in direction (45), it rotates the sprite 45 degrees around an imaginary line pointing out of screen.
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 point in direction (##) 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 discovered how to set the clock, you can place the hands wherever they're needed, but what good is a clock that doesn't tick?
What we'll need to do is make sure that the clock hands move with time and the simplest way to do that is to use the
current () block under the Sensing menu. This block returns the current year, month, day, day of week, hour, minute or second. So it can be used to keep track of the time!
In the clock face sprite, you will find code blocks that define the analog time list items by using
current (minute), and
current (second). In the sprites for the hour, minute and second hands, you will find operator code blocks that use the analog time list to calculate the h-angle, m-angle, and s-angle.
Fill in the blank spots in the angle operator blocks to calculate the clock hand angles, then stick this block into the
point in direction (##) block to animate the hands!
Now you should have a working analog clock and a good sense of how the time is current time is calculated, stored and used throughout the code. It's time for you to customize this clock! Here are three things to try:
Make sure you update your Project Portfolio with your remixes. Can you figure out how to
embed a Scratch project into a web page using
Once you've finished your code and switched to the project page, look for the
Embedbutton below your project screen.
The code you are looking for should look something like this:
<iframe allowtransparency="true" width="485" height="402" src="//scratch.mit.edu/projects/embed/25331943/?autostart=false" frameborder="0" allowfullscreen> </iframe>