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.

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

• Setting up the blog portfolio using WordPress.

Tutorial 2 – Week 3 – Impromptu

• Introduction to Impromptu.
• Making a MIDI Based Piano Using Scheme and Impromptu.
• Making a Drum Machine Using Scheme and Impromptu.

Tutorial 3 – Week 4 – Processing

• Introduction to Processing.
• Drawing a Box in Processing.
• Motion in Processing.
• More Controlled Motion in Processing.
• Trails and Smoother Colour Changes in Processing.
• Images in Processing.
• Tennis/Pong in Processing.

Tutorial 4 – Week 5 – Flex

• Introduction to Flex and Moon Buggy.

Tutorial 5 – Week 6 – Pure Data

• Introduction to Pure Data (Pd).

Tutorial 6 – Week 7 – Quartz Composer

• Introduction to Quartz Composer.
• More Complicated Patching in Quartz Composer.

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.

Our first exercise was to make a rotating cube and apply the provided Marilyn painting to each side in a different colour. This was reasonably easy as the colours could all be controlled just by changing the settings in the cube Patch Inspector.

We simply had to create the cube, apply an interpolation to it, and add an image importer that sent the image to each side of the cube. After entering the cube Patch Inspector, each side could have it’s colour quickly and easily changed and appear through the image of Marilyn.

The .qtz file is available here and the Quicktime movie is available here.

We did not work on the challenge in class, instead we looked at bringing in a picture to use as the background and creating tints.

I won’t put up the full source code here, you will have to have a look at the Java applet for all of it, but I will have a look at how to do tints.

Tints are really quite easy to implement. They work the same way as fill works for a rect object, except that it tints the colour of the photo to whatever you specify.

So, the syntax is the same as fill(), it is tint(red,green,blue,alpha).

When using it, it looks like this:

tint(0,153,204,100);
image(laptop,0,0,width,height);

From what I learned earlier in the other parts of the tutorial, it was pretty easy to figure out how to put in the image as the background.

As you would have noticed with fill, by using the alpha channel, you can modify the opacity, so if you were to change the fourth tint() parameter to say 10, it gives the ball and paddles trails. This can of course be adjusted to a suitable length simply by changing the level of opacity.

Have a look at the Java applet.

Note, only one paddle works.