Soulwire » Generative

Noise-Reactive Particle Sphere

Soulwire — Wed, 23 Feb 2011 11:01:06 +0000

I’ve been trying to find more time lately to experiment with C++ and get more familiar with the OpenGL API and to achieve this have been using the excellent Cinder library. I’m a complete C++ novice and, coming from a Flash background, it’s immediately apparent how much of the hard work had been done for you in higher level languages like AS3. Learning about pointers, memory allocation and fumbling your way around undescriptive compile errors is bit of an eye opener, although thankfully libraries like Cinder and OpenFrameworks help take a lot of the pain out of the transition and ultimately function as very exciting and inspiring tools to work with.

Up until now I’ve been keeping most of these experiments to myself (although some crop up on my Flickr stream from time to time), but I’ve decided to start sharing the processes when I can – so that you can tell me what I’m doing wrong and teach me the right way! Or, if you’re like me and are used to languages like AS3, JavaScript and Processing / Java, but are wanting to take your creative coding into other environments; maybe you can learn a little bit from what I’ve been trying.

Either way, the Noise Sphere experiment, though not particularly original; made me realise that the processes involved spanned many of the key aspects of programming that I’m both interested in but also keen to learn much more about.

The plan is to release a series of relatively quick tutorials, taking you through the process of creating the sketch you can see in the video above (and far beyond, into OpenGL shaders etc) and in doing so cover roughly the following topics:

Setting up Cinder
Geometry: Vectors & Matrices
Movement & Dynamics
Procedural Mesh Generation
OpenGL: GLSL, Vertex & Fragment Shaders

I’m certainly not claiming to be an expert in these topics, in fact in some I’m only just getting started. But my hope is that I can share my discoveries as they happen and pass on knowledge I’ve picked up from the community, in case it helps other developers travelling along similar trajectories to myself. I’ve found a lot of amazing resources for learning, but have often felt that some of them would benefit from being translated for interactive developers such as myself, who come from more of a creative than technical background.

Pester me if part one isn’t out soon!

What The Fuck Is My Mashup?

Soulwire — Mon, 07 Feb 2011 16:56:46 +0000

The fruits of a Sunday hangover; What The Fuck Is My Mashup? is an idea generator for ridiculous (but sometimes plausible) mashups.

Inspired by What The Fuck Should I Make For Dinner by Zach Golden, WTFIMM is a simple JavaScript based randomiser that takes a series of templates and a corpus of words and turns them into concepts that utilise the latest technologies, APIs and social media platforms.

I’ve abstracted the code into a simple framework which I’ve called the WTF Engine, that allows you to create a generator for any subject.

Here are a few of my favourite generative mashups so far:

Blackberry application that generates poetry based on Yelp data
Platform for building Wii controlled, memcached dashboard widgets for Open Frameworks enabled devices
Windows optimised GMail configurator for social microblogging
Podcast that generates poetry based on Google Earth data
Scalable, PHP based Feedburner API explorer with a hand tracking front-end
Feature detecting blogging platform for Lingo, Haxe and AS3
Pascal based kiosk to replace data visualisations and hook into GMail via Twitter and Google Maps
Multi-touch, open source Digg microblogging utility powered by Slashdot and the Google Gears C# API
Platform for building dynamic, Wii controlled iPad applications for MATLAB enabled devices
Python based Del.icio.us and GitHub mashup, designed for generative gaming
Objective C interpreter for creating dynamic microblogging experiences in JavaScript
Scalable, Wii controlled GitHub shopping utility powered by Foursquare & the Yahoo Pipes API
Ajax based platform for rapidly developing kiosks based on Google Gears data
Perl based platform for rapidly developing art installations based on GitHub data

The WTF Engine code and this particular implementation is available in my GitHub repository.

Have fun, and if for any bizarre reason you make one of them, let me know!

http://whatthefuckismymashup.com/

AS3 Particle Node Sequencer

Soulwire — Sat, 09 Oct 2010 12:31:40 +0000

(You can drag each node and switch off the wander behaviour to create your own compositions).

At Flash on the Beach this year, I had the privilege of seeing Andre Michelle speak. It was great to hear him explain some of his fantastic work behind audiotool and to see and hear some more of his audio experiments.

He also introduced Tonfall, which is an open source AS3 framework designed to get people started with Audio programming in Flash. From the horses mouth; “Tonfall introduces only a vague design of an audio engine and is rather focussed on readability and simplicity than performance optimizations”.

I know that I’m not alone in feeling inspired by what Andre has done for the Flash platform, particularly when it comes to audio, yet lack the knowledge he has invested so much time and hard work in acquiring. The fact that he’s now sharing it with the ret of us for free was more than enough impetus to have a crack at it myself.

So this is my first test with the framework, which although not extensively documented (at the time of writing), was quite easy to pick up and get going with.

This sequencer is based around physical nodes, which connect to produce a variety of tones. There are two types of node, a neuron and a receptor, which are connected by synapses (apologies for the trite analogies). Neurons fire periodically, and if within a certain proximity of a receptor, this message is sent at a fixed speed along the bridging synapse. When the message arrives, the receptor is activated and responds by queuing it’s individual tone within the audio engine. Each receptor owns a randomly assigned note, and each neuron a randomly assigned octave; therefor a receptor will play it’s note in several different octaves depending on which neuron causes it to fire.

The download includes the builds of Tonfall by Andre Michelle and Minimal Comps by Keith Peters that I’m using.

Download: Particle Sequencer

Recursive Polygon Subdivision

Soulwire — Thu, 27 May 2010 12:51:48 +0000

This is a little algorithm I sketched in my moleskin on the train and for once had the free time to build. The idea is to split a convex polygon between two line segments, creating two new polygons. Each shape is pushed into a queue ready to be subdivided itself. Despite the simplicity of the algorithm, the results are quite nice and with certain configurations often far removed from what I would have expected – surprise is always good.

The Subdivide Algorithm

Here are the basic steps used to create the sketch above:

Create the first polygon
Pick two adjacent vertices at random
Use linear interpolation to find a point between them (P1)
You now have a point on one line segment connecting the two vertices
Choose another line segment from the polygon
Find a point along this line segment (P2)
Build a new polygon by moving clockwise from P1 to P2
Build a second polygon by moving clockwise from P2 back to P1
Splice the original polygon from the list and insert the two new ones
Choose a polygon from the list and (↑repeat)

Very simple, but you can start to have fun with each of these steps to produce different results. Here are some of the variations which can be created with the demo.

Choose line segments to cut at random
Always subdivide between the two longest line segments
Always interpolate (choose points) half way along segments
Choose points at random positions along line segments
Only mark some polygons eligible for subdivision
Vary the minimum area of divisible polygons

Source Code

The Polygon class is a DisplayObject (it extends Sprite) and implements it’s own draw method. I’ve had a lot of fun filling the shapes with textures, but kept it minimal for the example. One technique which I found worked well was to choose two vertices and compute the angle between them. From this I created a transformation matrix to use with Graphics.beginBitmapFill, giving the sketch a more 3 dimensional feel as if the collection of polygons was a 3D mesh with textures mapped to it. I’ll put these examples on Flickr soon.

If you’re interested in the source code, it’s available in my code repository or you can download the archive below (for the demo GUI, I am using minimal comps courtesy of Keith Peters and for image encoding, Ian McLean’s asynchronous JPEG encoder – thanks guys :).

Download: Recursive Subdivision

Generative Prints for Ishihara

Soulwire — Fri, 12 Feb 2010 00:28:10 +0000

These are some old prints that I made for an exhibition called Ishihara, back in 2008. They’re created using a tool I built called Rotator, which degrades vector drawings as they are printed to a bitmap, whilst following the path of a random wander. I found them on an old hard drive and thought I’d share.

On reflection, the morphing shapes mixed with simple line drawings remind me of James Paterson’s work over at presstube or Victor Taba’s animations (but not as good as either). I’ll see if the hard drive has the Rotator AIR app these were made with on there somewhere too, it could be fun to play around with adding some colour and using more complicated vectors.

Technical Tentacles

Soulwire — Tue, 26 May 2009 19:08:17 +0000

I’ve been revisiting one of my favourite topics lately – recursion – and have been getting together a bunch of sketches for a big personal project I’m working on (more on that another time). Anyway, I inadvertently stumbled across quite a nice way of making things grow in a convincing manner, and whilst this script doesn’t actually use recursion ‘per se’, I thought it was kind of cool so I ran with it.

It also presented a good opportunity to try out another Flash Player 10 feature that I’ve been eager to try, which is using Pixel Bender and ShaderJob. Although I’ve used Pixel Bender before, I’ve never used it in this way.

Basically, the idea is to exploit Pixel Bender’s performance and ask it to do some of the heavier number crunching for you – a concept that is currently being used by the Papervision3D team to give some juice to the next release. The other great thing about this approach is that these computations can run in another thread, leaving you more resources for other tasks (like rendering a fishing boat load of tentacles)

So, although this isn’t the best example of using Pixel Bender’s capabilities, it was a nice opportunity to exercise the idea. Each Tentacle starts a new ShaderJob and Pixel Bender whips up some tasty trigonometry for me, before passing it back inside a Vector object (typed Array). From there it’s just a question of making those numbers look nice… Kind of reminds me of the illustrative style used for the O’Reilly book covers…

More Music Visualisations

Soulwire — Tue, 17 Mar 2009 14:07:44 +0000

Just a quick (and slightly belated) announcement.

The distinguished Bandcamp has recently been regaled with another round of audio-visual snacks. I’ve had a lot of fun working on them, and there will be even more in the not too distant future.

The whole Bandcamp site in fact is bursting with more and more tasty new features which you should check out. In terms of my little contribution on the music visualistions front, there are currently four new full fat flavors to feast on…

Ribbons » which uses my Papervision3D Ribbons Class and is designed for crunching riffs and hard beats.

Strata » which was inspired by stream-graphs and rock formations, and flows like a charred pizza in a log-flume along an imaginary Teflon oven dish.

Plughole » which comprises of disembodied appendages and iconography encapsulating the zeitgeist of generation stupid – mashes the aforementioned archetypes up into crumbs before offering them to the esophagus of oblivion.

Hypno » which was designed to bring about universal harmony and spiritual equilibrium but accidentally caused the credit crunch.

You can see them in action by visiting an artist’s page (such as Hot Bitch Arsenal or Pattern), hitting play and selecting a visualisation from the pop-out menu underneath the cover art.

2D Cellular Automata

Soulwire — Tue, 06 May 2008 13:16:41 +0000

Inspired by Conway’s game of life, I decided to program a 2 dimensional Cellular Automaton in Actionscript 3.

I had been reading up on complexity theory for a recent project and the Cellular Automata just kept on rearing its head. Of course it displays the fundamental qualities of complexity; starting with an object following a set of simple rules and then creating multiple instances to form complex and unpredictable patterns.

In terms of visualisation, the Cellular Automata is interesting because it has potential to be used for many applications. Complexity Theory and Systems Theory are used to simulate various growth patterns such as that of a city or population. My personal ideas are of course much simpler, one being a 3 dimensional version which uses Papervision 3D; and, rather than switching cells on or off, would incrementally grow or shrink shapes in 3D space to create landscapes or cityscapes whose growth is determined by the development of the Automata.

This particular Actionscript 3 version is a fairly direct port of the 2 dimensional ‘Game of Life’ permutation, but is fun to play with none-the-less.

The rules are as follows:

Each cell can be either empty, new, alive or dead. As the grid updates, each cell observes its 8 neighbouring cells (or less if it is at a corner or edge) and changes it’s state depending on the state of said neighbouring cells.

If less than 2 neighbours are alive, the cell dies (loneliness)
If more than 3 neighbours are alive, the cell dies (overcrowding)
If a living cell has 2 or 3 living neighbours it continues to live
If a dead cell has 3 living neighbours it comes to life

There are many initial shapes which either form patterns of perpetual growth or at least interesting shapes as the system updates; some simply die out. Have a play and see if you can find shapes, or combinations of shapes which do interesting things. It’s quite addictive!

I have added a few presets to illustrate how certain groupings of cells that are alive when the system starts can behave in the grid as the automaton runs, and also a randomise button which will create a random grid of empty and alive cells and can form some interesting patterns as the system iterates and emergence begins to kick in.

The source code is of course available, so have a play with that and see what happens when you change the rules or create bigger grids.

A quick note about the Actionscript.

I have created a CAGrid class for building Cellular Automata, which can be instantiated at any size and with any amount of rows and colums.

/**
* A grid of cells used to produce a 2 dimensional cellular automata
*
* @param	gridSize	The dimensions in pixels of the grid
* @param	segments	The number of cells in each row or column
* @param	cellPad		The padding (or spacing) inside each cell
*/

public function CAGrid( gridSize:int, segments:int, cellPad:int )

The CAGrid class contains methods for drawing the grid, resetting the grid, updating the system, randomising cells, saving configurations and loading presets, and is automatically redrawn when the size or rows / columns are changed during runtime using the size and segments setters respectively.

The Cell class contains a simple setter for status, and some constants for easy reference to the cell’s state. In this example the cell is drawn by choosing a colour which corresponds to the state of the cell, but a movieclip with labelled frames (for example) could just as easily be used to create more visually interesting results.

Oh, and included are some custom skinned CS3 components (button and comboBox) which look a bit like the Vista skin, so maybe those are goodies in themselves!

Download: 2D Cellular Automata

Webcam Glitch Art

Soulwire — Fri, 09 Nov 2007 14:13:36 +0000

What happens when you let vista install drivers for you? Shit happens. But in this case, good shit.

I was playing around with flash and using the Camera class to save stills via the CS3 AIR extension. Unfortunately, my webcam drivers had not been installed correctly, but the results were some really interesting glitches.

You can see the full set and high res versions on Flickr

It got me thinking about the ByteArray and socket classes in AS3, with some experimentation, maybe there will be a way to screw up BitmapData in a similar way? Bring back the 90’s and the cool glitch art that seemed to be coming out more often then. It’s amazing what eye candy can be produced by malfunctions.

Smack My Glitch Up