something in the way

EaselJS is a new library from Grant Skinner that somewhat mimics the Flash display list/display object heirarchy.  It is the result of the game Pirates Love Daisies which demonstrates some great gameplay in html5.

The API is loosely based on Flash’s display list, and should be easy to pick up for both JS and AS3 developers. In our preliminary testing, Easel appears to be fully compatible with iOS, Android, and all major browsers that support the canvas element.

Lots of great javascript libraries have been made public including such contributions as this, Three.js (3d canvas/svg/webgl), Lettering.js (typography), audio.js (audio) and many many others, a complete pipeline is emerging. EaselJS adds to that a helpful flash like api for html5 (<canvas> + javascript).

The API contains these familiar classes for Flash/AS3 developers:

DisplayObject

Abstract base class for all display elements in Easel. Exposes all of the display properties (ex. x, y, rotation, scaleX, scaleY, alpha, shadow, etc) that are common to all display objects.

Stage

The root level display container for display elements. Each time tick() is called on Stage, it will update and render the display list to its associated canvas.

Container

A nestable display container, which lets you aggregate display objects and manipulate them as a group.

Bitmap

Draws an image, video or canvas to the canvas according to its display properties.

BitmapSequence

Displays animated or dynamic sprite sheets (images with multiple frames on a grid), and provides APIs for managing playback and sequencing.

Shape

Renders vector drawing instructions within the context of the display list.

• EaselJS
• Grant Skinner Post on EaselJS
• EaselJS Examples: game, sparkles, rollover / drag & drop, localToGlobal, globalToLocal, sprite sheets

You’ve seen the demos. You like the idea of tracking tags in the real world to create visuals. And now you want to try augmented reality for yourself - and, incidentally, you’re a Flash developer.

Reader Eric Socolofsky writes to share a framework he’s created that makes it much easier to work with the Flash-based, open source FLARToolkit, called FLARManager. Version 0.4 is just released:

http://words.transmote.com/wp/20090618/flarmanager-v04/

FLARManager has a number of features that improve upon the existing work done by FLARToolkit:

• Building the apps themselves is easier. Fire up the framework with Flex Builder (or Flash, or Eclipse, or FlashDevelop), and you have access to all the libraries you need, so you can start playing more or less out of the box. Hello, world, indeed.
• You don’t have to rely on Papervision if you don’t want to. Papervision, the faux-3D library for Flash, is included with the distribution. But marker tracking is decoupled from Papervision, so you don’t have to use it if you don’t need it.
• Better event management. Marker adding, updating, and removal, multiple pattern detection and management, and the like are all extended in FLARManager.
• Great documentation. Eric has taken the time to read some fantastic getting started tutorials, all accessible from the site above so you can go play.

Now, you wouldn’t pick Flash for speed - that’s not the idea.

This is about the slowest implementation of ARToolkit you’ll find. But you’d use it for compatibility, because of easy deployment to the browser. Speaking of speed, the NyARToolkit Java implementation actually outperforms the original C version. I’m the last person you should talk to about writing efficient, optimized code, but I can tell you that the notion that Java is “slower” than C is simply wrong. There are a great many other, more important variables, and in some cases Java can in fact outperform C. That doesn’t mean that Java is always the right tool for the job any more than C is, though, and in fact because Java’s Garbage Collector and event scheduling aren’t really built for real-time performance, and because “native” code is suited to certain situations, there are in fact times when you wouldn’t want to use Java. Understanding the application is what really matters - and that’s why it’s nice that NyARToolkit and siblings are available for AS3, C#, the mobile Android platform, iPhone, and others.

Eric doesn’t just do this to fool around, either; he works in interactive design for museums, and has what has to be one of the world’s sweetest “day jobs” - working for the legendary Exploratorium. He’s also working with Processing and the wonderful reacTIVision library on a separate project that’s working with tangible table-based interfaces; more on that separately. Thanks, Eric!

If you get interesting work in augmented reality going, let us know. And if you need some inspiration, my current favorite is from our friend Marco Tempest, working with Zach Lieberman in OpenFrameworks on augmented magic.

Puddle of Life - Darwin Exhibit from Tiago Serra on Vimeo.

Here’s a really elegantly-designed multi-touch table. It uses two really key pieces of open source technology: the Community Core Vision (“CCV”) tracker, formerly known as tbeta, and a lovely framework for coding visuals called PyMT.

PyMT, as the name implies, is a Python-based framework. I’ve gotten to know Nathanaël Lécaudé, a talented artist and coder who was nice enough to put me up a couple of nights while I was in Montreal; he’s one of several core coders. They’re doing a lot to really encapsulate functionality in widgets in a nice way. Features of PyMT include an event framework, specialized widgets for gesture, touch, and layout, and connections to OpenGL, OpenGL shaders, and sound. You can even work with the enduring, evergreen synthesis language Csound using its Python bridge, the oddly-named but powerful Ounk.

Of course, that’s all plumbing. It’s nice to see this applied to something powerful and educational. From the Vimeo description:

"Puddle of Life" is an educational multi-touch installation that was designed for Coimbra’s Science Museum (Darwin exhibit), demonstrating the theory of natural selection, as part of Darwin’s 200th anniversary.

The installation is composed of a round multi-touch table whose surface represents a virtual environment where 4 species of creatures live in. Each of these little creatures have different physical characteristics visually expressed by it’s quantity and/or size: Vision, Locomotion and Fur.

The player interacts with the game by touching the surface. He has to maintain full awareness of his creatures emotions (visually represented by a cartoon like ballon) and using this information to properly choose the mating partners on the control console. This console also allows the user to select the most appropriate descendent from 4 possible mutations, resulting from the reproduction.

The player’s objective is to help the species he controls achieve the highest number of creatures of its kind. Since this world suffers from climate change the player must assure that his creatures are well adapted to this ever-changing environment by choosing the best balance between mating partners and descendants.

The species move in a swarm, but they split when the predator is near. When a creature sees food it warns the nearby siblings and they all run towards it. Of course only the ones who have best locomotion reach it. The vision gives them the ability to see the predator sooner and the ability to see the food further ahead too. The fur is useful to them when the temperature is low but harmful when it’s hot, leading the creature to a shorter lifespan.

The player wins when they reach about 18 living creatures and loses when all of it’s creatures die from cold/hot, predation, famine or old age.

Photos: flickr.com/photos/tserra/sets/72157619458503007/with/3619335559/

Technical Specs:
LLP multi-touch table
CCV tracker - nuicode.com/projects/tbeta
pyMT framework - code.google.com/p/pymt/
Cython - cython.org/
Rabbyt sprite library for pyglet - matthewmarshall.org/projects/rabbyt/
Animation and artwork: Adobe’s AE, Ai and PS with Fasticon.com icons

The project is the work of Tiago Serra and his collaborators, who have also been PyMT contributors (see comments). Great work, gang. We’ll be watching for more.