Javascript, Members, Processing, Scripts
Leave a comment

re:publica 2012 analogue twitter wall by Precious – 38,378 printed tweets

republica_02 copy

For re:publica, one of Europe’s largest conferences about social media, blogging and the digital society, Precious design studio created an analogue twitter wall to deter visitors from their usual stares at the digital screens by bringing the virtual to the physical space and creating action around it. During the course of 3 days a total of 38,378 tweets appeared on the wall.

Printing out tweets and pasting them on a wall was one of the first ideas they had. It also inspired everything else they developed for the conference – signage, video trailer, stage design etc. The 14 x 3 meter scaffolding construction was erected in the central area of the location to become “live” twitter coverage on layers of A4 printed paper. Even though everything worked out as planned, there was something beyond their control: the reactions of 4000 attendees. Not only did visitors enjoyed reading the tweets but also a lot of them posted their own tweets just to photograph them being physically present on the wall.

The software behind the twitter wall was separated into 5 parts, which gave them the flexibility to pause and modify each part independently while the installation was running. Each part kept track of their own job-queue. The most challenging task, Michael Schieben describes,  was the ‘encoding’ of the word ACT!ON which span across 660 DIN A4 sheets of paper. Each sheet of paper had to appear at a defined position on the wall.

Using Node.js + nTwitter the team listened to Twitters Streaming API and collected all tweets with the conference hashtag #rp12. They parsed the entities of each tweet and saved mentions and hashtags to be analysed later. Users could register by sending the hashtag #action once. Tweets were analyzed on a per minute basis and saved to a local database. Each rendering job was done with wkhtmltopdf ‘printing’ HTML, delivered by a local express.js sever, to pdf. Using HTML to layout the tweets added speed and flexibility in the design process and easily gave the team the chance to use different kinds of typography. As tweets were laid out in different sizes they implemented a client-side page breaking algorithm in JavaScript that placed the tweets on pages and send the information of which tweet appeared on what page back to server. The team used this information to keep track of which tweets were rendered and how many pages were used by one rendering job. This allowed them to keep tweets and pages in chronological order and define the position of a page on the wall.

The generated pdf was spilt into single png images for post-processing, which was done by a custom Processing app. The app created copy aesthetics and artifacts which formed the letters ACT!ON that span across the wall. The shape of the letters were defined as svg. The Processing App scaled, transformed and clipped the SVG-path to match on sheet of paper. The path was then turned into a mask to filter and multiply the image of the page. The processed pngs got bundled into an pdf (to speed up the communication between computer and printer) that was then send to the printer.

Built with Node.js and Processing

Node Modules included expressJadenode-mysqlntwitterSteptwitter-text-jsUnderscore.jsUnderscore.string and watch.js.
Ghostscript, ImageMagickCUPS and Twitter Streaming APIs

Project Page