You are seeing archived content. We are in the process of creating something new. Visit our new website!

How we made the analog twitter wall

A short description of the software’s architecture.

Author: Michael Schieben
Date: 29. May 2012

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 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.

Click to enlarge

Details of the twitter wall

Before and after processing the pages. See part 4.

The most challenging task was the 'encoding' of the word ACT!ON (the conference motto), which spans across 660 DIN A4 sheets of paper. Therefore each sheet had to appear at a defined position on the wall. This is the initial grid.

The final state after three days of pasting tweets

Built with

Node Modules

Exlipse Plug In


What kind of designer are you?

Find your perfect #designposition!
→ Try it out

Oh, there are 2 comments so far

  1. I don’t even understand how I finished up here, but I
    thought this post was great. I do not realize who you are however
    certainly you’re going to a famous blogger should you are not already.

    Click on 16. January 2014
  2. An impressive share! I’ve just forwarded this onto a colleague who has
    been doing a little research on this. And he in fact ordered me lunch simply because I found it for him…
    lol. So let me reword this…. Thanks for the meal!! But yeah, thanks for spending some time to discuss this topic here on your
    internet site.

    wohnunge on 20. January 2014

Write a comment