Professional Medical & Scientific Blog of Autumn Kulaga

Menu

creative coding

For information aesthetics we are coding our own program which reads a dataset and displays it to the user. I chose to collect taxonomy information from the Integrated Taxonomic Information System. The dataset I collected consists of a list of names starting with the Kingdom ‘Animalia’ down to all Genuses ( I was having trouble downloading a list which included all species, probably because it would be huge). To give more context to the dataset I manually input the levels of ‘Life’ and ‘Domain’. Then I parsed the data ( which was .csv) into strings representing the paths which looked like:

The path is then interpreted and presented to the user as circles which can be moved on the screen. Right now, the placement of circles has no correlation to relationship. Just the idea that larger circles represent more abstract groups of organisms (‘Life’ followed by ‘Domain’) while smaller circles represent more defined groups ( ‘Genus’ ). When the user hovers over a circle the lowest level name of that path is displayed, while the entire path is displayed at the top of the screen.

The program you see above only runs a sample of my dataset, as the entire taxonomic list is ridiculously extensive.

So for my final…

…I decided to continue with this project. I think its great I was able to parse the data, but this isn’t really how I want to display it. I want some sort of relationship between each node and the path be evident. So my goals for the final project are to:

Make the ellipses into spheres, so they are more representative of a 3D space.

Allow the user to rotate in the 3D space.

Display one level at the beginning of the application, then display the contents of a level when a node is clicked (if you click the node again its contents will hide, i.e. a toggle effect).

Arrange the positioning of the nodes, so that appropriate nodes are within proximity of each other ( no longer random placement).

Check and ensure the nodes are not overlapping.

If I have time left, I might try to implement a slider that allows the user to quickly go from displaying just the ‘Life’ node to all nodes… I just really like the idea of having a center node and then others radiating out from this node. I am not sure if I want connection lines. While I think they give better context, I enjoy the chaos within the organization. Because ultimately taxonomy is just a way for us to organize and comprehend the chaos.

I used spheres instead of ellipses ( as he does ). I like how the nodes move along spherical paths (oppose to moving linearly in x, y, z space) and I am hoping this tutorial will help me keep the nodes realative to each other , using undrawn spheres as boundaries.

If anyone has other suggestions for how to improve the first iterative, please share :D! By the end of the semester you should see some progress.

The UIC Innovation Center was an exciting place to be this afternoon. The first informal workshop for the 2011 Processing with Android Mobile Conference. The goal was to get anyone signed up for a workshop, set up in advance. Allowing the presenters to spend more time sharing what they know, oppose to installing software. For those of us who have never used Processing before, an introduction into creative coding was given. The following are screenshots from an example given:

And me just playing around:

This last image shows the program we wrote working in the emulator (a program that shows you how the application would work on the device). When you click the circle would change to white with a black stroke. And wherever you moved your finger, the circle would follow.

The download and install the Android SDK API ( you should only have to install 4.0 and Android 2.2 (API 8)”, select “SDK Platform” and “Google APIs by Google Inc, If you are not sure you can select and install all of them, however its not necessary and will probably only take up more memory space).

Then after you open Processing2 switch from ‘Standard’ to ‘Android’ ( you will see this in the top right, your coding environment will turn green). When you press ‘Run’ the application should open the emulator (If you have an android device, plug it into your computer and try running this way). The first time around the emulator can take a while to load. Then after it loads, you may have to press ‘Run’ another time. Its okay, just press it again and things should work fine ;). It was very nice to have this informal workshop, and a supportive group to help with installation. Sometimes it can easily get frustrating when trying to do these things on my own.

If you need subsequent documentation http://www.processing.org/ is the place to go. I have dipped my toes in multiple coding language pools, and I really think (at least for those who like to crawl before walking without understanding all the mechanics) learning to code in this environment is a good first step (just if you switch to a language more intense understand it will be less forgiving). Happy creative coding!