Physics

Physics on first appearance would seem to be one of the most abstract representations amongst my collection of Twitter works, however, it is a fairly straightforward data visualisation with a few twists. The basic logic of representation is much like a graph. Each tweeter appears as a disc featuring their avatar pic, the size of which is determined by the number of tweets made by the tweeter. Complexity grows with the addition of time; the Twitter timeline is replayed as a time-lapse sequence with discs arriving in the order that the tweets were made. A further increase in complexity occurs with the inclusion of physics; new tweeters fall from the top of the browser and bounce amongst the existing pool of tweeters, the discs rotating and jostling for position. You can grab discs and hurl them about the browser, causing explosive collisions and rebounds. Clicking and holding a disc causes it to act like a magnet, attracting all of its associated retweets. And again, there is a satisfying eruption as the retweet discs bustle their way free from the pack to find their magnetic reference disc.

A short video screencast of Physics in use.

While it is certainly satisfying to smash different tweeters about the screen and feel the forces of gravity and momentum at work, the physics simulator does also fulfil a more pragmatic role within the piece. The issue with visualising a large set of differently sized objects, like our collection of tweeters, is how to organise them in an economical way within the confines of the display area. There is much research and literature dedicated to addressing organisational problems such as this but instead of following the stacking algorithms route I used the Box2D physics simulator as a layout engine. Not only can the physics simulator deal with the size and space issue, it also handles dynamic changes in the size and quantity of objects. For example, when changing from Tweets to Retweets, Box2D dynamically repositions all elements to accommodate their changing scale. Box2D is an impressive physics engine and it’s easy to appreciate why it is so widely employed in computer gaming.

physics nav
Changing scale from total tweets to retweets

Working with Box2D adds another layer of abstraction to what is already a fairly crowded context; the web “page” employs HTML to define objects, CSS to style the appearance of objects, Javascript to control the behaviour of objects, and Box2D to determine the positioning of objects. The Box2D engine makes no reference to browser windows or pages and is completely context-independent, working with its own virtual world and coordinates. To position objects on screen the Box2D coordinates need to be translated for the display context. In a web setting designers typically render a scene using the HTML canvas element but in the Physics piece I work directly with the HTML Document Object Model (DOM). Each of the discs is actually a <div> element with CSS border-radius converting the box into a circle. It’s remarkable how good the DOM rendering is, both with regards to frame rate and to image quality (obviously, the larger the browser window the slower the rendering, but sizes under 1200×900 the performance is pretty decent). When viewing the Physics piece on a high resolution Retina screen, all of the objects are rendered with startling clarity and precision. From a graphic design perspective, the combination of physics + DOM is another fascinating evolution of the web “page”.

Links: http://gravitron.com.au/physics | Javascript port of Box2d | jQuery Box 2D version | Stats.js

Comments are closed.