Inside FLARManager: 2D Marker Tracking

<– Getting Started | Basic Augmented Reality –>
 
At the core, flare*tracker, FLARToolkit, and ARToolkit are simply fiducial-tracking engines, similar to other initiatives like reacTIVision and Trackmate. flare*NFT (and other natural feature-tracking engines) does not track fiducials, but reports the same information about its targets that fiducial trackers do. The ability of these libraries to produce augmented reality applications is an added bonus, but they are also well-suited to many 2D applications that leverage the markers as a new interface to the computer.

In addition to easing the creation of augmented reality applications, FLARManager exposes the data needed to allow new forms of interaction with 2D applications. The following tutorial explains the basics of setting up a FLARManager application, and demonstrates how to retrieve 2D data of detected markers.

 

FLARManager Tutorial: 2D

Download source for this tutorial here:
FLARManagerTutorial_2D
and place it in the root of the /src/ FLARManager folder.
Print out any of the pattern .pngs in /resources/flarToolkit/patterns, found in the FLARManager distro, to use with the tutorial.
 
 
FLARManager can be integrated into any application, at any point in the code. For this tutorial, we’ll create a new application and initialize FLARManager directly from the application class.

In the application class’ constructor, we wait for the class to be added to the stage, so that we have a reference to the stage:
this.addEventListener(Event.ADDED_TO_STAGE, this.onAdded);

Once the application is added to the stage, we can begin setting things up. First, we create a FLARManager instance and pass it the path to an external xml configuration file. For now, we’ll use flarConfig.xml (located in the /resources/flar/ folder in the FLARManager distro). We also pass an instance of FLARToolkitManager, to use the FLARToolkit tracking library, and a reference to the stage.
var flarManager:FLARManager = new FLARManager("flarConfig.xml", new FLARToolkitManager(), this.stage);

Once you’re comfortable with the basics of FLARManager, you can edit the config file, or create your own, as you see fit. More information on configuration options lives here.

Now, let’s add a Sprite into which to draw over the detected marker.
this.drawSurface = new Sprite();
this.addChild(this.drawSurface);

We want to see the video capture, so let’s add it to the stage. FLARManager creates a default video source all ready to go, though the source can also be modified via the configuration file.
this.addChild(Sprite(this.flarManager.flarSource));

FLARManager uses an event model to notify any interested parties of newly-detected markers, changes in already-detected markers, and marker removal. We add FLARMarkerEvent handlers to respond to these changes.

this.flarManager.addEventListener(FLARMarkerEvent.MARKER_ADDED, this.onMarkerAdded);
this.flarManager.addEventListener(FLARMarkerEvent.MARKER_UPDATED, this.onMarkerUpdated);
this.flarManager.addEventListener(FLARMarkerEvent.MARKER_REMOVED, this.onMarkerRemoved);

and the handler functions themselves:
private function onMarkerAdded (evt:FLARMarkerEvent) :void {
    this.graphics.clear();
    this.graphics.lineStyle(4, 0xFF0000);
    this.drawSurface.graphics.drawCircle(evt.marker.centerpoint.x, evt.marker.centerpoint.y, 40);
}
 
private function onMarkerUpdated (evt:FLARMarkerEvent) :void {
    this.graphics.clear();
    this.graphics.lineStyle(1, 0x00FF00);
    this.drawSurface.graphics.drawCircle(evt.marker.centerpoint.x, evt.marker.centerpoint.y, 40);
}
 
private function onMarkerRemoved (evt:FLARMarkerEvent) :void {
    this.graphics.clear();
}

These event handlers access information about the marker whose state changed (added, updated, removed) via FLARMarkerEvent.marker, which is a FLARMarker instance. FLARMarker provides us all sorts of delicious information about markers, including position in two dimensions (FLARMarker.centerpoint), three dimensions (FLARMarker.vector3D), rotation in three axes ((FLARMarker.rotationX/Y/Z), pattern id ((FLARMarker.patternId), and more.

Here, we’re just drawing circles over detected markers — thick red ones for newly-detected markers, and thin green ones for existing, updated markers.

That’s about it!

For more 2D-tracking ideas, take a look at the /apps/ package, and FlarManager_AppLauncher.as, both in the FLARManager distro. These examples include:

  • a painting application that uses markers as brushes;
  • a whack-a-mole game starring everyone’s favorite punching bag;
  • a 4-directional pong game, with a marker-controlled paddle; and
  • a drum machine-style sequencer using markers to trigger audio samples.

To see more about the marker data FLARMarkers provide, and to see how to manage multiple markers displaying multiple patterns, take a look at FLARManagerExample_2D and FLARManagerExample_Flash3D. Both of these examples are also included in the FLARManager distro.
 
 
<– Getting Started | Basic Augmented Reality –>