obj_streamgraph-generator: iOS Streamgraph Library

February 7th, 2012 § 0 comments § permalink

Recently, I’ve been playing around with Streamgraphs aka stacked graphs aka stacked area charts. One of the first examples for this type of chart with a bigger traction was the New York Times’ The Ebb and Flow of Movies that showed box office receipts in a very organic and fluid form (which of course makes it also hard to read – but it’s enough to get a rough idea of what’s going on).

In the scientific realm, Lee Byron and Martin Wattenberg discussed Streamgraphs in detail in their excellent 2008 paper Stacked Graphs – Geometry & Aesthetics. Lee Byron also provided an open-source version of the Streamgraph code that he had used for the paper.

Based on that code I’ve created an Objective-C version of the Streamgraph code, geared towards iOS (i.e., iPad, iPhone). You can find it in this github repository. The main work went into changing the Processing/Java-code to Obj-C (not having typed arrays is a pain), and I also produced a demo app that displays Streamgraphs on iPads (uncomment lines in the viewDidLoad-method of the ViewController for other layouts/colors). Here are some examples:
Streamgraph Layout
Stacked Layout
Themeriver Layout

Now, take that code and build something beautiful with it. And let me know if you find bugs :)

HowTo: Remote control iOS Spotify from your couch

August 29th, 2011 § 0 comments § permalink

At the moment I like to do my working/coding from the couch, but listen to music via my iPod Touch that’s running the Spotify app and is connected to the stereo. Unfortunately, the iTouch is conveniently out of reach, so if I want to change the song or playlist that’s running I’m out of luck (or rather: have to get up and walk all the way to the stereo to change it). Of course, there are dedicated (aka pricey) solutions by Sonos with remote controls to provide this functionality, but I’m happy with my iPod. So what do?

Spotify’s constant synchronization to the rescue: It’s trivially possible to remote control a running Spotify app using a playlist.

  1. First, I launch Spotify on both the iPod Touch and my laptop.
  2. I then create a new playlist (in this example called my_remote_playlist), add one or more songs and start the playback on the iPod.
  3. The contents of the playlist are constantly synchronized, so if I now add songs using Spotify running on the laptop, all changes are reflected in the iPod version of the playlist. Once the iPod is done playing one song it takes the next one from the latest version of the playlist (instead of the original one).

This provides me with a play queue where I can drop new songs at will and have them played immediately. Of course, this is just a workaround: no skipping of songs or stopping playback and I always have to keep the playlist filled with songs otherwise it runs out and I have to get up to press play again.
But the nice thing is that it works across all devices running Spotify (I also tried the Android version and a desktop PC).
And if you want to know what song you just heard, check out your listening history on last.fm – don’t you just love these hacks?

The battle for Spotify dominance

May 30th, 2011 § 1 comment § permalink

I have a Spotify premium account which allows accessing their whole music catalogue with a smartphone, but restricts this use to only one device (so either desktop or mobile). If I try to listen to music on my iPod touch and someone presses play in the desktop client I get this, not very subtle, warning:

Similarly, the desktop client stops the music and shows this when the mobile client tries to play a song:

The interesting thing is that when a client tries to play a song and the account is already in use it succeeds and blocks the other client in the process.

While actually more of a nuisance, this interplay of the Spotify clients has an interesting side-effect for my girlfriend and me: When she’s at home listening to music and I switch on Spotify’s mobile version we often delve into clicking battles for Spotify dominance: Whoever keeps on pressing play the longest gets to listen to music. We have various strategies (e.g., letting the other one listen for a minute or so, giving him/her a false sense of victory, then cutting off the music). Sometimes we also act in this dilemma like good little prisoners and cooperate. I’m not sure what the intention behind this unusual behavior of the clients was, but it allows this very strange form of non-verbal communication and social snacking.

Music Hackday: Flowlist

February 15th, 2011 § 0 comments § permalink

I had a great time this weekend at New York’s very own Music Hackday. An impressive number of people spent 24 hours churning out all kinds of fascinating music applications. And that was well possible thanks to all the great APIs available for this type of data – and of course also the great environment at General Assembly with foods and drinks provided by the sponsors.

My hack is called flowlist and it is an interactive web-based playlist generator. The basic idea is taken from my paper “Rush: Repeated Recommendations on Mobile Devices” (last year at IUI, PDF, Video). In a nutshell: The listener selects an initial seed song, gets a set of five similar items, select one of these, gets a set of five similar items again and so on.
Rush 1

Rush: Repeated Recommendations on Mobile Devices

By doing that, you can quickly create a somewhat personalized playlist which gives you some advantage over fully automatic playlist generators (that allow only so much customization) and, of course, fully manual playlist building (just think of your 60 GB of music..). Rush also had a fairly unique way of navigating the results: Once you pressed on the touchscreen, the virtual canvas containing the songs started flowing into the opposite direction and songs were selected by simply touching them (the Video makes it clearer).

So, flowlist (try it in your browser right here or watch the video) works similarly: You first enter a search term and are then presented with the top three results from echonest.
flowlist intro

flowlist gives you echonest’s top results for your query

Based on this “seed song”, flowlist uses echonest’s excellent API to determine similar songs on the fly. These songs are then shown towards the right and by pressing the mouse button the virtual canvas again starts flowing and lets you select songs simply by crossing them with your cursor.
flowlist - flow

Based on your last selection, flowlist shows similar songs

Once you think that the playlist is big enough, you can export the playlist by hovering over it which presents you with options for exporting it: Right now, there’s plain text available but flowlist also let’s you export the playlist to Spotify via Playlistify. That was also the part that took me the most time – an easy API for playlist exporting is still lacking from the whole music API circus. And, of course, having a streaming service that gives you music based on URIs and lets you play them in the browser app would have been even better – but that’s a different story.

Flowlist is written mostly in processing and ported to the browser with processing.js. I also used some jQuery for accessing the various APIs, but flowlist is running right in the browser.

All in all: Wonderful time at Music Hackday, lots of fun and great people. Can’t wait for the next one!

UPDATE: Flowlist now has support for Grooveshark widgets. So, create a playlist and click on the little Grooveshark icon in the lower right of the screen to create a widget. Be warned, though, the support is still a bit buggy – if something goes wrong, just try again.

HowTo: Processing.js in iOS

February 5th, 2011 § 5 comments § permalink

Processing.js is a great Javascript-port of the processing language that has reached the version 1.0 milestone a few months ago and allows the easy creation of visually-appealing interfaces. Plus, being based on Javascript and HTML5 it promises the mythical ‘Write once, run anywhere’, even on mobile devices that don’t support Java.

For a recent multi-platform visualization project I wanted to use processing.js so I wouldn’t have to write everything twice. Unfortunately, however, getting processing.js to run on the iDevices doesn’t seem to be that easy. Projects like iProcessing run processing code on the iPhone, but only there (the regular desktop webbrowser version needs additional work). There also exist dedicated rewrites of processing.js that bring with them the disadvantage of every fork: For every update of processing.js, the wrapper also needs one.

Fortunately, it is pretty easy to use any version of processing.js on iOS simply by using a suitable HTML skeleton. Necessary steps are:

  1. Transform touch events to mouse events
  2. Keep MobileSafari from scrolling/zooming

First, we have to let the processing-canvas catch all touch events, so we can call the corresponding processing-functions. We do that simply by adding the corresponding event handlers to it:

id="sketch" data-processing-sources="sketch/sketch.pde" width="320" height="480" autofocus></canvas>

Then, we have to write some javascript that converts the touch coordinates to processing’s internal mouse coordinates. We also want to call here the corresponding mouse-function (mousePressed for touchStart and so on). Finally, we also have to keep MobileSafari from using the touch events for scrolling, which is done by calling event.preventDefault() for each event:

<script type="text/javascript">

var processingInstance;

function setProcessingMouse(event){
if (!processingInstance) {
processingInstance = Processing.getInstanceById('sketch');

var x = event.touches[0].pageX;
var y = event.touches[0].pageY;

processingInstance.mouseX = x;
processingInstance.mouseY = y;

function touchStart(event) {

function touchMove(event) {

function touchEnd(event) {

function touchCancel(event) {


Here is the complete HTML-skeleton. Make sure that you have processing-1.0.0.min.js in the same directory (you can download it from processingjs.org) and a processing-sketch in ‘sketch/sketch.pde’.

Some caveats: Multi-touch is not supported (all touches beyond the first are ignored) and advanced processing features such as video or 3D probably don’t work. But you can use this barebone-HTML to get your processing-sketches on the web – on all devices.

SubversiveBox: Your own Dropbox for Subversion

January 19th, 2011 § 0 comments § permalink

Dropbox is a great service for using a file repository without the usual hassle of committing and updating (and actually knowing far too much about computers) and they even give you 2GB for free. But understandably, more space costs (the smallest upgrade is currently 10$ for 50GB).

I’m not in the mood for paying when my university gives me a (practically) unlimited SVN-repository for free. As manually committing changes is inconvenient, I decided to write a script that would do that for me.
Some similar approaches that I found while looking for something like it:RubyDrop is a Dropbox-Clone based on Ruby and git (so no SVN), and here’s a similar project for Linux (just syncing, no repository).

The result is SubversiveBox, a small console application that keeps track of your working copy and immediately submits changes. You can download a compiled version here. It needs the SVN command-line tools to work.

It’s very basic, but also very simple to use: Just launch it with

SubversiveBox path username [password]

and it will do the rest. Path is the path to your working copy, username and password are the credentials for your repository. Be careful though, it doesn’t support folder renaming and is still in a very early stage: it might easily get confused and scared and stop working (doing backups of your important files would probably be a good idea – as it always is). Also: It’s open-source, so you can easily fix bugs yourself (yay)!

Have fun!

Where Am I?

You are currently browsing the hacks category at Augenmusik.

  • noise

    Error: Twitter did not respond. Please wait a few minutes and refresh this page.