Week 13 - 19 January 2020

Like lots of teams the Wills product team sets goals at the beginning of each week.

As well as the typical team-based work goals we each also set a personal goal. These have a pretty wide range - some from the last few months: contacting the local MP / running to work everyday / finishing books / learning french / updating websites / gym-going / go to bed on time.

Mine this week was to make 5 clocks.

I love clocks. Particularly on websites. Devices that you view websites on usually have a clock visible on them already - so putting a clock on a website is faintly ridiculous in a fun way. I managed to take my first interview at Farewill on a 10 minute detour about them.

Old BBC homepage with a lovely clock

I always used to love the clock on the BBC homepage from a few years ago (now sadly gone). It felt like a great expression of the brand.

BBC Weather clock

When I was at the BBC myself I was on the Weather team just before a big rebrand launched. I was tasked to look at other ways we could display the weather - of course, one of the early sketches was a clock.

Clockface - by Matthew Sequel Lewis

A few years later I helped my friend Matthew make a website called Clockface (the name is self-explanatory). It’s archived here.

So this week I set myself the goal of making 5 clocks. I wanted to get back into making stuff with code for fun, and this felt like a nice easy way to do it. I used p5.js, a javascript library made for this kind of thing, to get started. It’s got built in functions to grab the time off someone’s computer, and to draw things.

I managed to make 4. Not too shabby. They’re all pretty terrible, but the last one is the least terrible. They’re all very much hacked together too - I’m sure the code would make any developer shudder. But they work.

A clock made with p5js

As well as being the least terrible, the last one I made is also the most economical. It uses the least code, the least colours, the least visual guff. And I like it for that. You can see it here.

Essentially, the hours, minutes and seconds are displayed in text form. They’re all displayed on the same line, but their position on that line is determined by their current value. So they sort of weave in and out of each other.

See the Pen Clock 004 by Victor (@victorhwang) on CodePen.

You can see the other clocks I made on my codepen profile. I’m going to try to keep making clocks, and see where it leads.

If you also love clocks this post from Prof. Golan Levin is a great rundown of a bunch of interesting clocks.

CLOCKS!

← Home