Visual editors seem to be popping up everywhere. My first experience with a visual editor was one designed to teach children how to program called Scratch. This thing is pretty cool. I liked that everything in an OOP language was mapped to something all children can relate to, puzzle pieces. The IDE itself is really easy to get started w/ and has built in support for I/O such as the webcam and microphone. Great for kids to dive into with-out much learning curve.

However, now visual editors are popping up that promote the ability to create ‘big boy’ applications like in Android or Javascript. Now, I have mixed emotions. Is it a bad thing when people learn this way? Probably not. Would it be bad if people always programmed this way? Maybe. At its core it’s not ‘generated’ code, but it’s close. You could argue that using a puzzle IDE would eliminate sytax inconsistances but at what cost? Speed? Space? I can’t imagine a looking over someones puzzle code for an enterprise application…but maybe I’m just being closed-minded.

Overall, I think it’s an interesting avenue that no doubt will be explored in the coming years. But what’s so tough about function() { echo ‘hello world’; } ?

If you liked the highlight film of FITC Toronto then you’ll really enjoy the one the Stock-Archive.com put together for FITC San Francisco. Check it out….I make a cameo @ the 28 second mark.

I just got back from FITC San Francisco last night and it was an amazing conference. I should have a post or 2 up over the next few days summarizing all of the incredible speakers, frameworks and artwork I saw. For now though, I just wanted to throw up a quick video of the Android game that I made, Total Recall, actually running on the Droid X. The Droid X is still running Android 2.1 and should have significant speed boosts when it’s updated to 2.2 early next month. You won’t notice any performance issues in this simple game however.

A few weeks ago I decided to take a crack at developing Android apps using the Adobe AIR runtime. I have to say that I’ve really enjoyed the workflow but testing has been an issue since I don’t have an Android device. The emulator could use some serious performance enhancements but I made do with using it for layout purposes. Unfortunately, the real problems arose when I realized I’d want to use the camera, camera roll, accelerometer and other device hardware.

So earlier in the week I made the switch from AT&T to Verizon, ditching my iphone for the Droid X. Due to the huge demand for the phone I won’t be receiving my Droid until tomorrow, but in the meantime I’ve managed to create a little Android game that doesn’t use any mobile-specific hardware. It’s based on a little memory game that you might recognize, also my namesake. And since it’s written with AIR I can share it with you in the browser (sorry if it doesn’t fit your screen, it’s running at 800×480 which fits most high-end android phones). Just repeat the pattern and each time it will get one ‘blink’ longer. And to the Android owners it should be on the market for free once the AIR Runtime is officially released.

• Installing Adobe AIR runtime on Android 2.1 emulator
• ActionScript 3.0 API support for mobile devices
• Must Have Android Components
• Authoring mobile Flash content for multiple screen sizes
• AIR SQLite Utility
• Dev Girl’s first Android app experience
• Developing Flash applications for Android
• 10 Best Android Resources on the web
• Access the Camera and Camera Roll

Enjoy

[as3]
package {
import beekay.colormunch.*;
import flash.display.Sprite;
import flash.events.*;
import RandomKulerThemeEvent;

public class RandomKulerTheme extends Sprite {
private var myColorMunch:ColorMunch=new ColorMunch(“YOUR API KEY”);
private var myRandomTheme:Theme;
public var hexArray:Array = new Array();

public function RandomKulerTheme() {
myColorMunch.addEventListener(ColorMunchEvent.RESULT_READY, loaded);
myColorMunch.addEventListener(ColorMunchEvent.RESULT_EMPTY, onResultEmpty);
myColorMunch.addEventListener(ColorMunchEvent.ERROR, onError);
myColorMunch.addEventListener(ColorMunchEvent.LOAD_ERROR, onLoadError);

myColorMunch.loadThemes();
}

private function loaded(e:ColorMunchEvent):void {
var swatch:Swatch;
myRandomTheme= myColorMunch.getRandomTheme();

for (var i:int = 0; i < myRandomTheme.getSwatchCount(); i++) {
swatch=myRandomTheme.getSwatchByIndex(i);
hexArray.push(swatch.getHexSring());
}
arrayReady();
}

private function onResultEmpty(event:ColorMunchEvent):void {
// the search returned zero results
trace(event.data);
}

private function onError(event:ColorMunchEvent):void {
// There was an error with my searchThemes call
// Although the second parameter accepts a string value,
// because we have used the hex filter options it will check for a hex color in the format '0xFFFFFF' or 'FFFFFF'
trace(event.data);
}

private function onLoadError(event:ColorMunchEvent):void {
// There was a loading error
// The data object will contain more info
trace(event.data);
}

private function arrayReady():void {
dispatchEvent(new RandomKulerThemeEvent(RandomKulerThemeEvent.THEME_READY, hexArray));
}

}
}
[/as3]

This class was called from my document class. With-in my document class is a Timer. Every time the Timer fires a TimerEvent.COMPLETE event that triggers the class you see above (RandomKulerTheme.as). After the class above is done grabbing the theme from Kuler it pushes each swatch in the theme to an array called hexArray and passes that array to a RandomKulerThemeEvent.THEME_READY event. The Main class hears that 'ready' event, accesses the swatches and applies them with a color transform to the MovieClips on stage. That magical function looks like this:

[as3]
private function applyTheme(e:RandomKulerThemeEvent):void
{
TweenMax.to(loading,.5,{alpha:0});

var c1 = e.themeArray[0];
var c2 = e.themeArray[1];
var c3 = e.themeArray[2];
var c4 = e.themeArray[3];
var c5 = e.themeArray[4];

TweenMax.to(lamp.lampGraphic,1,{colorTransform:{tint:c1,tintAmount:1}});
TweenMax.to(trees,1,{colorTransform:{tint:c2,tintAmount:1}});
TweenMax.to(gradient,1,{colorTransform:{tint:c2,tintAmount:1}});
TweenMax.to(dome,1,{colorTransform:{tint:c3,tintAmount:1}});
TweenMax.to(buildingsFront,1,{colorTransform:{tint:c4,tintAmount:1}});
TweenMax.to(buildingsBack,1,{colorTransform:{tint:c5,tintAmount:1}});
}
[/as3]

The final piece of the puzzle was to make the background display fullscreen and maintain its aspect ratio. I went to the barrel of bookmarks once again to grab a class I've used many times NpFullBrowserBackground. Dale’s blog is great and he’s always posting very useful AS3 classes so a big thanks to him for making that class available. I used Dale’s class as a wrapper, loaded my KulerBackground as an external .swf and voila! A dynamically themed site was born.

The starting point is a transparent png created in PS. Ugly, I know…but I wanted something will a lot of complex transparency to see if it had any effect on performance so I scribbled around with one of PS5′s new mixer brushes.

This example has a few bitmaps in space rotating with a pixelbender filter applied to them. There is also a bitmap in the foreground with a ripple filter that interacts with the mouse. I basically just wanted push the Flash Player to see how it would perform.

Here I’ve taken those same rotating bitmaps but used audio data to dynamically change the inputs of the rotation angle and filter inputs. The graphic also moves based on your mouse position.

And lastly, I’ve once again taken the same bitmap configuration but this time I use you’re breath as the input. Blow into your microphone to spin the graphic.

I’ve been obsessed with the idea of generating art on the fly lately. At FITC Toronto Keith Peters gave a great session on generative art which I blogged about here. I’d seen and thought of the concepts before but Keith made it clear to me just how quickly and easily generating art could be. However, all of Keith Peters examples were hardcoded. They included random elements to make the generated art ‘dynamic’ but I wanted to take it a step further and let the user (or artist) interact in real time rather than just being completely random. I wasn’t sure how to accomplish this just yet so I let the idea fade for another day.

Then while looking through the FITC San Fran lineup I kept seeing this HYPE Framework coming up. I decided to check it out and was pleasantly surprised. I won’t go into what it can do now but just know that it’s used in this example for creating visuals. So now I’m inspired to make something visually pleasing…my goal was simple:

Take a scene and respond to it through motion and sound.

Thanks to Justin Windle’s motion capture class I had the toughest part covered. All I really needed to do was interact with the sound picked up by the microphone and implement a way to save screen captures. What you see at the top is a screenshot of the final product. The particle on the screen moves based on your movement and changes color based on the volume of the sound being inputed. At any point you can click your mouse in the application and it will save a screen shot of your work of art. the screenshot gets uploaded automatically to the web. To check out your art just visit The Gallery and navigate to album with today’s date. The particle will be black if there is no sound so I recommend playing with it while listening to a few different types of music or singing if that’s what you’re into. I’ll work on getting the image quality up in the future but prob won’t be able to make many changes as I’m using the as3corelib for creating jpgs.

I didn’t feel like messing with networking issues right now so I packaged it as an AIR app to get past crossdomain problems. Just install it from the browser by clicking below. Enjoy.

*Update 6/4*
I added some extra features
-press ‘s’ to take a screenshot
-press ‘n’ for a new particle (program starts with no particles)
-press ‘r’ to remove a particle
-press ‘c’ to remove all particles
-press space bar for the settings panel
and remember that you’ll have to have your mic enabled and be making noise to see the particles!

© Jonah P. Langenbeck

I attended the Adobe New Orleans Multimedia User Group (NOMMUG) meeting last Tuesday. It was my first meeting as a member of the user group and was a good experience. The guest speaker for the meeting was Jonah Langenbeck, the Interactive Media Manager of the National WWII Museum. Jonah’s presentation titled, ‘Get Stoked! Inject new life into your creative process using the web.’ was as informative as its name suggests.

Jonah gave us an inside look at how he uses multiple websites and tools such as Twitter,Instapaper and Tumblr to bookmark/save sources of inspiration that he finds while surfing the web. The beauty of Jonah’s approach is that by linking up multiple tools and services and channeling them through Tumblr he creates an easily searchable archive of all everything that inspires him. It’s a brilliant way to raise your productivity and stop wasting time trying to remember that picture of a dog riding a unicycle you saw 2 years ago.

Jonah’s presentation was full of great information but one slide in particular had an interesting quote by Jim Jarmusch…

Nothing is original. Steal from anywhere that resonates with inspiration or fuels your imagination. Devour old films, new films, music, books, paintings, photographs, poems, dreams, random conversations, architecture, bridges, street signs, trees, clouds, bodies of water, light and shadows. Select only things to steal from that speak directly to your soul. If you do this, your work (and theft) will be authentic. Authenticity is invaluable; originality is nonexistent. And don’t bother concealing your thievery — celebrate it if you feel like it. In any case, always remember what Jean-Luc Godard said: “It’s not where you take things from — it’s where you take them to.” ”
—Jim Jarmusch, The Golden Rules of Filming

The best part is a quote of a quote, “It’s not where you take things from — it’s where you take them to.” I think most creatives can agree…these are words to live by in our industry. Jonah will be giving the same presentation at BarCampNOLA but if you can’t make that he was nice enough to put the slides online here