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!

The design itself is now finished. Unfortunately though, since I’ve widened the main content section a fair bit, it’s put some of the individual posts out, such as images behind code sections. Actually, mainly images behind code sections. I’ve gone through and cleaned up all of the ones I’ve found so far. If you happen across any that are still out, it would be greatly appreciated if you could leave a comment on the post to let me know.

Something new I have incorporated with this theme is my Twitter stream, running down the bottom right of the page. I’ve had it running on my other blog, Still as Life, for a while now, figured it’s about time to put it it on here too. My tweets are more web design oriented than computational arts, and even more so just what I’m up to in general. So when I am working on something, I’ll usually be tweeting about it, be it web design, computational arts or something else. Follow me if you are on Twitter and want to keep up to date on what I’m doing and my latest projects.

The background image I have used is a still from the output of one of my recent Quartz Composer audio visualisations. I’ll be putting it up here when I get a chance, along with a couple of variations on it.

Have a great one!

I’ve been pretty quiet on here the past few months unfortunately as I have been pretty busy, though if you follow me on Twitter, I am relatively alive. Hopefully you’ll be seeing a few more blog posts from me soon as I’ve got a number of things on the go, and a few things finished that just need to be written up.

I’ve been playing with Quartz Composer a fair bit and have a few new audio visualisers for you coming fairly soon, along with a new design for this blog based on one of these visualisations, so keep an eye out for it soon! The graphic design is almost finished, so hopefully I’ll get it all done up and live in the next week or two.

For a bit of a look at what I’ve been up to for Christmas and new years, have a look at my other blog, Still As Life and leave your comments about what you’ve been doing too.

Have a fun and safe holiday everyone, and enjoy 2009!

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.

An audio file can be played, paused, rewound, and fast-forwarded. The left and right audio channels as well as beats and the overall volume are taken and used to colour a mandelbrot fractal. The left and right audio channels generate a series of lines that change speed and direction based on the audio peaks. The centre of the fractal has a constraint on it based on the beats, so as the amount of beats increase, it will freeze and stay still while the outer area of the fractal, which appears as a background continues to animate around it. And yes, it is meant to have the lines through it.

The keyboard controls for playback are:

Play: P
Pause: S
Fast-Forward: F
Rewind: R
Restart: H
Stop: Q

A note on these playback options, at the moment, ‘Q‘ will actually close the link to the song file, so this should not be used unless it is needed. Attempting to start the song again with ‘P‘ after ‘Q‘ has been used will cause Processing to error. I haven’t gotten around this as of yet unfortunately.

To replay a song from the start, press ‘H‘ and this will return the play head to the start of the file.

Rewind ‘R‘ and fast forward ‘F‘ skip the track back and forward by 500 milliseconds, so ‘R‘ should be used in place of ‘H‘ if you don’t want to return to the start of the song.

The source code is a little bit different to previous versions as I have added a class for keyPressed to determine what to do if the control keys are pressed:

// Create the controls.
void keyPressed()
{
if ( key == 'p' ) song.play(); // Press P to play the song.
if ( key == 's' ) song.pause(); // Press S to pause playing.
if ( key == 'h' ) song.rewind(); // Press H to reset to the start.
if ( key == 'f' ) song.skip(500); // Press F to fast forward.
if ( key == 'r' ) song.skip(-500); // Press R to rewind.
if ( key == 'q' ) song.close(); // Press Q to quit playing.
}

It’s all fairly straight forward, the Minim library is very simple to use and there are some great tools in it that you can play with. I highly recommend it if you are working with audio in Processing.

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 9mb to load so you probably don’t want to try it on a low speed connection.

The full source code is available from the same page as the applet, or you can see it after the jump:

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

FFT fft;

AudioPlayer song;
BeatDetect beat;

float fSize;

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

// Start Minim
Minim.start(this);

// Set the length of the sample buffers.
song = Minim.loadFile("freedom.mp3", 512);
// Uncomment song.play() to play the song as soon as the environment loads
//  song.play();
beat = new BeatDetect();

float fSize = 20;
// Tell the FFT the buffer size and sample rate.
fft = new FFT(song.bufferSize(), song.sampleRate());
}

// Create the controls.
void keyPressed()
{
if ( key == 'p' ) song.play(); // Press P to play the song.
if ( key == 's' ) song.pause(); // Press S to pause playing.
if ( key == 'h' ) song.rewind(); // Press H to reset to the start.
if ( key == 'f' ) song.skip(500); // Press F to fast forward.
if ( key == 'r' ) song.skip(-500); // Press R to rewind.
if ( key == 'q' ) song.close(); // Press Q to quit playing.
}

void draw()
{
background(0);
// Run a mix FFT
fft.forward(song.mix);
fill(255);

loadPixels();

// Maximum number of iterations for each point.
float maxiterations = 200; // Lower renders quicker
float xmin = -2.5;
float ymin = -2;
float wh = 2;

// Detect the beats in the song mix
beat.detect(song.mix);
// Iterate fSize based on beats.
if ( beat.isOnset() ) fSize += 0.1;

// Restrict fSize to create variation when the beat count gets too high.
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++) {

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;
if(aa + bb > 16.0f) {
break;
}
n++;
}

// Colouring pixels using the left and right audio channels - song.right.get(i) etc.
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();
}

// End Minim after the song finishes playing.
void stop()
{
song.close();
super.stop();
}

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.

Sound energy mode just looks for spikes in the audio mix levels and returns a boolean response of true when a spike occurs.

Frequency energy mode allows you to look at particular frequency bands and use their output the same way you would the output of sound energy mode.

I decided to have a play with the sample code using frequency energy mode that is provided in the documentation to figure out how to control it and so on.

The sample code checks the frequency bands for the snare, kick/bass drum and high hats and then has text for each one that responds to the audio input for their particular band.

I didn’t do anything overly complex with this as of yet, just changed the objects that are manipulated to boxes rather than text so I could get an idea of of what does what.

Here is the code that I ended up with after my changes:

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

class BeatListener implements AudioListener
{
private BeatDetect beat;
private AudioPlayer source;

BeatListener(BeatDetect beat, AudioPlayer source)
{
this.source = source;
this.source.addListener(this);
this.beat = beat;
}

void samples(float[] samps)
{
beat.detect(source.mix);
}

void samples(float[] sampsL, float[] sampsR)
{
beat.detect(source.mix);
}
}

AudioPlayer song;
BeatDetect beat;
BeatListener bl;

float kickSize, snareSize, hatSize;

void setup()
{
size(512, 200);
smooth();
Minim.start(this);
song = Minim.loadFile("song.mp3", 1024);
song.play();
// a beat detection object that is FREQ_ENERGY mode that
// expects buffers the length of song's buffer size
// and samples captured at songs's sample rate
beat = new BeatDetect(song.bufferSize(), song.sampleRate());
beat.setSensitivity(300);
kickSize = snareSize = hatSize = 16;
// make a new beat listener, so that we won't miss any buffers for the analysis
bl = new BeatListener(beat, song);
}

void draw()
{
background(0);
fill(255);
if ( beat.isKick() ) kickSize = 32;
if ( beat.isSnare() ) snareSize = 32;
if ( beat.isHat() ) hatSize = 32;
stroke(255);
strokeWeight(kickSize);
rect(width/4, height/2, 20, 20);
stroke(255);
strokeWeight(snareSize);
rect(width/2, height/2, 20, 20);
stroke(255);
strokeWeight(hatSize);
rect(3*width/4, height/2, 20, 20);
kickSize = constrain(kickSize * 0.95, 16, 32);
snareSize = constrain(snareSize * 0.95, 16, 32);
hatSize = constrain(hatSize * 0.95, 16, 32);
}

void stop()
{
// always close Minim audio classes when you are finished with them
song.close();
// always stop Minim before exiting
Minim.stop();

// this closes the sketch
super.stop();
}

For this to work, make sure you have an MP3 or Wav file in a data folder within the sketch directory for this sketch and change song.mp3 to the filename of your song.

I’ve since taken the code from that guide and combined it with a mandelbrot fractal from the Processing tutorials and references. At the moment, the mandelbrot doesn’t really do anything near like what I want it to do, but I am making some progress in figuring out what I can do with Minim and how I can use it for what I want to do.

Initially I took the frequency spectrum and used it to colour parts of the mandelbrot. To start with I only manipulated the red colouring of the fractal to see what would happen which gave me this (you may need to scroll to the right in some places sorry):

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

AudioPlayer song;
FFT fft;

float xmin = -2.5;
float ymin = -2;
float wh = 4;

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("song.mp3", 512);
song.play();

// 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);

loadPixels();

// Maximum number of iterations for each point on the complex plane
int maxiterations = 200;

// 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;  // Bail
}
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*16 % 200, n*16 % 100);
x += dx;
}
y += dy;
}
updatePixels();
}

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

To make the above work, you’ll need to put an MP3 or Wav audio file in a “data” directory within the sketch folder for this sketch and change song.mp3 to the name of your audio file. You can see 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).

It will run a series of lines of various lengths and thicknesses at varying speeds based on the input of the audio file.

Considering how cool this was looking, I decided to add the left audio channel for the green colouring to see what would happened, so I modified the colouring to the following:

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*16 % 100);

This is actually really cool, if you run an audio track through it that has a distinctively different left and right channel you get much more variation in the colouring and it appears to be synced more with the music.

If you try the above, you’ll get reds coming through for the right channel, greens coming through for the left and yellows where they overlap. Since you have two different sets of lines, you can see them change with each channel, rather than only with one channel, this is why it seems to be synced up better, and the colour changes help with this since the colours match the left and right mix. You can see 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).

Adding the second colouring control in also makes colour variations immediately around the main parts of the mandelbrot more prominent, and as they change it makes the fractal appear to be behaving like it is encircled with flames.

This does make the background blue though rather than grey which I don’t like too much since the fractal doesn’t stand out as much with the blue background as it did grey.

I decided to change the colouring again slightly, this time using the audio mix to control the blue colouring. I used the right audio channel again, no particular reason really. So this is what my colouring looks like now:

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));

You can see 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 has the same left and right channel variation and effects as the previous version, but it changes the colours slightly, the lines are now variations or predominately green and purple with a black background. This makes the mandelbrot stand out much more than before, but it also makes the appearance of flames around the fractal much more prominent as they are now blue closest to the fractal and shades of purple the further out you go. This looks really cool and makes the flames even more realistic (except for the colouring of course) and the flames now appear to reach out further making them stand and their variations stand out more.

I have been going through the Quick Start Guide which is very useful and having finished it, I have a Processing sketch that will playback a file and display the audio spectrum and waveforms which is pretty cool. I can see how I should be able to use the audio controls to manipulate an image, so I think I’m going to start having an experiment with applying the similar concepts to other images.