I think it’s a creative idea… However their complicated way of explaining what they did kinda makes it look harder than it actually is (which is never a good thing).

Anyway: seeing the above reminded me about a little experiment I did about a year ago. I created a Flash movie that accesses the webcam and does some bitmapdata magic. The result is realtime light painting!

“What does that look like?”
See below!

“Can I try?”
Yes you can! Just make sure you’re in a dark room.

Feel free to show some of your results!

Update:

A friend of mine asked me to share the source, so here goes! Click!
(I really should start sharing my source right away… I’m way too lazy)

So I started moving some code around and after a few minutes, I found myself rewriting the whole thing… That’s not a bad thing since now we’ve got one handy class that can do about just everything a Bezier Animator should be able to do.
Demo time!

There’s still a little bug somewhere which allows the target to ‘run away’ from the bezier, and I haven’t gotten quite to the root of the problem, but I really felt I had to share this. Also there are some imperfections when you disable the orientToPath and scaleByPath properties. I will look into fixing those asap.

I really love the idea of animation movieclips using bezier curves. It looks so natural and yet zo intriguing… I will do some experiments and upload them later on, showing the coolness behind this simple animation engine.

Sources
Download the above demo source (Flash Builder 4 project): Click
Download the BezierAnimatioin class: Click

Yesterday night (actually early this morning) I decided to go out to shoot some pictures. For some time now I really wanted to experiment with a technique which is known as ‘lightpainting’. Basically it is nothing but using long exposures to shoot the picture and ‘painting’ the area you want to put extra light on with a flash light. You can create some pretty amazing stuff with that. I’ll try to create a video tutorial showing an actual example of what to do, and how to do it.

Tonight were my first tryouts, and I’m pretty happy with the results so far. Here are a few shots. Feel free to check out more of those on my Flickr page!

HorizontalList and ItemRenderers in Flex

I must’ve done something wrong… I can’t imagine this being so hard.
What I did was: I used a simple HorizontalList component, set the columnWidth to 80, built my own itemrenderer and put them together. The itemrenderer basically loads a JPG and displays it. Seen as my images were larger than 80px I decided to do some maths the resize the image on the fly.
To start with, i went into my itemrenderer, and traced the with of the bitmap, and the width of the itemrenderer itself. Just to make sure those properties are actually ready. First thing to notice: this.width inside the itemrenderer randomly traced 80 and 85.

What the f-… Wait… Eh… No, what?

I didn’t really find out why that is, but if anybody feels like enlightning me: go right ahead. (After that, I noticed that sometimes the first or the last (or both) items in the list weren’t updating at all… I must be misunderstanding some fundamentals of the framework I guess… [Btw: I did NOT manage to fix this in a decent way, so at some point I gave up an threw it away...])

The panel titlebar in Flex

So this is AIR, right? Goodbye system chrome, hello you science-fiction-looking chrome! I created my own (very Flex-looking) chrome and disabled the system chrome. I wanted my app to be able to be moved around on the desktop… You know: Like windows do (not Windows…).
I figured: Hell, the Panel component looks a lot like a basic window. Why not use it as the main window? So what’s the first thing a regular human brain would do? Right, you’ll try to get to the titleBar via the panel instance… But you can’t! I figured I must be misunderstanding the construction of the panel. So there I go, reading about the titleBar on the Panel Class page in the Flex Livedocs. Most of you already know but just let me spell it out for you: It’s protected… So you can’t get to it right away… You have to built your own panel class that extends the original Panel class, and create your own public getter for the titleBar…

Excuse me: WTF? Oh, I think I understa… Oh, no I don’t: Why again?

No seriously: What’s the deal with that? I can see how you don’t want a setter there… But no getter? What good is that supposed to do? Anyway, let’s fix this…

< ?xml version="1.0" encoding="utf-8"?>
<mx :Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300">
</mx><mx :Script>
< ![CDATA[
import mx.core.UIComponent;
 
public function get theTitlebar():UIComponent{
return this.titleBar;
 
}
// There are probably way easier/simpler ways than this...
]]>
</mx>

And now I can use theTitlebar of my DraggablePanel class to actually drag my panel like a real window…

pnlMain.theTitlebar.addEventListener(MouseEvent.MOUSE_DOWN, startTheDrag);
private function startTheDrag(e:MouseEvent):void{
nativeWindow.startMove();
}

That looks pretty straight forward, and actually works like a charm… But why did I have to do this? Why is the titleBar protected??

AS3 JPGEncoder for FP9, FP10 and the one on speedballs

So at one point I actually got to building the thing I actually wanted to build: A Photobooth-clone that takes a picture and saves it to the harddrive. Drawing the bitmap went fine, saving the encoded JPG to disk went perfectly smooth as well. The AIR API is really fun to work with. Pretty straight foward… But I will get back to that in just a minute…

The problem at hand right now was the Bitmap encoding: I draw a bitmap (480 x 360) and I want to write it to disk. So I include the AS3corelib in my project and continue my quest. When testrunning I notice the application freezes while the bitmapdata is encoded. And not just for a moment. Noooo… For a full second (or longer)! I can hear you thinking: ‘A second…? So?’. Well if you want to shoot a picture every second this application will just completely freeze. And let’s just face the fact: it’s just plain annoying the have an application the freezes every few seconds for that amount of time.

So I started playing with quality settings, and bitmap sizes. All to no avail. The encoder is just too slow. Peter suggested taking a look at the Vector implementation found here. That went way faster already: Up to 4 times faster. But still: 0.3 seconds is pretty slow… So I read through the comments and run into the magic word: ‘Alchemy‘. I haven’t been playing with Alchemy myself (mainly because I don’t know C), but I knew Alchemy would be the key to he solution of this problem. So I downloaded this SWC (direct link), implemented this version of the encoder, ran the script and…
….I went ‘WHAT THE FUUUUCK?’ (You can see what that looks like below)

This video was made using the pictures Alchemy created. Alchemy was encoding these bitmaps in .05 seconds per frame! (I swear, I went on for at least 15 minutes WTF-ing over and over again…). So: From 1.2 seconds to 0.05 seconds… That’s about 24 times faster. Ain’t that amazing?

The coolest thing? I didn’t even have to compile the C code myself as I was given the .swc file. (Believe me I gave C compiling a try, but me and Terminal… It’s just not gonna happen…)

File.nativePath and File.url in AIR

The one thing I love about AIR? The combination of creating crossplatform applications using the tools I’m familiar with from online development. The keyword here is crossplatform. Creating AIR apps is supposed to be a straight forward process. You shouldn’t worry about platform specific issues. AIR is handling the heavy lifting for you. The only thing you need to do is create the app using the crossplatform API. Or so you would think.

One of the first things I noticed was the fact that the file.nativePath property isn’t all that crossplatform. And nobody can’t really explain why. Even Lee Brimelow didn’t manage to explain that in his tutorial…

I mean: How can the native path not be cross platform? It’s native to it’s own platform! (I really went WTF when learning that).

Apparently you can do anything using the file.url property. To me file.nativePath isn’t intended to be used when trying to access a file, but more intended to show the end-user where on the filesystem the file resides using a platform native notation.

Examples

• Windows XP: c:\Documents and Settings\noCreativity\My Documents\myFile.jpg
• Windows Vista: c:\Users\noCreativity\My Documents\myFile.jpg
• OSX: /Users/noCreativity/Documents/myFile.jpg

instead of

• file:///c:/Documents%20and%Settings/noCreativity/My%20Documents/myFile.jpg
• file:///Users/noCreativity/Documents/myFile.jpg

I am no Adobe AIR expert so please, feel free to correct me. Because this really itches me. How can a crossplatform API have a property which is not crossplatform-compatible (and don’t get me started on the whole OSX Dock/menubar vs Windows Start Menu/taskbar thing… But somehow, that’s different…)

Finally… The end…

Yes, I had a hard time doing all this but I learned a lot! My conclusions?

I like Flex and how it enables you to rapidly create data driven applications, but I’m pretty sure I’d really have to look into the inner workings of the framework before trying to build something, using the framework… And basically that ‘really looking into it’ ruins the mood for me… Definitely when experimenting.

Alchemy is amazing! I can’t wait to get a good C development environment up on my iMac and start playing with C and lean how I can get the best from both worlds. If you have got any decent suggestions on how to do that [without Terminal] feel free to tell me
Oh and by the way: If you’re experimenting with Alchemy and you’re open-sourcing code or libraries, I encourage you to add a .swc file with the compiled C code. Thanks in advance!

I love the AIR API. Although that nativePath thing will keep haunting me until somebody can give me a straight answer, ’cause I feel like a complete idiot right now.

Oh, and if you care: Feel free to check out the application!

Download: Click!

Some time ago I started looking into the wonderful world of ‘Time-lapse‘. I really found it intriguing and I wanted to do something like that myself. So I started experimenting around, and soon people asked me how I actually do this, so here goes…

Let me start with a disclaimer: I’m still experimenting to find the perfect workflow, and figure out a lot of stuff. If you got any suggestions to make: Don’t hold back

Equipment

Recording a time-lapse is pretty easy, but you do need a few (pretty damn important) items in order to do so.

Digital camera

I am using a DSLR (Sony Alfa 200). This allows me to take pretty cool pictures (sometimes impossible to capture with a video camera). If you would like to use a photo camera as well, you’ll have to make sure it comes with an intervalometer.
Some cameras (like the Sony Alfa 200) don’t come with such a feature. I had to buy a shutter remote that allows this kind of functionality. 45$ is not too expensive in my opinion.

If you’d like to use a video camera to shoot your footage, make sure you’ve got enough storage capacity. Depending on the time and quality of your recording 8GB might only be enough for 60 to 90 minutes. Seen as a time-lapse video only becomes intresting when a long timespan is shown in a few seconds/minutes, using a video camera might be a bad decision.

Tripod

A tripod or a steady surface where you can leave your camera for a few hours. You don’t want your camera to move randomly. This creates a pretty annoying shaking effect (which in most cases is unwanted)

Getting ready

Recording a time-lapse takes time. A lot of time. At least a few hours. Nonetheless setting up your stuff is 90% of the job.

Subject

Basically time-lapse is about evolution. Making changes visible which normally are overlooked. That is what makes time-lapse videos interesting.
Whatever your subject will be, you’ll want your viewer to watch it during a few seconds or even minutes. Showing a steady, almost unchanged scene during half a minute isn’t really entertaining. Choose an interesting subject that evolves during the period of recording. Choose something like a flower standing in front of window, and shoot it from midnigh to midday. You’ll see a beautiful evolution (because the flower is moving towards the sunlight). Record night-to-day shots: watch the night explode into light and day, and see how the city wakes up. Really amazing stuff.

Settings

Depending on the shot you’re going to make, you’ll have to set up your camera differently.

Shutter speed

Especially at night, setting up the shutter speed correctly results in amazing stuff. I usually set mine to 15-20 seconds. That allows a lot of light to come in; something which is nearly impossible to imitate with a video camera. Not to mention the trailing lights of moving cars.

Aperture

I actually don’t really mess around with the aperture a lot. When doing day-to-night/night-to-day shots I set this to AUTO in order to autmatically adjust to the lighting (which is constantly changing). Don’t set this to auto if you’re not expecting any big changes of lighting.

Auto-focus

Absolutely disable this. Set it to manual focus and adjust it for your shot. Otherwise you’ll end up with a constantly changing focus in the resulting video.

Anti-shake / SteadyShot

Disable this. Since you are using a tripod or a steady surface, your camera isn’t moving. Therefor no correction is needed. If you enable this during the recording, your camera might think some pictures need correction which will result in unwanted changes in some pictures.

Other settings

Anything that can be set to auto: set it to manual. Everything.  You don’t want your camera to change its mind on something all the time. White balance, dynamic range, ISO-speed, set them all to a fixed setting that fits you best right from the beginning. It’s a bit more work to get everything right, but once set every other shot will be taken exactly like it. And that is very important because the eye of the viewer is unforgiving. Even at 25 frames per second, the eye notices any unnatural changes that shouldn’t be there.

Location

Make sure the view of the camera stays clear of people walking right in front of it.
If you are shooting from behind a window at night, make sure the room stays darkened. You don’t want your shot to be messed up by the reflection of your room in the window

Shooting the time-lapse

Alright, you’re set! Let’s go… No, wait. No quite yet…
Before starting you should think about the following:

1. How much time will you be recording (the time between the first picture and the last one) (Example: 6 hours = 6 * 3600 seconds = 21600 seconds)
2. How long do you want your resulting video to be? (Example: 45 seconds)
3. What framerate will you be using to play the video? (Example: 25fps)

These facts determine the length of the interval between each picture. In this case, we will be shooting 6 hours of footage and display it within 45 seconds at a framerate of 25fps. That means we need 1125 frames (25 x 45). Eventually we will be using an interval of 19.2 seconds (21600 seconds / 1125 frames).

Alright, set your intervalometer to the desired interval and push the start button. Now you can leave your camera alone during the time of the recording. This baby needs time… And you know what they say: Good things will happen to those who wait… So we wait

Processing the images

The 6 hours are over. The pictures are shot (or your camera’s battery was exhausted). Let’s put this in a movie!
I normally use Premiere to generate the movie. It allows you to import all of the images you just shot, and automatically generates a movie sequence. (For those who don’t know: Right click the library, click ‘import’, select the first image, and check the ‘numbered stills’ checkbox at the bottom of the dialog.)

Render it and share it with the world!
So now you know: Go ahead, play with it and feel free to share anything you created.

If you have any tips, tricks or suggestions of any kind: Please do share them. I’d love to learn more about this awesome technique!

Last but not least

A few examples of what I’ve created so far. (I’ll be adding more on my Vimeo account. Feel free to add me to your contacts )

During the conference I attended Joshua Davis‘ session which really inspired me. I’ve never seen Joshua Davis present, nor did I know his work. Let me be as crystal clear about this as I can be: The man is a freakin’ genius!
During his session he showed a few demo’s of bezier animated stuff. I felt like trying that myself, and this is what I came up with.

The basic concept is to create a bezier in Actionscript and animating movieclips using the bezier as its motion path.

• Basic principle (this is actually just a basic pentool (without the option of adding new points ))

The following versions use the same concept as this one, except instead of fixed anchor points, they all use random points defined in 2 planes. This makes a bit of variety possible allthough the main animation stays the same and that’s absolutely cool!

• Animation fun
• Animation fun V2

I added a few keyboard controls to give you some control of what is happening

• spacebar = show the handles
• r = clear the bitmap
• p = pause the animation
• n = randomize handles
• b = blur more

You can view the previous version here.
The latest version can be viewed here.

I’m very happy with that, but there’s one little problem. I started to notice a very ugly black border around redrawn PNG transparency (which happens when the animation is pre-renderd).

Result without redrawing bitmap (aka: real time rendering)

Result when redrawing the bitmap (aka pre-rendering)

I have no clue what is going on… I have been looking into this issue all day, to no avail… If anyone knows what is going on, feel free to enlighten me.

The PNG file is fine, it’s not corrupt or badly exported, since it works just fine in different versions of the render engine. I do however wonder if redrawing a bitmap over and over again doesn’t create some kind of noise.

If you feel like giving it a shot you can download the .as file here, or get the complete Flash project (.fla + .as + assets) here. (The code is quite messy… Just so you know )
If anyone can point me into the right direction, your help would be much appreciated (and you shall be remembered forever)!

To illustrate the difference I uploaded 2 more versions.
Check out the previous version here (longer render time, but no PNG problem).
See the latest version here (using the faster implementation, generating very ugly black borders).

Edit: You can download the sources for V9 and V10 here to see the difference of the result.