Processing: Learning Time

Last week we were challenged with making a clock in Processing that will display the time and date.

for this it uses 6 basic functions which access the clock on the computer it’s running on:

  • hour();
  • minute();
  • second();
  • day();
  • month();
  • year();

These functions are pretty self explanatory, they look into the system and give you the current values for each of them.

The first step here was making a simple clock for the time. To do this I got made a variable for each hours, minutes and seconds and then the values were converted into strings to the text could be displayed. To display the text a string is formed which combines all the values and then is saved another variable to make it easier to read

String timevalue = hwith0 + “:” + mwith0 + “:” + swith0;

The string is then printed using text() and the background is refreshed each frame to make sure the numbers are written on a clean slate and not on top of each other.

The problem here was for single digit values it only showed a single digit. With the usual clock format we’re used to, it uses 01, 02, 03 etc. until it reaches 10. All credit here goes to Joel Trew for solving this problem simply. It uses an if statement to to check the length of the value of the seconds for example to see if it is equal to one (i.e the numbers 0-9). If this statement is true it then just adds a string (“0”) to the beginning to make them display at the desired 00, 01, 02, 03 and so on.

Screen Shot 2014-10-30 at 16.02.45

Having a basic understanding of how to make a clock i wanted to develop this further by making it into a class so it is neater and easier to read. for this I made a class called time() which took the variables timeX and timeY so when putting it into the main body of code it can easily be placed without editing the class. The clock here uses the same code as above.

Screen Shot 2014-10-30 at 16.15.44

Along with the clock I wanted to display the date, this was simple enough using the same methods as before to get the values from the computer’s clock, convert them into strings and display them as text. Obviously this was too easy and I wanted a little challenge. The first thing I went for was displaying the day of the week alongside the clock. My first thought here was to use an algorithm that worked out what day of the week it was based on the date itself, but this proved to be a lot harder than i thought. I found a Wikipedia article which outlined the methods but they were far too complex and I couldn’t be bothered to work them out.

Then I remembered that Processing is based on Java and that I could just import the utilities I need to use. There is a Calendar java utility which conveniently has a method for finding the day of the week and then give it as a number value. For example today is Thursday and it returned the value ‘5’ meaning it is the 5th day of the week (starting Sunday).

From here I created an array which contained a list of strings which were each the week days starting with Sunday to match the Java calendar. As when accessing an array the first value is 0 I had to subtract 1 from the value the calendar gave me to correct it.

When including this text I thought why not display the month as text as well to keep with the theme. This used the same method of having an array store the month strings and then just accessing them with the month value, but subtracting one to make sure it starts at 0 as with the array.

Having the date display Thursday 30 October 2014 didn’t really roll of the tongue very well so I wanted this to then be displayed as 30th to match the way we usually speak and write the date. The obvious hump here was the ones that stand out, 1st, 2nd and 3rd. The way around this I found was just to use ifstatements to see if the value for the day is 1, 2 or 3 and then add the appropriate suffix to string. An if statement was also used to add a ‘th’ to all the values greater than 3.
Screen Shot 2014-10-30 at 16.32.22

For the sake of simplicity I made the time and date functions in different tabs but still within the same processing document. This meant that the main body where we have our setup and draw is clear and isn’t cluttered with too much text. It was just a simple process of making sure the background is drawn each frame and then the date and time being placed in as the desired coordinates. 
Screen Shot 2014-10-30 at 16.15.20

Obviously the clock here doesn’t look very interesting, but hey it works and took a fair few hours to get my head around making it work. The next step from here is to develop upon this, experimenting with shape and colour like I have before to make a more visually interesting clock. For example I can have it change colour for each second or minute, or change location around the screen. The clock information could also be used to create a visual representation of the time rather than a digital clock, much like an analogue clock. This will be my next course of action to play around with different ideas related to this.

Screen Shot 2014-10-30 at 16.39.25


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: