Scratch Clock Simulation

H@KR Challenge 4.4 [100pts]

Clock Simulation by Greatguy123


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.


STEP 1: Review The Original Clock Simulation

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.

STEP 2: Remix the Clock

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.


   Launch & Remix the HackShop Clock Simulation   

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:

  • Click on each of the sprites at the bottom left;
  • For each of the sprites, click on the "Scripts" tab at the top-center;
  • Review the scripts and pay careful attention to the functions, the variables and and the operations;
  • For each of the sprites, click on the "Costumes" tab at the top-center;
  • Which sprites have costumes?
The digital clock code uses costumes to change the numbers. The simulation uses one variable, called clock and two lists, called digital time and analog time. You can find these variables and lists under the Data code block menu. Click on the checkboxes to the left of the variables or lists to view them on screen.

STEP 3: Experiment with Angles

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?

But how does the 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.

Coord system CA 0.svg
By Jorge Stolfi Own work, Public Domain

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.

STEP 4: Calculate the Angles

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.

Clock Conversion Factors

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:

  • deg/h = degrees in a circle / hours on a clock
  • deg/m = degrees in a circle / minutes on a clock
  • deg/s = degrees in a circle / seconds on a clock

An Important Complication

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.



Converting to Decimals First

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.

The Complete Solution

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

STEP 5: Set the Time

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.

Calculate the h-angle, m-angle, and s-angle for the times below:

  1. STEM start = 9:00:00
  2. STEM end = 12:00:00
  3. Sunset = 5:28:00
  4. Sunrise = 6:41:00
  5. π O'clock = 3:14:15
  6. Marathon Winner = 2:08:37
  7. Why is 6 Afraid? = 7:08:09
  8. 70mph Drive to NJ = 11:16:17

STEP 6: Animate the Clock

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 (hour), 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!

STEP 7: Customize the Clock

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:

To Complete this Challenge Step

  • [20 pts] – Change the analog clock face to be a 24 hour, military time clock.
  • [20 pts] – Add seconds to the digital clock.
  • [30 pts] – Create a clock, analog or digital, that counts down to the end of class, or to our next class.

STEP 8: Share Your Work

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 html?

Once you've finished your code and switched to the project page, look for the Embed button 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>