How we made the analog twitter wall

A short description of the software’s architecture.

For an introduction and video documentation of the project, have a look at this blog post

Since we couldn’t test the installation as a whole and there were a lot of issues we couldn’t control or anticipate, we constructed the software behind the analog twitter wall with great flexibility in mind. We separated it into 5 parts that we could pause and modify independently while the installation was running. Each part kept track of their own job-queue.

Part 1: Reading Tweets
Using Node.js + nTwitter we listened to Twitter’s streaming API and collected all tweets with the conference hashtag #rp12. We parsed the entities of each tweet and saved mentions and hashtags. Attendees at the conference could register themselves by sending the hashtag #action once. Their following tweets were displayed bigger.

Part 2: Analysing Data
This piece of the software analyzed the tweets on a per minute basis. It determined and saved all the information necessary for laying out the pages. The script counted the tweets per minute, analyzed local trending topics (based on the conference hashtag), picked a top tweet by follower count and a tweet containing a photo.

Part 3: Rendering Pages
We used HTML to layout the tweets and statistics. This added speed and flexibility in the design process and made it easy for us to use different fonts. Linotype supported us by providing a set of webfonts from fonts.com which we used to set the top tweets.

Since we displayed tweets in different sizes, we implemented a client-side page-breaking algorithm in JavaScript placing the tweets on pages and sending back the information about the position to the server. We used this information to keep track of which tweets were rendered and how many pages were used by one rendering job. That allowed us to keep tweets and pages in chronological order and define the position of a page on the wall (which was essential for the encoding of the word ACT!ON).
With wkhtmltopdf the HTML layout, delivered by a local express.js server, was “printed” to PDF.

Part 4: Processing Pages
A custom Processing app split the generated PDF file into single PNG images for post-processing. The app created copy aesthetics and artifacts forming the letters ACT!ON. The shape of the letters was defined as SVG. The Processing app scaled, transformed and clipped the SVG-path to match the sheet of paper. By turning this path into a mask, we could filter and multiply the image.

Part 5: Printing
To speed up the communication between computer and printer, this last part of the application bundled the processed PNGs into a PDF file before sending it to the printer.

 
Built with
Node.js
Processing

Node Modules
express
Jade
node-mysql
ntwitter
Step
twitter-text-js
Underscore.js
Underscore.string
watch.js

Other
Exlipse Plug In
MySQL
wkhtmltopdf
Ghostscript
ImageMagick
CUPS

Handling
HTML, PDF, SVG, PNG