something in the way

a tumblog about design + code
Oct 15

GPU Rendering in Adobe AIR for Android

I recently started playing around with GPU rendering in AIR for Android, and I decided to do a quick video demonstrating the differences between CPU and GPU rendering modes.


The code for this example is available here on GitHub.

As you can see from the example application, the key to offloading rendering to the GPU is to do three things:

1. Set rendering mode to GPU in your application descriptor like this:

<initialWindow>
    <content>[...]</content>
    <resizable>true</resizable>
    <autoOrients>false</autoOrients>
    <fullScreen>false</fullScreen>
    <visible>true</visible>
    <renderMode>gpu</renderMode>
</initialWindow>

2. Make sure cacheAsBitmap is set to true on your DisplayObject like this:

square.cacheAsBitmap = true;

3. Make sure to assign a Matrix to the cacheAsBitmapMatrix property on your DisplayObject like this:

square.cacheAsBitmapMatrix = new Matrix();

That’s all you have to do to offload your rending to the GPU and to free your CPU up for more important tasks.

May 28

Some Flash Android Components

You have those times when you get an idea, so you sit down and start building it? You know, maybe you are a designer, and that means cracking up Flash Pro CS5. Or perhaps you are a developer and you start messing with item renderers. As I travel around from conference to conference, I get a lot of ideas like that. And for most of them, I either run out of steam, get distracted, or simply get bored. Over the next several weeks I’ll be dropping projects like that on the old blog – starting with these Flash components that look like Android.

I wanted to get to know Android – intimately. So I started examining the user interface controls. At first this was mostly on the device, to get a feel for the types of controls that were available, and the way they transitioned states. Next I started using the “ddms” screen capture utility that comes with the Android SDK to get a closer look at the pixels. I’d get the screen to a state I wanted, capture it, and then dissect it using Fireworks CS5. Finally, I started reassembling the controls in Flash Pro CS5 and putting ActionScript logic behind them.

The result is a pretty performant, and decent foundation of controls that look and feel like Android, but are done all with Flash, and expected to be deployed using AIR for Android. I could go a lot further with these, but then again, there’s that running out of steam thing. For example, these are really designed for the NexusOne – I don’t account for screen density. I also don’t account for screen orientation, though there’s hooks in the components for some basic sizing.

Okay, enough about what’s not there, what is there?

  • Button
  • CheckBox
  • ComboBox
  • DateChooser
  • Footer
  • Label
  • List
  • Menu
  • NumericStepper
  • TextInput
  • TimeChooser
  • Title

Some of these components need additional explanation. For example, the “DateChooser”. Most of the dates in Android are presented via a modal dialog box. Mine is no different. Though I don’t call them out as components in the above list, there’s stepper controls used by the dialog to control month, date and year. Likewise for the “TimeChooser” where you will find controls for the hour and minute.

“Footer” is the bar you find at the bottom of most Android forms. The Footer control accepts up to three strings, that will give you up to three buttons. Why three? Well, because that’s the most I saw in use on any Android application. The “Title” is the gray bar you see at the top of most Android forms. The “Menu” takes up to six buttons, and shows up at the bottom of the screen when you use the hard menu button on the device.

Regardless of the component, they are designed to be pretty atomic, and although they were designed in Flash Pro CS5, then can easily be used in Flash Builder 4 from an ActionScript project, because I include a SWC in the build. Here’s some example code, and the result user interface. In short, you instantiate the control you want, position it and size it if necessary, and then add it to the stage. Register for any events you may want to drive the rest of the application at runtime.

package  
{
  import flash.display.Sprite;
  import flash.display.StageScaleMode;
  import flash.display.StageAlign;
  import flash.events.MouseEvent;
 
  public class Components extends Sprite 
  {
    private var btn:Button = null;
    private var chk:CheckBox = null;
    private var cmb:ComboBox = null;
    private var day:DatePicker = null;
    private var ftr:Footer = null;
    private var lbl:Label = null;
    private var listing:ListPicker = null;
    private var opt:OptionPicker = null;
    private var time:TimePicker = null;
    private var mnu:Menu = null;
    private var tme:Button = null;
    private var ttl:Title = null;
    private var txt:TextInput = null;
 
    public function Components() 
    {
      super();
      init();
    }
 
    private function init():void
    {
      var btnx:Button = null;
      var lblx:Label = null;
      var today:String = DateDialog.formatShort( new Date() );
 
      stage.scaleMode = StageScaleMode.NO_SCALE;
      stage.align = StageAlign.TOP_LEFT;
 
      ttl = new Title( "Event details" );
      addChild( ttl );
 
      lbl = new Label( "What" );
      lbl.x = 9;
      lbl.y = 52;
      addChild( lbl );
 
      txt = new TextInput( "Event name" );
      txt.x = 9;
      txt.y = 85;
      addChild( txt );
 
      lblx = new Label( "From" );
      lblx.x = 9;
      lblx.y = 170;
      addChild( lblx );
 
      btn = new Button( today, 282, Button.TRIGGER );
      btn.x = 14;
      btn.y = 203;
      btn.addEventListener( MouseEvent.CLICK, doDateClick );
      addChild( btn );
 
      tme = new Button( "1:00pm", 158, Button.TRIGGER );
      tme.x = 306;
      tme.y = 203;
      tme.addEventListener( MouseEvent.CLICK, doTimeClick );
      addChild( tme );                        
 
      lblx = new Label( "To" );
      lblx.x = 9;
      lblx.y = 276;
      addChild( lblx );
 
      btnx = new Button( today, 282, Button.TRIGGER );
      btnx.x = 14;
      btnx.y = 309;
      addChild( btnx );
 
      btnx = new Button( "2:00pm", 158, Button.TRIGGER );
      btnx.name = "to";
      btnx.x = 306;
      btnx.y = 309;
      addChild( btnx );                        
 
      chk = new CheckBox();
      chk.x = 416;
      chk.y = 396;
      chk.addEventListener( MouseEvent.CLICK, doCheckClick );
      addChild( chk );
 
      cmb = new ComboBox( "Home" );
      cmb.x = 13;
      cmb.y = 487;
      cmb.addEventListener( MouseEvent.CLICK, doComboClick );
      addChild( cmb );
 
      ftr = new Footer( "Done", "Revert" );
      ftr.y = 680;
      addChild( ftr );
 
      mnu = new Menu( [
        {path: "search.png", label: "One"},
        {path: "search.png", label: "Two"},
        {path: "search.png", label: "Three"},
        {path: "search.png", label: "Four"},
        {path: "search.png", label: "Five"},
        {path: "search.png", label: "Six"}
      ] );
      mnu.addEventListener( MenuEvent.CLICK, doMenuClick );
      addChild( mnu );
 
      day = new DatePicker();
      day.addEventListener( DialogEvent.OK, doDateOk );
      day.addEventListener( DialogEvent.CANCEL, doDialogCancel );
      addChild( day );
 
      time = new TimePicker();
      time.addEventListener( DialogEvent.OK, doTimeOk );
      time.addEventListener( DialogEvent.CANCEL, doDialogCancel );
      addChild( time );                        
 
      listing = new ListPicker();
      listing.addEventListener( ListEvent.CLICK, doListingClick );
      addChild( listing );
    }
 
    protected function doCheckClick( event:MouseEvent ):void
    {
      var btnx:Button = null;
 
      if( chk.selected )
      {
        tme.visible = false;
        btn.setWidth( 450 );
      } else {
        tme.visible = true;
        btn.setWidth( 282 );                                
      }
    }
 
    protected function doComboClick( event:MouseEvent ):void
    {
      listing.show( [
        "Default ringtone", "Backroad", "Bell Phone", "Big Easy",
        "Bird Loop", "Bollywood", "Bus' a Move", "Cairo",
        "Calypso Steel", "Champagne Edition", "Chimey Phone",
        "Club Cubano", "Crayon Rock", "Curve Ball Blend", "Dancin Fool",
        "Digital Phone", "Ding", "Don' Mess Wiv It", "Eastern Sky",
        "Enter the Nexus", "Ether Shake", "Flutey Phone", "Free Flight",
        "Funk Y'all", "Gimme Mo' Town", "Glacial Groove", "Growl",
        "Halfway Home", "Loopy Lounge", "Los Angeles, 2019", 
        "Love FLute", "Medieval Jaunt", "Mildly Alarming", "Nairobi",
        "Nassau", "No Limits", "Organ Dub", "Paradise Island", "Playa",
        "Radiation by Spagnola", "Road Trip", "Safari", "Seville", 
        "She's All That", "Silky Way", "Steppin' Out", "Terminated",
        "Third Eye", "Twirl Away", "World"], 
        "Ringtones" 
      );
    }
 
    protected function doDialogCancel( event:DialogEvent ):void
    {
      trace( "Dialog cancel." );
    }
 
    protected function doDateClick( event:MouseEvent ):void
    {
      day.show( new Date() );
    }
 
    protected function doDateOk( event:DialogEvent ):void
    {
      btn.label = DateDialog.formatShort( day.date );
    }
 
    protected function doListingClick( event:ListEvent ):void
    {
      cmb.label = event.label;
    }
 
    protected function doMenuClick( event:MenuEvent ):void
    {
      trace( event.label );
    }
 
    protected function doTimeClick( event:MouseEvent ):void
    {
      time.show( new Date() );
    }
 
    protected function doTimeOk( event:DialogEvent ):void
    {
      tme.label = TimeDialog.formatShort( time.time );
    }                
  }
}

Again, I want to note that this is a random idea project. It’s pretty modular, but may not be to the liking of many. The package structure is totally flat, though I suppose that’s a nit-pick more than a problem. If you are thinking that I should have skinned Keith Peters’ Minimal Comps, you’re probably right, but I started this on a plane, and it grew from there before Keith’s components could be skinned. All of it is available for download. If you find it useful, or have any questions about the architecture, don’t hesitate to ask.

Media_httpfeedsfeedbu_bekie
Feb 22

FlashSURF – moving further

Media_httpbloginspiri_wkuhi

Past couple of weeks I was working on FlashSURF project updates. More likely cosmetic updates: refactoring, adding methods, etc. I’ve screen-casted several videos showing up some usage possibilities.
Project SVN repo was divided in to 2 separate projects: one for FlashSURF SWC Lib development only and another for example projects. Now FlashSURF become really easy to use as far you don’t have to compile and process it with TDSI every time you testing your project. Provided SWC lib already processed, all you need is to include it in your project.

As I’ve already mentioned I’ve screen-casted some videos. All this features are presented in Examples project and can be easily reproduced.

This one demonstrates multiple image tracking/searching in input video stream. I’ve precalculated several images and store them as references for future tracking. Then we just loops through references to search each on the screen.


Here I’ve implemented selection tool and with the help of it I can easily select regions on the screen to store it as references. I was experimenting with playing cards and as you see it works pretty well.

You will find more examples in the repository with demonstration of panoramic stitching, finding Homography matrix between reference and tracked object on the screen, saving and loading references as local binary files etc.

I do realize there is a lot to add and improve in the project. I kindly ask everyone who is interested in using it to take a part by submitting features/methods requests and sharing improvements that can be done to existing methods. Just submit an issue in Code repo or simply drop me a line.

Oct 6

Flash CS5 Will Compile Native iPhone and Touch Games and Applications Coded in AS3

Well good news for Flash developers, Flash CS5 will finally compile to native iPhone and Touch Applications. This is great news for many developers out there who have stuck with the Flash platform.  I am sure there will still be limitations to what you can do with Flash on the iPhone and it will probably be mostly 2D games and apps but this is a great start to getting the Flash platform truly mobile and up to the rest of the industry.

Flash Professional CS5 will enable you to build applications for iPhone and iPod touch using ActionScript 3. These applications can be delivered to iPhone and iPod touch users through the Apple App Store.*

A public beta of Flash Professional CS5 with prerelease support for building applications for iPhone is planned for later this year. Sign up to be notified when the beta starts.

I have been questioning why they have not moved to this model before when others are doing so such as haXe, Unity3D and MonoTouch.  Getting Flash on the web browsers on a mobile is hard because Flash is pretty CPU intensive on embedded devices which is really where computers were in the late 90’s and close to 400-600 MHz processors.  Today these machines wouldn’t be able to run Flash very well and that is the same effect you get on a mobile phone.  But cross-compiling to native, similar to how Unity 3D does it or other solutions like MonoTouch and XNATouch, this is the best solution until mobile/embedded devices have 1GHz processors and more than 500MB of memory. Adobe is using LLVM, much like the Alchemy model, to achieve getting AS3 content onto an iPhone/Touch with AOT or Ahead of Time compilation rather than JIT compilation.

So how do you build an application for the iPhone? It’s simple, really. The forthcoming beta of Adobe Flash Professional CS5 incorporates the ability to create an iPhone application. You have access to nearly all the AIR 2.0 and Flash Player 10.1 APIs. For example, you can use APIs such as RTMP, Remote Shared Objects, and AMF as well as AIR APIs like SQLite and filesystem access. For more information see the developer FAQ on Adobe Labs.

I am glad to see Adobe finally moving on mobile platforms beyond Flashlite.  Flashlite is a poor solution in most cases on embedded devices because they really need native apps to perform, again due to the hardware limitations and it is a whole new platform to learn. Adobe is doing the hard work to make it easy to get developers content on the new embedded devices that are storming the world such as the iPhone and Touch.

Media_httpfeedsfeedbu_xmcep
Aug 30

Flash, what is it good for?

There seems to have been a lot of Flash bashing, both within the community and without, in the last few weeks. In terms of the external criticism, I refrained from a knee jerk reaction: "Flash sucks? Well, YOU suck!" and actually took a look for myself at the state of Flash. Of course, there are some on the outside who would say that there is no excuse for Flash anywhere ever. They refuse to even install the Flash player plugin on their machine. On the other end of the spectrum are those who think that Flash is the be-all and end-all. If it can't be done in Flash, it isn't worth doing.

I like to think I fall somewhere in the middle. OK, probably somewhat towards the Flash fanatic side, but not too far. Flash is not the right answer for every problem. There is definitely the phenomenon of "when all you have is a hammer, everything starts looking like a nail" at work. So what IS Flash good for? Well, first, let's look at what you CAN do with it, and then see how suitable it is for those purposes.

Web Sites
Yes, you CAN make a full web site in Flash. Should you? I don't want to say resoundingly NO, but if you do so I think you should have a damn good reason for doing so. And when I say "Flash" I mean Flash, Flex, whatever. A SWF-based site. First of all, there are sites that should never be done in Flash. This category includes most, almost all, sites.

My reasoning for this goes back to a local Macromedia event in Boston way back in 2004. Mike Downey, who was kind of new on the scene, was in town talking about Flash. This was when MX 2004 was coming in and the word "Rich" was starting to mingle with the word "Application" and we were about to get RIAs rammed down our throats.

Media_httpwwwbit101co_wbdjd
But Mike was talking about richness and experience. That talk really stuck with me. Flash is awesome for creating experiences. The possible richness of it - the media, the motion, the interactivity - draw you in and make you part of what's going on.

That's awesome, but not always appropriate. For the vast, vast majority of sites, the user is going there to get some information. He or she wants to click a link or type a URL, have the site show up fast, see the directions, the business hours, what's on the menu and how much it costs, etc. and get out. He doesn't WANT an EXPERIENCE. he wants data. Fast. A preloader stands right between the user and the data he is there to get. So does an intro. So does a page transition if it takes longer than just changing pages. Animation, music, and sound effects are mostly distractions to the information the user is there to get. That's not to say that a purely informational site has to be ugly or Jakob-Neilson-bland. I think decent aesthetics make a site easier to use. But most of that rich experience stuff people use Flash to create is misused if used for most web sites.

So are there any web sites where Flash IS a good choice? Yes, I think so. Anything where the site is about an experience more than information, Flash gives you great tools to create that experience. Artists' web sites (musical, visual, or otherwise) are great candidates. If you're going to check out a band's or a singer's web site, there's a good chance you are looking to see what that artist's music is like - what the experience will be like. Flash is one of the best ways to incorporate music into a site (custom aesthetic controls, rather than generic, fugly Quicktime embedded ones), and also allows you all kinds of visuals that can go along with the music to create an atmosphere that really advertises that artist. Still, you have to ask if it makes sense to do a full Flash site, or just do certain parts in Flash.

A photographer's or other visual artist's portfolio site is also a good candidate for a well done Flash site too. I'm not saying that every artist should do their site in Flash, or that there are no other alternatives. Just saying that these are the kinds of sites where it can make sense to do a Flash web site.

Now, I'm walking a fine line here, because the company I work for, Infrared5, has a full Flash web site.

Media_httpwwwbit101co_wbdjd
But I think there is some justification there too. Basically, we are a company that does very visual Flash stuff. The site really is a portfolio piece of the work that we have done and the kind of work we can do, more than somewhere someone would go to get information. However, if I were going to change it, I would probably have an initial simple HTML splash page with the company name, info, address, phone number, etc. and a button to enter the full site. That way, if someone wanted just that info, we'd be putting nothing in their way.

This brings up another category - pure advertisement sites. Movie sites, TV show sites, new car brand sites. Sadly, most of these are done pretty poorly, but all are designed to deliver an experience that makes you want to buy car x, or watch such and such a show. From my experience, the problem with most of these sites is they are designed by ad agencies by the same people who are doing the print and media campaigns, and don't know that web interaction design is something different.

OK, other than web sites, what is Flash good for.

Video

Of course, this is the killer. It's almost safe to say that video on the web IS Flash. Love it or hate it, you can't deny that Flash video has pwned the web. I know some of you are raising your hand and dying to shout out Silverlight or tell me about the zillions of Quicktime files floating around the net. I will freely admit that Silverlight video is awesome. The quality is great. Various sports franchises and broadcasting networks keep flirting with it, going back and forth between SL and Flash. But say you want to deliver web video. What are you going to do? If you are big enough that Microsoft thinks it will look good to have you as a Silverlight Video customer, they'll probably build your whole solution for you. Note, that Adobe would probably do the same thing. But if you're not that big, what are you going to do? There are no solutions for Silverlight (yet) like there are for Flash. Just want to throw up a bunch of video for cheap? Youtube and Vimeo. Make an account, upload your content, you have decent quality video available for the world in minutes. Want to get more serious? Brightcove offers a full service - content management, syndication, scheduling, georestriction, advertisement, etc. I'm sure they have competitors too. As far as I know, if you go Silverlight, you're building your own solution, or paying someone to build it for you.

Of course, this will change. Silverlight is new in the market and growing and maturing. It will get there. As a matter of fact, back when Silverlight was first coming out, Brightcove announced itself as a Microsoft partner with the intent to bring Silverlight solutions on board. Not sure what happened with that, but I have no doubt it will happen eventually.

Then there's been a lot of buzz about HTML 5 and video. Can't say I know much about it. At any rate, it's something to keep an eye on, but not any kind of viable option in the marketplace at the moment.

Games

OK, this post is getting longer than I wanted, but I have to say that Flash pretty much rules the web in terms of games too. If you want to make a game and put it on the web, chances are you are going to do that game in Flash. End of story really. yes, there's Unity, I know. We'll see if it gains ground. Developers are excited about it right now, but I don't see any hugely popular Unity based games out there yet. (Not saying there aren't any, just haven't heard.)

Education/Visualization/Artistic

Another huge potential here. The visual aspect of Flash along with its interaction and data handling capabilities make it ideal for data visualization and learning activities. For data vis, look no further than gapminder: http://graphs.gapminder.org/world/

A few years back I was working for an educational software company and did some really great learning activities for web-based learning tools. At the time, doing it in anything other than Flash really would have been unthinkable.

On the artistic front, I look to my own Art From Code web site (ctually, there's no Flash there, but it's all created from Flash), or people like Erik Natzke, Dr. Woohoo, Jared Tarbell, etc. Here, Flash is just one tool among many for creating algorithmic art.

Rich Internet Applications

This is a tough one. My gut feeling tells me that there must be some killer examples of these, but I can't think of any Flash based RIAs that I use on a regular basis. My feeling is that most RIAs are actually made for companies and used in house. I know many of the RIAs my company has worked on fall into this category. The one Flash App I do use regularly is my desktop Twitter client, which actually falls into the next category.

Desktop Apps

Here we are talking AIR. Again, the only AIR app I use on a daily basis is TweetDeck. Before that, Twhirl. Somehow Twitter emerged about the same time AIR did and the two got married and had a few dozen AIR-based Twitter client babies. Other than that (and my own KClipper app I use now and then for my Kindle) though, I don't think there are any other AIR apps I use. I think this is one area that's in danger of falling into the "hammer" analogy mentioned above. Developer knows Flash. Developer wants to make a desktop app. Developer makes desktop app with Flash. Quick and easy solution? Yes. Best solution? ...maybe. In some ways I feel that Adobe has encouraged the hammer philosophy by making desktop apps another nail you can hit with the Flash hammer. However, the one huge selling point of AIR is its cross platform capability. I don't know of any other app solution that currently delivers on the "write once, run anywhere" promise as successfully as AIR does today.

OK, I'm done, almost. I guess my a main point is that when most people go off the handle about how much Flash sucks, they almost always seem to be referring to Flash web sites. I tend to agree with them there. But that doesn't mean Flash is dead or has no use.

The other point I wanted to address before I end off this monster post is that there are other technologies that are coming into play, or growing and maturing. I've seen some stuff done in JavaScript in the last year or so that is pretty mind blowing. Certainly not what I thought JavaScript was capable of. Both in terms of application development and interactive graphics and animation. Definitely an area to watch. Just wanted to acknowledge that so nobody accuses me of having my head in the sand.

OK, enough, my fingers are tired. Looking forward to comments.

Jul 16

Efficient Programming Practices

Shane McCartney has created a high-level presentation (about 136 slides total) on efficient programming practices.  Experienced Flash developers may already know most or all of these, but you never know when a good tip might pop up in one of these slides, so check it out and see what you think.

View presentation here.  Actual performance tests are available here, although I have not had time to independently review them all in detail.

Jul 8

AS3 Library for OAuth with Twitter for AIR Apps

AIR is very popular for creating twitter clients, Sönke Rohde just made it much easier to make AIR apps for twitter with an AS3 library for Twitter. This library is built on top of core oauth as3 library by iotashan.  Core OAuth as3 library is a standard OAuth library this can be used for your own OAuth backends or connecting to other OAuth services as well.

A very nice feature of this library, in addition to being coded cleanly and as3 style, is the ability to have the Twitter OAuth page render inside of Flash.

Instead of opening the Twitter authorization page in the browser the library also contains OAuthLoader which is a wrapper around HTMLLoader which enables to directly show the authorization page within an AIR window:

// use this in the requestTokenHandler instead of navigateToURL
var loader:OAuthLoader = new OAuthLoader();
loader.load(request);
loader.percentWidth = 100;
loader.percentHeight = 100;
var w:Window = new Window();
w.width = 800;
w.height = 400;
w.title = req.url;
w.addChild(loader);
w.open();
Media_httpfeedsfeedbu_ofppb
Jul 1

Flash Augmented Reality, Made Easier: Open Source FLARManager

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.

Media_httpfeedsfeedbu_ddhss
Media_httpfeedsfeedbu_hdlfc
May 12

Touchscreen Particle Drawing, Memo’s MSAFluid Particle Library, and Why Sharing is Good

Interface 27 from CyberPatrolUnit on Vimeo.

There has been a long tradition in live visuals and motion graphics, inherited from many other media, of maintaining a “secret sauce,” or the guarded formula of eleven herbs and spices. Ironically, for all you hear today “DIY” and “open source” in the same sentence, a lot of the motivation for doing something yourself has historically been doing something no one else can. Keep your secrets, and raise your value.

As our friend Bryant Place / CyberPatrolUnit sends over this latest set of live clips from a recent gig, and I browse through the comments, and reflect on the conversations I had last week at OFFF and during and following my own talk there, though, I’m struck.

The world has changed. First off, the Internet isn’t really about secrets. Your value is almost in direct proportion to how much you can share. Connections are forged through links of mutual exchange and good will. It’s not just about sharing your output or getting fans (the MySpace model), but sharing with a network of enthusiasts, and fellow artists. Those are the people from whom you often get real support (artistic, technical, and personal), gigs – and inspiration. (Even if you hate 8-bit music, that community is a really amazing model: their work to support each other and advocate for the whole subgenre has been I think the single biggest ingredient in their viral success.)

The visualist community increasingly itches not only to improve the quality of their own individual work, but everyone around them. A lot of us are in a battle for the future of this whole medium. Some parts of the world are devoid of live visuals, while others have mass-produced club visuals filling the nightlife.

Before I get carried away, the video itself is just the latest from the ongoing Interface 27 series. It employs a touch interface to control abstract visual pictures formed from streams of particles.

The reason I’m pulling back into the larger question is that these visuals are enabled by a library for Processing, a library we’ve seen here previously, developed by Memo Atken:

MSAFluid for processing (and Java)

If you’d rather use openFrameworks, there’s that version, too, as pictured below running blazingly fast:

ofxMSAFluid for openFrameworks

There’s even an ActionScript 3 port, in case you want to code Flash on the beach.

ofxMSAFluid for openFrameworks from Memo Akten on Vimeo.

So, why do I bring this up? Well, the work done on Processing (Ben Fry, Casey Reas, contributors like Karsten Schmidt, and others), on openFrameworks (Zachary Lieberman, Theo Watson, and their own team), and Memo’s own library, based in turn on many other libraries and implementations, was all a big risk.

It’s not an easy thing to put blood, sweat, and tears into open source. None of those people has exactly gotten rich in the process – not even via the ways you’re supposed to profit from open source, doing the lecture circuit and such. But on the other hand, we’re seeing things that would have been otherwise impossible.

And there’s artistic merit, too. Bryant’s work looks different than Memo’s. The library actually takes on a new life as it gets in someone else’s hands. Bryant actually just wrote me:

As for the Interface video - mention how cool it is that people like Memo post code for other VJ’s to tweak and use.  Mention "FaderTouch" - a 100buk touchscreen off ebay that "vjFader" programmed - using a rear projection onto a translucent screen/ touch sensor we were able to use processing in a very intuitive way.

I got the “mention” part down, I guess. ;)

The responsibility is partly ours to make all of this work: file bug reports, fix bugs if you can, document your work, properly credit the people making it, write documentation for projects, and so on. But it’s not hard to see an ideal start to happen:

1. Person x makes a library / framework.

2. Person y build on that library to make their own tool – and contributes it.

3. Artist uses the tool, gives back to the project, goes in a new direction.

4. More and better work spreads, the project grows, the medium grows, and the audience grows.

None of this happens automatically. We all have a lot more work to do. But having stood onstage in front of a few thousand people calling for just this, it’s nice to keep opening my inbox and seeing it happening. We’re seeing the first seeds planted for what could ultimately be a larger ecosystem. Now, I know there’s also a big gap left – Processing doesn’t have nearly enough contributors, bug squashers, or documenters, and it’s one of the biggest projects, so you can imagine what happens when you get upstream to libraries and the like.

Over the coming months, I think we’ll continue to look for opportunities to help structure some of that involvement and to explaining how you can contribute, too. Stay tuned.

In the meantime, go play with some particles.

For more on Bryant, here he is on his current activities:

- I just did Coachella with [Friend of CDM and contributor] Momo, and in the near future, will be heading to Detroit for http://www.myspace.com/detroitmusicfest

I’m not on the website, however, Kero.fm and Derek Michael - two people who essentially helped build the festival from the ground up 10 years ago - are booking me to play with various acts including CLP, Richard Devine, Drumcell, Busy P (which I did a solo VJ set with at Coachella) so I am super excited to be a part for the first time this year.

Here is a cool video from previous Interface 26:

After Detroit - Mutek.

http://www.mutek.org/

There are also some killer podcasts from past Mutek - http://www.mutek.org/podcast

I am going to meet artists, see the latest AV performances, attend workshops.

I’ll be at Mutek, too, so see you there.

Media_httpfeeds2feedb_xfjei
Media_httpfeeds2feedb_ivije
Mar 10

Painting with ActionScript: Code Artwork by Patrick Gunderson

Media_httpfarm4static_ixbck

Artist Patrick Gunderson creates spectacular canvases of particle-generated paintings, a bit like code action paintings. (Action as in the likes of Jackson Pollack, not just ActionScript.) Above, an image from the Create Digital Motion Flickr pool. It’s worth having a closer look on Flickr - as with a physical painting, the closer you get, the more detail you see.

This is a Actionscript 3 generated composition. Color samples are taken from a base image then drawn using a psudo-random line drawing algorithm in concert with a particle system.

The technique itself is not exclusive to Mr. Gunderson, though I really love his use of color in the composition. Now, all due respect to ActionScript, I just hope he takes a look at some Processing and OpenGL code, as this could be even more fun set in motion, for doing some things Flash may not be quick enough to do. (As you can tell from the name of the site, we have a certain bias toward things that move ’round these parts.)

Media_httpfarm4static_dgrdn

Really beautiful work, and further evidence that the aesthetics of code can go in all sorts of directions. Definitely check out the many variations in Patrick’s Flickr set; there’s quite a lot more than can fit here.

Updated: I wrote this post quickly and really should have mentioned the work of Erik Natzke, whose techniques Patrick adapted and who is the major artist in this field. Erik’s stuff really deserves its own post, which I didn’t have time to do justice here, so — will remedy that by tomorrow.

Media_httpfeeds2feedb_weegv
Media_httpfeeds2feedb_hdjvg

Get Updates

Tags

Archive

2012 (1)
2011 (11)