It’s basically made with Flash 10’s drawTriangles API & Yoshihiro Shindo’s betweenAS3 tween library.

It’s just a initial sketch, but seems there is plenty of possibilities around the new bitmap drawing API.

I think I have forgotton to post this experiment to JActionScripters.
Here is a playable demo & source code that I showed on the FITC2009 session. Storm simulation with 10000 particle.

Basically all physic and mouse interaction is calculated with bitmap force map. Precalculating mouse interaction with bitmap is much faster than doing mouse distance with 10000 particles every frame.

You can also see stupid 250000 particle version here.

In the Spark meeting #09, I presented an ARMessageCard for Geoff. At first, a card on the marker seems to be white, but a message will be rose by particles moves if you tilt the card. It works like a sand painting.

ARMessageCard from Yoshihiro Shindo on Vimeo.

You can try it at here (Please use this marker). Of course, source code was uploaded.

A point of this Flash is calculating gravity from the inclination of the card to move particles.

If you defined variables like:

private var _mat:Matrix3D = new Matrix3D();
private var _rot:Number3D = Number3D.ZERO;
private var _v:Number3D = new Number3D();

*Matrix3D and Number3D are provided by Papervision3D.

You can get gravity by the following code:

_mat.copy(_baseNode.transform);
_mat.invert();
_rot = Matrix3D.matrix2euler(_mat, _rot);
_v.reset(0, 1, 0);
_v.rotateY(_rot.y);
_v.rotateX(_rot.x);
_v.rotateZ(_rot.z);
var gx:Number = -_v.x * 2.0;
var gy:Number = -_v.y * 2.0;

*_baseNode is provided by FLARToolKit.

First, invert the transform matrix calculated by the FLARToolKit to get a transform matrix of gravity about the marker. Next, apply only rotations from the transform matrix to a normalized vector for gravity. Finally, get x value and y value from it. If you move particles based on these values, it will work fine

I started to port a few Max/MSP Objects such as “groove~” “waveform~” “buffer~” “dac~” to ActionScript Classes.

It’s not been completed yet but here is the first sample.

Random Groove
(you can cut up synchronized two audio files randomly)

These API is something like below.

dac = new DAC();
buffer = new Buffer(2000);  // buffer length(ms)

groove = new Groove(buffer);
groove.loop = true;

waveform = new Waveform(buffer);
addChild(waveform);
waveform.addEventListener(Event.CHANGE, waveformChangeHandler);

private function waveformChangeHandler(event:Event):void
{
    begin.text = String(int(waveform.range.x));
    end.text = String(int(waveform.range.y));

    groove.range(waveform.range);
    dac.play(groove.data);
}

In one of them, there is “100,000 particles” posted by bkzen. I think it’s pretty cool! but I need more speed. :p So I posted a quick optmized one. It brings 33% faster (21fps -> 28fps) in my Mac.

You can see what did I changed by clicking “diff” link in above page. In short, I changed an iteration method from Array to LinkedList. Because array index access and calculating and checking an index (variable i) are pretty slow.

// Slow
while (i > num) {
    p = particles[i];
    // do something
    i++;
}

But accessing an member variable is fast because it's optimized by AVM2. So it causes fast iteration.

// Fast
while ((p = p.next) != null) {
    // do something
}

Please use this optimization if you need fast iteration especially in case you have a large data.

This is a real photo taken with a Nikon DSLR, 30secs, drawn with two LED penlights (blue/white) for a new year's card in 2006.

Usually, you would take a long exposure photo, by controlling the contrast between light sources.
First, you set your camera to take time – let’s say 10 secs – to produce a composition. You seek the best aperture to give you the most ‘working time’, that means a long enough shutter speed to let you draw whatever you want within the frame, with a penlight or fire from a lighter, cars’ head/rear lights drifting on a highway, etc. While the surrounding environment slowly burns into the film, the strong light sources would be able to burn instantly, and give you a nice line of light at your control.

But, if you were to do this with a USB camera input, there are several issues to be considered.

Firstly, since you can only access the bitmapData that comes into Flash as an image. This means you don’t know whether the white pixels are strong light, or just a white background. So, let’s say you blend each frame with a slight alpha. Since you can’t properly divide the strong light and weak light, the strong light would become as black as your white background, which will not produce the proper result.
Your face will be as bright as the penlight, making a big, white, blob – a disaster.

Even more, each pixel has only 256 levels of data, so if you want to blend 256 frames (just about 8.5 secs), the data will be all black, since the levels will be shut down to zero. Even if you darken it a bit lighter, you will only have several levels to work with, leading to a posterized, contrasty failure.

So, even if it is not logically correct, we will make a long exposure ‘like’ effect this time, using the ‘lighten’ blend mode rather than the ‘add’ mode. Brighter pixels will be recorded. So, if you do this in a bright room, the results would look like this left image.

But, if you turn off the lights, you will be able to successfully draw your laser-lines.

This is done with a MacBook Pro/iSight and Flash CS3, in a dark room, and a small flashlight.

If you are satisfied with this, you are already at your finish line, but I would like to add what photographers call a ‘fill-in flash’, to give you more nice image. Please note that this is a digital version, so it will not be pixel-perfect.

A ‘fill-in flash’ with a real camera gives a dark foreground some light to brighten up the area after you record all the light drawings. Usually, this technique is used to take nice night photos of let’s say a cityscape. You would set the camera to take several seconds to burn the city lights into the film in the darkness, then flash the person in the foreground to finalize the composition.

To mimick this effect, we will ‘burn’ the video input into the bitmapData with the ‘add’ blendmode. But the problem still remains – it is still a digital effect, so you need the proper preparation to give you nice results.


My solution is quite analog. I used a ND8 filter that I use for my cameras, and attached it to my iSight camera. It depends on your USB camera’s specs, but my iSight had neat results with the ND8 filter, with 2 flashes – meaning burning two frames with additive mode digitally. ND8 filters are like sunglasses to the USB cam.

The point to this digital long exposure-like effect is, that since it is tweaked to show light-drawings mainly, the blurring of normal recordings are not correct. On the other hand, since it is NOT using the additive mode (which would burn up to 0xFF white), you can set the ’shutter’ to 8 secs or 8 mins, and it will not over-expose (this is quite handy compared to an analog camera).

JAPAN ActionScripters !!!

Love Flash. Love you all.

left : Waving a flashlight in the dark. Red is actually my blood in my hand lit up.
right : Flashing my face with a flashlight in the dark several times to simulate multiple exposures (even though it's me, it's SCARY)
The parameters in this project are set to a ND8 filter covered camera, and setting default to my environment. Play around with the setting to get similar results.

Here is the working project (new window).

Additive Composition : this checkbox will enable additive blending, so you can see that the levels are not enough, and the composition is HORRIBLE ;D

Capture Button : use this button to start recording.

Seconds : set this to how long you want to record. 5s to 30s, defalt 15s.

Flash : this is how many times you want to use the 'fill-in flash'

What do you think about this study ? If the lights are not drawing as a line, and becoming a dotted-line, draw slower, as the USB camera only records 30 frames per second, compared to a seamless recording of a camera.

I think fladdict will make us an iPhone version of this toy. Of course he will

Here are the files : long_exposure.zip (772KB)

Just an idea that came to me about 6 hours ago, and took me about two to experiment, and write this post. Hope you enjoyed it !!!

My name is Tomohiko Koyama aka Saqoosha. I think everyone knows me as a developer of FLARToolKit. I joined JActionScripters.com too, and I hope that Japanese Flashers are exposed to the world more and more. My English is not so good. If you find a mistake, please correct me.

Recently, I researched about Thresholding algorithms. Thresholding algorithms are used to binarize and preprocess the input to find some objects within the image. FLARToolKit uses a thresholding algorithm to detect the marker.

The algorithm currently using in FLARToolKit is Global Thresholding.

Its implementation is simple and faster, but no flexibility about illumination variation. I looked for a thresholding algorithm to improve this weak point. Then found Adaptive Thresholding.

Adaptive thresholding doesn’t use constant thresholding values as with Global thresholding. Thresholding value is calculated for each pixel using surrounding pixels. It’s result is amazingly adaptive to various illumination. Please watch this video.

Upper is the source video. Left is global thresholding, and right is adaptive thresholding. The marker (square at the center) is always visible in adaptive thresholding result. It’s using BlurFilter to calculate local thresholding value. Source code is here. Online demo (requires webcam) is also uploaded. Use up and down arrow keys to simulate illumination variation.

Makc3d already implemented this method into FLARToolKit, but I think it’s required more optimization to reduce calculation time.

The future version of FLARToolKit will include Adaptive thresholding filter to adapt to various illumination.