Join us tonight at theSlate in NW Portland and try out our two digital drawing installations while you munch on some Koi Fusion fantasticness.

Free
Thursday, December 9th
6pm-9pm
2001 NW 19th Ave #104

I’m proud to announce the beta release of MMMLabs’ first Android Application – Bridge Invaders!
It’s a lo-res Drawing and Animation application Check out the video below for a taste:

So you draw little 5-by-5 animations frame-by-frame, and then you can play them back, and tap in the tempo.
You can save and load – to manage animations beyond that, you can do it directly – they’re all saved as XML files in SDCARD/BridgeInvaders

Please let me know if you have any problems or feature suggestions aside from the following:

• Feature: Copy/Paste Frames
• Feature: Change Mirroring Modes
• Feature: Delete Saved Files from GUI
• Issue: Previous/Next Frame Buttons are laggy
• Issue: Large animations take a LONG time to load

Geeky Details

Bridge Invaders is developed using AIR for Android, which enables Actionscript 3 applications to run on the Android platform (AS3 is commonly known as the language that powers Flash). This application was originally developed as an installation for the PDX Bridge Festival as a large-scale interactive video project. Thanks to WKE for sponsoring some of the development, FDT for their awesome dev tools, Robotlegs for keeping the code manageable, the Hype Framework for the shortcuts, and to Jared Tarbell and Invader for the inspiration.

Direct Download

If you cannot find it in the market, it means it probably will not work on your phone.

HOWEVER – if you want to install it anyway just to try, you can download it here: Bridge Invaders for Android

I’m currently developing a system for playback and control of live visuals using Ableton Live and Flash – more on the details of this project soon. One of the core needs is to have controls in one window and playback  in another, which is piped out to a projector.

So upon starting my Storyteller AIR application, I load controls into my main window, and spawn a secondary Utility window which holds all the movies for playback. These are all added to a single view object I call the PlayBox. The problem arises when the window is resized or full-screened. AIR doesn’t like using anything besides StageScaleMode.NO_SCALE, and Adobe’s documentation discourages using any other scaling mode.

Fighting the System

What I really want is StageScaleMode.SHOW_ALL, so that the whole of each movie will be shown, no matter the aspect ratio of the window, with black bars at the top or sides as necessary. Unfortunately, using this scale mode resulted in HUGE movies, of which I could see only a corner. I thought I’d hit the jackpot when I found this Adobe documentation which spelled out what was going on and how to fix it:

“…When you create a NativeWindow object, AIR chooses an arbitrary relationship between the window size and the scale factor of 72:1. Thus, if your window is 72×72 pixels, a 10×10 rectangle added to the window is drawn the correct size of 10×10 pixels. However, if the window is 144×144 pixels, then a 10×10 pixel rectangle is scaled to 20×20 pixels. If you insist on using a scaleMode other than noScale for a window stage, you can compensate by setting the scale factor of any display objects in the window to the ratio of 72 pixels to the current width and height of the stage. For example, the following code calculates the required scale factor for a display object named client:

if(newWindow.stage.scaleMode != StageScaleMode.NO_SCALE){
client.scaleX = 72/newWindow.stage.stageWidth;
client.scaleY = 72/newWindow.stage.stageHeight;
}

Unfortunately, this never worked quite right. I applied this formula to my main PlayBox view object before adding any loaded movies to it, but it was never quite tall or wide enough.

Giving In

So I scrapped that idea (after, of course, hours of trying to get this work way too late at night when my brain was fried and wouldn’t give it). The new plan was to use NO_SCALE, and instead listen for window resizing and adjust the PlayBox size and position to match.

It was still not as straightforward as I thought. The idea was simple enough – listen for NativeWindowBoundsEvent.RESIZE, take a look at the new afterBounds or stageWidth, scale to match, and center. The problem was in centering the PlayBox. The formula should be:

view.x = (rect.width * 0.5) - (view.width * 0.5);

Where view is the PlayBox, and rect are the new bounds. I swear this was working earlier in development. The issue is that the view’s width does not directly correlate to anything I could see. If I were to take the bottom edge of the window and pull it straight down (making it taller), the view’s width would fluctuate in a Sine-like pattern. This means that I couldn’t do any calculations involving the width of the view.

The Answer

Ultimately, I devised a solution that works, though its reliance on constants isn’t ideal. I store two numbers for the original width and height of the window and stage – 640 and 480, in this case. These go in a Preferences model I’ll call prefs. On resize, I generate a newScale variable like this:

var newScale : Number = window.stage.stageHeight / prefs.playHeight;

Then I can apply it to the PlayBox:

view.scaleX = newScale;
view.scaleY = newScale;
view.x = (view.stage.stageWidth - (prefs.playWidth *  newScale)) * 0.5;

By taking the original playWidth variable and multiplying it by the new scale, I get a reliable width for the PlayBox. Then I subtract the width of the PlayBox from the width of the stage, which gives me the total number of ‘extra pixels’ I have. Divide this by two (aka multiply by 0.5) and we’ve got the number of pixels that should be to the left of the PlayBox in order to center it. Phew!

Throwing Beam for Fun and Profit
http://panelpicker.sxsw.com/ideas/view/7548

Motion Paintings, Visual Storytelling and Deaf Film
http://panelpicker.sxsw.com/ideas/view/7886

Beyond 3D: How Interactive Screenings Will Save Cinema
http://panelpicker.sxsw.com/ideas/view/7020

DIY Motion Tracking for Public Spaces
http://panelpicker.sxsw.com/ideas/view/7003

People as Peripherals: The Future of Gesture Interface
http://panelpicker.sxsw.com/ideas/view/5716

Developing Futuristic Multi-Touch / Multi-Screen Applications
http://panelpicker.sxsw.com/ideas/view/6154

Interactive Narratives: Creating the Future of Literature
http://panelpicker.sxsw.com/ideas/view/6462

3D Interfaces: A Primer on Stereoscopic Interaction Design
http://panelpicker.sxsw.com/ideas/view/5934

Data Visualization: Sci-Fi Interfaces in the Real World
http://panelpicker.sxsw.com/ideas/view/7358

Toss the Projector: Redefining the Presenter/Audience Dynamic
http://panelpicker.sxsw.com/ideas/view/6389

Hybridizing Interaction with Motion Design: User Interfaces
http://panelpicker.sxsw.com/ideas/view/5568

The Future of Touch User Interface Design
http://panelpicker.sxsw.com/ideas/view/5984

Fun With The Lights Off: Interactivity Without Graphics
http://panelpicker.sxsw.com/ideas/view/7208

Getting Touchy: Going Beyond the Keyboard and Mouse
http://panelpicker.sxsw.com/ideas/view/6662

Creating Interactive Art Through Social Media Collaboration
http://panelpicker.sxsw.com/ideas/view/7239

The Music of Interaction Design
http://panelpicker.sxsw.com/ideas/view/6643

Realtime Interactivity for Music, Broadcast and Art
http://panelpicker.sxsw.com/ideas/view/5400

Realtime Mixing In Video Games
http://panelpicker.sxsw.com/ideas/view/6648

The application itself is an AIR app, so it’s all written in Actionscript 3, with the graphics designed in Flash. So there are actually three versions – one for the Installation, which runs as a full-screen AIR app on my netbook, a web version which will be up soon (which drops the saving capabilities), and my favorite – an Android app which runs on my HTC Incredible.

If you’re brave, you can download the file to run on your own phone – you’ll need an Android phone running FroYo (Android OS 2.2). You’ll also need to install the pre-release Air for Android runtime. This stuff will all be more accessible once Air for Android goes official later this year. If that’s not enough to scare you off, then Download Bridge Invaders for Android!

The Future

I wanted to get the Android app out there to any early adopters and interested parties, while I get the desktop and web versions ready. There is, technically, a desktop version working – the one I used for the installation – but it requires a touchscreen for use. I developed it on my Lenovo S10-3t, which is a nifty little convertible touchscreen netbook – it’s a great Android dev machine, as it will do two-finger-touch, and run AIR apps in either portrait or landscape mode.

Beyond the installation, the underlying engine (which I call PixelAnimator, original, eh?) is designed for musical performance. The idea is that I can make these minimal animations wherever I am, and then save each one out, and load them into a performance application for playback alongside a musician, projected onto a proper backdrop. Thus PixelAnimator becomes a visual instrument, allowing me to work on my Performance Visuals anywhere I like. Additionally, the HTC Incredible allows me to send composite video out of the USB port, meaning I could perform directly from the phone itself!

Major thanks to Adobe for putting out the prerelease, WKE for sponsoring some of the development, FDT for their awesome dev tools, Robotlegs for keeping the code manageable, the Hype Framework for the shortcuts, and to Jared Tarbell and Invader for the inspiration.

The Problem

As is often the case with banners, we’ve got a lot of text that may change multiple times before we ship. Every foreign studio will need to switch out the text within each banner as well. I’ve been doing lots of localization work using AS3 loading language for XML files, but we don’t have that luxury in the world of banners, where any extra kilobyte of load code may take us over our filesize limits.

The Solution

Enter JSFL. For those not yet in the know, it’s scripting for the Flash IDE – Javascript files which can control many aspects of the interface, like manipulating the library, timeline, tweens, renaming, organizing and more. I had a hunch that I could build something that would perform the text-switching functions of XML Language loading, but at authoring time instead of runtime, simplifying the resulting XML file.

How it works

You create a text file which lists object names and the text they should have (the download includes an example file). It’s XML-like, but simplified to be easy to read an edit. You run the CopySwitch script (by double-clicking on it) and select the language file you just created when prompted. Flash will switch out all the text you described in any open Flash file. So you can change the copy in 20 banners in a matter of seconds. Works with static or dynamic text.

Download CopySwitch v1.0

I’m getting ready to head to Seattle tomorrow for the Decibel Festival. I’ll be performing graphics live for Dilo on Friday night and Daedalus on Saturday. I’ve spent much of the last two days prepping content and working on (yet another) new performance system/style, and decided to take a break from staring at the screen today to build prototype three of my VJ Box.

This version centers around the APC40, which can face the artist or the audience with a simple flip of the box. Inside the box will be my external hard drive(s), USB Hub, Power Strips and lots of cables. The idea is to plug in as much as possible beforehand, so you have only a few last connections to make once you’ve arrived at the venue.

Inspirational props go to Middleman for his amazing Plexiglass Table, Pleasuretek for making me want a mobile rig, Daedalus for tilting his monome towards the audience for all to see, and VJ Exavior for showing off his Velcro-Filled VJ Coffin all those years ago.

I wanted the ability to pan sounds for the game I’m working on. I wrote a quick note to Joe Berkovitz, who developed the Audio library I’m using. He suggested I write the filter myself

I’ve never extended a library before, but he included great example filters and assured me it wouldn’t be hard, so I gave it a try. What do you know – it wasn’t bad at all. So I’m happy to give my teensy contribution back – you can download my PanFilter below and drop it in your StandingWave2 Filters directory.

It works just like the Gain filter, taking in one Number between -1 (hard left pan) and 1 (hard right pan). Zero will give you centered audio, and you can use any float in between -1 and 1 for some subtle effects.

See interactive movie at top of page for a hands-on example (sounds pan from left to right as you move left to right across keyboard).

Download PanFilter.as

I’d originally browsed iStockPhoto for squid illustrations, but wound up liking my version better, anyway. I’m no illustrator, but what can I say – I like my designs.

I’ve currently got about half of the game mechanics working, so I should be able to post up a demo within a week or so.

I’ve been working on a Simon-like game in order to stretch my AS3 knowledge, and I’ve been running up against some of Flash’s known issues regarding playing sounds at exact times. I stumbled upon StandingWave2 while searching for developments in the sound-in-Flash arena, and after just a few hours of messing with it, I am HOOKED. I’m not yet sure that it’s going to solve the particular issue I was having with the Simon game, but it’s spurred a few tangential ideas that I may try out first.

In any case, the movie at the top of this post is my first go with the StandingWave2 library, made in the course of a few hours on Sunday. I’m looking forward to more experiments.