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 :).

Related posts:

1. 2D Cellular Automata
2. AS3 Webcam Motion Tracking
3. AS3 Shuffle Grid Class

If you are building a multilingual application (or any application that requires dynamic, runtime loaded assets), swapping and managing assets can easily become tedious and messy.

Recently, for projects requiring special characters (such as Chinese, Arabic, Japanese and Hindi) and where dynamic or input text is not required, we have been creating library SWFs for each language and using static textfields to populate content. This saves file size, as unnecessary characters are not embedded, and it eases the process of including different character sets (and even fonts) for each language. It also means that we can include text in the same runtime loaded library as general display assets.

Introducing DynamicSprite

Using this process, a language specific library SWF is loaded at startup, or at runtime when the users selects a language, and once complete all dynamic assets are updated accordingly. This can get very messy for two reasons. Firstly, it means that each individual asset has to be destroyed and tidied up to release memory before it is replaced. Secondly, if you have a complex application architecture, you will end up dispatching a ton of events and implementing countless methods within every view or component, in order to rollout the update to each desired DisplayObject.

This is where DynamicSprite comes in handy. Using DynamicSprite you can effortlessly update any amount of DisplayObjects from any amount of library SWFs at runtime, whilst keeping the SWF loading logic centralised in your proxy or loader class. No events, no asset update APIs in your views and no cleaning up after yourself.

Bored? Skip straight to the examples and download

How It Works

The concept is very simple. Each instance of DynamicSprite is registered globally at a class level, you need only call a static update method once and all DynamicSprite instances will update themselves automatically. Each instance of DynamicSprite is given a class definition, which can be set or changed at runtime if desired. When a new library is loaded, it will look inside the SWFs applicationDomain and if it finds a matching asset, update itself and destroy any existing instances of that asset it might own. You can also create DynamicSprite instances at runtime anytime after an asset library has been loaded – they will check previously loaded libraries for their class definition when created. This works with any display asset, Sprites, MovieClips, Bitmaps (etc) – BitmapDatas are also detected and destroyed during the cleanup process.

Furthermore, you can load any amount of libraries per language, at different times if necessary – DynamicSprites will only update themselves when applicable, making it easy to manage your language specific libraries and even individual libraries per language if you choose to (each type of library has it’s own ID).

A DynamicSprite instance will also dispatch an event (named DynamicSprite.INSTANCE_UPDATED) when it has changed it’s asset. You can listen for this event if you need to respond to new asset dimensions. You can also listen for two events on the class itself (through a static, encapsulated EventDispatcher) which are dispatched when a library is added or updated but before all instances have changed (DynamicSprite.LIBRARY_UPDATE_START) and when all instances have finished updating themselves (if necessary) from the added / updated library SWF (DynamicSprite.LIBRARY_UPDATE_COMPLETE).

Example Implementation 

Here is a simple example of how to use DynamicSprite. Although this example only loads one SWF (the code for the multi SWF example is included in the download), it demonstrates how DynamicSprite can also be useful for single language applications where you still choose to load your assets at runtime.

public function SimpleExample()
{
	// Create a DynamicSprite instance and provide a class definition for it's asset
	var example : DynamicSprite = new DynamicSprite("assets.example.HelloWorld");
	addChild(example);

	// Load a library SWF
	var loader : Loader = new Loader();
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
	loader.load(new URLRequest("assets_en.swf"));
}

private function onLoadComplete(event : Event) : void
{
	// Call the static update method once to update all DynamicSprites
	DynamicSprite.update("example", LoaderInfo(event.target).content);
}

Another advantage of DynamicSprite is that you need not worry about synchronising loading with the update process. Any existing DynamicSprite instance will be updated if required when a library is loaded, however you can also create new instances after a required library has been loaded (useful for highly dynamic content) and any loaded libraries will be searched for matching assets upon creation. This snippet demonstrates this feature.

public function SimpleExample()
{
	// Load a library SWF
	var loader : Loader = new Loader();
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
	loader.load(new URLRequest("assets_en.swf"));
}

private function onLoadComplete(event : Event) : void
{
	// Register this library
	DynamicSprite.update("example", LoaderInfo(event.target).content);

	// Creating a DynamicSprite after a library is loaded still works fine
	var example : DynamicSprite = new DynamicSprite("assets.example.HelloWorld");
	addChild(example);
}

Download DynamicSprite

You can download the DynamicSprite class and the demo below. Also check my code repository for updates. If you find any bugs or have any suggestions please leave them in the comments.

Related posts:

1. Double Sided 3D Plane in FP10
2. Flipping you the Boid
3. AS3 Webcam Motion Tracking

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.

Related posts:

1. Recursive Polygon Subdivision
2. Illustrated IChing

Sometimes it’s good to break things…

During a recent project I needed to find a way of simulating digital interference on an image / video stream. At first, it seemed the best approach might be to use the graphics API or Bitmap effects, but why imitate when you can have the real thing.

The principle is incredibly simple. Corrupt / alter a byte (or several bytes) in the ByteArray of a JPEG and then load this back into a DisplayObject using Loader.loadBytes(). Because of the way in which JPEGs work, the image will still display but the corrupt bytes will mangle the output to varying degrees, depending on how many bytes have been corrupted. The result is an interesting glitch pattern, a bit like those which were accidentally created when my webcam drivers lost the plot.

It is also possible to corrupt other image formats (png, gif etc) in the same way, by first passing the image ByteArray through a JPEGEncoder.

I’ve implemented this technique in the Glitchmap class, which you can download and play with at the bottom of this post. I hope that it will provide a few moments of fun, if not a practical use (I’m thinking image gallery transitions or music visualisations).

The small gottcha is that it isn’t desirable to mess with the JPEG headers, so when the clean ByteArray is passed to the Glitchmap class, it will determine the length of the header by reading through the bytes until it finds the SOS (start of scan) declaration (0xFFDA). The next two bytes represent the length of the SOS, so it skips forward by this amount – the resulting position in the ByteArray should be the end of the header, and so between this point and the EOI (end of image) the data corruption takes place. I’m not sure whether this is the best way of determining the JPEG header size; perhaps any CS graduates / students out there can help me out?

After I posted the webcam glitch images, Jon used them in his title sequences for the 48 hour film gala. If you find a similar creative use for this script or the glitch generator then please let us all know.

I think the next step is to experiment with merging the bytes of multiple glitched images in order to create transition effects. I may also build an AIR app and see what the best way of outputting video might be (using NativeProcess for screen capture perhaps?).

You can also download the Glitchmap Class and the Glitch Generator source code from the soulwire code repository.

Related posts:

1. Webcam Glitch Art
2. ASE (Adobe Swatch Exchange) Encoder
3. Recursive Polygon Subdivision

I’ve been off the web radar for several months. The later part of 2009 saw many changes and, despite being extremely busy with several interesting projects and personal studies, I have somewhat neglected this blog.

Without wishing to bore anyone with the details, I may still post a summary of what I am / have been working on recently – at some point – though for now it will suffice to say that I’m broadening my horizons – getting deeper into Processing and OpenGl and learning C++ with OF, as well as Objective C and the Cocoa Touch framework. As more projects using these technologies arise I hope to share this learning experience with you.

Design

With regards to the re-design; this is by no means the finished article, however I felt it best to push the current theme live so that I can start posting again. I hope that you find it more user friendly than the last edition, and please do leave any suggestions for improvement – it is like most things simply a work in progress.

Objectives

My aim is to continue posting content on a much more frequent basis, though with the philosophy that quality precedes quantity. That said, I will be adding tools to help aggregate my more continuous online activity in an attempt to share more of the work and ideas of others who inspire me, with you.

Now that the site is live, I will post a few catch-up entries over the coming weeks and from there hopefully find a more natural rhythm.

So, for those of you kind enough to listen, that is the egocentric chatter over! I look forward to resuming the dialogue with you – see you around.

No related posts.

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…

Related posts:

1. Recursive Polygon Subdivision
2. Perlin Noise Flow Field
3. Double Sided 3D Plane in FP10

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.

Related posts:

1. Bandcamp Music Visualisations
2. AS3 Music Visualisation
3. Disabed Algebra

One of the most interesting projects I have worked on recently has just been launched!

It’s called Bandcamp, and is the brain child of Ethan Diamond and Shawn Grunberger, both from Oddpost (which you’ll know these days as Yahoo! Mail).

In short, Bandcamp is a “free hosted publishing platform for musicians”, although there is much more to it than that, including…

• Design customisations and clean, SEO and user friendly URLs for every band
• Automatic transcoding of uploaded tracks to a variety of formats (including lossless)
• The option to give away tracks for free, or to sell them (at either a fixed price or one nominated by the fan who’s buying it, they call it “Name your price”)
• A stats page in the band’s CMS, which shows all complete and partial track listens, incoming links and the general state of the band’s internet rep’, whether it be blog mentions, reviews or who’s embedding their Bandcamp player and where.
• Cool music visualisations as part of their player (more on that in a moment)

…And it’s FREE!

My job was to help make the site even more unique (and sexy!) by creating a library of music visualisations – these provide some eye candy whilst you listen to tracks on a band’s page (or in their embedded player). We strived to avoid the clichéd, generic approach to visualisations (you know what I’m talking about) by giving the user something a wee bit special to gawk at. It wouldn’t be fair if ears got all the love!

Here’s a few quick screengrabs of the first 5 visualisations (more visualisations are on their way soon)…

The power behind the visuals is a customised version of the AS3 music visualisation engine I’ve been working on for some time now, which includes beat detection and a whole host of other methods for interpreting a stream, ready for visualising.

The guys at Bandcamp have been really supportive in allowing me to develop this library with a view to releasing the API in order for Flash developers to build and upload their own visualisations for use within the Bandcamp player.

Furthermore, because the visualiser has been a pet project of mine since the release of AS3, come December I’ll be open sourcing the engine so that anyone can build on it, or simply use it out of the box to produce some optical delights of their own.

Anyway, I’m really excited that Bandcamp has been unleashed on the public and I encourage you to check it out, especially if you’re a musician, or like music, or pretty visuals, or cool technologies, or great ideas, or websites…

Want to know more about Bandcamp?

Then watch the screencast (bellow) and chat about it on Vimeo, browse on over to bandcamp.mu, peruse the FAQs and see it in action!

Related posts:

1. More Music Visualisations
2. Disabed Algebra
3. AS3 Music Visualisation

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!

Related posts:

1. Flipping you the Boid
2. Recursive Polygon Subdivision
3. Perlin Noise Flow Field

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.

Related posts:

1. Smack My Glitch Up