Creative Coding Week 5: Exercise 2 - Digital Clock
A sketch was supplied that displays the current time. Our task was to add some features to allow the viewer to visualise the passage of time. I added the sun and moon, and positioned them according to the time of day. The colour of the sky and ground also changes depending on the time of day.
> View source code for preceding sketch.
/*
* Creative Coding
* Week 5, 02 - Digital Clock
* by Indae Hwang and Jon McCormack
* Copyright (c) 2014 Monash University
*
* Modified by Gerard Holden to add the sun and moon and changing ground and sky colours.
*
* This sketch shows how to use text in Processing
* The sketch creates a digital clock that shows the current time in hours, minutes and seconds
* Use the 'h', 'm' and 's' keys to enlarge the hours, minutes or seconds in the display.
*
*/
PFont myFont; // font data
char selected; // what is selected (h,m,s)
int gap; // gap between digits
CelestialObject sun;
CelestialObject moon;
void setup() {
size(750, 600);
myFont = loadFont("Frutiger65-Bold-200.vlw"); // load the font from this sketch's data directory
textFont(myFont); // set the current font to myFont
selected = '0';
gap = 100;
noStroke();
sun = new CelestialObject(color(255, 255, 0), 100, width/2, height/2 + 50, 300, 0);
moon = new CelestialObject(color(255, 255, 255), 100, width/2, height/2 + 50, 300, PI);
}
void draw() {
boolean isDaytime;
color groundColour;
color skyColour;
float hod = hour() + minute()/60 ;
// float hod = second() % 24; // Simulates a day in 24 seconds for testing purposes
if (hod < 6 || hod > 18) {
isDaytime = false;
groundColour = color(20, 45, 20);
skyColour = color(0);
} else {
isDaytime = true;
groundColour = color(75, 245, 65);
skyColour = color(70, 250, 225);
}
// Draw in the right order so that the sun and moon appear on top of the sky but are
// hidden by the ground when they are below the horizon.
// Draw sky
background(skyColour);
// Draw sun and moon
sun.drawCelestialObject(hod);
moon.drawCelestialObject(hod);
// Draw ground
fill(groundColour);
rect(0, height/2, width, height/2);
// Draw time
fill(128);
// draw h, m, s
drawNumber(hour(), selected == 'h', -gap, 0);
drawNumber(minute(), selected == 'm', 0, 0);
drawNumber(second(), selected == 's', gap, 0);
color c = color(selected == 'h' ? 255 : 0, selected == 'm' ? 255 : 0, selected == 's' ? 255 : 0);
drawBanner(c, 10);
}
/*
* drawNumber
* takes an integer and draws it offset from the centre of the screen by
* offsetX and offsetY. If big is true then use a big size for the type.
*
*/
void drawNumber(int number, boolean big, float offsetX, float offsetY) {
String theText = str(number); // convert number to string
if (big)
textSize(400); // set big font size
else
textSize(20); // normal font size
float textW = textWidth(theText) * 0.5;
float textA = textAscent() * 0.375;
// draw text offset from the centre of the screen
text(theText, width/2 - textW + offsetX, height/5*4 + textA + offsetY);
}
/*
* drawBanner
* draw a coloured banner at the bottom of the screen in the supplied colour
*/
void drawBanner(color c, float w) {
noStroke();
fill(c);
rect(0, height - w, width, w);
}
void keyReleased() {
// set selected to be the last key released
selected = key;
}
/*
* Class: CelestialObject
* The class is used to draw the sun and moon.
*/
class CelestialObject {
color objColour; // The colour of the object
float objRadius; // The radius of the object itself
float orbitCentreX; // The centre of the object's orbit
float orbitCentreY; //
float orbitRadius; // The radius of the object's orbit
float orbitOffset; // The orbital offset - used to delay the moon by 12 hours
// The constructor. All the object's attributes are passed in to the constructor *
CelestialObject(color inColour, float inRadius, float inX, float inY, float inR, float offset) {
objColour = inColour;
objRadius = inRadius;
orbitCentreX = inX;
orbitCentreY = inY;
orbitRadius = inR;
orbitOffset = offset;
}
// Draw the object. The position is determed by the hour of the day, which is passed in as a parameter
void drawCelestialObject(float hourOfDay) {
float x = orbitCentreX + orbitRadius * sin(-hourOfDay/24 * TWO_PI + orbitOffset);
float y = orbitCentreY + orbitRadius * cos(-hourOfDay/24 * TWO_PI + orbitOffset);
noStroke();
fill(objColour);
ellipse(x, y, objRadius, objRadius);
}
}
The sketch supplied in the course material follows.
> View source code for preceding sketch.
/*
* Creative Coding
* Week 5, 02 - Digital Clock
* by Indae Hwang and Jon McCormack
* Copyright (c) 2014 Monash University
*
* This sketch shows how to use text in Processing
* The sketch creates a digital clock that shows the current time in hours, minutes and seconds
* Use the 'h', 'm' and 's' keys to enlarge the hours, minutes or seconds in the display.
*
*/
PFont myFont; // font data
char selected; // what is selected (h,m,s)
int gap; // gap between digits
void setup() {
size(1024, 600);
myFont = loadFont("Frutiger65-Bold-200.vlw"); // load the font from this sketch's data directory
textFont(myFont); // set the current font to myFont
selected = '0';
gap = 300;
noStroke();
}
void draw() {
background(0);
fill(255);
// draw h, m, s
drawNumber(hour(), selected == 'h', -gap, 0);
drawNumber(minute(), selected == 'm', 0, 0);
drawNumber(second(), selected == 's', gap, 0);
color c = color(selected == 'h' ? 255 : 0, selected == 'm' ? 255 : 0, selected == 's' ? 255 : 0);
drawBanner(c, 10);
}
/*
* drawNumber
* takes an integer and draws it offset from the centre of the screen by
* offsetX and offsetY. If big is true then use a big size for the type.
*
*/
void drawNumber(int number, boolean big, float offsetX, float offsetY) {
String theText = str(number); // convert number to string
if (big)
textSize(400); // set big font size
else
textSize(20); // normal font size
float textWidth = textWidth(theText) * 0.5;
float textAscent = textAscent() * 0.375;
// draw text offset from the centre of the screen
text(theText, width/2 - textWidth + offsetX, height/2 + textAscent + offsetY);
}
/*
* drawBanner
* draw a coloured banner at the bottom of the screen in the supplied colour
*/
void drawBanner(color c, float w) {
noStroke();
fill(c);
rect(0, height - w, width, w);
}
void keyReleased() {
// set selected to be the last key released
selected = key;
}