Scratch
Easy
45 mins
460 points
What you need:
  • Computer/laptop

Make a Clock

In this lesson we program the hour, minute and second hands on a clock to point in the right direction and tell the time.

This message will be visible to everyone. Send

    This code along has finished! ⌚

    You can watch it back by playing the video!

    The code along is open for everyone to join in but if you would like to earn the points and badges please join our club!

    1 - Create a new Scratch project

    Go to the Scratch website, create a new project and delete the cat sprite.

    2 - Upload the clock face

    Included with this step is a picture of a clock face. Save this picture to your computer and then upload it as a new sprite in your Scratch project.

    Add the following code to the clock sprite to make it appear exactly in the center of the stage area.

    when green flag clicked go to x (0) y (0)


    3 - Draw the seconds hand

    Now let's create the seconds hand of the clock by painting a new sprite.

    Use the line tool to draw a blue line that is 4 pixels thick. Start the line from the center where the little gray circle and cross is. Hold down the 'Shift' key while you are drawing it to draw a straight line.

    It is very important that you start it from the center, otherwise it will not line up correctly on the clock.

    Once you have drawn the seconds hand, add the following code to it so that it appears correctly on the clock face.

    when green flag clicked go to x (0) y (0)

    Click the green flag and check that it appears correctly on the clock face. If it is too long or too small you may need to edit it so that it is the right size.




    4 - Program the seconds hand

    As you know the seconds hand of a clock counts the 60 seconds of each minute by rotating in one full circle.

    If there are 360 degrees in one full rotation, the seconds hand will need to move 6 degrees each second as 6 X 60 = 360.

    In the sensing toolbox there is a current [second] block, this block works like a variable and it is automatically set to the amount of seconds of the current time. By multiplying the current second by 6, we will get what degrees to point the seconds hand to.

    Add the following code to the seconds hand sprite underneath the go to x: 0 y: 0 block.

    when green flag clicked go to x (0) y (0) // add the new code under here forever point in direction ((current [second v]) * (6)) end

    Once you have added the code, click on the green flag and the seconds hand should start rotating and point to each second.



    5 - Draw the minutes hand

    Now let's create the minutes hand of the clock by painting a new sprite.

    Use the line tool to draw a red line that is 8 pixels thick. Start the line from the center where the little gray circle and cross is. Hold down the 'Shift' key while you are drawing it to draw a straight line. The minutes hand should be shorter than the seconds hand.

    Again it is very important that you start it from the center, otherwise it will not line up correctly on the clock.

    Once you have drawn the minutes hand, add the following code to it so that it appears correctly on the clock face.

    when green flag clicked go to x (0) y (0)

    Click the green flag and check that it appears correctly on the clock face. If it is too long or too small you may need to edit it so that it is the right size.



    6 - Program the minutes hand

    The minutes hand of a clock counts the 60 minutes of each hour by rotating in one full circle.

    If there are 360 degrees in one full rotation, the minutes hand will need to move 6 degrees each minute as 6 X 60 = 360.

    In the sensing toolbox there is a current [minute] block, this block works like a variable and it is automatically set to the amount of minutes of the current time. By multiplying the current minute by 6, we will get what degrees to point the minutes hand to.

    Add the following code to the minutes hand sprite underneath the go to x: 0 y: 0 block.

    when green flag clicked go to x (0) y (0) // add the new code under here forever point in direction ((current [minute v]) * (6)) end

    Once you have added the code, click on the green flag and the minutes hand should start rotating and point to the correct minute. You will need to wait until the seconds hand completes a minute.


    7 - Draw the hour hand

    Now let's create the hour hand of the clock by painting a new sprite.

    Use the line tool to draw a green line that is 12 pixels thick. Start the line from the center where the little gray circle and cross is. Hold down the 'Shift' key while you are drawing it to draw a straight line. The hour hand should be shorter than the minutes hand.

    Again it is very important that you start it from the center, otherwise it will not line up correctly on the clock.

    Once you have drawn the hour hand, add the following code to it so that it appears correctly on the clock face.

    when green flag clicked go to x (0) y (0)

    Click the green flag and check that it appears correctly on the clock face. If it is too long or too small you may need to edit it so that it is the right size.


    8 - Program the hour hand

    The hour hand of a clock counts the 12 hours of each AM and PM by rotating in one full circle.

    If there are 360 degrees in one full rotation, the hours hand will need to move 30 degrees each hour as 30 X 12 = 360.

    In the sensing toolbox there is a current [hour] block, this block works like a variable and it is automatically set to the amount of hours of the current time. 

    However the current [hour] block stores the number of hours in the 24 hour format (so 1pm = 13 hours, 2pm = 14 hours etc.) and our clock is an analog clock which only shows up to 12 hours (12 for AM and 12 for PM).

    Because of this we will need to use the   mod   block from the Operators toolbox. This block divides the first number by the second number and returns the remainder.

    For example 14 mod  12 will return 2, as 2 is the remainder when you divide 14 by 12. If it is 9 AM then it will be 9 mod  12 and that will return 9, as 9 is the remainder when you divide 9 by 12.

    Once we get the hour in the 12 hour format we multiply it by 30 to get what degrees to point the hours hand to.

    Add the following code to the hour hand sprite underneath the go to x: 0 y: 0 block.

    when green flag clicked go to x (0) y (0) // add the new code under here forever point in direction (((current [hour v]) mod (12)) * (30)) end

    Once you have added the code, click on the green flag and the hour hand should point to the correct hour.


    9 - Account for the minutes

    At the moment the hour hand on our clock will just point to the current hour. To make it truly work like a normal clock the hour hand should slowly move from one hour to the next and as the minutes go by.

    We can make it do this by adding some extra degrees for the current minute, to the degrees that the hour hand is pointing to.

    For each minute of the current time, we want to add 0.5 degrees extra to the direction the hour hand is pointing in.

    This is because there is 30 degrees in each hour (360 / 12 = 30) and if we divide 30 degrees by 60 minutes the answer is 0.5 (30 / 60 = 0.5).

    Change the calculation for the point in direction   block of the hour hand to the following.

    when green flag clicked go to x (0) y (0) forever point in direction ((((current [hour v]) mod (12)) * (30)) + ((current [minute v]) * (0.5))) end


    10 - Challenge!

    Well done you've completed all the steps!

    As an extra challenge can you turn the clock into an alarm clock? Think about what extra code you would need to add.

    see answer

    Add the following code to any of the sprites (this will trigger the alarm at 10:30).

    when green flag clicked forever if < < (current [hour v]) = (10) > and <(current [minute v]) = (30)> > then play sound [Alarm v] until done end end

    Warning this will play the sound for the full minute!

    Join our club 😃

    Create your profile, earn points & badges and learn how to code!

    Copyright Notice
    This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.

    Scratch is developed by the Lifelong Kindergarten Group at the MIT Media Lab. It is available for free at https://scratch.mit.edu
    🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more