Gerard Holden

creative coding

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;
}

					
				

Copyright © 2014 Gerard Holden. All rights reserved.