After some experimenting I settled on one shot every 5 seconds, left it on manual and set it to initially overexpose quite a bit, to get the most out of the foreground, at the expense of the sky and with the hope of greater longevity as the light went.

I shot in raw so, with relief, I was able to recover a lot of the blown-out detail from the sky. I settled on a group of raw import settings that worked well for the first few images I looked at, then set them up to batch-process in Photoshop. When I went to sequence these in After Effects though, it left the latter end of the sunset too dark for too long, so I ended up deriving a new group of settings that brought the most out of the under-exposed end of the sequence. Finally I lined the two sequences up and faded the brighter version in gradually, as though the exposure had been adjusted manually during the capture.

The flickering specks you can see are (I’m told) swifts and some other small birds, who were nesting (and swooping maniacally) in and around the house. They are a little distracting but I haven’t yet had the heart to content-aware them out. Please sir, they’re only little.

There’s a decent amount of documentation out there on how to use it, but my specific requirement was to replace the cursor only when mousing over buttons and other clickable items. I wanted it to show up wherever the hand cursor would normally appear, across a whole project.

This is the kind of behaviour I needed:

Now, if you look at the Adobe docs on the topic, you can register a cursor by passing in a String constant and a MouseCursorData object like so:

Mouse.registerCursor("PointerCursor", mouseCursorData);

Additionally, you can spy a number of static String constants inside the MouseCursor class – such as IBEAM and HAND – which certainly made me wonder whether I could do something like the following:

Mouse.registerCursor(MouseCursor.HAND, mouseCursorData);

But as you may have guessed, this does not work as hoped; it’s not possible just to override the graphic used for the hand cursor.

So here’s my workaround for achieving this kind of behaviour, which I opt to keep inside a centralised class (the filthy singleton). I’ve set up a git repository for the full example, but here’s the crux (a few extra functions aren’t shown here):

public function buttonMode_set(target:Sprite, buttonMode:Boolean):void {

	//If the dictionary hasn't been initialised, do so and set up the custom mouse cursor//
	if (! _buttonModeDictionary) {
		_buttonModeDictionary = new Dictionary();
		var pointerCursor = new MouseCursorData();
		pointerCursor.data = new <BitmapData>[new Cursor32Shadow()];
		pointerCursor.frameRate = 0;
		pointerCursor.hotSpot = new Point(3, 1);
		Mouse.registerCursor("PointerCursor", pointerCursor);
	}

	//Check whether the Sprite has already been registered for use//
	if (target in _buttonModeDictionary) {

		//Only add/remove listeners if the buttonMode state is actually changing//
		if (_buttonModeDictionary[target] != buttonMode) {
			_buttonModeDictionary[target] = buttonMode;
			if (buttonMode) {
				target.addEventListener(MouseEvent.ROLL_OVER, pointerCursor_show);
				target.addEventListener(MouseEvent.ROLL_OUT, pointerCursor_hide);
				mouseOver_check(target, true);
			} else {
				target.removeEventListener(MouseEvent.ROLL_OVER, pointerCursor_show);
				target.removeEventListener(MouseEvent.ROLL_OUT, pointerCursor_hide);
				mouseOver_check(target, false);
			}
		}

	//Only add the new entry if pseudo-buttonMode is being turned on//
	} else if (buttonMode) {

		_buttonModeDictionary[target] = true;
		target.addEventListener(MouseEvent.ROLL_OVER, pointerCursor_show);
		target.addEventListener(MouseEvent.ROLL_OUT, pointerCursor_hide);
		mouseOver_check(target, true);
	}
}

And then it can be turned on and off for each object like this:

buttonMode_set(button1, true);	//button1.buttonMode = true;
buttonMode_set(button2, false);	//button2.buttonMode = false;

The full example can be downloaded from github here: https://github.com/hanenbro/CursorDemo

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!

]]> http://akineticblog.com/?feed=rss2&p=510 0 http://akineticblog.com/?p=409 http://akineticblog.com/?p=409#comments Fri, 15 Apr 2011 23:47:48 +0000 Adam http://akineticblog.com/?p=409 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.

So, post shake-up, said generator can be found at akt.akineticblog.com, the old Hope Park Square back-up is now at hps.akineticblog.com, while this guy is at the www subdomain, or just plain akineticblog.com. Why do I get the feeling it wasn’t many posts that ago I was just explaining the last domain set-up…? Enough meta-posting; content!:

I am employed as a Flash developer now. Sweet! This has exactly two benefits:
1) Career finally on track to Coolsville (definitely in an outer borough already), and
2) People asking what I do, unaware of the platform, just think I’m a developer, but a particularly fancy (and arrogant) one. Score.

I work for the wonderful Thought Den <3 – check them out, yo!: http://www.thoughtden.co.uk/

Thought Den, or: Ed('s) Thong Hut

I’ve been made to feel more than at home by Ben and Dan, awesome director-fellows and Kings of Thought Den. They even made a hugely awkward and dorky (completely unfair and impromptu) film of me screwing around with an iPhone-OSC-Flash thing I put together, partly based on the learnings of my previous post on OSC-to-Flash music visualisation. If you can stomach it, read and watch here.

This job move has also meant a spatial move; 302 miles south (woo!) and 70 to the east (boo!). Let’s see, that puts me in … oh, Bristol! Neat! I couldn’t find my camera while I was packing to move (four hours before my flight…), so forgive the sub-par photography, but the Bristol adventure has so far resembled this:

Not Bristol but Troon, in the bleary small hours, packing unfinished - 'Time I took a picture!'

At the airport, in a PA deadzone, obliviously writing an email and missing the boarding call (but only a little bit)

I think I might live along here one day.

Some, uh- scaffolding. It was very, very blue.

Convinced I'd dreamt this, yet there the picture was, in my phone. My clothes and hair were also filthy, and I found a bloodied half-brick, bundled up in my jacket.

What lovely colour sense the engineers and forsakers of this bridge had!

Ah, lucky cats: quintessential Bristol

An economy religion

I might've known it would be a seagull, captaining the shellfish-restaurant-boat

And if thou gaze long into a spiralmonkeyface, the spiralmonkeyface will gaze also into thee.

A more opulent, cobwebbed religion

This isn't actually a photograph but a screencap from when I was wandering through a VR simulation from the 90s. Shortly after, green teapots whizzed past me to collide with a man made entirely of chrome. The shattered pieces then morphed into the word 'cool!' in Comic Sans. Terrifying.

No, naughty cat! Stop it! This isn't your house. But help yourself to Crazy Landlady's frozen food (somehow kept outside during summer...).

*sigh* Doesn't it just make you want to pedal an old bicycle, go buy some bread maybe?

In other Flash-activity / Flactivity, here is a little …Flupdate: I made a desktop clock (a deskclock, if you will) gadget, deploying through Air. It runs like this:

Note: displayed time correct only occasionally; click for greater accuracy

It needs polishing up and some customisation options, since it’s hardcoded to suit my desktop (above the cat), so I’ll add a nice menu and post it here with the source and everything – like a real community-oriented developer! ALSO: The mouse-position wobble thing was a late and non-final addition. The new Flash Player 10.1 and Air 2 runtimes yielded some bizarre corruption, with Sprites seemingly masking-out each other in places they shouldn’t, and at irregular intervals. Bug report en route – but for now I’m having to update all TextFields each second, and ensure the clock is redrawn every frame (not the sveltest of overheads), so I decided to do at least something with the spent processor time, useless as it may be.

Pledge: next update in less than a month.

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.

You may notice that in the front and backmost layers, the drops are a little blurred. I wanted to give a narrow depth of field effect, and had initially applied a BlurFilter to their containing sprites, but that hit performance hard – so I drew a separate drop symbol for their layers, softening the perimeter with a radial gradient down to transparent, which is just as cheap performance-wise as a solid drop.

Thinking a little more about the worth of such an effect, I realised that I would likely want the rain to interact with whatever other objects might be in the scene. And so I added an umbrella:

It didn’t make much sense for the umbrella to stop drops across all layers, but the effect wasn’t very noticeable with so many other drops falling past it, so I removed them for this demo. I also added some physics-y hinged swinging based on the umbrella’s sideways movement. A splash animation plays at the exact intersecting point of drop and canopy – but I only later realised that, since around 75 drops make contact every second, I could easily have randomised the locations of the splashes and simplified the collision detection. Still! – honesty is the best policy, and when it’s only drizzling, accuracy of the contact point is more relevant.

So now I have almost everything I need for my ‘KEEP THE LOST KITTIES DRY’ minigame. No need to thank me just yet, world.

I drew the visual assets in the Flash CS3 IDE, compiled my classes in the wonderfully lightweight FlashDevelop, and animated the drops using Tweener. That’s all!

Firstly, the cards. Not much to say; they’re not good, but that’s all part of starting out, right?

This year, my sister got married, and had asked me to assemble a design for the invitations. The process was a little strained thanks to misaligned visions and limited creative freedom but we settled on something eventually:

For the birthday of chum Andy, I made a t-shirt design based on this Korean sign (which may or may not be authentic accidental Engrish), and on his love of swine-based consumables. I then had it printed by these chaps.

More recently, it was Kris’ birthday, and so I drew a t-shirt for him too. The inspiration for this came from the evening he and I were playing at an open mic night. Bless his timid soul, he was nervous about singing, and so we conjured an alter ego for him to assume while on stage. Thus, JERKASAURUS REX was born! Rawr.

• 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.

That, however, was inspired by … based on … blatantly copied from some images by the hugely talented Luigi De Aloisio.

In the name of originality, and boredom, I more recently hooked the same function up to the Camera class, and updated the grid every frame. Useful if you need to know precisely what web colours your face is made up of, but the whole challenge with the original app was finding a good source image that would remain discernible once grid-ified, so most of the time you’re stuck with meaningless coloured blocks. (As a lifelong fan of Sesame Street, that was enough for me, but I’m trying to make a career out of this stuff.)

Removing the text and squarin’ up the rectangles, you effectively get an over-pixelated form of the video feed – just like having a webcam from the 90s! I thought it might be interesting to dynamically update the z-axis position of each cell, and overall brightness seemed to be the most sensible property to sample. It looks like this:

So, to recap what’s happening: per frame, the feed from the camera is sampled at regular intervals, across a grid of specified resolution, to capture the pixel colour at each point (I couldn’t afford the overhead of averaging across each blocks’ area). On the first pass, for each cell, a Shape object is created, filled with a square, and added to the grid array. On subsequent passes, each Shape object’s colorTransform property is set to the sampled pixel colour (computationally preferable to clearing and redrawing the square, but not hugely). The R, G and B values composing the cell colour are then averaged and normalised, before being used to move the cell backwards along the z-axis by an amount proportional to its darkness. (Because darker things are further away, sometimes, maybe…? It more or less works for the shadowy areas in faces anyway.)

The squares look ok, but with the grid floating in 3D space, I thought it might look cooler to use solid blocks instead. Unfortunately your CPU will not find it cooler. Quite the opposite; performance isn’t great with this one:

The code differences here involved replacing each Shape object with a Sprite (in order to contain the multiple cube sides), and the four extra panels were drawn and rotated into position. Side colours were varied to make the blocks appear shaded, and on updating the colorTransform property, the three channel multipliers were each set to 0.6, in order to avoid washing the shading out altogether.

Next steps? As I’m yet to identify a practical application for all this, there’s little need to have it running in a browser or on Flash at all, so I may take a crack at porting it to Processing or C++ with OpenGL, for the perfomance gain. It might be nice to see it draw one box per pixel, or to to use the brightness to set the Z co-ordinate of vertices rather than faces, and then stretch the video over a surface. A plain ol’ wireframe mesh might look nice too.

Any feedback on performance would be great.

—
Edit: Source code uploaded to my github repository here.