• Anthony Mattox New Media Art Design – http://www.anthonymattox.com/
• Daniel Shiffman – http://www.shiffman.net/
• Flight 404 by Robert Hodgin – http://www.flight404.com
• Feltron, by Nicholas Felton – http://feltron.com/
• 50 Great Examples of Data Visualisation – http://www.webdesignerdepot.com/2009/06/50-great-examples-of-data-visualization/
• Live Plasma – http://www.liveplasma.com/
• Twittearth – http://www.twittearth.com/
• Mapping the Blogosphere – http://datamining.typepad.com/gallery/blog-map-gallery.html

Basically the difference is that now the crotchets are split down into semi-quavers, and from there the metro goes into a counter and to the LED’s which are lit up as the counter counts through them on each beat of the metronome.

Aside from that it remains very simple in what it does – just does it in a slightly more interesting way. I’ll put up some more interesting things done in Max/MSP/Jitter soon, promise.

You can download the Max patch here.

I decided to start off with a halo generator to create a similar effect to a lens flare which I then built on with audio input from the MacBook Pro’s built-in microphone to make it a more interesting effect. Adding in a replicate in space which chances direction over 8 replications gives it the appearance of movement amongst itself, again making it a bit more interesting, but what I really like about this is that it turns it into a colourful iris, which I really quite like.

When the audio is fairly quiet, the iris is small and fades in and out. As the audio volume increases, the iris grows and changes colour.

It can be downloaded here, you are welcome to have a look and play around with it as you like! Just remember, like everything else on this website, it is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 Australia License. So anything you do with it must attribute me as the original artist, me, be shared under a share alike license and cannot be used commercially.

This has been done in Quartz Composer for OS X 10.5 Leopard, so it may not work correctly on Tiger. I don’t think I’ve used anything that was new in Leopard, but I’m not sure. So if you are using Tiger, good luck!

I’ve rendered a video which is now up on YouTube to give you an idea of how it looks.

The screen recording here has taken the mic input and used it for the animation. The song used in this recording is “Deflated & Alone (GE Abondoned mix)” by George_Ellinas from http://ccmixter.org/files/George_Ellinas/19174 under a Creative Commons Attribution 3.0 License.

At the moment, it is great for a little while, but unless the music is constantly changing, the interest is lost as it begins to show similar patterns repeating themselves. If you have a look at the Quartz Composition, it’s a pretty simple one really, so I’m sure there is plenty more I can do with it yet to make it that bit more interesting for a bit longer!

This isn’t a fractal, but I think it does re-create the appearance quite well.

The video quality isn’t even close to the live render quality, but it gives you a good idea of it.

The screen recording here has taken the mic input and used it for the animation. The song used in this recording is “August (Reggae Rework)” by el-B from http://ccmixter.org/files/elB/16075 under a Creative Commons Attribution Noncommercial 3.0 License.

You can download the Quartz file here, note though that while this will open in Tiger, it will not render correctly, OS X 10.5 Leopard is required for it to run correctly.

It should also be noted that the video above was rendered on a Macbook Pro with an Intel Core 2 Duo 2.4ghz with 2gb of RAM and an 8600m GT and it averages 5 frames per second, so to really experience the full potential of this, it needs to run on a Mac with a fairly powerful video card like a Mac Pro, the iMac’s and new Macbook Pro’s should also render it quite nicely.

The reason it is so intensive is because there are a number of iterator and replicate in space patches along with LFO’s and interpolator’s that are affected by both the audio volume peak and the audio spectrum, so depending on the volume and the type of music, the visualisation develops more variation.

What I have created here is floating plasma that slowly floats from the bottom to the top of the screen and accumulates at the top. Audio input is taken from the microphone and combined with an LFO so that it is constantly varying between the base colours that the LFO covers and then other colours dependent on audio spikes. The audio input is also used to make the plasma “shy”, that is, as the input volume increases, the plasma starts to get smaller and disappear until the volume starts to subside again, then it comes back.

The basis of this is created with a Quartz Flame Image patch, ideally, I would have liked to redo this with a more controllable particle system, but that is for another time.

Download the Quartz Composer file here. Note that this requires OS X 10.5 Leopard. It will not work in Tiger as I have used patches that were not available in Tiger.

Check out the video below which shows the visualisation running with the song “Wired but Disconnected” by duckett.

import ddf.minim.*;
import ddf.minim.analysis.*;

FFT fft;

AudioPlayer song;
BeatDetect beat;

float fSize;

void setup()
{
size(300, 300);

// always start Minim first!
Minim.start(this);

// specify 512 for the length of the sample buffers
// the default buffer size is 1024
song = Minim.loadFile("freedom.mp3", 512);
song.play();
beat = new BeatDetect();

float fSize = 20;
// an FFT needs to know how
// long the audio buffers it will be analyzing are
// and also needs to know
// the sample rate of the audio it is analyzing is
fft = new FFT(song.bufferSize(), song.sampleRate());
}

void draw()
{
background(0);
// first perform a forward fft on one of song's buffers
// I'm using the mix buffer
//  but you can use any one you like
fft.forward(song.mix);
fill(255);

loadPixels();

// Maximum number of iterations for each point on the complex plane
float maxiterations = 200;
float xmin = -2.5;
float ymin = -2;
float wh = 2;

beat.detect(song.mix);
if ( beat.isOnset() ) fSize += 0.1;

fSize = constrain(fSize, -10, 10);

ymin = -1;
xmin = -1.5;

maxiterations = maxiterations + fSize;

// x goes from xmin to xmax
float xmax = xmin + wh;
// y goes from ymin to ymax
float ymax = ymin + wh;

// Calculate amount we increment x,y for each pixel
float dx = (xmax - xmin) / (width);
float dy = (ymax - ymin) / (height);

// Start y
float y = ymin;
for(int j = 0; j < height; j++) {
// Start x
float x = xmin;
for(int i = 0;  i < width; i++) {

// Now we test, as we iterate z = z^2 + cm does z tend towards infinity?
float a = x;
float b = y;
int n = 0;
while (n < maxiterations) {
float aa = a * a;
float bb = b * b;
float twoab = 2.0 * a * b;
a = aa - bb + x;
b = twoab + y;
// Infinty in our finite world is simple, let's just consider it 16
if(aa + bb > 16.0f) {
break;         }
n++;
}

// We color each pixel based on how long it takes to get to infinity
// If we never got there, let's pick the color black
if (n == maxiterations) pixels[i+j*width] = 0;
else pixels[i+j*width] = color(n*(song.right.get(i)*50) % 255, n*(song.left.get(i)*50) % 200, n*(song.right.get(i)*30));
x += dx;
}
y += dy;
}
updatePixels();
}

void stop()
{
song.close();
super.stop();
}

In this version I have used the BeatDetect class and another variable, fSize with a constraint on it and then added to the maximum iterations. This allows the frequency spectrum to spread through the mandelbrot fractal, or appear to anyway. It is actually just using the frequency spectrum to colour the fractal, and this makes it appear like spectrum is forming the fractal.

You can have a look at it in action here. The song used in this piece is “Freedom (Waking Mix)” by vo1k1 2008 – Licensed under Creative Commons Attribution Noncommercial (3.0).

This is fairly CPU intensive, so many computers will have trouble running this, it is also about 13mb to load so you probably don’t want to try it on a low speed connection.

The feedback was part of a practice peer review, but he went into some detail on how i could fix up my current code so that the lines follow on from each other and how to reduce the load on the CPU per cycle with the same effect. The advice is greatly appreciated.

View the new version online here.

The changes and source code are after the jump.

Originally I had:

float x = random(width);
float y = random(height);
float x2 = random(width);
float y2 = random(height);void setup()
{
size(400, 400);
strokeWeight(10);
smooth();
background(100);
frameRate(12);
}

void draw()
{
x += int(random(width*2)-width);
y += int(random(height*2)-height);
x2 += int(random(width*2)-width);
y2 += int(random(height*2)-height);
stroke(random(255));
line(x, y, x2, y2);
}

Now I have:

float x = random(width);
float y = random(height);
float x2 = 0;
float y2 = 0;
float tempx = 0;
float tempy = 0;

void setup()
{
size(400, 400);
strokeWeight(10);
smooth();
background(100);
frameRate(12);
}

void draw()
{

x2 = random(-width, width);
y2 = random(-height, height);
stroke(random(255));
line(x, y, x2, y2);
x = x2;
y = y2;
}

The main changes are assigning the results of the random set of coordinates to the original coordinates with:

x = x2;
y = y2;

These variables (x, y) were assigned 0 values initially and this is then replaced by the new coordinates at the end of every draw() cycle.

The other main change is the reduced load on the CPU with:

x2 = random(-width, width);
y2 = random(-height, height);

This is in place of:

x2 += int(random(width*2)-width);
y2 += int(random(height*2)-height);

Thats about it, ideally I should fix the colour changes as well so that they aren’t sharp changes with each line, but a gradual fade from one to another. I’ll see how I go experimenting with that and throw it up here as well when I get a chance.

Walking lines are effectively randomly generated paths that the lines follow to create a random image.

I have been using Processing for this particular focus. Thus far I have random lines, however they don’t follow any particular path as of yet. This is effectively still walking lines as the position of the lines is added to and built on. Unfortunately this actually draws a new line every frame that is not necessarily joined to the line from the previous frame.

Have a look at it online here.

The code used to do this is extremely simple and just involves a few random variables based on the width and height of the canvas. I don’t believe this is entirely stochastic because the randoms are tightly controlled, but it is random within its boundaries (unless you want to get into the nitty gritty of it, which I don’t).

The source code is available after the jump.

void setup()
{
size(400, 400);
strokeWeight(10);
smooth();
background(0);
}

void draw()
{
float r = random(0, height);
float x = random(0, width);
stroke(r, 100);
line(random(r), random(width), random(x*2), random(height));
}

The file, dancing_balls.qtz is online here.

I have mostly fixed this now, it does still occasionally happen but not too often and in general it responds to all audio better than it did before. It is more sensitive overall.

There are some changes to the rotations as well so now there is more variation in how the lines appear, including the illusion of a horizon, so there is a lot more randomness to it.

I have also gone through and added in notes to make it easier to figure out what does what later on, also so anyone looking at it can figure it out relatively easily.

The Quartz Composer file, responsive_lines_2.qtz is available here.

It requires input via the built in mic in Macbook’s or iMac’s. It can of course be changed to accept audio input from the microphone-in, or line-in on Mac Pro’s or Mac Mini’s. With the right plug-in, it can also accept input from iTunes.

The most ideal is via line-in or microphone in as this gives the most control over what exactly the graphics are being synchronised with. However, using the built-in microphone means that no extra accessories are required.

Note that this was done using  Quartz Composer in Leopard.