Maya Irvine – Final Project – Blogpost

by mirvine @ 3:43 pm 11 May 2011

Generative personal icons that use data from to describe an individuals music taste. These icons are meant to provide a quick method for determining musical compatibility, enhancing the social aspect of

This project was largely inspired by developments in the music industry, including Arcadefire’s interactive video for “The Wilderness Downtown”.

I am really interested in the idea that the days on top-down marketing techniques and design are over. People want their visual experiences to be every bit as custom tailored as their music is. It is from this observation that I set about creating a project that would use music to influence design. I had many lofty ambitions, including ideas for custom cd packaging, web app/interface, and logos, but in the end I decided to focus my attention on a single data source,, and single output, icons that can be used to identify music taste.


I was really inspired by the work that is being done in the field of generative print design. There seems to be a very severe split in the design world between those that do digital/interactive work and those that do print, and the two could do a lot more to inform and improve each other. The generative logos for Nordkyn and the MIT Media Lab achieve this particularly well. Nordkyn especially, for tying a graphic so seamlessly to a changing dataset.

I also really liked this project I found on creative applications that uses processing to create patters to be printed on a newspaper. I appreciate the ability to create beauty out of such simple forms and the re-inventing of an old medium.


After our discussions in class I decided that in order to make the generative work I was envisioning, I really needed to work with a data set. I also liked everyone’s input that it would be interesting to work with the transactional aspect of this project, while keeping in mind the idea of “customizable album art for mass production.”

After searching through song databases and looking at alot of web-apps, I decided to use Last.FM.

Last.FM is a site that allows people track what music they are listening too. It also works as an “online personal radio” suggesting songs based on the users past listening. After checking out the API, it seemed like exactly what I needed, a dataset relating to a specific users musical taste.

After looking into using xml and getting a bit discouraged, I found a java binder made by janni kovacs, allowing you to use the Last.FM API with java/processing.

From here I developed a plan for generating simple designs based on user input and retrieval of the genera tags of their most listened to artists, plotted in a circle.

My first task was to tackle the problem of communicating with, and plotting the results.

I was very excited about making this an application on the web. That would allow it to be used by anyone, and solve the problem of gaining access to someone’s Last.FM account. I asked Max about this and he helped me mock up the login link below.

My first iteration of this project tried to manipulate an algorithm to act differently as it drew around the circle, “responding” to the present tags. I wanted to achieve the visual complexity that this so easy to generate when using code and so difficult when designing by hand. I couldn’t figure out a good system for this however, and decided to abandon that idea for one that was much clearer in it’s intent and read.

This was the iteration I had for the final show. It is a lot clearer in it’s intention and people seemed to respond well to inputing their information and returning back a graphic. However, a diagram of the general layout of the tags was needed for it to meaningful. The aesthetic was clearly not right as well. The colors were distracting and the shape was not appealing enough.

For my final iteration I first went back and did some serious re-ordering of the tags list. Getting those into a better, continuous order made thing instantly easier to work with. Next I changed my method of drawing to bezierVertex so I could make a continuous, filled shape. There was a lot of geometry involved with figuring out the curves of the shape in relation to the radius of the circle without overlaps, or loops that quite stumped me, but thankfully spencer came to my rescue on that. I also decided to get rid of all color and just focus on making interesting and meaningful shapes.

The Closer to the edge of the black circle, the more prevalent the genera, and the more frequent the white spikes, the more tags in that “area” of music were found.

Image Documentation



I ended up in a very different place with this project than I originally intended. I think that this was a product of overstepping my abilities as a computery person, but I learned a ridiculous amount and I’m happy with my final product. I’m really interested in the way that traditional design applications can be informed and expanded by computation, often making design more individualized and dynamic, and I got to touch on that process here, wich was a great experience.

I have improved the aesthetic of this project since the final show. I regret that I wasn’t more prepared for presentation on that day as I think my project would have been much better received. I am glad I had time to refine the form of the icon. That being said, there are still several improvements I would like to make. This project is still lacking an online interface which would be the first step to making it an actually usable. I would also like to connected it to a physical form or practical application, otherwise it remains in the world of data visualization, wich was not its initial intent.

These applications don’t have to be complex. The world of music has so many objects attached to it that you can see how a simple shape could be used across a range of items to create a language.

I owe a big thank you to Ward Penney, Paul Richardson, Max Hawkins, Golan Levin, and Spencer Williams for showing me things like iterators, hashmaps, content management systems, ruby, jar file unzipping, collections, proper indenting, and basic geometry.

Thanks for the fab semester!

Icon for your project

Generative personal icons that use data from to describe an individuals music taste.

//Maya Irvine
//Carnegie Mellon University
//Interactive Art and Computational Design Spring 2011
//Thanks to Spencer, Max, Paul, Ward, and Golan for the helps

String myApiKey = “6f74e5f9e8ef323f8d108c71eba6c762”;
String user = “sunnydope”;

HashMap types = new HashMap();
String mostPopularTags[];
Float[] angles;
Float angle;

PFont font;
PFont font2;

void setup(){
size(800, 800);
mostPopularTags = loadStrings(“tags.txt”);

//set up arrays
angles = new Float[mostPopularTags.length];

// load most pop tags
float angle;
for (int i=0; i < mostPopularTags.length; i++) { // angle = (i*0.0174532925)*(2.92682927); angle = 2*PI/69 * i; mostPopularTags[i] = mostPopularTags[i].trim(); angles[i] = angle; types.put(mostPopularTags[i], angle); } println("mostPopularTags: "+mostPopularTags.length); } void draw() { Collection chart = User.getTopArtists(user, myApiKey);
for (Artist artist : chart) {

// for each tag in the artist tags
Collection artistTags = Artist.getTopTags(artist.getName(), myApiKey);

Iterator tagIterator = artistTags.iterator();
for (int i = 0; i< min(3, artistTags.size()); i++) { Tag artistTag =; float angle = getTagAngle(artistTag.getName()); if (angle != 0){ fill(0); font = loadFont("DIN-Medium-12.vlw"); textFont(font, 9); text(artistTag.getName(), width/2 + 300*cos(angle) - 15, height/2 + 300*sin(angle)); // text(artistTag.getName(), width/2, height/2+ angle*20); } } } font2 = loadFont("DIN-Regular-30.vlw"); textFont(font2, 30); textAlign(CENTER); text(user, width/2, 750); // map HashMap tags = new HashMap();
for (Artist artist : chart) {
Collection artistTags = Artist.getTopTags(artist.getName(), myApiKey);
Iterator tagIterator = artistTags.iterator();
for (int i=0; i=lastIndex) {
i-= lastIndex;
repeat = true;
String firstTag = sortedTags[i];

int upperAnchorLimit = 250;
int lowerAnchorLimit = 200;
int controlAngleDifference = 10; // degrees
int controlRadius = 25;

// do a curve bw firstTag and secondTag
float r1 = (upperAnchorLimit-lowerAnchorLimit)*tags.get(firstTag)/maxval+lowerAnchorLimit;
float a1 = getTagAngle(firstTag);
float x1 = width/2 + r1 * cos(a1);
float y1 = height/2 + r1 * sin(a1);

float aC1 = a1+controlAngleDifference*2*PI/360;
float aC2 = a1-controlAngleDifference*2*PI/360;

float cx1 = width/2 + controlRadius * cos(aC1);
float cx2 = width/2 + controlRadius * cos(aC2);
float cy1 = height/2 + controlRadius * sin(aC1);
float cy2 = height/2 + controlRadius * sin(aC2);

if (i==0 && !repeat)

if (repeat)



Float getTagAngle(String tag)
for (int i = 0; i < mostPopularTags.length; i++) { if (mostPopularTags[i].equals(tag)) { return angles[i]; } } return 0.0f; }

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
(c) 2017 Interactive Art & Computational Design / Spring 2011 | powered by WordPress with Barecity