Coding, Figures and Visuals

Term 1
Project Process Document

User Manual

1) Move the mouse around the 4 quarters of the screen to see the background change
colour between a light blue, light green, light yellow and a light orange.
2) The 4 colours correspond with the images around the clock to represent the four
seasons of the year.
3) Hover the mouse over the middle of the clock to see the date appear in the white box at
the bottom.

Source Code / Code Design

SC = source code / CD = code design
1) (SC)The code below sets the different variables in my code so that my added images
and fonts show up in my clock and are uploaded correctly.
let leaf1;
let sun1;
let snow1;
let flower1;

var myFont;
var myFont2;
- (CD)These go before any of the functions, right at the beginning of the code as they
need to be determined before anything else can happen.

2) (SC)The next bit of coding loads all of my variables so contains the external links for my
images and fonts.
function preload() {
//these are the images used in my clock//
leaf1 = loadImage("maple leaf.png");
sun1 = loadImage("sun.png");
snow1 = loadImage("snowflake.png");
flower1 = loadImage("clipart229933.png");
//these are the fonts used in my clock//
myFont = loadFont("MochiyPopPOne-Regular.ttf");
myFont2 = loadFont("RampartOne-Regular.ttf");
}
- (CD)These go as the second section of code because they need to be uploaded and
labelled before they can be used in the final section of code.
 3) (SC)The function setup determines the canvas size and also how the rectangles are
aligned on the page.
function setup() {
createCanvas(600, 800);
rectMode(CENTER);
}
- (CD)This means that my rectangles will be positioned from the centre of the shape rather
than the corners. This is important if I want to change the X and Y points as it will move
the shape by the midpoint.

4) (SC)This code creates the clock face.

function drawFace() {
//this is to create the clock face//
noFill();
circle(0, 0, 550);
stroke(0);
textFont(myFont);
textAlign(CENTER, CENTER);
- (CD)This piece of code decides the colour, size, outline and font used in my clock. It also
aligns the text by the centre point like the rectangle. This means it will be spaced evenly
in my clock and it won’t be wonky.

5) (SC)This is within the ‘drawFace’ function and is the actual numbering of the clock. This
code shows how the angles are worked out by multiplying PI and mapping that against
the 12 hours on a clock. Then there is the code for the text seen and the fonts used.
for (var i of _.range(12)) {
push();
var angle = map(i, 0, 12, 0, 2 * PI);
rotate(angle);
translate(0, -210);
rotate(-angle);

if (i == 0) {
textSize(50);
textFont(myFont);
fill(0);
text(12, 0, 0);
} else {
textSize(50);
fill(0);
text(i, 0, 0);
}
pop();
 }
}
- (CD)The ‘push’ and ‘pop’ keeps this section of code together. Anything within those
points only happens within those points. For example, the text is only size 50 if written
between the ‘push’ and ‘pop’. This stops the code overlapping with other code and losing
any specifics that were wanted such as colours or size.

6) (SC)This code creates the hand on the clock that counts the seconds. It shows the
angles worked out for the second hand using PI again.
function drawSecondHand() {
//this creates the second hand//
fill(0);
push();
var angle = map(second(), 0, 60, 0, 2 * PI);
rect(0, -50, 10, 150);
pop();
}
- (CD)The ‘push’ and ‘pop’ are used here to separate this code from other sections to
keep it organised. It also makes sure this piece of code runs smoothly and doesn’t get
mixed up with other codes that are running at the same time.

7) (SC)This code is for the minute hand.

function drawMinuteHand() {
//this creates the minute hand//
fill(0);
push();
var angle = map(minute(), 0, 60, 0, 2 * PI);
rotate(angle);
rect(0, -80, 10, 300);
pop();
}

8) (SC)This code is for the hour hand.

function drawHourHand() {
//this creates the hour hand//
fill(0);
push();
var angle = map(hour(), 0, 12, 0, 2 * PI);
var angle2 = map(minute(), 0, 60, 0, PI / 6);
rotate(angle + angle2);
rect(0, -80, 10, 200);
pop();
}
 9) (SC)This code shows the beginning of the draw function. This first piece shows the
images being drawn at certain points mapped out by the x and y points and then the
scales.
function draw() {
background(220);
//this draws all my images//
image(leaf1, -20, 0, 150, 150);
image(sun1, 0, 500, 150, 150);
image(snow1, 470, 1, 130, 130);
image(flower1, 440, 500, 150, 150);
- (CD)The code shows the chosen images, the background colour and where everything
is being placed on my final clock. These images were positioned in four places around
the clock to show the seasons.

10) (SC)The next section of code is what makes the background change colour.
//this makes the background change colour//
translate(300, 300);
if (mouseX > 300 && mouseY < 300) {
background(0, 200, 255, 60);
} else if (mouseX < 300 && mouseY > 300) {
background(255, 200, 0, 60);
} else if (mouseX < 300 && mouseY < 300) {
background(255, 50, 0, 60);
} else if (mouseX > 300 && mouseY > 300) {
background(50, 255, 0, 60);
}
- (CD)I had to work out the correct points on the screen to make each colour appear
where I wanted them. Once I had worked out my quarters, I then had to find the right
shade of each colour so that they weren’t too bright as I wanted light, pastel colours.

11) (SC)This code draws my clock. Then it draws the white strip across the bottom of the
screen. The ‘255’ means the colour is white.
//this draws my clock//
drawFace();
drawSecondHand();
drawMinuteHand();
drawHourHand();
fill(255)
rect(0,415,650,100)

12) (SC)This is the code for my interactive piece. The centre circle on the clock shows the
date when you hover the mouse over it.
//this creates my interactive midpoint that shows//
//the date when you click on it//
if (dist(mouseX, mouseY, 300, 300) < 50) {
fill(0);
push();
textSize(80);
stroke(10);
fill(255,0,255,50);
textFont(myFont2);
text(day(), -200, 400);
text(month(), -30, 400);
text(year(), 200, 400);
pop();
} else {
push();
textSize(64);
fill(255,0,255,50);
strokeWeight(0);
translate(width / 2, height / 2);
rotate(-PI / 8);
pop();
fill(0, 0, 0);
}
circle(0, 0, 50);
- (CD)The code includes the date made up of day, month and year. It also shows the size,
colour and positioning of the text. I had to figure out how to space the text out along the
box so it wasn’t all squashed to one end. The final line draws the circle to create the
button

Prototypes / Sketches
 Images used

References

The Coding Train (2018) p5.js Web Editor: Uploading Media Files - p5.js Tutorial Available
at: https://www.youtube.com/watch?v=rO6M5hj0V-o (Accessed 2nd December 2021)