decker labs

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

Recently I did some playing around with video and thresholds, mostly just for fun. I first experimented with just changing the threshold of the video, essentially converting it to black and white. Then I tried comparing the current frame threshold and the previous frame threshold to get the difference. The result looks like an outline/edge effect. It’s an interesting way to visualize movement. Then, just for kicks, I decided to display the previous comparison and the current one, colorizing the current difference as red and the previous as cyan. The result is a very pseudo-3D outline effect. This fake 3D technique can also be applied to to straight up video, showing the previous frame as cyan and the current as red and screening the two. Since this all based on movement and the idea that objects closer to the camera appear to move greater distances due to their perspective, it’s very easy for it to display incorrectly.

Check out the first demo. You’ll need a webcam. Click on the video to change the mode, and the two scroll bars control the threshold level and amount of blur applied to the video before any image processing.

I then noticed that while changing the threshold, it almost seemed like it was displaying different depth passes on the video. Of course, this has nothing to do with depth, but rather brightness. Still, I wanted to see what it would look like if I broke out multiple thresholds of the same frame and layered them in 3D. The result, although unpractical, still looks pretty cool.

Check out the second demo. There’s different options on the left and two scroll bars at the bottom that control layer transparency and amount of blur applied to the video before any image processing.

So over the last week or so, I restructured my 3D engine. Nothing that would be visibly noticeable, but I feel better about where it is at right now. What I like about it, though, is that it is still not what would be probably considered “the right way” to do it. The reason I am happy about this is that it makes it my own, and I understand exactly why and how it works. Once I have a really solid understanding, then I can move towards doing it the “correct way,” but for now, my little hacked together experiment makes me happy.

One of the changes I did make is to the shaders. I added a PseudoGouraudShader, which uses gradients to draw each polygon face to try and smooth out the hard lines created by using a flat shader. I doubt this method would ever produce 100% accurate results that are identical to a gouraud shader, but it makes for interesting results. The method I am using is pretty slow, as it needs to draw each face four times, three of them being gradient fills. Each vertex’s normal is calculated from the sum of all the faces it is a part of, and that brightness value is used to draw a radial gradient on that face, the center point being the vertex. (Two examples: RGB example and dot example, the circle areas are ‘painted’ on via gradient fill) This can produce some fun effects too when played with.

I had an example of the PseudoGouraudShader last week, but it was off, it looked like alternating faces had different brightness values. Just playing around last night I found the issue, it lies with how I was calculating my normal.  When getting the cross product of the vectors, it is better to normalize the result instead of normalizing the vector before. The example below shows the two results and code snippets:

Still not perfect, but I’m not sure how close I can get using this method. I think there might still be some slight errors in the core math, which could be producing the results that look similar to the image on the left (although less intense). You can check out the live demo here.

On a last note, calculating normals and centroid over and over again for rendering can get pretty intense. In the case like this, the same normal gets calculated multiple times a render even though it hasn’t changed (because each vertex needs to get the normal of each face it is connect to). In order to boost speed, I created a caching system. When the normal is calculated, it saves it to a “stale normal” and updates an object (which I called the cached face) that tracks the position of each vertex in the face. Then, the next time the normal is called, if that cached face is not different then the real one, it just uses the stale normal instead of re-calculating.

Another experiment recently did was compress three grayscale images into one file. The reason for this would be of course file size and load time. A real-case scenario where you might need to load 3 grayscale images of the same size is loading textures for a 3D app. For instance, your model might be color dynamically, but you need to load a diffuse map, a specular map, and a bump map – all of these would be the same dimension and would be black  and white.

So all you need to do is take your three grayscale images into photoshop and layer them on top of one another. Then use the gradient map image adjustment to have each image range from red, green, or blue to black. Have the base layer be flat black, and set each of the three layers to screen. Then, once that image is loaded into Flash, you can extract each color channel and set it back to black and white with the ColorMatrixFilter. You just need to set the matrix so that each of the R,G,B rows are [0,0,0,0,255] and the last row (the alpha) is [1,0,0,0,0] for red, [0,1,0,0,0] for green, or [0,0,1,0,0] for blue. The just smoosh that transparent white image into a black bitmap, and you’re set.

Again, not entirely useful for every day cases, and it does cut down on how easy and dynamic the loaded content is, but if you’re hurting due to file size and load time, this could be something to keep in mind. In case you’re wondering – the layered color image I used in my example is 188 KB, and the blue channel saved as its own grayscale file is 132 KB.

RGB layered image and the 3 channels as their own grayscale image

Playing around in Flash making a ‘image encoder’ that converts text into image, or String into BitmapData. Basically, I wanted to convert each character into binary, and then represent it as an image. So the first thing I did was have each character assigned a number, and then convert that into binary. Since I wanted to control what characters could be encoded, I created an array of the characters I wanted (instead of using the charCode) and used the index of the character as it’s id. Each character is converted into a 7-digit binary value (this value was based off of the array length) and then each digit is written to bitmap data, 0 as black and 1 as white.

I tried the same thing, but except with a color image. Instead of having 7 pixels representing a character, I used one pixel per character, converting each charCode into a hex value. The result is that the image is all blue, as the common used character codes are all under 255. Not a very useful exercise, but it was still sort of fun, as was converting a number into binary “manually.” (It involves a lot of use of modulo. )

The image bellow is the first chapter of Lewis Carroll’s Alice in Wonderland encoded into an image. Note: I chose Alice in Wonderland because it is copyright free, not because of the new trailer for Tim Burton movie. There’s a larger example here with the color image as well.

Quick update on my current experiment building a 3D engine in Flash – I’ve added light and shaders. Shaders are special materials that are effected by the direction each face is pointing (called the normal) and another vector, in this case, a light direction. During the render process, each face calculates its brightness thus giving the illusion that light is reflection off of the mesh.

Upon researching, I found on a few occasions that the way to calculate lighting is to simply add the normalized normal and normalized light vector. This, however, seems to be slightly incorrect applicable to this situation. First, the result is another Point3D, where instead I am looking for a brightness value. Upon consulting coworker Mathieu Badimon, he suggested using the dot product of the normal and light vector. This returns a single number value, and when used to calculate brightness seems to work perfectly.

Next step? Finally tackling bitmap distortion in 3D, allowing for bitmap materials. (Which opens the doors to different types of shades as well, such as bump maps and dot3 normal mapping.) Once I’ve tackled that, I plan to completely restructure the engine, as I have a better idea now of how it can work while still sticking to my original plan of excluding a view3D. In the process of restructuring, I plan to write up the core math equations used in the most simplified way that I can, as finding some of these equations in a non-language specific explanation or simplified manor can be difficult.

Check out the new demo here. Click and drag the white dot to move the light source.

A few weeks ago I had to create a simple X-axis based parallax ‘engine’ for a project. Just basic horizontal movement, which is scaled based on an abstract z value. Well, somehow that turned into a full 3D engine. So I am continuing to build on what I had started in order to create my own Flash 3D engine, not because I think I can build a better Papervision, Away3D, or Five3D, (because I’m sure I can’t) but rather in order to learn. Since I end up using 3D engines fairly often now, I figure it’s good experience for me to build my own and see how it can work from the ground up.

So the first thing I learned, which really surprised me, is that building a 3D engine is easy. I’ll be the first to admit that math isn’t necessarily my strong suite, so believe me when I say it’s not too difficult. There are only a few tricky equations you need, and there’s plenty of information on the web since almost everyone it seems has created a 3D engine at one point or another. The tricky part, however, is getting the engine optimized and to run smoothly. That’s really what my challenge is.

I was able to get basic translation (which runs horrendously slow right now) as well as rotation implemented. I expanded on that to create a mesh, which can accept data imported by an .obj file (very easy to write a parser for) and create geometry. The mesh, like most in other 3D engines, consists of an array of vertex points and faces, which themselves are a collection of references to those vertex points. The mesh overall or individual faces can accept a material, as well as an optional back material for the reverse of the normal for when single sided is false. I calculate the z-depth for sorting based on the centroid of the polygon, which is probably not the fastest or most accurate way, but so far it has seems to work pretty well. Currently I have not yet tackled bitmaps or lighting, but that’s an interesting challenge for down the road.

On the note of optimization, I’ve noticed that Papervision, Away3D, and Five3D all use a scene3D and/or view3D. That said, all of your 3D ends up in more or less abstract container that handles the rendering. I suspect the reasoning for this is so that a render function only has to be called once, and all the appropriate transforms can happen here. In my experiment, I have decided against this, and probably at the stake of performance. The reason I don’t want to include a viewport or scene is so that the user can have more direct access to how the ‘Sprite3D’ is placed on the stage and it’s relation to other elements. I would also like to see how much can be achieved without having to use a container for the rendering process. Regardless, it’s been a fun learning experience so far.

Some demos below. The first example shows some of the basics. The second shows an experimental gradientFill material (creates a voronoi effect) and the third show an experimental shader that colors the faces in relation to their space in 3D.