Project: Tick Tock

Hi! This is the very first Scratch project shared on this site and I have decided it timely to begin with the simple programming of a clock. I believe in starting with the end in mind, so here is a look at the clock we will create:

Download the project

And here is how we will do it, in just four easy steps:

Step 1: Prepare the sprites

Let's keep things very simple for a start. We just need four sprites:

1. the clock face, which is an image file credited to MissMinded
2. the hour hand, which we will draw using Scratch's Paint Editor
3. the minute hand, also drawn with Paint Editor
4. the second hand, which is a ready-made crab sprite in Scratch

We only need four sprites

There is one thing to note when drawing the hour and minute hands: when you draw the hands you would notice that by default, Scratch automatically places the centre of rotation in the middle. Since we want the hands to rotate on one end, we will need to more the centre of rotation to the bottom of the hands:

Click "Set custume center" and...

move the centre of rotation to the bottom of the costume

We also want to animate the crab clippers. We do this using two crab costumes that we will later program to alternate between one and the other, giving us the illusion of a happy clipper clicking crab.

Two costumes for the crab (second hand of the clock)

Just one final setup and we are done with the sprites: we will add a script to each sprite to reset its position and orientation every time we start the program.

Script added to each sprite to reset position and orientation

Step 2: Get the second hand moving

OK! We are going to add some movement now, starting with the second hand. Here is the script to do so. I will explain it in a second (pun intended):

Script for the second hand

The first three blocks are the position setup that we talked about earlier. In a real clock, the second hand always moves and ticks at every second. We program these two behaviours using the forever block (i.e. always moves), and the turn clockwise 6 degrees and wait 1 sec blocks (i.e. ticks at every second). Since we want the crab click its clippers, we add in the "next costume" block so that it switches costume at every tick. With this script, we would already have a working clock - a clock with only a ticking second hand, that is.

To make the minute and hour hands move, we need to do more. What more? Let's just think about this for a minute (pun intended). The minute hand moves a certain angle every time the second hand completes a round. Likewise, the hour hand also moves a very tiny bit every time the second hand completes a round. With a bit of math, we know that at each round of the second hand, the minute hand rotates by 6 degrees and the hour hand by 0.5 degrees (let me know in the comments if you need help with this calculation). What we need now is to figure out how to program this behaviour.

Well, every time the second hand makes a complete round, the crab will face straight up again. In other words, its direction will return to 90. We will take this as a cue to signal the minute and hour hands that they should be moving! We broadcast out loud that the second hand has completed a round:

Complete script for the second hand

Step 3: Move the minute hand

Imagine that the minute hand is just standing there waiting for a signal to move. When it hears a shout from the second hand, it will obediently rotate:

Hour hand turns when it hears a shout from the second hand

Step 4: Move the hour hand

Likewise, the hour hand will also move when it hears the shout:

Hour hand turns when it hears a shout from the second hand

And there we have it, a clock! If this is too simple, I challenge you to innovate! Some things you could do to make it more interesting:

• Change the sprites to make them more enticing. Use or draw your own clock face.
• Make the clock start at a time you specify. Hint: use variables.
• Turn it into an alarm clock!
• Look at the gochClock gallery for inspiration and ideas. There are lots (and I mean lots) of clock-related projects there.

Don't forget to share what you have done! Post a comment so that we know.