Note: Super sorry about the seriously shaky footage above. Next time I’ll make sure it doesn’t happen.

Yesterday, I spent about 12 hours making what I thought would take “a couple hours” — the Flow Receiver module. In the video above, you can see me demoing the system. Everything is up and running and working seemingly well. This means it’s time to start creating “art.”

I designed the UI for this thing to be as simple as I could make it while also accounting for the fact that I’d be using it on a touch-enabled display. It only has three different “views” which you can see below.

+ View larger on Flickr.

+ View larger on Flickr.

+ View larger on Flickr.

Everything for Flow Receiver is built using Adobe AIR. It communicates with Community Core Vision using CCV’s built-in UDP->TCP bridge which sends out TUIO data associated with the tracked blobs.

Flow Receiver intercepts this TUIO data and displays the incoming data in the right-side panel. I’ll also use this software to interface with the Flow Storage back-end module for creating projects and recording the TUIO data to those projects.

When in “recording mode”, Flow Receiver buffers the incoming TUIO points until its internal “cache” is full, then sends that info via HTTP POST request to Flow Storage which dumps it into a MySQL database. I’m also storing a timestamp (to the millisecond) with each TUIO point collected so that I can later determine velocity data between “frames” as needed.

When it’s time to export a project’s data, I’ll use Flow Receiver to export the data as either an XML or CSV text file.

Not much else to it than that; it’s a super-simple application.

On a side note, I’m pretty amazed at what we can do with technology these days, the number of options from which we have to choose, and the speed at which we can produce this stuff. I’ve somehow managed to create a fully-functioning toolset in a total of about 20 man-hours, cobbled together from open source libraries, applications, and various other technologies — all at pretty much zero cost (aside from the time put in).

I just want to say that I got lots of great feedback from friends and strangers regarding the redesign of my portfolio site. And thanks to all of you for it.

The two biggest issues (and I whole-heartedly agree):

1. The logo was weak and didn’t fit in.
2. The italic typeface didn’t read well in longer chunks.

So, instead of spending days on a logo treatment, I just put my name up in big, simple VAG Rounded Bold. And I used it for any type that was living on a white ground. I think things got balanced out with the change. Feeling better about it now, at least from the side of legibility.

Ta-da!

Well, that took long enough. Last night I launched the new version of mikecreighton.com. This morning, I polished up a couple things, so technically this post is a “YESTERDAY, CREATED.” update.

There’s still some work to do, like hooking the content up to ExpressionEngine, implementing this “Faust” technique, and sticking some Google Analytics events in there.

But for now, I’ve got something fresh online representing some of my work.

Still moving along on this. Here’s a little effect for transitioning between a project’s images. Feels a little too random right now…probably because it is, in fact, just random. I think I’ll move to something a little more organic that “sweeps” the grid mask across the image.

Now to figure out how to do that…

I needed to get this prototype out ASAP since some of the strength of the design direction I’ve chosen has to do with this uber-zoomed image pixel grid thingy. When I was designing it, I wanted to take advantage of Flash’s ability to smooth a scaled Bitmap. So, that’s what you’re seeing in this prototype.

I still have to figure out what to do with the motion, but the overall effect is achieved in the prototype. In the end, I’ll be sampling a 35×35 pixel rect of a loaded image and blowing it up to fill the stage. This is a little smaller than that, but the performance remains fast at either size.

Today at 2AM I started getting a lot of traffic from StumbleUpon — well, a lot of traffic by my standards. I realized that for new visitors, there’s nothing that really indicates just how much content is actually on this site. I also tinker with a bunch of mediums, and that’s not apparent either.

So it hit me: I need some sort of “discovery” mechanism. I finally have a lot of content, and even I want to be able to see it all at-a-glance. So today, the Grid Browser was born.

On that page, there’s an all-up view of the visually-oriented content on the site. Also, in the header area of each page, you’ll find a little “grid strip” that pulls up 7 random pieces. I’m hoping these things encourage a little more exploration for people.

Tomorrow, I think I’ll put in a little tool tip that calls out the post’s name for each image. I might even go so far as to make the big grid sortable.

UPDATE #2 (08-23-2009): Just realized that the text file with the sample ActionScript class was called “BasicAnalysis.txt”. It should’ve been called “BasicAnalyzer.txt”, which you’d need to rename to “BasicAnalyzer.as”. The link has been updated below.

Most of my traffic comes from searches for Actionscript 3 spectrum analysis. Because of this, I decided to post an updated example that you can use to conquer your SoundMixer.computeSpectrum() woes. I realized that my original post had source code that wasn’t entirely transparent — and thus, probably not as useful as it could be.

This new example shows how you can draw a series of columns (using basic Graphics.drawRect() code) and how you can do something a little more interesting. I wanted to include both so that people learning from this code don’t get too confused.

Download the source: BasicAnalyzer.txt (you’ll want to rename the extension to .as).

Things you might gain from referencing this class:

• A better understanding of what’s going on with the ByteArray that SoundMixer.computeSpectrum() writes to
• A means for averaging the values in the ByteArray so that you don’t have to represent all 256 values of each stereo channel
• A simple example for doing something a little more “interesting” with the float values in the ByteArray

The source is fully commented, so feel free to snag it for your own use.

You can either make this class your FLA’s document class if you want to try it out, or you can add it as a child of any DisplayObject. Though, there’s some positioning based on stage.stageHeight in there, so your mileage may vary. If you do make it your document class, the Flash movie you’re seeing is 560px by 400px.

Also if you’re interested, the music is “Venus Morning” off an album called “Talk Strange: A Beat Tape Inspired by Bjork” by Dert. Click on his name for the download. Highly recommended.

UPDATE #3 I created a ZIP file with the code and an FLA demonstrating how to use it. You can grab that package here: BasicAnalyzer.zip. It was created using Flash CS4, but should be able to be opened using Flash CS3.

I spent the last couple days making a desktop wallpaper-generating web app out of the previous experiment. Click the image above to check it out.

I tried to add a majority of the common 4:3 and widescreen desktop screen sizes. Make sure you’ve got Flash Player 10. The app will generate a slightly-compressed JPG for you.

Now that I’ve created this, I’m going to apply for a Kuler developer API key so that I can add a “randomize” button for the color palette that pulls in a color scheme from Kuler.

UPDATE (11-29-2008): Added a size for the iPhone.

There’s an ActionScript contest going on (believe it or not). It’s called The 25-Line ActionScript Contest, and I decided to enter it. I’m posting the output here, but not the source. I’ll put that up once the contest is over.

Anyway, for now, just click on the image above and play. It’s microphone-reactive, so go ahead and blow into your mic. If you don’t have one, it’ll still do stuff. Caveat: you must have Flash Player 10 installed.

UPDATE (12-29-2008):

Now that the contest is over, I’m posting the source code for your dissection. You should be able to open up Adobe Flash CS4, create a new ActionScript 3.0 project, and paste it into the Actions window on the first frame of the timeline. Enjoy!

• Noise Column Source Code

A couple years ago, Odopod made an awesome sketching application with Flash. They called it Odosketch. I guess, it’s just called “Sketch” now, but it’s mighty fun to play with.

One of the coolest features is the way it replays the drawings in its database, a la Painter circa 1998.

You can also see my drawing re-drawn on Odopod’s Sketch site.