For a recent Flash job, I was required to add a particle system on top of an application already very CPU heavy. The project involved a large stage size, AR marker detection from a webcam feed, and a 3D-orientated plane displaying a running video, attached to the marker. This video plane then had to spew out various flavours of 3D particle at appropriate moments in the FLV.

The idea of plugging in a sexy particle engine like Flint, when the SWF was struggling even to maintain its target framerate of 25fps, made me uncomfortable. Bespoke seemed the only way to go, and hey! it worked out. Here’s what one of the particle types ended up resembling:

(It’s worth mentioning that fewer particles than can be made in the above demo were needed for the project itself. Maxing out the version here gets my CPU usage up to around 40%, which would not have left enough room for the marker tracking and FLV playback.)

To briefly cover the tricks used here, I faked 3D z-positioning by scaling clips as a function of their bespoke ‘zPosition’ value. The formula: focalLength / (focalLength + zPosition) gives the scale factor used to set the scaleX and scaleY properties of each MovieClip. The scaleX parameter was also adjusted to spoof motion blur, by overriding the x position property, and repeatedly comparing it to its value at the last update. The greater the change, the larger the scaleX multiplier, and the more stretched/blurred the particle would appear.

Rotation of the whole particle field was done by avoiding setting the x or z properties directly, depending instead on ‘radius’ and ‘rotational offset’ values. All the particles reside inside an imagined cylinder (the particle field), with its central spindle aligned with the y-axis. Each particle has its x and z location calculated on the basis of this rotation and distance from the central axis, as they move in their orbits. Channelling Mr McCallum, my secondary school maths teacher, the formulae to do this kind of positioning are, for the x axis: cos(angle) * radius; and for the z axis: sin(angle) * radius. (These can be used instead with the x and y properties to show rotation around a flat circle as opposed to the cylinder.)

In addition to rotary motion, the particles were required to ‘wander’ of their own accord. To achieve this, a large bitmap of Perlin noise is generated at the beginning of the simulation, with a reference to it passed to each particle instance. Going from pixel to pixel each frame, the RGB value is sampled and used to increment the y-velocity and radius-velocity of each particle. Over time, the Perlin noise is traversed completely, resulting in a wide range of even motion. Each particle begins sampling from a randomised row/column too, so that the movement is staggered.

With all said and done, there may indeed have been a package out there that was equally lightweight and flexible enough for the nuances of the project. But, hard deadlines being as they are, it sometimes pays just to go from the ground up, omitting any chaff on the way – rather than hunt for elusive wheat through sprawling, multifaceted libraries.

If the source code happens to be of use to anyone I’d be very happy to clean it up and post it here. Until then… indolence wins out. Sorry!

Been feeling at all out of touch lately? Wondered what the next big thing’s going to be? You came to the right blog post friend, because I’ll tell you what it is for free:

And what would be the perfect companion to this timely tech? Extinct animals. Namely:

Over the past few weeks at work, I got the chance to develop an educational Papervision3D/FLARToolKit application for the the BBC’s Learning Development site. I wrote up some nerdy/whiney information on the process here, and the page itself can be found at the picture-link below.

Moving images containing terrible lizards are all very well; Steven Spielberg gave us those in 1993 – more than fifty years ago! But what that documentary promised to be the simple matter of drilling into amber and injecting mosquito blood into a frog, still hasn’t yielded any dino fun parks. What gives?

In order to fill this void (over the next couple of months, before one of the parks is complete and we’re busy petting T-rexes), I’ve made a dinosaur that looks so real you could touch it.

For the demo, I loaded in a second skeleton model, iterated over the texture files and ColorTransform-ed the red / green+blue out of them, respectively, then set their BlendModes to DIFFERENCE. After that, I moved the red copy a little left, the blue copy a little right, and applied all other movement relative to those locations.

The eventual colours work out well to be mutually invisible in the corresponding panes of the paper glasses that were bundled with the copy of Ben 10 Magazine I bought in shame. (FYI, decent journalism, but the word searches were MUCH too difficult for the recommended age bracket.) More sophisticated glasses will probably result in uneven colouring.

And you wont look as cool.

Typical music visualisers, as found in desktop media players, have limited means to analyse the music played through them. Audio data from a mixed-down track is a blend of waveforms, normally from many sources. Spectral analysis allows amplitude variation at disparate frequencies to be detected and graphed discretely, which can assist in beat detection and tempo analysis. But due to the noisiness (…) of this data, huge variation in compositional arrangements and the need for realtime processing, the majority of visualisers have limited reactivity and focus on producing partially-randomised, generative animation that would be pretty even if running on white noise.

No.

But that’s all for raw audio. Samplers and virtual instruments (rendering MIDI data) have ever-increasing prominence in music creation and live performance – and greatly outclass standard hardware MIDI synthesizers, with which the typical notion of dorky, low-quality MIDI playback is inexorably tied. Compared to an audio stream, ‘message’-based music protocols describe events – normally pitch and velocity/volume information about notes triggering on and off – and nothing about the timbre of the sound, allowing sonic quality (for instance, the performing instrument) to be altered at any point.

Visualising musical data in this form removes all uncertainty around the timing and nature of note events (along with the overhead of detecting such details), accommodating far tighter correspondence between the audio and visual elements than is possible with conventional visualisers.

The Future

And none of this is new – VJs have been leveraging MIDI precision for years, and the field is still growing – but routing note data into Flash is new to me, and something I’d wanted to do for years, provoked by rhythmic music that carried a strong sense of motion, or was otherwise very visual. (Lookin’ at you guys, MSTRKRFT and Susumu Yokota <3 – among many others.)

There are several possible starting points for running MIDI into Flash, but none especially mature (at least on Windows; different options are available for OS X). The primary issue is that the Flash runtime has never interfaced with environment-level MIDI APIs, which is pretty much in-keeping with conventional use of the platform. Various workarounds are possible, and having read around a lot I settled on the following:

• Translate the MIDI data into OSC (a newer protocol and likely eventual successor to MIDI, designed to run through the network transport layer), with the VST plugin, OSCGlue, created by Sebastian Oschatz.
• Receive the OSC packets with the Java flosc server, created by Benjamin Chun, and retransmit them over TCP (OSC data is normally sent over UDP, which Flash does not support).
• Receive the shiny new TCP-delivered OSC packets with the OSCConnection classes, an XMLConnection extension written by Adam Robertson and revised by Ignacio Delgado.
  (Worth mentioning: the updated flosc server (v2.0.3) given at the Google Code link above didn’t work for me, but I had no problems with the original on Ben Chun’s site (v0.3.1).)

Here is a demo of it running, routing percussive hits from Ableton Live:

The visualisation method (best referred to, generously, as a ‘sketch’ for now), comprises an array of ‘particles’, distributed in 3D space, accelerating and rotating in time with note-on messages. On snare hits, the background gradient is also switched-out for another. The particles themselves comprise a few other graphical experiments: all symbols are a singular colour, but appear different due to variations in their layer BlendMode; I also created a sliding shutter-mask for the otherwise circular symbols in the Flash Pro IDE before embedding them; and I attempted a depth-of-field blur effect by increasing filter strength with distance from the camera – but it’s all a little abstract for that to be very applicable.

You can play with the visualiser ‘offline’, using keypresses: arrow keys (or WASD for the homicidally inclined) to move the particles; spacebar to swap the background. (Note: you’ll probably have to click into the player first.)

Some disclaimers: most of the work outside of Flash was that of the developers cited above; I don’t mean to take credit. This write-up is mostly to aid visitors with the same intentions, riding in on the Google express, since no other documented method I came across suited my needs and/or worked.
And, secondly, the visualiser itself is intended primarily as a tech demo and precursor to a more complete, aesthetic (…synaesthetic?) piece. You’ll see – it’ll be just like having a real mental disorder.

The following is from a roll of film I had developed just before Christmas, with pictures shot in November and December, on location in Glasgow and Troon. I used a Ricoh KR-10 camera with 35mm B&W film (ISO 400) and a dreamy Pentax Asahi SMC lens borrowed from my father with a heroic f-number of 1:1.2 / 55mm.

A grey Glasgow Green

Goose Jail: this fella's doing time for honking after 11pm, but he's in with the arm-breakers all the same. I slipped him some cigs; he'll be OK.

The cloud factory, working overtime for Glasgow

Each time I looked up, the dark triangles drew closer and moved down a level. I woke up tasting blood, the last 8 hours unaccounted for, with the ability to recite Pi to a million decimal places.

I like to be upfront with my UFO spoofs when it comes to suspension mechanisms.

A sculpture of rust

Shot? Shut???

I know it's rude to take overt pictures of people walking past in the street, but I genuinely don't think she saw me do it.

I could just detect a continual dull scream emanating from within this bronze sculpture. Neat.

Labradogs sleep with both eyes closed, but with nostrils primed and twitching, ready for action at the drop of a cake.

ORGANIC MATTER DETECTED IN POCKET OF PHOTOGRAPHER

"And this is some sort of typewriter-television, is it?"

Hey, this is an OK photo. Maybe I'm starting to understand people...?

- No. I selected inanimate objects for focus over actual human beings.

What animal could have made such tracks? A bird?

Uh- a large, wingless, galloping bird...?

A self-duplicating, seemingly aggressive but ultimately friendly group of birds...???

Yep. Bird tracks.

While this endeavour is still in its infancy, I thought it’d make sense to itemise the facets of my substantial (for which, read: insubstantial) web presence, and the plans I have for each.

• Firstly, there is this thing you are reading: the blog; blog-dot-kinetype-dot-com; http://blog.kinetype.com/ Here, I’ll try to keep things mostly (if not strictly) business. You, gentle reader, probably don’t need to know of the peculiarities of my digestive tract, nor read my ideas for Harry Potter / Twilight crossover fiction. I have a twitter account for that. Posts will mostly be split across Flash projects, recorded music, photography, graphic design and maybe some writing – the things I like to do in spite of all the evidence and death threats.
• Next, there’s the WWW subdomain, http://www.kinetype.com/ This is where I stuck the prickly fruits of my undergrad dissertation, submitted earlier this year. It’s for autonomously animating English text, à la human-authored kinetic typography, built in Flash, Python and Flex. It’s somewhat unpolished, but half of the planned improvements are coded up and ready to go, so it’ll be shiny in no time. Yeah.
• Lastly, I’ve re-uploaded an old site of mine, Hope Park Square, to the HPS subdomain, http://hps.kinetype.com/ Back only for posterity, this train wreck lasted just six months during 2005, before the card I paid the hosting fees with expired. While I’d put up with them passively, I couldn’t bring myself to register my new details and voluntarily give skanky hosts Angelfire more money. Plus, I had a girlfriend by that point; my need to charm internet babes had been quelled.

And those are the things of mine on THE INTERNET.