Sunday, 25 November 2012

Flippy Clocks

I have always loved the classic flip clock style, and it makes an interesting test for my HTML5/canvas programming skills. This little clock project uses no images, instead it uses 60 hidden canvases to draw the top and bottom halves of the flip cards. These are then assembled into the final clock which appears live on screen.

Wednesday, 14 November 2012

Live Earthquake Monitor - WebGL

Earthquakes, while devastating, are an amazing natural phenomenon. When, where and how deep under the Earth's surface tell us a huge amount about the way the Earth works...

About 18 months ago I made an interactive, live and very informative website mapping recent earthquakes:

This was my first ever interactive website of this type of complexity and I am still very proud of the result! Still, styles change, my programming ability improves and, most importantly, new technology becomes available. This is the all-new updated result:

This new version makes use of WebGL which is a new way of displaying 3D graphics in your browser. This technology is not available in all web browsers yet (it is available in recent versions of Firefox and Chrome) but allows fast, smooth, full 3D graphics. In short it looks beautiful, try it out!

Software used:
Three.js: Excellent javascript library to simplify using WebGL.