UPDATE: We’re be remiss not to also point you to Eric’s excellent FLARManager class. He took some of the stuff we’ve covered here and put a far more delicious topping on it.

One of the big things we’ve been wrasslin’ with recently here at Squidder is how to handle multiple instances of multiple markers using FLARToolKit. Well we haven’t totally nailed it — close, but there are still a few niggling issues. So we’re looking to you, dear Squiddite, to help us out.

Before reading on, you can get our source code here.

It contains all the libraries (FLARToolKit, Papervision, even some of our own) you need to get going, even if this your first FLAR project. It’s as simple as extending a single class, creating an array of the markers you want to load in, and rocking and rolling. It also works great even if you’re only dealing with a single symbol.

Read on for more thrilling details!

Anyway, what we’ve done is created our own version of FLARMultiMakerDetector that tries to maintain a consistent array of all the markers on the screen. So when a new marker is added, FLARSquidderMarkerDetector fires off a MARKER_ADDED event, which contains the id your marker (the order in which was loaded in — so the first marker has an id of 0) and the index (first marker on the screen, second, etc).  Conversely, when an object is removed, a MARKER_REMOVED event is fired. So this brings things a bit more in line with the type of event driven actionscript that we’re used to writing.

The problem that we haven’t quite gotten our brains around is how to make sure that we always have the correct index when multiple instances of the same marker is added. Here’s an example: You have three instances of Marker A on the screen. How do you know which one specifically is the one removed?

Currently, this isn’t a visible issue, since the other two markers will just “snap” instantly into place. But try tweening an object to its next location and you’ll see things start to flip flop between symbols.

Once again, feel free to grab our source code and let us know what you think!

Before we start this post, we ask that all non-nerds leave the room. Seriously, it’s for your own good.

Alright, now that we’re alone, let’s get down to business. When we first started messing with FLARToolkit, we were confused as hell about how to create our own markers, as were many other people we came across in our augmented reality induced travels. So now that we’ve got a grasp on it, let’s break it down so that future Magellans of the internet won’t make that stop in the Philippines.

First thing you need is the ARToolkit Marker Generator, which is graciously available online, for free, and looks like this:

Step 1: Create your pattern image.

First thing you need is your custom marker image. We’ve found that the easiest way to do a marker image is to make a 256×256 block in photoshop, like the one below. You can save it out as either a gif or png for best results. Also, keep in mind the generator won’t read images that are too large, so stick to marker images that are less than 300×300.

A few things to note: the symbol cannot be symmetrical either horizontally or vertically. This is important so the code can tell which direction is “up”, “left”, etc. Also, your marker image should be fairly simple, or at least not too finely detailed (looking at you, Prince fan). Anything too elaborate and FLARToolkit has trouble reading it from far away.

Step 2: Upload your pattern image into the generator.

Now, you can get your marker image into the generator a few ways. The first is to print it out and capture it using your webcam (the default way). But in our opinion, the best thing to do is hit the drop down under “Mode Select” and choose “Load Marker Image”. Choose your marker image and you’re good to go.

Step 3: Select your marker resolution.

If you select the drop down under “Marker Segments:”, you’ll see options for “4×4, 8×8, 16×16, 32×32 , 64×64″. This is basically the resolution of your actual marker pattern file. The simpler your marker, the lower your resolution can be. 16×16 has worked well for us for all but the most detailed markers. Ideally, you want the lowest resolution possible — this increases the likelihood that the FLARToolkit will be able to pick out your pattern from a distance.

You should also be able to tell in the preview window if things are looking too crunchy — if you can’t distinguish the marker, the computer won’t be able to either.

Step 4: Select the marker size.

This was perhaps the most confusing part for us at first. Marker size is the percentage of your marker image that the actual pattern takes up. So in our example above, the area that we use for our unique markings is 50% of the overall width and height of the marker image:

Again, this is one of those things that you’ll be able to double check in the “Preview Marker” window.

Step 5: Preview and save your pattern.

Once you’ve set the segments and size of your marker, go ahead and hit “Get Pattern”. You should see the central part of your marker image appear, according to the marker size (so in the example above, we only see what’s within the red lines). When you’re happy with this, go ahead and hit “save” and put the “.pat” file wherever you like.

A tip of advice: When saving your pattern, make sure to put both the number of segments and the size of your marker into the file name, e.g. “marker16_50.pat”. When you’re testing multiple markers, or tweaking settings for the best results, this will come in handy for our next part:

Step 6: Set up the FLARCode properly in actionscript:

Now that you’ve got your custom marker pattern saved down, let’s be sure you’re set for success in the actionscript.

new FLARCode( i_width:int , i_height:int , i_markerPercentWidth:uint = 50 , i_markerPercentHeight:uint = 50 );

This is the actionscript to create a new FLARCode. If you’re using the FLARToolkit starter kit, this will already be set up for you.

Now in order for your pattern to be properly detected, the values passed into FLARCode must match the segment and size values you set when making the pattern. So for our example above, the proper constructur would look like this:

new FLARCode( 16 , 16 , 50 , 50 );

But if you chose “32×32″ for your segements and a size of 80, your constructor would be:

new FLARCode( 32 , 32 , 80 , 80 );

One final detail.

Once you’ve got your markers loaded in and set up properly, you’ll notice that there’s a 3rd variable called “i_marker_width” in the constructor for FLARSingleMarkerDetector. This represents the physical size of your marker when printed out, measured in millimeters.

So if your pattern is 80mm x 80mm when printed, that means if you create a papervision plane that’s 80w x 80h, it will match the pattern exactly. While the physical dimensions won’t actually change the way your papervision object looks, it is important when making sure the paperversion world mirrors the physical world as close as possible. See the comments below for more details. [Thanks makc]

WHEW

So that’s about it, at least to our understanding. If you have any other advice or hints, please drop them like they are hot in the comments below.

This actually came about as a happy little accident while trying to bend FLARToolkit to our will (tracking multiple instances of multiple symbols – a total pain in the ass. But that’s a story for another time). It just so happened that we were rocking out to Kiss’ “God Gave Rock & Roll To You” and it suddenly occurred to us that “Hey, it wouldn’t be so hard to make these things make sounds when they disappear.” So we did. And it was awesome.

We’ve (for once) posted a usable demo, so you too can rock out at your desk. Below is a quick video demo of all four sounds and after the break, you can see the demo of using multiple instances of the same drum.

We couldn’t help it. The XBOX Controller wasn’t enough. Had to hook it up to a wiimote too (big nod to the guys over at the WiiFlash project).

It’s no secret that we’re obsessed with augmented reality. Using this fantastic car demo whipped up by John Lindquist over at pv3d.org, we added in some FLARToolkit love to create a cool experience of driving the car around on a table.

But we didn’t stop there. Using the mind blowing-ly good ControllerMate and some simple keyboard mapping classes, we hooked the car up to a wired xbox 360 controller for maximum nerd. Next step, get some shaders going on that sweet Ford Focus. Ah, we couldn’t resist, so we added a shader.

UPDATE: YouTube was being unhappy with our videos for some reason (we suspect it doesn’t get along with Snapz, but who knows), so we’re moving over to Vimeo. We’ve also updated our demo video here, too, to include a slight shadow under the car, as well as part where the car does it’s business without the flar symbol present. Enjoy!

So we here at squidder have been playing around with the FLARToolKit a lot recently. Pretty amazing stuff really. And while fooling around with it, something (perhaps obvious) occurred to us: We love flash. And we also love t-shirts. And Papervision. And Twitter.

And, suddenly, we had a way to combine them all together.

Below is an early technical demo, in which a barcode, containing a twitter username, is embedded within our FLAR pattern. This is important because you don’t need to create a new pattern for each username. Instead, the flash reads the person’s username (up to 8 characters, encoded in 6 bit chunks) and then pulls that person’s latest post from twitter. 

The source code is a mess, but we’ll be posting some more how-to details soon. In the meantime, enjoy the video demo below!

Update: YouTube drools, Vimeo rules.