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.

If you look at my Deviant Art account at all, you’ll notice that it is absolutely full of fractal stills. I also had some big A1 and A2 fractal prints on exhibition, as well as an animation, at a recent inter-university festival between QUT and UQ. So I can easily say that fractals are definitely where my love in art is at. Since I first began experimenting with fractals, there has been one particularly big influence in my work, and that has been the work of Scott Draves aka Spot.

Spot’s work has been of interest to me basically since I began working with fractals and it continues to do so.

He has done a lot of work in fractals and started the Flam3, Electric Sheep and Dreams in High Fidelity projects, all of which are quite influential on my work, both in fractals and in other computational arts.

Not all of his work has been focused on fractals, but many of his idea’s share similarities with them. One example of this are his Dub Visuals which take chaotic still images and morph them, to form other still images in a flow similar to that of the evolution of his fractal animations.

I have previously done fractal animations where they are synced with music, both music performed by another artist and music that I have composed myself. However, this hasn’t been done in real time and has been a long process to setup each portion of the animation and sync it up with the music. Ultimately, I would love to develop a way of rendering fractals, even low quality or low resolution fractals in real-time based on audio input. Basically this would be combining the work I have done previously with the basic concepts of what I did for KKB210 where I did a series of lines and boxes that responded to audio input. The lines one was probably getting close, though ultimately no where near as detailed as I would like it to be, and definitely nowhere near as chaotic and fractal-like as I want.

That is my aim though and hopefully I will get to it sooner or later.

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

This semester, I am moving on to KKB211 – Computational Arts 2, so again, this blog will be used as an online portfolio of my development in the area of computational arts. The aim is to develop a series of works by the end of the semester that can be used as exhibition pieces as part of a computational arts exhibition at QUT Kelvin Grove.

It will also act as a process diary to help my keep track of my development and help me filter out the not so good works so I can focus more on the ones that are worth pursuing.

• Audio Responsive Particles.

Portfolio Item 2 -

• Audio Responsive Lines.
  

Portfolio Item 3 -

• Kaleidoscope.

My first experiment is using Java and the Processing development environment. It is based on one of the week 4 exercises we did to create moving boxes that leave a motion trail.

Using this, I have added the mouseX and mouseY inputs to position and resize the box depending on whether the left or right mouse button is clicked.

At this stage I haven’t gotten it to save the position and size of the box.

If neither mouse button is clicked, the box will be small and move around the canvas. As soon as either of the mouse buttons are released, the box will fade back to being small and moving around the canvas.

It is available online here.

int x1, x2, y1, y2;

int boxWidth=250;
int boxHeight=250;
int boxX=100;
int boxY=100;

int r=150;
int g=140;
int b=180;

void setup(){
size(500,500);
}

void draw() {
// Setup the background.
fill(0,0,250,10);
rect(0,0,width,height);

// Setup the motion.
x1 = int(random(6)-3);
x2 = int(random(6)-3);
y1 = int(random(6)-3);
y2 = int(random(6)-3);

// Check if the left mouse button is pressed and do the following.
if (mousePressed && (mouseButton == LEFT)) {
boxX = mouseX;
boxY = mouseY;
boxWidth += x2;
boxHeight += y2;
}
// Check if the right mouse button is pressed and do the following.
else if (mousePressed && (mouseButton == RIGHT)) {
boxX += x1;
boxY += y1;
boxWidth = mouseX;
boxHeight = mouseY;
}
// If nothing is pressed do the following.
else {
boxX += x1;
boxY += y1;
boxWidth = x2;
boxHeight = y2;
}

// Changing colour assignment.
r += int(random(4)-2);
g += int(random(4)-2);
b += int(random(4)-2);

// Draw the box.
fill(r,g,b);
rect(boxX,boxY,boxWidth,boxHeight);
}

The aim of the week 6 KKB210: Computational Arts 1 tutorial is to take the provided example, audio-scrubbing.pd to change the playback speed randomly every 100 milliseconds. I had a lot of trouble with this, not because it is difficult to do, but because I could not get it to run stably on my own computer.

Pd crashes on my computer at varying intervals and there does not seem to be any relation between any of the crashes. Since I won’t be able to work on this on my own computer, and only on the lab computers, I have decided I definitely won’t be using this for my three main works for assignment 3.

Whilst working on this exercise in the lab, I found that Pd was quite simple to use, though, after working in Quartz Composer in the following tutorial, Quartz is definitely a nicer patching program to use, though I am not sure how they compare as far as limitations go.

However, Flex is free, open source, and is written using MXML. It consists of Actionscrupt libraries that give access to the Flash drawing engine and a compiler, however, rather than compiling through the development environment such as in flash, it is done via the command line. Flash is also based more around the time line than Flex.

Flex has similarities to HTML and to my understanding is based on XML, so most of it seems fairly easy to read to me. The Actionscript files are virtually the same as the appearance of the Actionscript files you would use in Flash.

The exercise in the KKB210: Computational Arts 1 week 5 tutorial is based around a “Moon Buggy” and making it jump. We were provided with the basis of it with an Actionscript file, an mxml file and a swf file of what the final solution should look like.

Initially, the buggy moves across the screen, what we have to do though is to make it jump whenever the user clicks with the mouse.

The documentation on the Adobe site is quite useful and explanatory, though it does take a bit of sifting to find what we need.

We didn’t need to make any changes to the mxml file, but the Actionscript was another story.

We end up with a Actionscript file that looks like this:

package
{
import mx.core.UIComponent;
import flash.events.MouseEvent;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.Event;

public class MoonPatrolGame extends UIComponent
{
private var backgroundLoader:Loader;
private var middlegroundLoader:Loader;
private var foregroundLoader:Loader;
private var buggyLoader:Loader;
private var verticalSpeed:int;
private var groundLevel:int;

public function MoonPatrolGame() {

// Call the constructor for the superclass UIComponent
super();

// Load the images for the buggy, the foreground, midddleground and background
backgroundLoader = new Loader();
middlegroundLoader = new Loader();
foregroundLoader = new Loader();
buggyLoader = new Loader();
backgroundLoader.load(new URLRequest(".uploads/flex/MoonPatrolSimple/img/background.png"));
middlegroundLoader.load(new URLRequest(".uploads/flex/MoonPatrolSimple/img/middleground.png"));
foregroundLoader.load(new URLRequest(".uploads/flex/MoonPatrolSimple/img/foreground.png"));
buggyLoader.load(new URLRequest(".uploads/flex/MoonPatrolSimple/img/buggy.png"));

}

public function initialiseGame():void {

// buggy is at groundLevel
buggyLoader.y = 375;

// The buggy stays in the centre
buggyLoader.x = (width / 2) - (buggyLoader.content.width / 2);

// We want to update every frame so we add a listener for ENTER_FRAME events
addEventListener(Event.ENTER_FRAME, drawGame);

// Check for a mouse click
addEventListener(MouseEvent.CLICK, clickCallback);

// Add the background, middleground, foreground and buggy objects to the display list
addChild(backgroundLoader);
addChild(middlegroundLoader);
addChild(foregroundLoader);
addChild(buggyLoader);

// These variables are for making the buggy jump up in the air
verticalSpeed = 0;         // this is the rate at which the buggy is moving upwards (in pixels per frame)
groundLevel = 375;        // this is the y-value of the ground level
}

public function drawGame(event:Event):void {

// Move the background, middleground and foreground at different rates
backgroundLoader.x = backgroundLoader.x - 1;
middlegroundLoader.x = middlegroundLoader.x - 2;
foregroundLoader.x = foregroundLoader.x - 4;

// This makes the the buggy move up and down according to it's vertical speed
if (buggyLoader.y > groundLevel) {
buggyLoader.y = groundLevel;
verticalSpeed = 0;
}
buggyLoader.y = buggyLoader.y - verticalSpeed;
verticalSpeed = verticalSpeed - 1;
}

// This gets called when the mouse is clicked
public function clickCallback(event:MouseEvent):void {
buggyLoader.y = groundLevel - 1;
verticalSpeed = 20;
}

}
}

To see it in action, have a look at the .SWF here. The .mxml is available here, and the .as is available here.

Now, the actual exercise is to take the image variations from the grid of the second file and apply them to each side of the rotating cube in the first. So each side of it will have the same four images with all of the effects and so on applied to them.

For me, rather than playing around with it, the best way to do this was to look at how each of the images had been done on the second file and then apply the same things to the images on the cube. It could easily enough be done using different effects on each side as well as each image, by duplicating the “Render in Image” patch a few times and applying each one to a different side (rather than the same one to each side), and then editing the image effects for each one individually.

The full size screenshots of the macro patches are available by clicking the above thumbnails. The .qtz file is available here, and the Quicktime movie is available here. There is one thing not shown in the above screenshots. When you double click the Render in Image patch, it takes you to four Macro Patches. These patches are the ones that contain the information in the second screenshot above. Each one of them applies to a different image in the grid.