They do take a little bit of getting used to, so to help with the experimentation I created this little app that makes it easy to test out different image and maps combinations.

The app lets you load in your own images (or use some of my defaults), adjust all the displacement settings and see the final result. It also generates ActionScript 3 code you will need to re-create the effect in your own project.

Check out DisplacementMap Tester

Now, I was going to attempt and explain what a Displacement Map is and how it all works, but I realised that there are already a bunch of resources out that that can do a better job than me. One in particular that I found quite helpful was this article written by Emanuele Feronato. Most of it is written in AS2, but the concepts are still the same.

Update

I recently created a quick AIR version of this tester so that you don’t need a net connection to test custom images. Its not anything fancy. Just a direct port of this web version, but with local file read access.

You can download the AIR version here: Displacement Map Tester (Air Verion).

To help myself out, I wrote a quick little Flex app that lets you test how a regular expression will work with a particular string. It lets you try out all the Flash Regular Expression methods and see each of the results.

To top it all off, I put together a quick overview of the different Flash Regular Expression methods that are available, as well as a short overview of the Regular Expression syntax.

You can check it all out right here…

Hope that helps you out!

Regular Expression Methods

Here is are the Regular Expression methods that are used in AS3

RegExp.test(string:String):Boolean

Simply tests to see if the pattern is matched anywhere in the string

• if ‘g’ flag is set it searches from the .lastIndex, and also sets it after each .test()
• if ‘g’ is not set, then the search is always done from the start

Click here for the official documentation

RegExp.exec(string:String):Object

Returns an object with with various properties relating to the pattern. The properties are

• [0],[1] etc – Array like access – [pattern, group1, group2]
• index – position of the match
• input – the string that was tested

If there is no match then this will return null.

• if the ‘g’ flag is set, it can be called multiple times
• if the ‘g’ flag is not set, it will only return the first match

Click here for the official documentation

String.replace(pattern:RegExp, replacement:String):Boolean

Replaces the pattern in the string with the replacement string.

• if ‘g’ flag is set it replaces all matches in the string
• if ‘g’ is not set,only the first match is replaced
• you can use group references like $1, $2, $`, $&, $’

Click here for the official documentation

String.search(pattern:RegExp):int

Returns the index of where the pattern is found in the string.

• returns -1 if there is no match
• ignores the ‘g’ flag and ‘.lastIndex’ property

Click here for the official documentation

String.match(pattern:RegExp):Array

Returns an Array populated with values relating to the pattern.

• if the ‘g’ flag is not set, the array will be in the form of [fullpattern, group 1, group2]
• if the ‘g’ flag is set, the array will contain all the possible full pattern matches – [fullpattern1, fullpattern2]

Click here for the official documentation

Regular Expression Syntax

Here is a quick run-through of the regular expression syntax as a bit of reference.

Constructors

There are two ways to set up a regular expression.

Flags

Flags change the way the regular expression works. They also can effect the results of the regular expression methods in different ways.

Meta Characters

Meta Characters are characters that have a special meaning when used inside a Regular Expression pattern.

Meta Sequences

Meta Sequences are special string that can be used to represent specific characters in a pattern.

Greedy Vs Non-Greedy

Normally quantifiers like * and + are greedy, as in, they will try and match as much as they can. They can be made lazy by adding a ? afterward.

Capturing sub-strings

Sometimes when you are looking for a pattern in a string you need to work with a sub-string. Maybe it is to replace it, or reference it is a new string. Maybe you don’t know what exactly it is you have to match. That’s where this stuff comes in.

Links

Here are some links to some sites that help with regular expressions.

• http://www.regular-expressions.info/
• http://regexlib.com/
• Flash LiveDocs Reference on Regular Expression Syntax

After learning the basics of papervision – which has plenty of tutorials on the interwebs – I started brainstorming an approach for faking depth of field. Here is what I came up with.

Simplifying the concept, I basically just needed to ‘blur’ the objects as they moved close to or far away from the camera. I couldn’t blur the object itself, but I could change the textures on the fly, so that became the basis of my approach.

I couldn’t just blur the textures on the objects because the edges would not look right. The blur needed to extend past the edge of the objects. My solution for this was to set up extra 3d planes for each of the objects that needed blur. As the objects moved, their distance from the camera was tested. If they were outside the threshold area, the blurred plane object was substituted in, and the blurry textures were swapped around based on the particular distance.

It seemed to work pretty well. Here is a slightly simplified version of the concept, using just the planes. As you move the mouse around, you will see the planes appear to blur – this is the textures swapping

Now for the funky bit. Because there were a bunch of different textures I needed to work with, I didn’t want to have to created every level of blur for every image. It would be burden on my time and increase download times.

What I ended up doing was created a method that took in one texture and generated all of the blurs for me. Each of the different blurs was then stored in an array so that I could easily switch between them.

This is the code that I used, but looking at it now I could have done it a bit better dropping out the ‘draw()’ method and applying the blur to the BitmapData directly.


/**
* Generates an array of bitmap data objects ranging from no blur to the blur amount
* @param origBitmapData - the original bitmap to blur
* @param blurAmount - the maximum amount of blur to create
* @param steps - the number of various blur amounts to generate
* @return An array of BitmapData objects
*/
public function generateBlurredBitmapArray(origBitmapData:BitmapData, blurAmount:Number = 40, steps:Number=8):Array {
// set up a return array to hold the data
var returnArray:Array = [];
// create the blur filter
var blur:BlurFilter = new BlurFilter(0,0,2);
// generate a sprite to apply the blur to
var s:Sprite = new Sprite();
// create a bitmap to hold the original bitmap data - add it to the sprite
var b:Bitmap = new Bitmap(origBitmapData, "auto", true);
s.addChild(b);
// position it in the centre
b.x = b.y = blurAmount;
// loop through and generate the required number of blurs
for (var i:uint = 0; i < steps; i++) {
// adjust the blur and apply it to the sprite
blur.blurX = blur.blurY = blurAmount * (i / (steps - 1))
s.filters = [blur];
// generate the new bitmap data
var newBmpData:BitmapData = new BitmapData(origBitmapData.width + (blurAmount * 2), origBitmapData.height + (blurAmount * 2), true, 0x00ffffff);
// draw the sprite to it
newBmpData.draw(s, null, null, null, null, true);
// add this to the return array
returnArray.push(newBmpData);
}
// return the array
return returnArray;
}


That's about it. Hope that helps you out - let me know what you think!

I’m by no means an expert on it, but after the need arose for me to do some collision detection I did a pile of reading and finally got it working in ActionScript 3.

I thought I would share what I learned in the hope others wouldn’t suffer so much

When I found myself in a need to calculate collisions between polygons in flash, I came across a method known as Separating Axis Theorem (SAT). The only problem I had was that I really struggled to get a grasp on it.

After a lot of reading about collision detection, and looking at code samples, it all finally clicked.

To help out the other non-maths minded people I thought I would write this quick explanation to run through the basic principles of how it works. I’ve also included a demo using SAT collision detection, as well as some ActionScript 3 classes you can download and use.

Note: SAT does require a bit of work with vector math, so it may be a good idea to brush up on your vectors before getting too far into SAT.

Interactive Demo:

Use your mouse to drag the shapes around. Whilst dragging, use the arrow keys to change the scale and rotation of the shapes. When the two shapes collide they will change colour (red) and show a possible reaction (grey).

The quick rundown

Basically, the goal of SAT (and every other collision detection) is to test and see if is a gap between two shapes. The method that SAT uses is what makes it unique.

The best analogy I have heard for SAT technique is like this:

Imagine taking a torch and shining it on the two shapes you are testing from different angles. What sort of shadows would it cast on the wall behind it?

If you work your way around the shapes and never find a gap in the shadows then the objects must be touching. If you find a gap, then they are clearly not touching.

From a programming point of view it would be to intensive to check every possible angle. Luckily, due to the nature of the polygons, there is only a few key angles you need to check.

The angles you need to check are the same as the sides of the polygons. This means that the maximum number of angles to check is the sum of the number of sides the two shapes you are testing have. Eg. Two pentagons would require ten angles to be checked.

So how do you make it work in code?

It’s a simple but repetitive method, so here is a basic step by step:

Step 1. Take one side from one of the polygons you are testing and find the normal (perpendicular) vector from it. This will be the ‘axis’.

Step 2. Loop through every point on the first polygon and project it onto the axis. (Keep track of the highest and lowest values found for this polygon)

Step 3. Do the same for the second polygon.

Step 4. Check the values you found and see if they overlap.

If you find a gap between the two ‘shadows’ you have projected onto the axis then the shapes must not intersect. However, if there is no gap, then they might be touching and you have to keep checking until you have gone through every side of both polygons. If you get through them all without finding a gap then they collide.

That’s basically it.

As an added bonus, if you keep track of which axis has the smallest shadow overlap (and how much of an overlap that was) then you can apply that value to the shapes to separate them.

What about circles?

Testing a circle against a polygon in SAT is a little bit strange but it can be done.

The main thing to note is that a circle does not have any sides so there is no obvious axis that you can test against. There is one ‘not so obvious’ axis you do need to test however. This is the axis that runs from the centre of the circle to the closest vertex on the polygon.

After that it is just a matter of going through the usual routine of looping through every axis on the other polygon and checking for overlaps.

Oh, and in case you are wondering how to project a circle onto the axis, you simply project the centre point of the circle and then add and subtract the radius.

Pro’s and Con’s

Like all collision detection techniques, SAT has it’s pro’s and cons. Here is a quick rundown of some of them:

Pros

• It is fast – It uses pretty basic vector math and you can bail out of a test as soon as a gap is detected, eliminating unnecessary calculations.
• It is accurate – at least as far as I can tell.

Cons

• It only works with Convex polygons – complex shapes are out unless you build them out of smaller convex shapes, and then test each individual shape.
• It doesn’t tell you which sides are touching – only how far they are overlapping and the shortest distance to separate them.

There is probably a bunch more but these were the main ones I could think of.

Conclusion

I hope that this has helped to shed some light on the separating axis theorem. I’ve tried to keep it as simple as possible without shedding too much information. (I’m by no means an expert in maths so I apologise if I left anything out)

Here are a few links to other pages that helped me understand SAT collision detection.

• harverycartel.org – more detailed descriptions and some cool interactive examples. I learnt a lot from this page.
• GPWiki.org- good SAT explanation and sample code – I used this as a basis for creating my own code.
• Tony Pa – Vector tutorials – Good resource for learning about Vectors
• GameDev.net forum – a SAT collision system a member created – gave me some ideas on how to calculate reactions, etc.

Download:

If you want to see my AS3 SAT classes you can download them here: SAT AS3 Classes (They are a bit of a mess, but they work)

Basically, you create two shapes and then test them with the ‘Collision.test()’ method. If they touch then a ‘CollisionInfo’ object will be returned. If they don’t touch then it will return ‘null’. The CollisionInfo object has a bunch of information about the collision that can be used to separate the two objects, etc.

In an attempt to make things better, and make my life easier in the process, I sat down and created my own Reflection class.

Here is what I came up with.

Below is a sample of the result. The moving text shows how elements fade away from the reflection point. Also, if you click and drag in the top half of the image you will see how the reflection can update dynamically.

The idea behind the class is pretty simple. Basically, you create a new Reflection object and then pass it any display object that you want to reflect. Then, whenever you tell it to ‘refresh’, it will look at the target object, copy the bottom area, flip and fade it.

It uses the bounding rectangle of the target object to figure out what to reflect, but you can also override this by specifying a rectangle area to reflect.

You can also specify a number of different things, such as how tall you want the reflection be, how often it should refresh, and how transparent it should start and finish.

Download:

If you would like to check out the code for this reflection class you can do by downloading it here: Reflection Class AS3

Due to the way that these projects change over the construction period it soon became apparent that hand drawing these graphs would be too time consuming, so I set out to create some classes that could do most of the heavy lifting.

After a bit of planning and a lot of head scratching I finally came up with some classes that would do 95% of what I needed to do with the added bonus of being run from an external XML file structure.

The flash file below is an example of some of the things the classes could do.

Without getting into the boring details it basically works like this:

• One class handles the grid. It draws grid lines based on the area being viewed and the physical size of the graph.
• A second class, the Graph class, manages all of the graph elements. It acts as a parent to them all, telling them when the graph dimensions or co-ordinates change etc.
• A base class for all of the different ‘graph items’ acts as a common interface for all the different types of graphing elements you want to display. Each element knows how to render itself based on current graph settings.

That’s about it. There was lots of little nuances like conditionals controlling line visibility and figuring out what numbers should appear, etc. but nothing that was hard.

This was one of the first things that I ever had to program in ActionScript 3 so it is a bit rough, but overall it seems to work pretty well.

I originally looked to see if anything was already available on the net but had no luck. Considering that the only other option was to create each equation manually, I decided to try and write my own MathML parser.

After a bit of research and playing around I came up with a set of classes that worked in a recursive manner to generate the equation.

The example file below demonstrates how the parser works.

Download:

For anyone who finds themselves in need of some MathML ActionScript classes, I have included a cleaned up version of my code for people to download here: MathML Classes

They are by no means a complete solution, but they may prove useful to someone. Feel free to use them as you see fit, but please don’t harass me if you don’t like my code

On the side note, there is a program called Amaya that can be used to generate MathML in a pretty easy to use interface. You can download it for free from here.

It was based on a chain email I got a while back which explained that if all but the first and last letters of a word are jumbled up they could still be read.

To test it out I built this little application that jumbles up text in this manner.

I find this application useful for annoying friends that are sticklers for spelling.

As a side note I did a bit of searching on the web and found this page where the author explains where this theory started and explores the science behind it.