FlexMonkey

Simulating Belousov-Zhabotinsky Reactions in Pixel Bender

2011-10-24T00:38:00.000-07:00

Earlier this year, I wrote a Belousov-Zhabotinsky simulation in ActionScript. Although very pretty, this sort of code is fairly slow in AS and deserved to be ported to Pixel Bender. So last night, I downloaded the Pixel Bender Toolkit and set about writing my first ever Pixel Bender shader.

The BZ reaction code I used was originally written for Processing by Alasdair Turner and is pretty simple - consisting of three lines of code to determine the values for each pixel in three 'channels' which refer to the three chemicals in the reaction.

Rather than manually looping over each pixel as the AS (and Processing) code, Pixel Bender has an evaluatePixel() method with is invoked for each pixel in parallel (or as parallel as possible). I sample each surrounding pixel using and average those values using a box blur. Finally, I set the output pixel based on the BZ algorithm.

The output is far nippier that the AS version and, because Pixel Bender filters execute on the GPU, the UI is far more responsive. I've added some quick-and-dirty drawing tools: the swatches in the left hand toolbar allow the user to select a colour draw on the screen.

I've included my Pixel Bender Kernel along with the compiled filter under the assets directory in the source code.

The application lives here and the source code is available here.

Flex Node Editor Tone Generator

2011-10-20T00:59:00.000-07:00

The last time I tinkered with node editors was over a year ago, but in that time I've played with applications like Houdini and thought about ways to improve the user experience. So over the last few weekends, I've resurrected my old node editor and extended it to a node based tone generator.

The main change is that nodes are now circular rather than square. This means that the input and output arrows can live anywhere on the node's circumference and eliminates any need for directionality in the graph. The flow of the graph can match the user's mental model rather than having to comply with an implementation model.

Also, being circles, it's easy to add some basic code to simulate some very simple physics. I've created a quick and dirty method for the nodes to repel each other.

I've kept in the node editor screen on the right hand side, but also added a spring loaded context editor. If you press the SHIFT button while hovering over a node, a mini-editor pops over that node.

Relationships between nodes can be created by dragging from the grey pop up border to another node. Right now, relationships can only be deleted by clicking the checkboxes in the right hand panel.

The sound synthesis part is, for me, secondary to the node editor, so I haven't spent ages on it. It's worth knowing that to synthesis a sound, the code has to get 8192 samples and sadly it isn't super fast. To help with perceived performance, each time the 'play' button is pressed after the data changes the data is 'baked' - i.e. stored in a buffer array. Subsequent plays use that buffer and don't require recalculating.

The real reason behind this is to revisit some old experiments I was doing with Pixel Bender. Hopefully over the next few weeks, I'll swap out the tone generator code and plug in image handling.

In the meantime, feel free to have a play. The application lives here. Some of the code ain't that pretty, so I haven't released the source.

A Blast From The Past!

2011-10-19T12:17:00.001-07:00

After a server change at Flex Monkey Towers, a few of the links on my blog died. I only just noticed today that the links to SpaceBalls, my Asteroids inspired physics based game, had also died. A quick tinker later and they're back up and running.

Here's the game, with no code rot after 3.5 years. The little blue space ship points towards the mouse pointer, the mouse button fires a missile and the space bar fires your thruster.

Brings back happy coding memories :)

Reacting to changes to isTruncated on Spark Labels

2011-08-09T12:38:00.000-07:00

If you've ever wanted to execute some code when a Spark Label's text is truncated, you may hope that binding to the isTruncated property would do the job. For example, you may want to set the background colour:

<s:Label id="labelA"

backgroundColor="{labelA.isTruncated ? 0xFF0000 : 0xFFFFFF}" />

However, the isTruncated property isn't bindable, so you need to dig a little deeper. Inside the TextBase class, the setIsTruncated() method dispatches a isTruncatedChanged event when the truncation state changes. This event isn't in the meta data, so you need to assign an event handler manually:

<s:Label id="labelB"

creationComplete="labelB_creationCompleteHandler(event)"/>

The creation complete handler assigns a further handler when the isTruncatedChanged event is fired to set the background colour:

<fx:Script>

<![CDATA[

import mx.events.FlexEvent;

protected function labelB_creationCompleteHandler(event:FlexEvent):void

{

labelB.addEventListener('isTruncatedChanged', isTruncatedChangeHandler)

}

private function isTruncatedChangeHandler(event : Event):void

{

labelB.setStyle('backgroundColor', labelB.isTruncated ? 0xFF0000 : 0xFFFFFF);

}

]]>

</fx:Script>

A Flex Alternative to 'Are You Sure' Dialogs

2011-03-06T09:02:00.000-08:00

One of my pet hates in interaction design is the use of confirmation dialogs before the user attempts to do anything of worth. More often than not, with a bit of thought most user actions could be recoverable and rather than stopping the proceedings with idiocy the user could simply press 'undo' and return to their previous state.

One of my favourite articles bemoaning the use of modal dialogs is this one by Jeff Atwood.

However, sometimes a user's action isn't undoable. For instance, detonating an explosive charge ain't easy to undo. In scenarios like this, modal confirmation dialogs still aren't a real solution. Users don't read the text in dialog boxes and simply pressing 'ok' becomes habitual.

What's needed in these situations is a button that requires a definite and decisive user action and maybe my PressAndHoldButton does the trick. This requires the user to keep the button held down for some period of time before firing an event.

The demo has three buttons - before any of those actions are performed, the user has to keep the relevant button depressed for five seconds.

The demo application is available here and the source code here.

Simulating Belousov–Zhabotinsky Reactions in Flex

2011-01-23T07:34:00.000-08:00

The Belousov-Zhabotinsky (BZ) reaction is a class of chemical reaction that exhibits morphogenesis or spontaneous pattern creation. The mechanism by which it generates patterns is known as reaction-diffusion and was actually separately proposed by Alan Turing in his famous paper, "The Chemical Basis of Morphogenesis".

I stumbled across this paper written by Alasdair Turner. He wrote some code for Processing to simulate the reaction, so I spent a little time this morning porting it to ActionScript and giving it a UI.

The initial condition is a randomised and homogenous mix of values. As the simulation runs, typical BZ spirals and circles appear - this is morphogenesis.

I've added horizontal sliders to tweak the rate of reaction between the different substrates in the reaction. Subtle variations in these rates can change the patterns between circles and spirals and have can get the entire virtual petri dish oscillating.

I've also added false color rendering to the output. The values from the BZ solver range from 0 to 1, my code gets the colour value from a linear gradient based on the reaction value in each cell. The list on the left has a handful of gradients that can be selected.

The code itself is pretty simple - with the exception of an item renderer for the gradients in the list, all the code sits in the main application MXML file. However, it's doing a lot of work each frame and isn't fast.

Does this code simulate 'real reactions? Belousov himself had problems trying to publish his work because he couldn't really explain his findings and there was some disbelief the reaction existed at all. However, there are plenty of examples on YouTube of BZ spirals appearing out of chemical reactions.

The application lives here and the source code is available here.

Happy Christmas in a Ska Style

2010-12-20T00:53:00.000-08:00

Not even vaguely Flex related, but how is this for a festive work of genius by Smerins Anti-Social Club? They were given a week to create this Ska version of Walking In The Air - suggested by listeners of 6Music and, man alive, it sounds amazing!

Flex DateChooser 'September' Bug

2010-12-19T06:41:00.000-08:00

There's an odd little bug with the MX DateChooser. If you put it inside a PopUpAnchor, it always seems to display September in the top bar. This seems an old bug - there's an ancient entry for a similar issue in the Flex bugs database.

In the absence of a proper fix, here's my resolution. On the creation complete event, invoke the invalidateDisplayList method inside a callLater.

Here's the fix in a demo application. Press the 'toggle visibility' button - the DateChooser on the left is out-of-the box and the one on the right has my fix. The source code is here.

Visualising Relationships with Circle Graphs

2010-12-19T05:31:00.001-08:00

I gave a brief talk last week at the London FLUG about visualising relationships between data using a circle graph. Here's a link to my demo. Rather than creating a data set, the demo generates its own random data which can be tweaked in the user interface. The class uses the standard Flex component lifecycle methods, so it should be easy to plug a data provider into it to make it useful.

The details of how it all works are available in this presentation. Click anywhere on the screen to move forward through the slides.

Additionally, I created a tiny project that demonstrates how to move the control point of a Bezier curve along a radial line that bisects the start and end points of the related data. That's available here - moving the horizontal slider moves the control point and redraws the curve.

Finally, I skinned the circle graph demo using my SoftSkin. The SoftSkin project is available here, but be warned, it's a bloomin' mess at the moment. Lots of copy and pasting, lots of magic numbers and lots of missing components.

So, a little Christmas bundle of all sorts.

Happy holidays,

simon

Solving Countdown Puzzles with Genetic Algorithms

2010-11-28T04:34:00.000-08:00

I played with genetic algorithms earlier this year. A few evenings ago, the idea of solving the numbers round in the TV show Countdown with genetic algorithms popped into my head. So, here are the efforts of a frantic Sunday morning coding session.

My application doesn't quite conform to the true rules - I create six random source numbers and a single target number. The application then creates a candidate solution by inserting a random operator (add, subtract, multiply or divide) between each number. This candidate solution then spawns a mutated version - the mutation is a 50/50 chance of either randomly changing an operator or randomly exchanging the order of two of the numbers.

Whichever version of the solution is nearer to the target number lives on to the next generation where it spawns a further mutation. This process repeats until the rounded down result of a solution matches the target number.

The application is small and to get things finished in a short space of time, I've dispensed of any real framework. The main logic is in GeneticCountdownModel, but I've put the fitness function in CandidateSolutionPair. In a similar fashion, CandidateSolutions are responsible for their own cloning and mutations.

The application uses my SoftSkin - a skin I've been playing with over the last few weeks. I've included the source, but be warned it's a bit of a mess at the moment. It's still work in progress with lots of little hacks and copy-and-pastes and is desperate need of some serious refactoring.

The application lives here and the source code is available here.

Skinning soft "Shake" style buttons in Flex 4

2010-10-26T11:34:00.000-07:00

Many years ago, I used a video compositing application called Shake. One of my memories of the application was its beautifully soft, almost organic, widget set. I thought I'd have a play with Flex skinning to replicate the look.

To create a nice 3D border programmatically, I use Spark Paths to draw four trapezoids which mimic the shape of the mitred parts of a picture frame and act as borders. The top and left borders graduate in colour from the background through near-white to the button face colour. The bottom and right borders also graduate from the background through to the face but through near-black.

A blur to the borders smooths out the colour difference at the corners and gives a nice 3D impression.

When the button is depressed, I swap out the middle gradient colours on the borders to change the effect from an outset button to an inset one. I use an AnimateColor to soften the transition.

The application is available here and the source code here.

Flex/Parsley Keyframe Editor

2010-10-12T11:02:00.000-07:00

This is a project I've been playing with on and off recently - a keyframe editor for animating arbitrary objects. I thought I'd post it in its current embryonic state to show how MotionPaths and KeyFrames can be dynamically edited and applied to interface elements.

Embryonic is the key phrase here - the animation 'engine' is done, but the user interface is far from complete (or even attractive). The current UI allows the user to play and stop the animation, select an object from the left hand list and select a particular animated property and then add or edit keyframes.

The initial animation data is hard coded in the AnimationData class. This includes a Parallel that contains individual AnimationTransforms for each MotionPath for each animated property. The Group class contains the individual items (in this case Rects) that those MotionPaths will affect.

I'm using the presentation model pattern, so most of the good stuff happens in AnimationMonkeyPresentationModel. I'm also using Parsley to inject the model and animation data into the view classes and handle messaging.

A few pointers on playing with the Keyframes of a MotionPath: scaleKeyFrames() needs to be invoked on the MotionPath otherwise getValue() will fail and Keyframes need to be in time order. My presentation model contains a sortKeyframes() method to keep them in check.

The GraphEditor allows users to view the motion graph of any animated property. It uses getValue() to draw the graphs (hence the caveat above) and to check if the mouse is near a point on the graph to offer the user the opportunity to add a new keyframe. Clicking a keyframe node pops up a little editor where the user can change values and change the type of keyframe.

The application is available here and the source code here.

Decoupling the Presentation Layer & the Joy of Interfaces

2010-07-01T10:14:00.000-07:00

I've been playing more with my Parsley Node Based User Interface. My main goal over the last few days has been to completely decouple the presentation code from the data it's displaying and my first proof-of-concept is a simple calculator application.

The initial versions of the code used an array collection of instances of Nodes - this is fine if I'm only ever going to display one type of data, but to make the code a lot more flexible and scalable, I now pass it an array collection of objects that conform to my INode interface. The interface contains all the methods that the node based interface requires to render.

So, I've created a new class that sits outside the presentation package called CalculatorNode which implements INode.

To further decouple the interface from the data, I inject the node renderer and the detail form into the UI. These two classes implement my INodeRenderer interface and are defined in the DomainModel class (a small caveat - in this proof of concept release, I've still got the node widget's height and width hard coded).

A double check through the source code and there are no references to any of the calculator classes in the presentation package! All the logic for calculating the output is handled in the CalculatorNode value object which is a style of domain driven development I quite like. However, to conform to a more MVC style, this logic should really live in a command.

The application lives here and the full source is available here. You can add and delete nodes, change them from fixed numbers to operators. The user interaction for creating relationships needs to be changed to allow dragging between nodes, but the checkboxes work OK. If a relationship is unused it's renderered in grey (for example if you pass more that one number to the square root function, only the first number is considered).

Of course, a calculator is only the beginning. I've been thinking about a CAD type application for this code where each node represents a shape and those shapes can be overlaid with different blend modes.

Finally, I couldn't get SharedObject to play nicely, so that code is commented out. Any changes you do will be lost with each new session.

Oops in my haste to get this blog out, a managed to release a little bug when adding a new node. This is now fixed!

Displaying Color Coded Events in the Flex DateChooser

2010-06-25T13:31:00.000-07:00

Although the Flex DateChooser class does a great job of allowing the user to select dates, it doesn't support highlighting arbitrary dates. If you want to inform your user of events, you need to extend the component.

Kevin Brammer did a great job some time ago to fix this, however - and with the greatest of respect - I thought I could improve upon his code and use the Flex component lifecycle framework to bind his ExtendedDateChooser to an array collection of events.

So, here's my version. The dateCollection is a collection of objects that have the properties color, date and narrative (although if your objects don't use those property names, you can change the colorField, dateField and narrativeField of the component).

When either the collection changes or invalidateDisplayList() is invoked, the addEvents() method loops over the collection and sets the background and foreground colors of the individual UITextFields that make up the CalendarLayout. I also check the luminosity of the background color and set the foreground to ensure it's readable.

The data grid on the right displays the contents of the events collection and in this demo you can add and remove events.

The real meat lives here and the rest of the source code is here.

One little post script - the renderer only displays one event per date. Multiple events per date are for version 2 :)

Parsley Node Based Interface Evolved - Dynamic Commands & Domain Model

2010-06-24T01:37:00.000-07:00

My adventures with Parsley continue! Over the last few evenings, I've extended my previous experiment:

Pseudo drag-and-drop - the nodes can now be repositioned with a drag. This code doesn't the Flex DragManager, rather it invokes moveSelectedNode() on the presentation model and then the views with a message handler for SelectedMoveMessage update themselves.
DynamicCommands - I've implemented two commands to save and retrieve networks from a SharedObject. When the user clicks either 'get network' or 'save network', these commands are invoked via the Configuration IoC class. This class acts a little like the FrontController in Cairngorm or the EventMap in Mate and mediates between messages and commands.
DomainModel - I've added a list on the left of the screen to preview what's in the domain model. You can see that until the 'save network' button is pressed, the domain model remains the same.

Flex passes complex objects round by reference. This means that if I inject the domain model into the presentation model and start changing the presentation model, those changes are immediately applied to the domain model. To stop this, I use the ObjectUtil.copy() method in conjunction with registerClassAlias. These give me a strongly typed clone of my model.

Relationships between nodes are managed by ticking and unticking the checkboxes in the inputs list in the detail view.

The application is still abstract, the next step is to allow node renderers to be injected into the presentation code so that the same node based interface code can be used to manage different types of data from a simple calculator to an image composition tool.

The application lives here and the source code is available here.

Please note - on my Mac, this works beautifully under Chrome and Firefox using Flash Player 10.1. On a PC, the SharedObject code seems to sometimes crash Flash Player - especially under IE, but Chrome and Firefox are a little more stable.

First Dive into Parsley and the Presentation Model

2010-06-15T12:07:00.001-07:00

I've spent the last few evenings playing with the Parsley Framework and using a presentation model. There's a great article here that helped me out a lot and the Spice Factory documentation is very good too.

Since I have a longstanding love of network interfaces, I thought I'd create a simple network UI. Here's a quick run though of the main areas of interest:

The main application file is quite sparse. All it contains is a reference to my Parsley configuration file and two view classes.
The configuration file - config.Configuration - contains a reference to my presentation model.
The presentation package contains the real meat. This is my first experience of using the presentation model pattern and IMHO, it's a great way of working. The model is injected into both the network and detail views. The model has no knowledge of the views, but the views - being injected with a typed model - can invoke methods on the model. For example, the network view invokes setSelectedNode() and the detail view invokes updateSelectedNode().
The two main view classes, NetworkRenderer and NodeDetail use the IOC pattern to accept the presentation model. The former contains a Parsley MessageHandler to render the nodes and relationships when the nodes collection changes. The form elements in the detail view are simply bound to various properties of the selected node.

This is just a demo - there is lots not implemented. You can't, for example, create relationships or add new nodes. I'll carry on fleshing this demo out and add those functions over the next few days. However, the detail view does allow you to change the selected node's label and position.

One minor point - after rendering relationships in previous applications with convoluted curveTo() methods, it occurred to me that an easing function would do the job far better. If you look into the guts of NetworkRenderer, you'll see I use the Power class to draw the curved lines.

Have a delve into the source code, although it's sparsly commented, I think it's quite easy to follow.

The application is available here and it's source code enabled.

Enjoy!

Aligning the Label in a Tree Control

2010-06-12T06:05:00.001-07:00

If you've ever rendered images in a tree control, you may have noticed both the image and the label are effectively top, left justified. There's no CSS solution to changing this, the answer is to extend Flex's TreeItemRenderer and move the renderer's label in ActionScript.

Here's my version. Inside updateDisplayList() are a few lines of ActionScript that reposition label to make right justified and vertically centered. The SWF is source code enabled and that source is available here.

simon

Centre Aligned HorizontalList in Flex

2010-05-26T10:40:00.000-07:00

A short while ago, I was bemoaning the fact that the Flex HorizontalList control only ever left aligned its items. Over the weekend, I thought about this again and realised that by overriding the measure() method, I could set the width of the horizontal list based on its contents and allow its container to center it.

Here's a demo of my AlignedHorizontalLost control. It only contains two overridden methods - updateDisplayList() explicitly invokes measure() and the overridden measure() resizes the control using the measureWidthOfItems() function.

If you open the demo, you can add and remove items. The top list is the regular left aligned HorizontalList and the bottom is my extended version.

The complete source is available here.

A week without Flex....

2010-04-12T11:13:00.000-07:00

....can it be done? Spending a whole week without writing a single line of code?

Well, I managed it with a frantic week whizzing round Bangkok and taking more pictures than you can shake a stick at. If you have some spare time, here are the fruits of my photographic labour.

Now I'm back at a computer, my thoughts naturally turn to Flex, physics and some experiments playing with Box2D.

simon

Motion Controlled Painting with Flint Particles

2010-04-02T10:20:00.001-07:00

A while ago, I visited the Decode exhibition at the Victoria & Albert museum. One piece I realled liked was Body Paint by Mehmet Akten. Over the last few days, I've been playing with an homage using Flint Particles and some simple motion control using the Flex Camera object.

You can see my proof of concept work here. On my MacBook, I had to explicitly set the camera in the Flex options dialog to the USB camera, but PC's seem to work fine with the default settings.

The source code is available and pretty much all the 'meat' of the application is in MotionBodyPaint.mxml.

In a nutshell, I use the Flex Difference blend mode between consecutive frames to create a greyscale image that controls the emission of particles.

The getColorBoundsRect() function creates me a rectangle of the white areas of the frame after applying the threshold() method. By comparing consecutive rectangles, I create a direction for the initial particle velocity so the particle direction roughly mimics the overall direction of movement.

If you're using the debugger version of Flash Player, there are a few little bugs that crop up which I think is related to an empty greyscale image getting passed into the Flint engine. However, if you use the regular version, it works fine.

Although far from finished, this proof of concept works quite well - enjoy it as an Easter treat :)

simon

Flex Flint Particles Editor with Node Based UI

2010-03-10T13:43:00.000-08:00

Following some feedback on my first release of ParticleLab 2.0, I decided to rebuild my node based user interface from the ground up. I feel the main issue with my original node based particle editor was the sheer size of the nodes meant navigating through the scenes was quite an unfriendly experience. To that end, I've stuck with the detail panel but added a node based UI for navigation and selection.

This now offers an immediate view of the entire scene and illustrates the relationships between all the objects. Although the UI doesn't yet allow users to create relationships, it can display shared nodes (for example several emitters may all use the same gravity well action).

I've based the new UI on a set of Flex TileLists - one for each category of Flint object. Using TileLists gives me all the nice transitions when nodes are added or removed and handles layout nicely. It's a shame that the TileList can't center justify its children.

The next step is to add in place editing for the different zones. This version uses Degrafa to render the zones in the editor and renderer.

Because this is the first attempt at recreating a Flex node based UI and there's a lot of room for tweaking, optimising, refactoring and general faffing about, I'm holding back on releasing the source. However, the application is available here.

Genetic Algorithms & Typography Evolved

2010-03-01T13:40:00.000-08:00

I had some free time on Sunday and on the Eurostar today to add in a few more fun features into my GeneticType application.

Firstly, I've added an animation tab. Whenever a mutated version of a letter is generated which is fitter than its parent, it's stored as a key frame. The animation tab normalises the keyframes and uses the timer class to step through each one. This is the first step to using the application for transitions and I think it works really well. I've capped the total number of keyframes to 10,000 for each character. I haven't really had time to run this for hours, but I'm sure 10,000 will be more than enough.

Secondly, I added a blur control. This makes triangles nearer the letter fitter. Using hard edges means there's no way of telling if a triangle is fitter depending on its distance. Obviously, the better fix is a better fitness function - maybe one that uses shape recognition. However, I'm not sure even my speedy fingers can get than done in two hours on the Eurostar.

Finally, I dug out some really old code for video playback control. The user is able to jog and shuttle the playback simply by tracing a clockwise or anti-clockwise shape over the canvas with their pointing device with the button held down. IMHO, this works really well - there's no target control, just gesture anywhere on the screen.

It's taken almost two years for me to find a home for that code, I'm pleased I got use out of it eventually.

The new version of the application lives here (it's a new location to keep the evolution of the application available) - right click for the source.

Back to particles with any free this week - step one is adding a node based UI.

Typography using Genetic Algorithms in Flex

2010-02-26T00:16:00.000-08:00

I took some time off from particles this week after a conversation in the pub started me thinking about genetic algorithms. Genetic algorithms are a technique by which a randomised solution to a problem is created and a mutated version (or versions) is (or are) spawned. The original solution and the mutated version are compared for their fitness against a solution and the fitter lives on the spawn another mutated version.

In my experiment, the solutions are random arrays of translucent triangles and the fitness function compares those random arrays against a character of text. The idea being after several generations of mutation and selection through the fitness function, the random array would start to resemble the target character .

Here's the work-in-progress Flex application (right click for source). I've added a UI that allows the user to select the target text, tweak some parameters and run the simulation.

This was primarily an intellectual exercise, but I can the see real applications:

Creating properly, randomised deconstructed type: most deconstructed type is based on a fixed font and each instance of each letter is identical. To me, this just looks odd and each instance of the same character should look different.
As a source of still images for interesting typographic transitions. It would be interesting to store each new successful (i.e. fitter) mutation and animate them from their original fully randomised state to their more evolved state.

The fitness function lives in the GeneticTypeWidget class. In a nutshell, it examines every pixel in the parent 'dna' and the mutated 'dna' against the target text. Since I'm only using black and white, I've selected a single, arbitrary colour channel for comparison to speed things up. As Flex loops over each pixel, it adds the the pixel difference to a fitness variable and at the end of the loop, the 'dna' whose fitness variable is less lives on for another generation.

On my machine, it can take a good few minutes before the images start to resemble the target text. Sans serif, simple characters tend to work best and as the simulation runs, the mutations become less and less likely to be fitter than their parent, so the successful mutations become less frequent.

The application lives here and the source code here.

[Note: the initial random triangle code has been tweaked so they are smaller triangles and the effect is a lot nicer]

ParticleLab 2.0

2010-02-21T12:30:00.001-08:00

Over a year ago, I wrote a network based application for editing Flint Particle scenes - ParticleLab. Although a lovely idea in theory, it wasn't a great user experience to create complex particle systems. So over the last few months, I've been playing with version 2 of ParticleLab which is available here.

The interface is a lot more traditional and, more importantly, a lot more usable.

Flint scenes consist of one or more emitters and these emitters have counters, initialisers and actions. For example, an emitter may have colour and position initialisers and a gravity action. The new UI allows the user to select an emitter from the bottom toolbar and then access the additional properties through the form on the right.

I've included two of Richard's examples - gravity well and flocking. These can be selected from the combobox in the bottom left of the application. If you add a new emitter, it comes bundled with some basic initialisers and actions to save time.

Now I've completed the basic engine, enhancing the user experience is my next step. I want to allow users to edit positions and zones through the GUI rather than entering values in numeric steppers. But as it stands, it does allow users to experiment with Flint. There's a great summary of what the different Flint classes do here: http://slekx.com/2009/12/flint-visual-introduction/

I've enabled the source code, with one caveat. Although I use Cairngorm every day at work and I've a great advocate of frameworks, when my brain is working faster than my fingers, Cairngorm is too verbose. To that end, I use my own framework of sorts. The views broadcast events via EventBroker and those are handled by a manager class. The manager does all the hard work.

Because properties of Flint objects aren't bindable, the manager cheats a bit and broadcasts change events that the editor and renderer subscribe to.

The application is available here and the source here.

simon

Simple Gesture Recognition in Flex

2010-01-24T04:53:00.000-08:00

I played with this before Christmas one weekend and rediscovered it last week. Although it's nowhere near complete, it's an interesting exercise and may be useful to some.

The test bed application allows users to enter the figures 0-9 via simple gestures. A gesture starts with a mouse down on a box and ends after the user has moused over several boxes and releases the button.

The GesturePopUp class accepts an array collection of Gesture objects. In turn, each Gesture object contains an array that describes each position of that gesture. For example, the '1' character comprises of an array containing the positions 2, 5 and 8.

While the user is performing a gesture, the code checks for any items in its gesturesArrayCollection and displays all the relevant matches.

Why 'pop up'? When I first started writing this, I imagined the 3x3 grid as a pop up - maybe launched by pressing the space bar. Imagine you have a full screen video player, the grid could pop up to allow the user to execute commands such as play, pause, stop, etc.

The application lives here and the source code is available here.

simon

Dynamic Summary Headers on Hierarchical Data

2009-09-10T11:00:00.000-07:00

Let’s suppose you are displaying hierarchical data in the advanced data grid, but your child data has different properties depending on its parent. For example, you might be displaying the departments of a store with different products having different properties – a camera has a sensor type and a television has a display type.

Here’s a little demonstration of how you can create dynamic headers at the parent level to solve this. It’s a bit hacky, but works.

I have two data types – a LineItem, which is my product, and a Department, which, surprisingly is my department. Both types have ‘abstract’ properties, elegantly named columnA, columnB, etc. At the LineItem level, these properties hold the type specific data and at the Department level, these properties are actually getter functions that return a header string for that type.

For example, my columnB getter looks like this:

public function get columnB():String

{

var returnString:String = ''

if (this.isOpen)

{

switch (this.type)

{

case CAMERA:

returnString = "Lens"

break

case TELEVISION:

returnString = "Display Type"

break

case PETS:

returnString = "Favourite Food"

break

default:

returnString = 'Unknown Department Type!'

break

}

}

return returnString

}

I also wanted to hide the headers when the department row was collapsed, so naughtily, the advanced data grid sets the department’s isOpen property when the user expands or collapses the row.

The application is available here - right click for the source code.

EventBroker saved my life!

2009-07-27T06:23:00.001-07:00

Just a quick tip - if you have components within components within components and bubbling events are slowing your Flex application down to a crawl, take a look at the implementation of the publisher/subscriber pattern (you did read Design Patterns, didn't you :)) called EventBroker.

It allows you to broadcast events from anywhere in your application and subscribe to them anywhere else. No need for bubbling through layers of UI.

I owe the guys at DevelopmentArc a pint or two...

ItemRenderers in the AdvancedDataGrid

2009-07-16T11:38:00.000-07:00

Here's something that's maybe not immediately obvious when creating item renderers for the ADG. More often than not, the ADG's selected index isn't the corresponding index in the data provider. For instance, grouping rows count in the ADG but not in the data providers.

Classes like List have a data property that item renderers can use to access their data, the ADG uses BaseListData.

Let's have a look at a super simple implementation of the ADG:

<mx:AdvancedDataGrid itemRenderer="ClickableItemRenderer">

<mx:dataProvider>

<mx:Object name="Simon" age="21" gender="male" />

<mx:Object name="Bill" age="42" gender="male" />

<mx:Object name="Fred" age="35" gender="male" />

<mx:Object name="Angela" age="21" gender="female" />

<mx:Object name="Jane" age="37" gender="female" />

</mx:dataProvider>

</mx:AdvancedDataGrid>

You'll notice that the item renderer is a new class - ClickableItemRenderer. This implements IDropInListItemRenderer and has getter and setter methods to set its listData property:

<?xml version="1.0" encoding="utf-8"?>

<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml"

implements="mx.controls.listClasses.IDropInListItemRenderer "

doubleClickEnabled="true" doubleClick="doubleClickHandler()">

<mx:Script>

import mx.utils.ObjectUtil;

import mx.controls.Alert;

import mx.controls.listClasses.BaseListData;

import mx.controls.advancedDataGridClasses.AdvancedDataGridListData;

private var _listData:BaseListData;

public function get listData():BaseListData

{

return _listData;

}

public function set listData(value:BaseListData):void

{

_listData = value;

labelWidget.text = AdvancedDataGridListData(listData).label

}

private function doubleClickHandler():void

{

Alert.show('Data field: ' + AdvancedDataGridListData(listData).dataField + '\n'+

'Contents:' + AdvancedDataGridListData(listData).label + '\n' +

'Row:\n' + ObjectUtil.toString(AdvancedDataGridListData(listData).item))

}

</mx:Script>

<mx:Label id="labelWidget"/>

</mx:Box>

Double clicking any cell in the ADG now opens an alert that summarises the data field, contents and entire row.

Hope this is useful,

simon

Sorting a grouping collection

2009-07-07T06:59:00.000-07:00

If you write your own header renderer for the advanced data grid (ADG) that uses a grouping collection as its datasource, you may find that clicking the header to sort doesn't work. In my case, the ADG sorted on the first click, but failed on the subsequent clicks.

To save you the few hours I spent finding the solution to this problem, here's how to programmatically sort a grouping collection. In my case, the ADG header renderer dispatches an event when the user clicks it to invoke this method:

private function sortHandler(dataField:String):void

{

var sort:Sort = new Sort();

advancedDataGrid.validateNow()

sort.fields = [new SortField(dataField,true)]

advancedDataGrid.dataProvider.sort = sort

advancedDataGrid.dataProvider.refresh()

}

My ADG is named advancedDataGrid.

Looking for Flex Talent in London

2009-04-29T02:36:00.000-07:00

Wow - two months since my last blog. I've had a busy few months moving house, changing, err, 'marital status' (SWFP looking for...) and leaving Tag after a decade to move to a great SAP Netweaver company in Trafalgar Square called Keytree. I've returned to my roots and my days are spent happily coding super slick Flex user interfaces to Keytree's power house SAP solutions.

The opportunity to be at the forefront of integrating Flex and SAP is really exciting. So all my free time right now is spent working on some secret in-house projects, and my experiments with physics and other Flex goodies don't really get much time at the moment - hence the lack of blogging.

I'm also currently putting feelers out for some fresh Flex talent around London to help me out on a new project (with other sexy Flex projects in the pipeline). If you're a middle weight Flex programmer with a good sense of interaction design, usability and aesthetics and you're looking for some great projects, please drop me a line: simon.gladman [@] keytree.co.uk with your CV, some examples of your work and salary expectations.

A new version of Space Balls is in my pipeline :)

simon

PS: No agencies! I'm looking to recruit directly only :)

Binding Properties on Flex 4 Declarative Graphics

2009-02-23T22:25:00.000-08:00

Before Flex 4, if you were displaying vector graphics that were changing, your code needed to clear down the graphics object of your display class and re-render the graphics. What you couldn't do was, for example, simply change the position of the beginning or end of a line or curve.

Flex 4 introduces something slightly different - declarative graphics. With these, you define graphics as an object and their properties can be bound. Here's a super simple, five minute demonstration. At the top of the page, I create a CubicBezierSegment (another new feature of Flex 4).

The interesting thing about the Bezier segment is that all its properties - the positions of the start, control points and terminus and the weight and color of the stroke - are bound to a set of numeric steppers in the right hand panel. This means that when you change one of those steppers, there's no additional ActionScript - the Bezier curve redraws itself through the joy of binding.

This ain't no Raven - but if you're working with vector graphics, Flex 4 is the way to go.

The demo application is here and the source code is here.

False Color Fluid Dynamics Bug Fixed

2009-02-21T03:43:00.000-08:00

The keener eyed of you may have noticed a typo in getRenderColorValuesArray(). The first argument to createGradientBox should be 255 not 200.

The fixed version of the application lives here and the source code lives here.

False/Pseudo Colour Rendering of Flex Computational Fluid Dynamics Demo

2009-02-19T22:58:00.000-08:00

Pseudo colour rendering is a technique whereby individual pixels in a gray scale images are assigned a color based on a function or gradient. Last night I added pseudo colour rendering to my Flex computational fluid dynamics demo.

The first thing was to add the gradient data to the AdvancedOptionsModel and create a gradient editor for the user interface. Luckily Mariusz Tkaczyk has written a nice gradient editor which was a snip to drop into my Toolbar class.

My initial thought was to have the toolbar supply the renderer with an array of color values for different temperatures. However, there's something very un-MVC about this approach - really the FluidManager should have that responsibility. To that end, I wrote this handy little function that accepts the same arguments as beginGradientFill and returns an array of uints for each step of a gradient.

Here's the function:

private function getRenderColorValuesArray(gradientType:String, colors:Array, alphas:Array, ratios:Array):Array

{

// quite a useful function to get the color value of a given gradient at any point....

var renderColorValuesArray:Array=new Array()

var swatch:Canvas=new Canvas()

var bitmapData:BitmapData=new BitmapData(255,1)

var gradientBoxMatrix:Matrix=new Matrix()

gradientBoxMatrix.createGradientBox(200,1)

swatch.graphics.beginGradientFill(gradientType, colors, alphas, ratios, gradientBoxMatrix)

swatch.graphics.drawRect(0,0,255,1)

swatch.graphics.endFill()

bitmapData.draw(swatch)

for(var i:int=0; i<=255; i++)

{

renderColorValuesArray.push( bitmapData.getPixel(i, 0))

}

return renderColorValuesArray

}

The complete source code is available here and the new psychedelic version of the application lives here.

Mate Framework Part II - Porting Computational Fluid Dynamics to Mate

2009-02-13T01:11:00.000-08:00

I've spent my free time over the last few days porting my CFD demonstration application to the Mate Framework. I think I've got all the nooks and crannies covered, so here it is, along with the source code.

I've restyled the application, really to help distinguish it visually from the previous version while I was working on two codebases simultaneously. The skin is Darkroom, with a few tweaks, and I've replaced the font with Gill Sans.

The MainEventMap is the real plumbing behind the application. Whereas in my previous 'Simongorm' version, there was some obfuscation around passing variables and handling events between the classes (especially between the FluidManager and the FluidSolver), under Mate we have a single class where all the relationships are made clear.

The MethodInvokers and EventHandlers under Mate still slightly frustrate me. It would be such an improvement if the EventHandlers could somehow pass the event type to the MethodInvokers so that the arguments property could autocomplete and do compile checking. I've had a few occasions where I've mistyped a property name or missed a closing bracket - this hasn't been picked up by the compiler and I've had to scrabble around finding my typo.

I've probably got a few too many different event classes - maybe be being slightly more judicious with the type property I could rationalise them. But what I do have is a set of quite distinct event classes with (hopefully) self documenting names.

It could be argued that the view classes are too tightly bound to the manager and models. I've used a lot of references to public static properties of the FluidManager (e.g. the different ambient temperature types). Ideally, these would be injected into the views to allow them to act as a user interface for different types of manager and model.

Currently, the application renders in greyscale based on the density or temperature of the cell. This morning, I started playing with a graduation widget that allows users to define hot and cold colors and arbitrary values in between. This gives a much richer 'false color' image. Hopefully, I'll find time over the weekend to implement this and I'll post it next week.

FlexMonkey is one of DZone's Most Valued Bloggers

2009-02-09T09:48:00.000-08:00

I'm very flattered to have been invited to become one of DZone's Most Valued Bloggers. Simply being on the same web page as Ben Forta is quite a thrill!

Keep an eye out on their RIA Zone - you should see something from me there soon...

Further Experiments with Computational Fluid Dynamics in Flex

2009-02-09T05:39:00.001-08:00

This weekend was my birthday weekend, so less time was devoted to Flex than usual, but between Gin & Tonics, I did find time to put a user interface onto my CFD playground to allow users to edit all those magic numbers hidden away in the source code.

If your machine is fairly speedy, upping the linear solver iterations can produce some pretty eddies in the flow and upping the diffusion factor can give a pretty flame effect. The two buoyancy values change how hot, white areas flow upwards.

Have a play. The application is here and the source code here.

After an honourable mention on the Mate front page, I will spend the next few days porting this code from 'Simongorm' to Mate. That should make the FluidManager a lot more portable if you want to use it in your own projects.

If you are in London tomorrow, I'll be at the ColdFusion UK User Group meeting in Soho, see you there.

Experiments with Computational Fluid Dynamics in Flex

2009-02-04T01:01:00.000-08:00

Last week I started thinking about writing a new action class for Flint particles for Computational Fluid Dynamics (CFD). If you've ever researched real time CFD, you will have come across Real Time Fluid Dynamics for Games by Jos Stam. The paper breaks down the steps required for a simulation and provides the C code. Jos's solution is cell based rather than particle based so it's not immediatly applicable to my ParticleLab, but it's still a really interesting project.

I spent Saturday porting the C code to ActionScript. By Saturday afternoon, my beautifully crafted cell objects and array collections were feeling slow, really slow. In a quest for elegance, I'd lost a lot in performance. Luckily, I found Pierluigi Pesenti's superb Oaxoa blog and his port of Jos's code to ActionScript.

Pierluigi's code is a lot truer to Jos's C code and runs far quicker than my first attempts. So I happily trashed my code in favour of his.

The one big difference between the ActionScript and the original C is that, for speed purposes, Pierluigi has reduced the iterations in his relaxation code that's used to diffuse velocities and densities. I haven't put a user interface widget in to allow the user to change the number of iterations, but you can experiment with this value by changing the top value of the 'k' loop in the linearSolver() method in FluidSolver.as.

This simulation is hard coded to a 50x50 grid. Again, there's no UI to allow the user to increase the resolution, but if your machine can handle it, you may want to experiment by upping the resolution. This is controlled by the gridSize contsant in the main FluidSimulation.mxml file,

My 'CFDLab' - which is more like a convection lab - allows users to add and edit source objects. These are areas of fixed 'temperature' with some user defined random variance. For example, a box with a low temperature appears black in the simulation and being cold, oozes black goo downwards, alternatively, a box with a hign temperature (the maximum temperature is 255) renders as a white box and emits a rising white smoke.

In addition to source objects, the user can reset the ambient temperature. I've also popped in a few presets which you can access from the drop down in the bottom right.

The Flex skin is 'Undefined' (http://www.scalenine.com/themes/undefined/Undefined.html) which was the winner of Scale Nine's 'Skin To Win' challenge last year.

This was a true 'stream of conciousness' piece of coding and in my eagerness to get the code working, I ended up using my own 'framework' over Mate. By looking at the code, you can see how the main MXML file acts as the controller, invoking methods on the FluidModel (which should really be renamed FluidManager) in response to user events dispatched by the Toobar class.

The application is available here and the source code here.

Finally, if you're in London tonight, I'll be at Flex In The Pub - see you for a beer!

simon gladman

FlexMonkey for Hire!

2009-01-28T09:12:00.000-08:00

After over ten years working at Tag Worldwide, the time has come to move on. I've really enjoyed my time at Tag, but after working on the same application for a decade I need some new challenges.

As somebody who really, really loves to write great software, the additional responsibilities of being 'development director' do interfere with my writing gigabytes of amazing ActionScript.

My background is ColdFusion, SQL, JavaScript and, of course, Flex. I'm creative, inventive, enthusiastic and despite being a bit of a spod, I really love working with people, presenting and leading teams.

My CV is available here. Drop me a line if you have any exciting opportunities.

Quick Introduction to the Mate Framework for Flex

2009-01-28T01:03:00.000-08:00

Although at work I have implemented Cairngorm as our preferred framework, for the personal projects that you see on my blog, I have my own framework of sorts. My framework involves creating view objects that use standard Flex binding to my data models, using Flex's BindingUtils to react to model changes and using the main MXML file to invoke methods on my models in response to events on the views.

Recently, there's been a lot of chatter regarding the Mate framework, so last night started a little project to try it out.

This slightly useless little application allows users to create any number of coloured boxes (which I refer to as GraphicLayers), either filled or unfilled. They can select any of the GraphicLayers using a list view on the left and edit them. Let me run through the architecture to give you some insight into developing using Mate.

The fundamental object is a GraphicLayer - this is a value object that defines how our boxes will be rendered. Also inside my models directory is the GraphicLayersManager which contains an array collection of GraphicLayers and the business logic surrounding it.

I've created four view classes:

An Editor class that allows users to edit the properties of the currently selected GraphicLayer
A Renderer class that renders a GraphicLayer
A Thumbnail class that extends the Renderer but at a thumbnail size
A ListView class that lists the array collection of GraphicLayers and uses the Thumbnail class as its item renderer. The list view allows the user to define the currently selected GraphicLayer which is displayed in the Renderer and is editable in the Editor.

The view classes dispatch different events depending on user activity:

The GraphicLayerChangeEvent is dispatched when a user edits or adds a GraphicLayer. The event has two types - a change and an add.
The GraphicLayerSelectionChangeEvent is dispatched when a user changes the current selection in the list view.

Under the maps directory is the MainEventMap class. This class glues everything together using either EventHandlers or Injectors.

EventHandlers have a type property which refers to the event type. When a view dispatches an event, it is these that invoke methods on the GraphicLayersManager to change the array collection of GraphicLayers.
Injectors define the binding between properties of the GraphicLayersManager and view objects.

Having all the plumbing in a central location makes navigating the architecture of your application really easy. However, I do have reservations about the lack of checking at compile time of some of the properties in classes like the MethodInvoker's method property. Luckily, the Mate debugger is really helpful and using Flex's debug feature helps locate bugs and niggles very quickly.

Overall, I really like Mate - it feels a lot lighter than Cairngorm and was a breeze to pick up. I've enabled the source code view on this little application, I hope it helps towards your understanding of this new framework.

The application is available here.

simon gladman

ParticleLab - Flex Particle Editor Continued

2009-01-22T05:46:00.000-08:00

A few new additions to my Flint powered ParticleLab:

Improved performance while rendering the curve during the creation of relationships.
Added zones! Nodes such as the position and velocity initialisers can now be linked to a variety of different zones.
Added an overview list that centers the selected node when clicked.
Created a new class to allow the editing of point data.

Item three is an important addition when editing really complex networks - when the user clicks on an item, the canvas moves to put the selected node into the center of the screen. I also fancied a right hand toolbar as an homage to the venerable SoftImage.

Next step is to add some example networks to show off the power of Flint particles, and then to start playing with 3D.

ParticleLab is available here.

simon gladman

ParticleLab - Node Based Particle System Editor

2009-01-18T22:37:00.000-08:00

A long time ago when I was working in 3D with applications like Maya and XSI, I spent many a happy hour tinkering with particle systems. Particle systems allow animators to create effects such as smoke and liquids by creating many individual particles affected by forces such as gravity.

I've extended my Flex node based interface code to create an application to create scenes that use the excellent Flint Particle System. Far from finished, you can see my work in progress here.

On opening the application, you're presented with a default particle scene - an emitter with some basic properties, but tied to an 'approach neighbors' action. If you press 'start', the emitter starts playing and the action draws the particles to themselves.

I've plugged in a good variety of Flint objects to play with. What's really missing is an editor node for the different position zones. Right now, you're stuck with fixed emitters either in a point, a box or a disc.

My first criticism of my work to date is that you need to many nodes to get particles doing anything of interest. At the minimum, you need an emitter, a 'move' action and a 'position' initializer. This isn't a fault of Flint itself, rather I can resolve it by creating a new emitter node that comes with the fundamentals built in.

As a point of interest, I didn't hand code each editor UI for each different node type. Flex contains the supremely useful describeType() method which returns an XML object that contains an object's properties. Using that XML, I build the UI dynamically. This makes adding new Flint objects child's play.

A note on color coding: I wanted to differentiate between different node types with color. Since I'm pretty color blind myself, I tried to use fairly distinct colors but after a while I started to get confused too. Last night I added some code that disables nodes during the relationship build state (i.e. when you start a drag from an output semi-circle) and that, IMHO, makes it clear what can link to what.

Once again, the application is available here - enjoy!

simon gladman

Scalextric in Flex - Prototype Components for Slot Car Racing

2009-01-06T00:44:00.000-08:00

Over the Christmas break I started developing the beginnings of a Scalextric style game in Flex. Although the game is nowhere near playable, the two main classes are pretty much working and if you're thinking of doing a similar style game, some of this code may be useful to you.

The view class is TrackRenderer - it renders a TrackScene object and if its isRunning property is set to false it acts as an editor widget. When you first launch my demo, the TrackScene is empty, by clicking on the renderer you can start adding vertices. The first track segment has to be vertical or horizontal, but subsequent sections can be at 45 degrees and create an arc.

The scene is bound to the renderer, so there's no additonal ActionScript when adding and removing vertices or when positioning the car.

There are a whole load of rules in TrackScene that define what makes a legal vertex. The renderer displays a green circle on legal targets and red on illegal. In a nutshell, you can create smooth transitions between arcs and lines.

Once you have defined a path through a set of vertices, set the velocity in the numeric stepper at the top of the page and click the 'race' button to send your little car icon around the track. I've used some code from Senocular to follow the path.

There's no crash code yet - but the scene has a followVertexIndex property which indicates the next vertex index that the car is at and it exposes its trackVertexCollection. With that information, you can compare the car's speed against the radius of the current segment and decide that the car needs to fly off the track.

The demo is available here and the source code is here.

I'm about to move on to a Flint Particles project, so this code may be on a back burner for a while, but if you use it, I'd love to see the results.

simon gladman

Born to Synthesise – Sound Synthesis in Flash Player 10

2008-12-19T00:23:00.001-08:00

One of the new features of Flash Player 10 is dynamic sound generation or sound synthesis, which is the ability to write directly to the Sound object and create audio from scratch.

This is a very easy process – in a nutshell, you need to create an event handler for the Sound object’s SampleDataEvent.SAMPLE_DATA event which returns the wave form. This could be a basic sine wave based on a combination of the event’s position property and a loop of up to 8192 samples.

Why 8192 samples? Well, the Flash Player samples audio at the same rate as an audio CD – 44.1k samples per second, and we need to supply a sample to each channel (left and right) which gives us 8192.

So a basic sine wave function could look something like this:

Math.sin((Number(position)/Math.PI/4 * frequency))* volume

Where the position is the sum of the SampleDataEvent.position and our loop counter.

We can also use the sin function to approximate a square wave using a Fourier series:

var square:Number=Math.sin((Number(position)/Math.PI/2 * frequency)) +

(Math.sin((Number(position)/Math.PI/4 * frequency * 3)) / 3) +

(Math.sin((Number(position)/Math.PI/4 * frequency * 5)) / 5) +

(Math.sin((Number(position)/Math.PI/4 * frequency * 7)) / 7) +

(Math.sin((Number(position)/Math.PI/4 * frequency * 9)) / 9) +

(Math.sin((Number(position)/Math.PI/4 * frequency * 11)) / 11) +

(Math.sin((Number(position)/Math.PI/4 * frequency * 13)) / 13) +

(Math.sin((Number(position)/Math.PI/4 * frequency * 15)) / 15)

Fourier taught us that any possible waveform can be synthesized from a sum of sine waves, so my rough and ready demo offers four separate sound channels that have independent frequency and amplitude sliders that sum together to create the sound.

It’s not exactly MVC, but in my demo each ChannelEditor class is responsible for calculating its own value for any given position. The main class, FlexMonkeySynth, sums each of the four values and supplies that to the event handler.

Have a play – the top slider for each channel controls the frequency and the lower controls the amplitude. The radio buttons allow you to select between a square and a sine wave. Of course, the source code is enabled.

The skin comes from Bhavin Padhiyar and is available on http://scalenine.com/themes/machine/Machine.html#.

Pixel Bender Blender - Now Supports Array Inputs

2008-12-17T01:15:00.000-08:00

My Flex and Pixel Bender node-based image editor moves onwards and upwards.

I now have a new input widget that generates any number of numeric steppers to allow users to input floatx and intx types. This has allowed me to plug in a few more shaders, such as ripple blocks, that use these types.

I also wrote an extension to the node renderer canvas to allow drag scrolling - complete with a little grippy hand, and popped in a fade effect when creating new shader editors.

Enjoy!

simon gladman

Pixel Bender Blender - Working Prototype

2008-12-15T00:21:00.000-08:00

I had a great weekend working on my Pixel Bender Blender application. The fundaments of the user interface are working - you can add (by clicking a node type in the left hand toolbar) and delete shader nodes, and by dragging from the output of one into the input of another, you can create relationships.

The next things on my list are to use FP10's file access features to allow uploading of images (right now, I've embedded three sample images to play with) and to support the PixelBender floatx type - where the variable is an array of x float values.

I'm a big fan of Gill Sans - one of the world's most beautiful fonts, and using this as the application font gives it a nice authoritative yet arty feel.

The prototype is available here.

Pixel Bender Blender - Proof of Concept

2008-12-11T10:14:00.000-08:00

After a few hours of work, I managed to plug in my Pixel Bender experiments into my node based user interface. Here is the proof of concept - nowhere near finished, but a very exciting milestone.

Give it a go: you can set the dimension parameter on the Pixelate node to something like 20. Then set the Twirl's radius to 100. Finally, the Crossfade node can be switched between 0 and 1 to fade between the output of the Pixelate and the output of the Twirl.

Of course, there's a million miles to go, but I couldn't resist posting this first proof of concept for your enjoyment.

simon gladman

Further Adventures With Pixel Bender

2008-12-06T23:28:00.001-08:00

In my quest to create a node based image editor using PixelBender, I've been been tidying up my PixelBender classes in preparation for plugging them into my existing node based user interface.

I'm spending a few weeks in a very sunny Cape Town working with our SA development team. Because spending the evening eating great sea food and drinking gin and tonics basking in the setting sun is ever so slightly more tempting that coding Flex in my hotel room, progress has been a little slow. However, I'm back home to London next week, and the cold will drive me back to eveing coding.

Anyway, I digress. The latest version of my PixelBender adventures are here. The ugly, prototype user interface is pretty much the same, but if you view the source, you'll see plenty of changes under the hood.

The creation and use of ShaderNodes and ShaderEditors is now far simpler. gumbo.mxml - which is essentially my controller - creates a handful of ShaderNodes, links them to the editor user interface components and a single change handler handles user input events.

The ShaderEditor class contains the dynamically created input widgets and the image of the input with that editor's node's output.

The ShaderNode class uses Flex's BindingUtils class to keep an eye on its inputs. When an input changes, it executes itself, which in turn will change its output and the event bubbles through the linked nodes.

Now the code is getting a little more complex, my own DIY framework - or lack of, isn't really working. I've used Cairngorm in projects in the past, including my horological CAD application. However, I'm always keen to try something new, so I'm going to port my code to Mate when before I put a fancy user interface on my code.

simon gladman

A PixelBender Editor Class

2008-11-28T06:21:00.000-08:00

To extend my experiments with PixelBender, I created a new class to compliment my ShaderNode class - ShaderEditor. An instance of a ShaderEditor class accepts a ShaderNode and dispatches ShaderEditorChangeEvents. It is the user interface component that allows a user to set the parameters of a PixelBender object.

When the ShaderEditor's shaderNode is set, I loop through the parameters and create input fields that happen to have the same names as those parameters. The input boxes dispatch ShaderEditorChangeEvent events on each change.

The ShaderEditorChangeEvent contains the parameter name and the new value, and ShaderNode now has a new method setParameterByName(), so an event handler should look something like this:

private function shaderChangeHandler(event:ShaderEditorChangeEvent):void
{
ShaderEditor(event.target).shaderNode.setParameterByName(event.shaderParameterName, event.shaderParameterValue)
}

This demo is fugly and there is no validation, but it is a great proof of concept. It daisy chains a pixelate, smudge and twirl together - the twirl is proof that my editors can handle more than one parameter. Here's the demo - with source code enabled.

simon gladman

Encapsulating and Abstracting PixelBender Shaders

2008-11-26T04:58:00.000-08:00

Following on from yesterday's experiments with ShaderJobs, I've created a new class that abstracts PixelBender shaders and allows easy access to their inputs, outputs and parameters. Although not finished yet, I thought I'd document my work in progress.

My new class is called ShaderNode. It accepts an embedded .pbj class in its constructor, like this:

pixelateShaderNode=new ShaderNode(PixelateClass)

The class figures out how many inputs and parameters it has, and in ActionScript you can set both using the input or parameter's index, for example:

pixelateShaderNode.setInput(0, bitmapData)
pixelateShaderNode.setParameter(0, 25)

Like a shader job, you can execute the ShaderJob synchronously or asynchronously using the execute() method:

pixelateShaderNode.execute(true)

And of course, the output of one node can act as the input to another, so PixelBender filters can be daisychained together:

smudgerShaderNode.setInput(0, pixelateShaderNode.output)

So, here's a rough and ready work in progress of a pixelate filter 'feeding' a smudger filter. You can see the source image at the left, pixelated in the middle and smudged on the right. There's no validation on the input numeric steppers and, of course, source code is enabled.

simon gladman

Quick Tutorial on PixelBender ShaderJobs

2008-11-25T01:05:00.001-08:00

I've been playing with PixelBender filters on my journey to create a node based image editor in Flex (hmmm - although the clever people at Aviary have beaten me to it with their amazing Peakcock application).

I wrestled with ShaderJobs for a while, and after some help from BrianRonan on the Adobe forums, managed to get them working last night. It's a little tricky, so here's a summary if you're having problems.

A ShaderJob needs a shader. In my example, I embed the shader using this syntax:

[Embed(source="pixelate.pbj", mimeType="application/octet-stream")]
var PixelateClass:Class;

...and assign the embedded PixelBender to an instance of the Shader class like this:

var shader:Shader=new Shader()
shader.byteCode=new PixelateClass()

Now, using an existing image component with an embedded image, I extract its BitmapData:

var bitmapData:BitmapData=new BitmapData(sourceImage.width, sourceImage.height)
var matrix:Matrix=new Matrix()
bitmapData.draw(sourceImage, matrix)

Here's where I got stuck: the pixelate filter requires an input and a parameter - the input will be our bitmapdata from above and the parameter some arbitrary value.

ShaderInput(shader.data.inputImage).input=bitmapData
ShaderParameter(shader.data.dimension).value=[10]

Now we have a shader with inputs and parameters, I assign that shader to a ShaderJob, give the ShaderJob an event handler (I'm running this asynchronously, so the event handler fires once the PixelBender has completed), and start the job:

var job:ShaderJob = new ShaderJob(shader);
job.addEventListener(ShaderEvent.COMPLETE, completeHandler);
var jobResult:BitmapData = new BitmapData(sourceImage.width, sourceImage.height);
job.target = jobResult;
job.start(false)

Finally, the event handler adds a bitmap that uses the PixelBender's output's BitmapData and we can see our pixelated image:

var bitmapData:BitmapData=shaderEvent.bitmapData
targetWidget.addChild(new Bitmap(bitmapData))

Here's a very simple demo with source code enabled.

simon gladman

Weekend Tinkering With Flex Node Based Calculator

2008-10-13T00:40:00.000-07:00

I spent some of the weekend tinkering with my node based calculator. Most of the time was spent re-factoring the code for performance improvements, but I did manage a few user interface tweaks:

Relationships can be assigned with a colour. By default a random colour is assigned, but by double clicking the output box on a node, a new colour can be assigned.
Relationships can be deleted. Double click on an input box to delete the relationships.
Nodes now have separate input boxes, so input relationships are easier to create and view.
Added a new node type - tangent. Adding new node types takes about five minutes, so I should add a whole suite of them soon.
Adding and deleting nodes no longer re-renders to entire screen (d'oh!)
Relationships are created on the mouse-up event on the input box rather than the mouse-over.

The calculator still defaults to drawing a circle and is available here.

Simon Gladman

Flex Node Based Calculator Now Renders Graphs

2008-10-09T10:02:00.000-07:00

I've added a graph widget to my node based calculator to render graphs.

Number nodes now have a constant property - if they are not constant, they will increment when the run button is pressed. In this example, a single number acts as the input for sine and cosine nodes which in turn are multiplied and then act as inputs into a graph node.

Pressing the run button will start drawing the circle as the first number increments.

This code is still work in progress, there are bugs when nodes are deleted (which is now fixed), and I need to allow users to delete relationships without having to delete nodes, but I was so chuffed with the graphing, I had to deploy this latest build.

The latest version is available here.

Visual Node Based Calculator in Flex

2008-10-07T07:46:00.000-07:00

Before I start playing with Pixel Bender, I want to create an interface that mimics the node based interface used by applications like Houdini, Shake and Digital Fusion. These interfaces are great for visualising the flow of an image through various filters and how outputs merge together to create new effects.

Could I create such an interface in Flex - and where to start?

Well, with MVC, I can separate the funky user interface from the data and apply it to anything. So, over the weekend, I created a node based user interface and stuck it onto the most basic of applications: a simple calculator.

I'm really pleased with my work in progress - it opens with an example sum (25+26)/2. You can add new numbers - editable nodes - and new operators using the bottom toolbar. Grab the output from one node (the box on the right) and drag it to the input on another node (the box on the left) to create a relationship.

Nodes can be dragged around, and ActionScript's curveTo() method does a pretty nice job of rendering the relationships.

Subtract and divide nodes have a little 'flip order' button on the bottom right to flip the order of the arguments - also they only use the first two inputs, additional inputs are ignored. Add and subtract nodes can have loads of inputs and don't care about their order.

I'm tempted to carry on with this calculator application - creating graph nodes is my next step. There's some error handling to be added - you can create circular relationships that blow up the flash player.

Enjoy it - all feedback welcome:

Node Based Calculator

PS: Thanks to brandspankingnew for the icons :)

Simon Gladman

Even Faster Perspective Projection

2008-09-26T01:14:00.000-07:00

Of course, one of the exciting things about the upcoming Flash Player 10 is its built in support for 3D.

Adobe have published the Flash 10 API, and guess what, they have introduced a new PerspectiveProjection class - which does all the work I blogged about recently, but does it properly :)

The Gumbo SDK (Flex 4 which can compile for Flash Player 10) is already available - so I'm looking forward to a weekend of 3D particle systems and hardcore ActionScript!

Fast 3D to 2D Perspective Projection in Flex/ActionScript

2008-09-24T07:18:00.000-07:00

I thought I'd try my hand a writing a 3D renderer as part of a particle application I fancy creating.

The first part of a 3D renderer is to project 3D points (x,y,z) onto a 2D plane (u,v) - your screen. Typically, you'll define a line in 3D and find where it intersects your image plane. However, a search on Google for terms like 'Ray Plane Intersection' and 'Perspective Projection' throw up some pretty hairy looking maths for a simple soul like me. Matrix transformations and dot products are outside of my comfort zone.

However, I was using 2D line intersections for my BatSense project - surely if I view the scene orthographically from the top and left to see where my camera-particle line intersects the top and the side of the image plane, I can use those two simple intersections to calculate the u,v coordinates - nothing fancier than 'O' level maths required (showing my age there).

So, more stream of consciousness programming on the train and bob's your uncle - my 'O' level grade 3D renderer. This pre-alpha demo isn't interactive - it's just a camera travelling along its Z-axis through a cloud of random particles (all rendered the same size).

If you want the money shot, view the source and head to CameraView.mxml. The render() method loops over the particles and using two 2D intersections renders the particle field.

The line intersection code comes from Keith Hair's site - well worth a visit.

Here's the WIP application

BatSense - with rotation

2008-09-22T13:32:00.000-07:00

I managed a quick half hour of stream-of-consciousness programming on the train home to rotate the little BatSense cubes. Happily I got the effect I wanted: single faces with a leading edge approaching the camera and a trailing edge moving away to get a blue-red graduation.

Same link as before...

BatSense! Visualising Echolocation in Flex (WIP)

2008-09-22T04:02:00.000-07:00

I was sitting in the bath the other day wondering if I could visualise what a bat would perceive if it lived in a world of randomly moving boxes - well not quite, but I've thought about writing a little program to visualise echolocation for a while.

Visualising echolocation in my simple mind has two aspects - red/blue shift for things moving away/towards the camera and a change in brightness depending on the distance between the camera and the object.

Here's the fruit of my labour from this weekend.

There are two tabs looking at the same data:

The plan view shows the camera (a circle) and the image plane (a line). Each randomly moving box shows its visible vertices - which are coloured depending on their movement relative to the camera and their distance - and a line between those vertices and their intersection on the image plane. The plan view was used for debugging, but is a good illustration of what's going on.

The camera view is my first ever 3d renderer (well 2.5dish). I've included the source code, so feel free to poke around. Considering I'm no mathematician, I'm quite pleased with it for a Sunday afternoon's work :)

The red/blue shift is undoubtedly wrong. I'm just upping the red/blue value of grey to indicate the Doppler shift. What I really need to do is use some colour temperature charts to get the correct colour as the light wavelength is streched or compressed.

This really is an early WIP. Two big things to do are to impliment some proper colour temperature stuff, so that the red/blue shift really works, and allow the cubes to rotate - I want a single plane to include both blue and red shift as one vertex moves away and one moves towards the camera.

CFDevCon update

2008-08-26T03:53:00.000-07:00

Sadly CFDevCon has been cancelled.

Happily, I'll still be speaking at FlexCamp on Thursday.

Simon.

FlexCamp - Adventures in Public Speaking

2008-08-21T04:02:00.000-07:00

FlexCamp is a free - as in beer - Flex event being held in London on August 28. It has some great speakers, including representatives of Adobe, Tribal and Emak Mafu. There's also some great prizes (including tickets to Adobe Max) to be won and beer and pizza.

I've also agreed to MC the event - it will be my first time speaking to what may be over 300 people. Looks like my weekend will be spent with my nose in this book.

Thanks to Chester of the London Flex User Group and Emak Mafu for the opportunity. Don't forget to register for the day.

See you next Thursday!

CFDevCon

2008-06-29T04:21:00.000-07:00

After almost a month of no blogging and hardly any Flexing (I've been relaxing at the beautiful Layana Resport and Spa and I'm now looking after Tag's office in sunny Cape Town for a few weeks), I need to get back up to speed. I've been invited to talk at this year's CFDevCon in Brighton later this year.

I'll be doing a talk on Alec Cove's amazing physics engine - APE. I've done two projects in APE - a physics playground and SpaceBalls, my homage to Asteroids. I'm not sure how either of these projects will revolutionise RIAs, but I'm quite excited by BumpTop - so over the next few weeks I may try to create a Flex based window manager that incorporates some physics and present that.

Simon

Video Control through Mouse Gesture Recognition

2008-05-16T06:34:00.000-07:00

I recently wrote about detecting mouse direction to control my SpaceBalls game. The technique was rubbish for controlling space ships, but turns out to be a nice method for jogging through video.

Here's an example of a rough and ready bitmap sequence video player that's driven by mouse gestures:

Mouse Gesture Video Player

Hold the mouse down and rotate clockwise or anti-clockwise to forward or rewind the video - just like using the jog dial on a video machine.

This works better in Firefox that IE - the reason being that under Firefox, the image control successfully fires an HTTP Status Event, so the progress bar gives you an idea of how many frames are loaded.

Either way, you'll need to be patient, there's 23MB of still frames being loaded!

Right click to view source.

Dynamic Grouping on the Flex AdvancedDataGrid

2008-05-09T04:28:00.000-07:00

The AdvancedDataGrid is a beautiful thing with multiple layers of grouped heirarchy and fast aggregagate functions (like SUM). In fact, I've been playing with aggregate functions in AIR's SQL Lite versus the AdvancedDataGrid and with big record sets (around 10,000 rows), the AdvancedDataGrid wins!

This morning, I wrote a neat little demo that allows users to select different data providers and then generates the required AdvancedDataGridColumns. More than that, the column list is displayed in a list and the user can multiple select (i.e. control click) from that list to apply grouping.

So, rather than binding the data grid to the provider, I've written a little function that looks at the 0th row and generates an AdvancedDataGridColumn for each column:

            private function dataProviderChangeHandler():void
{
var datagridColumn:AdvancedDataGridColumn
columnsArrayCollection=new ArrayCollection()

for (var column:String in ArrayCollection(comboBox.selectedItem.dataProvider).getItemAt(0))
{
datagridColumn=new AdvancedDataGridColumn()
datagridColumn.dataField=column.toString()
columnsArrayCollection.addItem(datagridColumn)
}

advancedDataGrid.columns=columnsArrayCollection.toArray()
}

When the user clicks on the columns list on the left of the data grid, I apply grouping based on the selection. This is done by creating a new data provider for the data grid which is of the type GroupingCollection - as I step through the selection, I create a new GroupingField and push it onto a Grouping fields array which becomes the provider's grouping.

This is probably easier to illustrate than explain:


private function updateGrouping():void
{

var groupingCollection:GroupingCollection=new GroupingCollection()
var grouping:Grouping=new Grouping()
var groupingField:GroupingField

grouping.fields=new Array()

for each(var advancedDataGridColumn:Object in groupFieldsList.selectedItems)
{
groupingField=new GroupingField(AdvancedDataGridColumn(advancedDataGridColumn).dataField)

groupingCollection.source=ArrayCollection(comboBox.selectedItem.dataProvider)
grouping.fields.push(groupingField)
groupingCollection.grouping=grouping
}               
groupingCollection.refresh()
advancedDataGrid.dataProvider=groupingCollection
}

The final result can be seen here (source code view enabled):

AdvancedDataGrid Grouping Demo

The source code is available here:
Source Code

Creating an 'Add New Tab' button to the Flex TabNavigator

2008-04-28T23:53:00.000-07:00

If you want to create and position an add new tab button to the Flex TabNavigator control that mimics Internet Explorer, you can interrogate the tab control's children to find the x position of the last child and add its width to calculate the x position of your add new button.

I use the updateComplete event to invoke a method that repositions the button:

<mx:TabNavigator width="100%"
height="100%" id="tabNavigator" creationComplete="positionAddNewTabButton()"
updateComplete="positionAddNewTabButton()">

And positionAddNewTabButton() looks like this:

public function positionAddNewTabButton():void
{
var i:int=tabNavigator.numChildren-1;
addNewTabButton.x=tabNavigator.getTabAt(i).x +
(tabNavigator.getTabAt(i).width) + 10
addNewTabButton.y=tabNavigator.getTabAt(i).y +
(tabNavigator.getTabAt(i).height/2) - 1
}

The magic number '10' fixes the space between the final tab and addNewTabButton (which is the button itself). tabNavigator is my TabNavigator.

Collision Detection in APE

2008-04-22T09:12:00.000-07:00

I've seen a few questions in APE forums about handling collision detection. APE invokes a resolveCollision() method on particles involved in collsion and if you override that method by extending the particle class, you can add your own collision detection code.

Here's the source for my bullet class:


 
package org.cove.ape 
{
 import classes.PointParticleManager; 
 public class Bullet extends CircleParticle 
 {
  public function Bullet(x:Number, y:Number, radius:Number, fixed:Boolean=false, mass:Number=1, elasticity:Number=0.3, friction:Number=0) 
  {
   super(x, y, radius, fixed, mass, elasticity, friction); 
   super.setStyle(1,0x00FF00) 
  }
  
  internal override function resolveCollision(mtd:Vector, vel:Vector, n:Vector, d:Number, o:int, p:AbstractParticle):void 
  { 
   for(var i:int=0; i<10; i++) 
   {
    PointParticleManager.addParticle(
    this.px,this.py, new Vector(Math.random()*2 - 1, Math.random()*2 - 1)) 
   }
   SpaceBalls.defaultApeGroup.removeParticle(this) 
  }
 }
}

This code destroys bullets on impact. If you want the collision to work properly, you'll need to invoke super.resolveCollision().

SpaceBalls - Work In Progress

2008-04-16T00:53:00.000-07:00

I've had a lot of fun working on my Asteroids homage, Space Balls. Since the last release, I've added space ship collisions that damage hull integrity commensurate with the impact velocity. Once your space ship reaches zero hull integrity, it's curtains!

I played with interaction over the weekend, my first experiment was to recognize mouse circular motion. Nice idea - but pretty grim to use. The space ship now points towards the mouse pointer and the space bar fires the thrust. Clicking the mouse button fires your cannons.

Finally, turn the volume up - there's some funky sound effects to annoy anybody and everybody within ear distance.

Clockwise or Anti-clockwise?

2008-04-12T01:17:00.000-07:00

Sadly, Actionscript 3 doesn't support the Key object any more, and I can't figure out a way to handle multiple simultaneous key presses in Flex. The user input on my SpaceBalls games needs improving, so last night I started thinking about mouse input options.

What I need is the ability to understand mouse moves in either a clockwise or anti-clockwise direction around an arbitrary point. A quick whizz round the internet lead to some quite complicated gesture recognition libraries, but these seemed a little overkill for my requirements.

Here's my simple solution for understanding clockwise or anti-clockwise mouse moves: basically, figure out the current angle relative to the average mouse position during the gesture. If that angle is less than the previous mouse position, we're moving anti-clockwise and if it's greater, we're moving clockwise.

MouseGesture Work In Progress Demo (right click to view source)

Flex/APE Mini Tutorial & Playground

2008-04-10T00:21:00.000-07:00

This was my first play with APE (ActionScript Physics Engine). I've seen a few requests for APE/Flex tutorials, so I've opened up the source code and knocked up a quick introduction. One thing to note is that most of this has been written on the train in half hour blocks. The resulting structure of the code is pretty grim - not the Cairngorm beauty I would hope to write.

The main difference between this release and previous versions is the addition of particle emitters. These have minimum and maximum angles for releasing particles and emitter speed. Emitters, like blocks, can’t currently be selected from the canvas – they need to be selected from their list to be edited.

Anyway, here's APE in four paragraphs...

init() - this method is called after the application's creationComplete event. It initializes the APE Engine with, in this case, as delta time value of 1/4. Low delta time values offer slower, but more accurate simulations, while higher values offer faster, but less accurate simulations.

The next steps are to specify which UIComponent will host the simulation by setting the APE Engine's container property, set default gravity with the addMasslessForce() method (remember that gravity affects all objects identically hence massless force) and add a default group. In this simulation, all my particles are added to this group.

I want to fire the step() method each time the Flash Player enters a frame and I do this by creating an event handler that invokes my run() method each time the ENTER_FRAME event fires.

run() - for APE, we only need to invoke two methods on the APE Engine - step() which does the maths and paint() which redraws the simulation on screen. I also loop over my array collection of particle emitters and have them add circle particles to the simulation based on their properties.

Adding particles to the simulation: this is done in two places - in the run() method and after the user stops drawing in the endDrawRectangle() method. Although there's a lot of fluff in these two functions, but the real guts is essentially creating a new particle (either CircleParticle or RectangleParticle) and adding it to the group.

Have fun – here’s the application:

APE Physics Playground

SpaceBalls - Asteroids meets Flex meets APE

2008-04-09T02:49:00.001-07:00

What better way to spend a snowy Sunday in Kingston upon Thames that rebuild that old Arcade classic, Asteroids, in Flex using APE physics? Nothing. So that's what I did...

Space Balls

APE wheels are collision enabled particles that understand angular velocity and traction which make perfect circular 'asteroids'. I had to extend the APE particles and override the resolveCollision method so I could handle collisions - now bullets vanish after impact and the asteroids blow up or split after 10 hits.

I wrote a little particle system to handle the rocket thrust and impacts - but all the bullets and asteroids are handled by the APE engine.

There's a load to do - but completing this in one Sunday is an excellent demo of what a joy it is to code in ActionScript and APE.

Once again - APE is awesome. If you want to play with 2D physics in Flex, you need it!

PS: Be sure to set the focus on the background after dismissing the dialog (i.e. click on it). The key events I'm handling only cope with one key press at a time, so you can't shoot while rotating.

Further APE Adventures

2008-04-02T00:25:00.000-07:00

I've continued to play with APE and extended my original demo to allow editing of fixed blocks. The interface allows you to move and rotate the blocks and, more excitingly, change the friction and elasticity of them too. Select blocks from the list on the left.

Setting the fillStyle didn't update, so I superimpose a Flex box to show current selection. Flex boxes, however, have their pivot point at 0,0 and APE rectangles have their pivot point at the centrer, so I created a new class, selectionOverlayWidget, to give me control over the pivot point.

I impliemented particle culling so that circles that fall off the edge of the screen are removed from the simulation to keep performance high.

Here you go: http://www.flexmonkey.co.uk/APE_Test/ApeTest.html

Going APE in Flex

2008-03-30T07:42:00.000-07:00

Although it is only in alpha, APE - the ActionScript Physics Engine - is amazing. I knocked up a little demo in Flex which you can see here:

http://www.flexmonkey.co.uk/APE_Test/ApeTest.html

Draw on the canvas to create immovable blocks and click to create moving circle particles. Originally, I thought there was a bug registering the immovable blocks, but my code was creating rectangles with a negative length. Although these rendered fine, the physics didn't work. I coded round that this morning on the train and voila - perfect particles!

Right click for the source code - it's only a few lines of code from me, basically all I had to code was code for the user interaction.

Anyway, APE seems to be the way to rip off BumpTop in Flex, or code that air hockey game I've been meaning to write.

Multiple Scenes in Sandy

2008-03-28T01:42:00.000-07:00

I was using a Sandy scene as an item renderer in a list control (to allow a user to select from a list of 3D swatches) last night and couldn't figure out why only the first item was rendering. If you ever use multiple Sandy scene objects, you'll experience the same problem: each scene needs a unique name. Inside my list object, I assigned each scene with a unique identifier and everything magically appeared:

var scene:Scene3D = new Scene3D(UIDUtil.createUID(), this );

Getting BitmapData from an external image

2008-03-26T07:26:00.000-07:00

Part of wrestling with wooden boxes has been to apply a bitmap to a material. Both 3D libraries use BitmapData - a class that gives you access to each pixel. So how do we extract this data from non-embedded images?

Easy - apply the image to an instance of an Image class, wait for it to complete, then extract the data from the completed Image.

Here's an example


  private function assignMaterial():void
  {
   if(creationCompleted && this.woodTexture != 'null')
   {
    var image:Image=new Image()
    image.x=-500
    image.y=-500
    this.addChild(image)
    image.source=(String(this.woodTexture))
    image.addEventListener(FlexEvent.UPDATE_COMPLETE, imageLoadedHandler)
   }
  }

[...]

  private function imageLoadedHandler(event:Event):void
  {
   var image:Image=Image(event.target)
 
   if(image.width > 0)
   {
    var bitmapData:BitmapData
    bitmapData=new BitmapData(image.width,image.height)
    var matrix:Matrix = new Matrix()
    bitmapData.draw(image,matrix)
    var woodMaterial:WhiteShadingBitmapMaterial= new WhiteShadingBitmapMaterial(bitmapData)
    this.removeChild(image)

   } 
  }

I'm using the bitmap data to assign to an Away3D WhiteShadingBitmapMaterial - you may have different requirements...

Away3D versus Sandy3D

2008-03-26T05:46:00.000-07:00

After wrestling with Away3D for a few weeks, and wishing for a better class of shader, I started playing with Sandy last night. Their Phong material is excellent for rendering flat surfaces, and my first attempt to build a box does look significantly different to my Away3D results:

http://flexmonkey.co.uk/sandy/Sandytest.html

It also appears to handle intersecting and close meshes much better than Away3D. There are some little z-ordering issues, but it's time to port my old application to Sandy - just a shame that the API's are a million miles apart!