Soulwire » Experiments

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.

Smack My Glitch Up

Soulwire — Wed, 03 Feb 2010 21:37:51 +0000

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

Download: AS3 BitmapData Glitch Generator (Glitchmap)

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

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…

Fit DisplayObject into Rectangle

Soulwire — Mon, 25 May 2009 17:20:20 +0000

We’ve all been there. You’re building an image gallery and you need to create consistently sized thumbnails from a set of images, of various sizes and orientations and with differing aspect ratios – or you need a fullscreen background which always fills the stage, regardless of a user’s screen resolution and browser window size – or maybe you just need to fit a DisplayObject into a rectangular area whilst maintaining the correct proportions of the original image.

Introducing DisplayUtils

Since this is a common task, one that I find myself coding over and over, I’ve whipped up a little class called DisplayUtils which will help with the scenarios mentioned above and more.

The main method in DisplayUtils is FitIntoRect. FitIntoRect can work in several ways. You can use it to resize a DisplayObject to fit inside a rectangle, or you can use it to generate a transformation matrix, which can be applied to an object or used with the BitmapData.draw method to create thumbnail previews, or both. There is also another method called createThumb, which uses fitIntoRect to quickly and easily create nicely cropped and scaled thumbnails from a source image with any aspect ratio.

Have a play with the demo above to see what you can do with these methods.

Using DisplayUtils and fitIntoRect

There are several parameters to control how fitIntoRect works. Here’s what you can pass to the method:

displayObject : The DisplayObject to resize
rectangle : A Rectangle object representing the space the DisplayObject should fit into.
fillRect : Whether the DisplayObject should be transformed to fill the entire rectangle, or whether it should fit completely within it.
align : The alignment of the DisplayObject within the rectangle, for example Top Left or Middle.
applyTransform : Whether the calculated transformation matrix should be applied to the DisplayObject within the fitIntoRect method. If false, the DisplayObject will not be modified, but the Matrix returned by the fitIntoRect method can be used to transform objects or modify the draw command on a BitmapData object.

The download includes all necessary classes as well as several examples of how to use the fitIntoRect method. Here are some code snippets for getting started with…

Example Usage

Fit a DisplayObject into a Rectangle

var area:Rectangle = new Rectangle( 0, 0, 200, 100 );
DisplayUtils.fitIntoRect( myDisplayObject, area, true, Alignment.MIDDLE );

Create a fullscreen background image

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

function onStageResized( event:Event = null ):void
{
	var area:Rectangle = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
	DisplayUtils.fitIntoRect( myDisplayObject, area, true, Alignment.MIDDLE );
}

stage.addEventListener( Event.RESIZE, onStageResized );
onStageResized();

Create a thumbnail

var thumb:Bitmap = DisplayUtils.createThumb( myBitmap.bitmapData, 100, 100, Alignment.MIDDLE, true );
addChild( thumb );

Download

You can download the DisplayUtils class, as well as the Alignment class, which simply contains enumeration for the various alignment options when using fitIntoRect and createThumb.

A example of some of the uses discussed above is also available in the zip.

Download: DisplayUtils

Flipping you the Boid

Soulwire — Tue, 05 May 2009 15:12:45 +0000

I’ve uploaded the Boid source code. Sorry for the delay. I’ve also included some basic examples of how you can create nice behaviors using the Boid class. If you set Main.as as your document class then you’ll see that within that you can specify the demo to run when you compile.

The basic demos included are:

Chase – Boids chase each other
Flock – Boids flock together with some wander
Graphics – How to use custom graphics with a Boid instance
Seek – Boids seek the mouse position
Wander – You guessed it, they wander

I’ve commented all of the methods and properties and there is also documentation (open index.html in the docs folder) to get you started. Before you mention it, yes, there is some redundant code ;) (such as the constrainToRect method which doesn’t really work) but I need to do some optimisations anyway so I just left it as is for now, rough and ready.

Download: AS3 Boid Class & Demos

It’s been a little while since I posted! I’m in the process of moving house and office, plus I’ve been repeatedly slammed at work. Apologies to those of you who’ve left comments and haven’t got much by way of reply. I’ll hopefully be visible again over the next few weeks.

I actually coded this experiment back in November, but only recently decided that enough was enough and hijacked an evening so I could tidy up the code and build a UI for the demo.

Since coming across Craig Reynold’s paper; “Steering Behaviors for Autonomous Characters” whilst I was researching complexity theory for a university project (it wasn’t as academic as it sounds!), I’ve found myself becoming fascinated by flocking and swarm beahviors and the notion that you can create complex systems from relatively simple components. Much like the Cellular Automata, you can program an agent to have only a limited set of abilities and awareness, define a set rules for it to follow, and then create a multitude of instances of the agent to see what patterns begin to emerge through their interactions.

Flocking is a great example of this, as Reynolds demonstrated. His agents, or “Boids”, could perform certain maneuvers, such as seeking a target, fleeing from a predator, avoiding obstacles or wandering randomly. Combine these behaviors though, and allow each Boid to consider it’s neighbors when deciding on its locomotion, and complex behaviors begin to emerge.

The most infamous of these combinations is that of separation, cohesion and alignment, as it can produce a swarm behavior reminiscent of flocking birds or shoals of fish.

Separation means that each Boid attempts to maintain a certain distance from its immediate neighbors, Cohesion ensures that each Boid attempts to stay close to the centre of the immediate flock and Alignment will calculate the average heading of the flock and steer towards this vector.

Each of these behaviors is fairly simple in isolation, but the results can give the impression that some significant AI is at work, when all that’s really going on is some simple vector math.

Robert Hodgin has done some amazing work with flocking behaviors, so too has Psyop, and of course Reynolds is the daddy of all this stuff. There are some good libraries out there too, such as OpenSteer, and Keith Peters talks about this too in Advanced Actionscript Animation.

I’ve been trying to sharpen up my mathematical skills lately though, and was eager to play around with the new (new when I created this experiment anyway!) Flash Player 10 API – the 3D aspects in particular. So at the core of the Boid class are the native Vector3D, Matrix3D and PerspectiveProjection classes. Ok, so we’ve all got our own Vector3D and Matrix3D class in our library, but I thought it’d be good to use Adobe’s, especially seeing you can then apply the Matrix3D directly to a DisplayObject’s transform property.

Another cool feature I came across was the Matrix3D.pointAt() method, which will rotate a Matrix around a given axis and in this case can be used to orientate the Boid to it’s heading vector… Nice!

I’ve had a lot of fun putting together the Boid demo anyway – tweaking various settings on the individual Boids as well as the group behaviors (my personal favorite is ‘Chase’ mode with ‘Number of Boids’ cranked right up!).

If you have a play with the settings though, you’ll quickly see what I mean about the plethora of different effects that can be accomplished, even by simply adjusting the locomotive abilities of the Boids.

Due to said lack of free time as of late, I haven’t documented the code fully, though I have started and so if anyone is interested in the source code then please say so in the comments and I’ll try and finish the job (after a mere 6 months!) and put it up for download.

AS3 Shuffle Grid Class

Soulwire — Wed, 04 Mar 2009 00:50:47 +0000

Drag & Drop the images to shuffle them around…

A friend of mine, Dale Sattler over at No Ponies recently posted a grid sorting class. He said it was based on my old dynamic stacking menu; but that was pure modesty as his script is based on a 2D grid and much more sophisticated.

Anyway – it inspired me to create a grid sorting / shuffling algorithm of my own. It behaves differently to Dales but I think it works pretty well.

The basic logic of the algorithm works by determining how far a dragged item travels along the grid (rows and columns) and then shuffling the surrounding items in the opposite direction by these values, therefore creating space for the dragged item to slot into when released.

It currently only works for grids which are fully populated, but adding more flexibility for incomplete grids will only be a matter of adding a few conditions – functionality which I’ll add when I get a moment.

You can extend the ShuffleGridItem class to add the functionality you need. In the demo I’ve made a simple image class which grabs a photo from Flickr.

Creating a ShuffleGrid is very simple, and can be done like so:

var grid:ShuffleGrid = new ShuffleGrid(4,7,40,40,1);

for (var i : int = 0; i < grid.numCells; i++)
{
	grid.addItem (new ShuffleGridItem());
}

addChild (grid);

The constructor takes the following arguments:

new ShuffleGrid(rows, cols, cellWidth, cellHeight, spacing);

Feel free to download the class and a simple demo and have a play around. I can imagine many uses for it, so hopefully it will come in handy.

Download: Shuffle Grid Class & Demo