Category: Data Visualisation

Sometimes an idea for a generative art project starts with data, a mathematical rule or something I’ve deliberately gone looking for.

This one started with an ornament sitting on my desk.

It’s one of those liquid motion ornaments filled with coloured sediment, oil and air. Turn it over and gravity takes care of the rest. The different materials slowly separate, collide and flow past one another, creating landscapes that exist for a few seconds before disappearing.

I’ve always found them strangely fascinating.

A little bit of 90s nostalgia

I remember seeing these sorts of things in gift shops while we were on holiday when I was much younger, particularly during the 1990s.

They’d be alongside lava lamps, plasma balls and all the other slightly odd things that seemed impossibly interesting at the time.

My dad always took a particular fancy to these liquid ornaments. I can remember stopping to look at them and watching the sand and oil slowly make their way from one side to the other.

There was something compelling about the fact that you didn’t really control what happened. You simply turned it over and watched.

Years later, I’ve somehow ended up with one sitting next to my computer.

And while watching it recently, I started wondering:

Could I recreate some of that behaviour with code?

Looking closer

Taking a few close-up photographs made the ornament considerably more interesting.

From a distance, you see flowing purple sediment.

Up close, there’s much more going on.

Tiny particles collect into dense areas before thinning out into clouds. Oil forms bubbles of wildly different sizes. Those bubbles gather into groups and channels. Sediment flows around them. Fine gold particles occasionally collect along boundaries, while elsewhere large areas remain almost completely empty.

It started to look less like a desk ornament and more like an abstract painting.

That became the starting point for the Processing experiment.

Building the system

I didn’t particularly want to reproduce the ornament literally. The aim was to identify some of its behaviours and use them as rules for generating something new.

I started with a 1600 × 1600 pixel white canvas and a limited palette derived loosely from the ornament: blue, purple, magenta and a contrasting sediment-like gold.

Rather than drawing large solid shapes, the colour is made from thousands of tiny particles.

Each particle starts somewhere within a larger group and moves across the canvas according to a flow field.

A simplified version of the idea looks something like this:

float n = noise(
  x * flowScale,
  y * flowScale
);

float angle =
  n * TWO_PI * 2.9;

x += cos(angle) * speed;
y += sin(angle) * speed;

I’m using Perlin noise here because completely random movement quickly looks exactly that: random.

Noise gives neighbouring particles similar instructions. Instead of visual static, thousands of individual dots begin to form currents, folds, waves and larger structures.

That’s where the experiment became much more interesting.

Making bubbles into obstacles

Initially the bubbles were simply circles drawn over the finished artwork.

Visually it worked, but physically it didn’t make much sense.

Looking again at the real ornament, the bubbles are part of the system. Material has to move around them.

So the bubbles became obstacles within the simulation.

When a particle approaches a bubble, its normal direction is altered. An outward force stops it entering the circle while a tangential force encourages it to travel around the circumference.

Conceptually, it became something like:

float nx = dx / distance;
float ny = dy / distance;

float tx = -ny;
float ty = nx;

vx += tx * tangentForce;
vy += ty * tangentForce;

vx += nx * outwardForce;
vy += ny * outwardForce;

The result was unexpectedly effective.

Instead of bubbles merely appearing on top of the artwork, streams started dividing around them. Groups of bubbles produced channels. Pigment accumulated around their edges and then rejoined further downstream.

Suddenly the bubbles were helping to create the composition.

Gold behaves differently

The gold became another little experiment within the experiment.

I didn’t want it evenly distributed throughout the image. In the physical ornament it feels more like a sediment: something heavier that collects in particular places.

So the gold particles have their own behaviour.

They follow the same underlying flow, but respond more strongly to bubble boundaries and have a chance of being deposited when they get close to an edge.

if (edgeDistance < 8) {

  if (random(1) < 0.035) {
    deposited = true;
  }
}

It’s a tiny rule, but across thousands of particles it produces occasional concentrations and thin gold trails.

I particularly like that I don’t decide exactly where the gold appears.

The system does.

Controlled, but not designed

That’s probably my favourite aspect of this project.

I’m choosing the palette, particle density, noise scale, bubble sizes, forces and probabilities, but I’m not actually drawing the final composition.

Every regeneration produces a different result.

Some are balanced.

Some are chaotic.

Some contain huge empty areas.

Some become almost completely overwhelmed by colour and bubbles.

And occasionally one appears where everything happens to come together.

There’s something pleasingly similar about that process to turning over the original ornament and waiting to see what happens.

From simulation to artwork

Once I started getting outputs I liked, I realised they worked surprisingly well away from the Processing window.

At 1600 × 1600 pixels they’re naturally suited to square digital artwork, but the detail also makes them interesting as prints.

I’ve experimented with them as large square framed pieces, groups of three prints, desktop artwork and phone wallpapers. Cropping into the images also reveals smaller compositions that I hadn’t deliberately created.

That opens another interesting possibility: generating at a much larger resolution and treating the resulting image almost like a landscape, finding compositions within compositions.

The artwork could equally become animation. Instead of saving the final particle paths, the movement itself could become the work: pigment slowly flowing around bubbles, separating and collecting before eventually settling.

Back to the desk

What I like most is how circular the whole experiment feels.

A fairly simple ornament sitting beside my computer reminded me of being on holiday in the 90s and watching these things with my dad.

Thirty-odd years later, I’m looking at the same object and wondering how its behaviour can be translated into Perlin noise, particles, collision detection and Processing.

The finished images aren’t really simulations of oil and sediment.

They’re interpretations of it.

Gold, sediment, waves and oil — translated from something physical into a set of rules, then handed back to chance.

Using Java, live microphone input and three-dimensional forms to create a visual response to bird song.

I wanted to explore how bird calls could be translated into something visual using code.

The finished Processing sketch listens through the computer’s microphone, analyses the incoming frequencies and uses them to control a grid of transparent 3D boxes. As the sounds change, the depth, rotation and colour of the boxes change with them.

The idea

The starting point was a simple question: what might a bird call look like?

I did not want to draw the bird itself or display the sound as a conventional waveform. Instead, I wanted the audio to control a collection of geometric forms.

I chose transparent keyline boxes because they could respond in several ways without becoming too visually heavy. Each box can change its depth, position, rotation and colour, allowing the grid to develop into a constantly changing three-dimensional structure.

The inspiration

Bird calls contain a surprising amount of variation. Some are short and sharp, while others are slower, lower or more repetitive.

I wanted to use these differences as data rather than trying to recreate the sound literally. The code establishes a set of visual rules, but the bird calls determine what happens within them.

This creates a balance between a controlled system and the unpredictable nature of a live recording.

The process

The project was created in Processing using Java and the Processing Sound library.

The sketch accesses the computer’s default microphone and listens to the surrounding environment in real time. It separates the incoming sound into low, middle and high-frequency ranges before applying those values to the grid.

Each range has a different influence:

• Lower frequencies create deeper, heavier movements.
• Middle frequencies control much of the general activity.
• Higher frequencies respond to sharper calls and details.
• Overall volume controls the strength of the reaction.
• Frequency levels also influence the keyline colours.

The audio values are smoothed before they reach the visual system. Without this, every small change in the microphone signal would make the boxes jump too abruptly.

The microphone sensitivity is set for normal recording levels and can be adjusted while the sketch is running. The code also measures the general background noise, helping the visual response remain useful in different environments.

Development

Stage one: using recorded audio

The first version used a saved audio file.

This was helpful during development because I could replay the same sound while adjusting the frequency ranges and testing how the boxes responded.

It confirmed that the basic idea worked, but every result was tied to the same recording.

Stage two: using a live microphone

I replaced the audio file with live input from the computer’s microphone.

This made the project feel much more immediate. The visual structure now responds to whatever is happening around it at that particular moment.

A quiet environment creates a restrained arrangement of boxes. Bird calls produce sharper movements and changes in colour, while voices, music and other background sounds create entirely different results.

Stage three: refining the boxes

During development, I experimented with solid shapes and smaller blocks placed inside the main boxes.

These versions became visually heavy and distracted from the overlapping structure. I returned to transparent cuboids drawn entirely with coloured keylines.

Because the boxes have no filled surfaces, their edges remain visible through one another. This creates a more complex sense of depth while keeping the individual forms simple.

Stage four: tuning the response

One of the most difficult parts was finding the right microphone sensitivity.

If the response was too low, quieter calls produced very little movement. If it was too high, normal background noise caused the whole grid to react constantly.

I added adjustable sensitivity and background-noise detection so the sketch could respond more naturally in different recording conditions.

The outcome

The finished project is a live visual interpretation of bird calls and the surrounding soundscape.

Every result is created from the same grid and the same set of rules, but the composition changes depending on what the microphone hears.

The structure can also be rotated using the mouse, making it possible to explore the generated forms from different angles. The animation can be paused when an interesting arrangement appears.

What I learned

This project showed me that audio does not need to be represented as a waveform.

By dividing the microphone input into frequency ranges, I could use a single sound source to control several visual properties at once. Depth, rotation, movement and colour can all respond differently while remaining connected to the same recording.

I also found that simpler forms created the strongest results. Removing the solid surfaces made the overlapping lines and three-dimensional structure much easier to see.

Most importantly, the project demonstrated how code can translate something temporary, such as a bird call, into a visual experience.

What’s next?

I would like to test the project with different bird species and compare the visual results.

Each species has its own rhythm, pitch and pattern of calls, so it would be interesting to see whether these differences create recognisably different structures.

I would also like to experiment with recordings made in different habitats and at different times of day. A woodland at dawn should produce a very different response from a garden, wetland or urban environment.

Another possibility would be to improve the frequency detection so the sketch can react more precisely to individual calls while ignoring unrelated background noise.

Final thoughts

This began as an experiment in making bird song visible through code.

Java provides the rules, the microphone supplies the data and the surrounding sounds create the changing composition. Although the visual system remains consistent, the result is never quite the same twice.

I like that the project does not attempt to illustrate a bird or reproduce its call literally. Instead, it creates a visual response to the rhythm, frequency and energy of the sound.