Trix Algorave

After a month of trying to run clojure REPLs and trying to get quil to talk to overtone I was ready for my first livecoding performance. Trix algorave was a great event to meet like minded people talking about code, music and creativity.
Using quil means I was doing graphics and I was supporting the music of bohrbug. The hardest part was getting two computers to be in sync on both sound and music. I could use some insights on that.
For now we were using OSC and two separate SC servers. I have a hunch that running one SC-server for both music and visuals could greatly improve the sync and the amount of data that can be shared realtime between the two interfaces. Any ideas on that are likely to be moderated very quickly ūüôā

The evening was continued with Insomniark en Exoterrism both using pure supercollider and hardware controllers for quickly interfacing with the code to be concluded with a streamed set from Alex McLean. That last set showed of an impressive coding style, both fast and well executed clearly showing experience is important…

some images:

KaOSbeat & Bohrbug @ trix algorave
screen cap output from 2/3rds into the set
screen cap output from 2/3rds into the set
Exoterrism at the knobs and insomniark’s hardware in front of it
Alex McLean Live from UK

onto the next algorave Here’s the full code repo for the visuals and the full set on youtube below (atm without sound, hope to get the recording ASAP)

designing a 2D cityscape in processing

For the mix office redesign I designed a magnetic and writable wall (9.6 by 2.4m) but to just have an empty white board, well that would be a bit boring so I added a cityscape at the border, generated by processing, and the “oblique sky” clouds formed by the words of Brian Eno’s Oblique Strategies, also generated by processing. Both ideas were developed through trying and testing and getting immediate (visual) feedback while coding. At each run of the code, I took a snapshot. Next Time, I’ll look into autocommiting with a tag in github so I can link snapshots back to the right code. If you put the snapshots in a little movie, you can see the evolution of the idea and also the mistakes along the way ūüôā

Feedback was given from the oblique strategies themselves as they hinted me to try other things when I saw them rendered on the screen.

Code on github

obique sky


Final result


inspiring drawing by a colleague


do it

dataviz using physics (part2)

I quickly added real data to the visualisation so now what you see actually means something. Every circle represents 20 persons either older or younger then 20 living in muide-meulestede-afrikalaan, a district in Ghent, Belgium.

before the toggle
before the toggle

Then I made a toggle button to make kids take up more space. Also in areas with less open space an extra factor will make them even bigger. The results seem readable to me and the toggle makes it easy to compare between not taking additional parameters (open space &demographics) into account and taking the extra info into account.

after the toggle

But who am I to decide over the importance of kids and open space… let’s add sliders.

with sliders

The sliders let the user decide which parameters are important and get immediate feedback. neat!

code at github.



Dataviz using box2D

Data. We’re creating more of it every day then ever before. Big companies are using your data it and you might (not) be happy with what you get in return. anyway they are crunching your big data come up with big numbers or even a score for your profile.

Besides not being very transparent about the¬†algorithms¬†most of the time, they create a currency you need to trust based on a gut feeling, but that’s another story.

A good trend is more and more governments and institutions are opening up their datasets to let the public access their data. Whether it is because a governments is legally obliged or a company/institute believes it can benefit from opening up their sources, we have access to some data to play with.

I’ve been reading up lately on the subject of data, and I went to¬†where I was inspired.¬†@flowingdata¬†also compiled a nice list of blogs/sites on the subject on his site.

Working with visual data has always been of interest:

Armed with a Silicon Graphics Indigo 2 Extreme desktop workstation with R4400 processor, four gigabyte hard drive, and 128 megabytes of RAM, Borchers uses IRIS Explorer an interactive 3D data visualization system to analyze data. The team’s datasets range in size from four to 20 megabytes (based on foot scans producing 300,000 points in x-y-z spatial datasets). 1999 web 1.0 link

Now that I have 128Mb of ram I thought I should give it a go. I chose processing as I used it before for different tasks and it’s is a good protoyping tool used by dataviz pro’s to make stuff like cascade¬†(built by @blprnt ¬†at @nytlabs). Besides that, I recently had a nice re-intro to processing ¬†by @vormplus¬†and I followed a workshop @p5Ghent.

If you’re interested here are some other tools as well

Having just missed the Ghent appsforghent challenge it felt a bit odd at first to use the sets, but I’m a local, and you should think local(but act global, which is why this post in in English).

The Idea

An interactive explorative tool that allows you to visualise data on a map (of (part of) Ghent)

I wanted to express the fact that this particular place where I live is crowded, densely populated and this is why I started thinking about using physics. Particles bumping into each other, fighting for space.

This is far from finished but I thought I’d share this already.

It’s on github, next up is giving kids more space by mapping the demographic¬†pyramids¬†on this data and making the particles representing kids bigger. With the press of a button I could show what impact building a new¬†high-rise¬†flat will have in a certain area.

The user could set the desired sq meters of outdoor area per capita and see which neighborhoods are comfy and which are crowded. Much more thing a possible, but also a little more time is needed.

Right now it reads in map data from an SVG file, converts those shapes to box2D entities and populates them with particles.

the small points mean < 1 person!

The screenshot isn’t using the correct data yet but you don’t need a lot of imagination to see that it has more potential then the original

just using a map to display map related is a start and while that is an option on the site (which is a great source of info btw, well presented and all that)¬†this static mapping doesn’t really say a lot. It’s crowded. period.

The exploration

I’m just using this example to explore the possibilities of using physics for making sense to data. This doesn’t¬†necessarily¬†mean you need to map phyisical properties to your data that in real life exhibits the same properties. I can imagine ¬†that if you need to sort certain types of data it could make sense to let them have a¬†different¬†density so some data floats while other would sink, while you’re actually¬†visualizing eg.¬†twitter vs. facebook.

to be continued

extracting earth earth’s entropy for generating aliens

I need to fill a lineair space and generate a continuously evolving series of abstract drawings. All this to fill up some leftover space at the office (to make it less boring). In particular a 30 cm (1ft) high space below the windows. This stretches along the windows and is quite long.

To avoid repetetivity, I chose to seed the algorithm with somewhat random data in the form of a series of pixels extracted along the image of the earth.


I work at a hi-tech internet  innovation research institute but are in no way affiliated to Silicon Valley, we came up with the idea of connecting Ghent with a line to silicon valley, the result, is not that interesting to show, but it is a line, one pixel wide. It is however an interesting series of pixels, where neighbouring pixels are related.

but what to  to with pixels.

It’s not an awful lot of data. A color, an RGB value(3 times 8 bits), a¬†sequence¬†number perhaps, maybe the relation to the¬†neighbor? Does it within a certain threshold have the same amount of blue, green and red? Or does it represent a bump? As it comes from a terrain map, maybe ¬†it can represent an altitude. not sure yet.

But what I was looking for was more something that contains enough data to allow to generate specific images

You’re looking at it, just above this sentence. after parsing the pixel color data from it, half an alien is generated according to this procedure.


which is then mirrored and completed. Repeat this for every pixel and you get a lot of different aliens, first 25 of the above line, pictured below

[processing code]

* aliens

PImage lijn;
int px = 0;
int pxmax = 5;
int offsetY = 0;
int alienSize = 160;

void setup() {
size(pxmax*alienSize, pxmax*alienSize);
lijn = loadImage(“lijn.png”);

void alien(color code, int px){
//int Rr = Integer
int offsetX = px – (pxmax*offsetY) ;

rect((offsetX*alienSize),(offsetY*alienSize),alienSize, alienSize);

String alienR = Integer.toBinaryString(parseInt(red(code)));
alienR = “0000000” + alienR;
alienR = alienR.substring(alienR.length()-8);
String alienG = Integer.toBinaryString(parseInt(green(code)));
alienG = “0000000” + alienG;
alienG = alienG.substring(alienG.length()-8);
String alienB = Integer.toBinaryString(parseInt(blue(code)));
alienB = “0000000” + alienB;
alienB = alienB.substring(alienB.length()-8);
for(int i=0;i<8;i++){

for (int col = 0 ; col < 4; col++) {
for (int row = 0; row < 8; row++){
if(col == 1) {
String[] alienRArray = alienR.split(“”);
if(parseInt(alienRArray[row+1]) == 1) {
rect((col*20)+offsetX*alienSize, (row*20)+offsetY*alienSize, 20, 20);
rect(((7-col)*20)+offsetX*alienSize, (row*20)+offsetY*alienSize,20,20);
if(col == 2) {
String[] alienGArray = alienG.split(“”);
if(parseInt(alienGArray[row+1]) == 1) {
rect((col*20)+offsetX*alienSize, (row*20)+offsetY*alienSize, 20, 20);
rect(((7-col)*20)+offsetX*alienSize, (row*20)+offsetY*alienSize,20,20);
if(col == 3) {
String[] alienBArray = alienB.split(“”);
if(parseInt(alienBArray[row+1]) == 1) {
rect((col*20)+offsetX*alienSize, (row*20)+offsetY*alienSize, 20, 20);
rect(((7-col)*20)+offsetX*alienSize, (row*20)+offsetY*alienSize,20,20);
if(offsetX == 4){
void draw(){
color code = color(red(lijn.pixels[px]),green(lijn.pixels[px]),blue(lijn.pixels[px])) ;
alien(code, px);

[/processing code]


This is a big one. It’s a packet analyzing network sniffer that outputs crazy rhythms, mapped to crazy sounds. We (me and @0xtosh) set it up at HAR2009 were people could log in to a linux VM, run some scripts, ours or their own, to scan the network and netglitch broadcasted a shoutcast stream to which you could tune into to listen to your own packets.

about a glitch

Accidental art, a glitch of the system. Only mildly intended to happen, secretly hoping for it, once in a while it happens. I was lucky enough to have my camera around! It’s a picture of my screen displaying a crashed c64 game, for which I fail to remember the name, emulated on a Dreamcast console.

blender augmented reality

Various techniques and software exists to bring more interaction and integration with reality. As this is a fairly new domain most of the projects are still in research phase. Some are already easy to implement, like motion tracking based on colorful objects or camera motion based on movements (accelerometers and other sensors). Blender is a good experimentation environment because it’s open and you can interface it with virtually everything using python.

some things already look stable and usable, like levelhead. This application is more then a proof of concept. It proves interesting new concepts are possible using these techniques. The tools are getting easier to use and  the CPUs and GPUs are finally up to realtime processing and rendering.

current usable tools include:

  • osgart: a library that simplifies the development of Augmented Reality or Mixed Reality applications by combining the well-known ARToolKit tracking library with OpenSceneGraph.
  • ARToolKit: a software library for building Augmented Reality (AR) applications. Open source, with professional support from artoolworks inc. if needed.
  • Studierstube Tracker: a computer vision library for detection and pose estimation of 2D fiducial markers. It looks great, but it’s not open source.
  • libraries for processing: by Bryan Chung
  • MotionTrack: by akta (Marco Rapino)
  • GridFlow: A Multidimensional data flow processing library for PureData, designed for interactive multimedia
  • Voodoo: A tool for the integration of virtual and real scenes, not intended for real time processing
  • Eyesweb: for gestural analysis, could be used to get feedback from the reality,¬† speaks OSC

BlenderTrack Image based tracking BGE Demo from mike pan

If you know of good tools in the AR-area, please leave a note. Once the workflow is on track the developing of applications will be easier. Combining gestural data with 3d modeling tools so real time animation of 3D-models using the body of an actor as input is one that comes to mind. Another one could be to overlay your newspaper with interactive data, like graphs or models of the new product being reviewed. Already mobile phone apps exist that let you view additional information about Landmark X when you point them at Landmark X. But also advertising comes to mind. Or using it as a try before you buy tool. Imagine you could put that new sofa¬† on the spot where you always wanted it, without having to move it, assemble it and then notice the colors don’t match… just don’t try to sit on it.

call for papers just announced a call for papers for there conference in December. They offer a very broad view over the generative art concept, from music to urbanism and everything in between. They also offer all papers from previous conferences for donwload at the site.