The theme for week #10 of the Weekly Coding Challenge is:
Clock
When it comes to clocks, there are a wide range of possibilities that we could approach. This challenge aims to get your creative juices flowing! Let’s see what you can create! 😄
In this tutorial we’re going to build a clock using p5js and we’re going to build it on the CodeGuppy platform.
CodeGruppy is a platform that has an entire curriculum of lessons and projects that are tailored for kids (but not only) with activities such as interactive graphics and game creation.
Let’s see how it works! 😄
Creating the project
You can see the live version of what we’re going to create by clicking here.
First thing you’ll have to create a new account on CodeGuppy. You can join for free, which is awesome! 😉
Once you’ve logged in, you can create a new project by clicking the CODE NOW button. This will open up the web based code editor and you can start writing your code in there.
Prerequisites
Before we start writing any code it’s important to note that even though the CodeGuppy platform is using p5js, there are some small differences in the API (the function names mostly).
Instead of the setup function that we have in p5js, here we’re going to use the enter function.
Also, the draw function is replaced with the loop function.
You can find out more about all the available commands by clicking in the left side of the screen (the three bar icon).
The JS
Now we can start diving into the code. 😉
First, let’s create the enter function. This function is called once before the program starts and within it we can set up some basic functionalities:
function enter() {
translate(400, 300);
frameRate(1);
strokeWeight(8);
noFill();
}
By default the CodeGuppy canvas has a width of 800px and a height of 600px. In order to have everything in centered, we’re going to translate everything by 400px vertically and 300px horizontally.
We also set the frameRate to be 1 because we want our loop to only run once every second.
The strokeWeight and noFill functions are used to set up the styling that we’ll have for the clock.
The loop
Next, let’s focus on the actual drawing of the clock.
The clock will have 3 parts: the second, the minute and the hour hands. We’ll have to calculate the angle for each hand and we’ll draw different line from the center for each of the hands. Also, we’re going to create an arc for each one - it will give it a nicer effect.
We’ll also have an array with 3 separate colors - one for each hand.
let colors = ['#a3586d', '#5c4a72', '#f3b05a'];
function loop() {
clear();
// Seconds
stroke(colors[0]);
const secondAngle = map(second(), 0, 60, 0, 360);
arc(0, 0, 300, 300, 0, secondAngle);
push();
rotate(secondAngle);
line(0, 0, 100, 0);
pop();
// Minutes
stroke(colors[1]);
const minuteAngle = map(minute(), 0, 60, 0, 360);
arc(0, 0, 280, 280, 0, minuteAngle);
push();
rotate(minuteAngle);
line(0, 0, 75, 0);
pop();
// Hours
stroke(colors[2]);
const hourAngle = map(hour() % 12, 0, 12, 0, 360);
arc(0, 0, 260, 260, 0, hourAngle);
push();
rotate(hourAngle);
line(0, 0, 50, 0);
pop();
}
As you can see we are using the built-in second, minute and hour functions to get the corresponding values. Then we’re maping these values to be within a certain range of angle values.
For example if we are at the 60th second we’ll have 360 degrees, and so on… We use this to rotate the line by this amount, and to create the corresponding arc (from 0 to x deg).
The push function saves the current drawing style settings and transformations, while pop restores these settings. (Reference on p5js.org).
You might also have noticed that there is a clear function. This is used to clear out the canvas every time the loop function fires as we don’t want to have a new drawing on top of the old one.
Currently the clock will be drawn at a bad angle (+90 deg), and in order to fix this, we’re going to wrap around the code (basically the drawing part) within another pair of push and pop functions and we’re going to rotate it back these 90 degrees:
function loop() {
clear();
push();
rotate(-90);
stroke(colors[0]);
const secondAngle = map(second(), 0, 60, 0, 360);
arc(0, 0, 300, 300, 0, secondAngle);
push();
rotate(secondAngle);
line(0, 0, 100, 0);
pop();
stroke(colors[1]);
const minuteAngle = map(minute(), 0, 60, 0, 360);
arc(0, 0, 280, 280, 0, minuteAngle);
push();
rotate(minuteAngle);
line(0, 0, 75, 0);
pop();
stroke(colors[2]);
const hourAngle = map(hour() % 12, 0, 12, 0, 360);
arc(0, 0, 260, 260, 0, hourAngle);
push();
rotate(hourAngle);
line(0, 0, 50, 0);
pop();
stroke(255);
point(0, 0);
pop();
}
Add the end we’re placing a small white point in the middle of the lines - just an extra touch! 😄
The entire JS Code
let colors = ['#a3586d', '#5c4a72', '#f3b05a'];
function enter() {
translate(400, 300);
frameRate(1);
strokeWeight(8);
noFill();
}
function loop() {
clear();
push();
rotate(-90);
stroke(colors[0]);
const secondAngle = map(second(), 0, 60, 0, 360);
arc(0, 0, 300, 300, 0, secondAngle);
push();
rotate(secondAngle);
line(0, 0, 100, 0);
pop();
stroke(colors[1]);
const minuteAngle = map(minute(), 0, 60, 0, 360);
arc(0, 0, 280, 280, 0, minuteAngle);
push();
rotate(minuteAngle);
line(0, 0, 75, 0);
pop();
stroke(colors[2]);
const hourAngle = map(hour() % 12, 0, 12, 0, 360);
arc(0, 0, 260, 260, 0, hourAngle);
push();
rotate(hourAngle);
line(0, 0, 50, 0);
pop();
stroke(255);
point(0, 0);
pop();
}
Conclusion
Can’t wait to see what you are going to create for this challenge! Make sure you tag me @florinpop1705 and @CodeGuppy on twitter with your submission.
This tutorial was inspired by the great Daniel Shiffman on The Coding Train Youtube channel. You should definitely check him out as he is one of my favorite teachers!
Feel free to also check out Jacob Foster’s clock collection on Codepen for more inspirations.
Happy Coding! 😇