Project Description

A homage to Lars von Trier’s 2011 film Melancholia, I created this piece as an experimental work using the popular JavaScript 3D library, Three.js (View the page live here – modern browsers only, full-screen recommended). Using a scene with 2 spheres, a particles system, a virtual camera and some lights, the piece is rendered in HTML5 canvas using WebGL. Users are able to zoom in and out of the scene and look at the orbiting planets from all angles. On the left of the screen, users will find a “Is there anybody out there” button. When pressed, the small panel above the button displays live tweets fetched from Twitter that have the word ‘melancholia’ (please note this feature is currently not functioning as Twitter has recently made changes to their API – come back soon and I’ll get it back up!).

This was an experiment rather than a finished product, however, this project got me excited about the possibilities of working with 3D animation natively in the browser. It also got be thinking about how users can actually engage and interact with an animation and how this new technology can allow users to take control of the view, and even the story, of an animated work.

Technology: HTML5, CSS3, Three.js, Javascript
Launch Project here: Melancholia