decker labs

Just a quick update here, we recently relaunched the new Doritos.com, my latest project. I was lead developer on this project with much help from Lucas Motta and Michael Roushey on the flash forefront, and as always Francis Turmel as our technical Sensei. The project was done with the world renowned ad agency Goodby, Silverstein & Partners. We put a lot of hours into this site, but I think it was worth it. My job as lead developer was doing the overall structure and framework of the site. I also developed some helpful debugging utils along the way, which I hope to post on here rather soon.

On a side note, I also brewed a special beer for this project. It was a Doritos style ale, and you can read all about it on my other blog, beer.eric-decker.com. I’ll be brewing a special beer per project from now on.

And on another side note, today was my girlfriend’s birthday. She’s a painter and has a blog which she updates regularly with her work and progress, and you should defiantly check it out at eringregory.com.

Recently I was working on preloader for a project and needed to use a tweening engine. (We have an internally developed one at Firstborn that is based off of the syntax of Tweener). I wanted to see if I could write my own that would be super small. I wasn’t as concerned with performance – meaning being able to tween thousands of objects at once, a highly unlikely scenario anyways. I wanted to keep compiled file size down, as well as number of classes. So I created a NanoTween class that is a super simple tweening utility. When compiled on it’s own, it only consist of about 1.3 Kb.

NanoTween is only one class. Each tween is created as it’s own more or less independent object. They are however synchronized to a central enter frame event dispatcher, which is kept as a static instance. Instead of providing callback functions and parameters for events such as onComplete and onUpdate (as is the case with some tween engines) NanoTween instead dispatches native Event.COMPLETE and Event.ENTER_FRAME. Additionally, the Robert Penner easing functions are externalized into separate classes to keep filesize down. Special properties such as brightness are not included, but can easily be achieved though an external proxy object.

The syntax looks like this:
var tween:NanoTween = new NanoTween(myMovieClip, 1.5, {x:100, y:200}, Quad.easeOut);
tween.addEventListener(Event.COMPLETE, hndlTweenComplete);
tween.start(1);

The previous example will tween myMovieClip to the position (100,200) over the period of 1.5 seconds using the ease out Quad function, and is delayed by 1 second. Upon completion of the tween the hndlTweenComplete will be called. Likewise, the syntax can also be ‘condensed’ for simple tweens:
new NanoTween(myMovieClip, 1, {alpha:0}).start();

Anyhow, I thought it might be useful to other people, and I wanted to try out Google Code so you can grab it from the project page at: https://code.google.com/p/nanotween/. Once again, the purpose of this is not to replace mammoth tween engines such as gTween, TweenMax, or Tweener. Rather, it is intended for special cases where size is the main importance such as preloaders and banner ads.

Read more

I probably should have mentioned this way earlier, but I’ll be speaking along with Mathieu Badimon at OFFF Paris on behalf of Firstborn. Our presentation will be on Friday, June 25th at 12:30. I have to say, this is quite an honor to speak at this conference. If you’re interested, there should be more information on the OFFF Paris 2010 website.

So I realize this is pretty last minute, but I’ll be speaking at FITC Toronto this Monday with Mathieu Badimon. We’ll be speaking on Firstborn’s behalf. Our presentation is titled “Tools & Prototypes: Crafting a Unique Digital Experience.” It’s basically focusing on how for each project we make, we usually need to make demos to test techniques or make tools to aid in development. It’s more of a creative presentation than a technical one, as we really won’t be talking about code directly. So if you’re up at FITC this weekend, we’ll be presenting Monday at 12:10.

http://www.fitc.ca/events/presentations/presentation.cfm?event=102&presentation_id=1227

Read more

I made some updates to my time displacement experiments. I lumped them all into one nice little app, as well as give some options to toggle the effect. I also added the option to choose video source, so it doesn’t have to be with a webcam anymore. I added the option to tint what area is being effected, as well as experimented with frame blending to try to lessen hard edges. Like the previous post, I’m still using Pixel Bender to apply the displacement.

experiments.eric-decker.com/time_displacement

Read more

I decided to try using Pixel Bender to do the time displacement in the recent experiments I’ve been doing, as I was hoping it would perform better. It actually seems to, but there still is a significant lag. However, I’m pretty sure this is because of having to make a huge sprite sheet first.

I basically make a huge sprite sheet of all the frames I have saved. Since Flash 10 lets you have bigger bitmaps (16,777,215 pixels total, max dimension at 8,191 src) I can create a large image that tiles all the frames I currently have saved. I can have a max of 12 frames across (at 640) and 4 frames down (at 480). So after I create/update this giant bitmap, I send it to a pixel bender filter that is currently applied to a gray scale image. The Pixel Bender filter then looks at each pixel, evaluates the brightness and interpolates it to what frame it needs to update from, then replaces the current pixel with the appropriate one from the selected frame.

These experiments are still a little rough, but I’ll post ‘em anyways. No videos yet, I need to find some time to do screen recordings. The ticker is obviously by Mr. Doob. You’ll need a webcam for all of these, sorry.

• brightness: Displacement based off of brightness of current frame.
• movement: Displacement based off of movement (difference between frames)
• painting: Displacement based off area pained by user, as in previous post (inspired by Smudge City).
• noise: Displacement based off of perlin noise.
• filmstrip: Displacement based off of titled blocks.

In any of these experiments, you can right-click to show the source that is controlling the displacement.

I started playing around with doing some experiments with video and time delay. When showing the previously mentioned JPEG video experiment to my coworker Roushey, he mentioned how just the effect of the time delay was interesting. I was thinking about neat things to do with, and the first idea I had was to offset each frame as one row or column of pixels. So in a 640 x 480 video, the left-most column of pixels would be from the current frame, and the last rightmost column would be from 639 frames ago. The experiment is live here, and there’s a video of it on YouTube.

I had remember seeing a video (I think it was at FITC ‘07) of some really cool video Processing experiments by James Seo (see Asynchrony Smudge City). He had made an experiment where you could paint a time remap on video. This experiment has always stuck with me, as I always thought it was really well done. So after doing the previous experiment, I thought I would like to try what he had done too, except I choose to do it in Flash (which, I imagine, would make it perform worse than Processing).

It ended up being a fun little project. First, I just paint into a hidden canvas and capture that bitmap data. Then, depending on the number of frames recorded, I break out multiple version of the painting each with a different threshold. I then use this image as an alpha mask via the Layer blend mode to mask out the frame. Lastly, I draw each one to the resulting bitmap, which is displayed. Additionally, since the threshold method is 0 and 1 there are hard edges around each threshold, so I also apply a blur filter (16 x 16, quality 1) to help them blend a little more. This ends up being very taxing, and causes for a lot of slow down. In the demo, you can right-click and toggle this on and off to see the difference for yourself. I also did a version with PixelBender which I need to tweak a little bit, but the performance doesn’t seem to be that great (although I might be able to optimize it still).

Play with it here: Webcam Time Painting. There are also some video recordings below.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

A few days ago I was thinking if there was a way to reproduce the effect of JPEG compression real time in flash. I figured the best way would be to literally encode the image with the native AS3 JPEGEncoder class. The problem there was that the returned ByteArray could not be interpreted as an image anymore. However, the Loader class does allow for loading a ByteArray and converting it to a Bitmap. And luckily, the loadBytes method let us load the ByteArray right from Flash (as opposed to having to save out a file and load it externally).

So, applied to a webcam video on an interval, a bitmap data snapshot is taken of the current video frame. Then it is encoded as a JPEG and returned as a ByteArray. The ByteArray is then loaded back into Flash though the loader, which takes a one frame delay, which I imagine is because the loader object probably needs to initialize. Then, the bitmap is extracted from the loader the same way any image is, and the bitmapdata is copied to a display bitmap on the stage, and the cycle loops again.

You’ll notice a pretty significant delay on the demo. The delay comes from the encoding of the image, not the loading. You can play with the example here: JPEG Video Experiment. No webcam? There’s a prerecorded video below.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Every once and a while, I find that I need to just take a quick snapshot with my webcam at work. Since I’m on a PC, so I don’t have Apple’s pre-installed Photobooth app, or any other simple program (that I’m at least aware of). I also didn’t want to install any bulky 3rd party software that might come with the webcam that I’m using, since all I need in order for it to work is the driver, which more or less Windows installed all by itself. Photoshop has an option to capture from webcam, but the util is pretty limited as it only lets me capture a very small thumbnail size image.

So I decided to make a really simple webcam capture utility using Flash. Even if there was some really simple app out there, as I am sure there is, the developer urge inside me just wanted to create one anyways. I figure this way is pretty cool, since all you need is the webcam driver (so that the webcam actually works) and Flash Player 10 installed (which is current at 94% penetration). It’s just a simple little tool, you can re-size the image and save it as a jpeg. That’s really all the functionality that I needed from it.

Anyways, you can check it out here:
experiments.eric-decker.com/webcam_snapshot

I’ve also used it to take some macro snapshot, as apparently my webcam can focus insanely close on things, and I’ve uploaded them to my flickr account:
flickr.com/photos/ericdecker/sets/72157623403965642

Damn, it’s been a long time since I’ve had a site a launch. But I’m happy to announce my latest project at Firstborn has gone live: SoBe.com.  I was the lead flash developer for this project. The current SoBe campaign also featured a facebook app with contest and a mobile version of the site as well (which were not developed by me, but Phil and Miller respectively).

There are two sides to the site. The product ‘flavors’ section features videos of real people stopped and interviewed on street about what they think of SoBe lifewater (which we, firstborn, filmed). We used streaming video from FMS provided by Akamai in order to provide responsive seekable video. This was actually a challenge, as streamed video has some slight programmatic behavior differences than progressive download. For instance, streamed video will not dispatch any Net Events for when it has reached the end of the stream. Another issue I ran into was that due to security restrictions, the  BitmapData.draw function is prohibited unless specifically enabled on the FMS side. The other side of the site, ‘world’, was pretty straight forward, except that since we will be doing updates for the rest of the year the site needed to be extremely dynamic. This section of the site also features actress Ashley Greene in the nude, painted in two skinsuits to promote SoBe lifewater’s two new flavors.