Teleranek

I had a few minutes to play with my old genie effect, so I’ve added two little features.
First one – the bounce effect. The genie seems to go too far, and then it comes back. It can be see when you open program windows ( not folder, but programs ) in OSX.
Second one – motion blur.
So there are two more parameters in the constructor, which tells GenieFx class , how far to bounce and how strong the motion blur will be:

new GenieFx(
( new demoBmp() ).bitmapData , /* object to animate - DisplayObject or BitmapData */
150 , /* x position of genie's "tail" */
0 , /* start from hidden image */
0.3 , /* bounce. 1.0 = bounce as high as the image height, 0.0 = nobounce */
8.0 /* vertical blur to simulate motion blur */
);

Sources: http://exp.teleranek.org/proj/genie/demo2.zip
Demo ( click the grey button-like object ):

I’m willing to release some sources of my previous posts, which I forgot or just didn’t care to release ( because wasn’t thinking anybody will use it : ) )

So the first one is the fluid morpher from this post: http://blog.teleranek.org/?p=5

SOURCE

The Main.as file consists of 2 methods of adding the morphing effect, one of them is commented ( the commented lines makes the animation from the previous post about morpher )

First method uses Morpher class, second one uses TextMorpher class.

Simply by calling:
m.playString( "hey" , "you!" );
TweenLite.delayedCall( 8 , m.playString , [ "you!" , "blog" ] );
TweenLite.delayedCall( 16 , m.playString , [ "blog" , "reader :)" ] );

You get this effect:

Tweenlite is used just to make delayed calls to “playString” method. You could use the Timer class alternatively.

How does it work? It’s simple: I’m dividing the bitmap into smaller parts, and using “blob” technique ( technique old as world, as3 version described e.g. here: http://blog.oaxoa.com/2007/12/28/actionscript-3-blobs-lava-lamp-effect ), I’m moving them from positions where there is no transparent pixels in first bitmap, to positions without transparency in 2nd bitmap.

Several experiments with flash pixel bender kernels and neuroscience math.
First is the 2D grid of coupled neural oscillators ( the neuroscientific equivalent of usual coupled oscillators descripted by some differential equations. Nice example is a double pendulum on youtube ).
So every pixel behaves like an oscillator and gives its energy to neighboring pixels. I’ve decided to store the energy in alpha component of 32 pixel.
On every render action, I’m stripping this alpha component and showing only 24 bit pixels:

mainBmp.bitmapData.applyFilter( mainBmp.bitmapData , mainBmp.bitmapData.rect , pt , shader );
bufBmp.bitmapData.copyPixels( mainBmp.bitmapData , mainBmp.bitmapData.rect , pt , null , null , false );

The last argument of copyPixels function tells flash to skip the alpha component. “shader” ( last argument of mainBmp’s applyFilter ) is the pixel bender filter.
This is the .as source: sine_pixel.as
And this is the kernel source: neur.pbk
Compiled kernel: neur.pbj

CLICK to see online simulation. Pretty cpu demanding, but it’s 256×256 oscillators grid. Click and drag on the stage like you were drawing, to start oscillation ( in the beginning the grid is synchronized ).
This is how it behaves in pure actionscript( flash player 10 needed, because I’ve optimized it using the Vector class ): sine_waves.swf … it has lower resolution though, 100×100. ( source )

The big resolution version ( 512×512 ): sine-hi.swf. CPU burning shader. I didn’t optimize it too much, maybe something can be changed to speed it up even more.

Ok, so that was the oscillation. There’s one more thing – grid of Sodium-Potassium neurons from previous post. I wanted to check if it’s going to be faster with pixel bender. And indeed – it is.
This is the source . I’m simulating current and the neuron response:

mainBmp.bitmapData.applyFilter( mainBmp.bitmapData , mainBmp.bitmapData.rect , pt , shader );
vBmp.bitmapData.copyChannel( mainBmp.bitmapData , mainBmp.bitmapData.rect , pt , BitmapDataChannel.RED, BitmapDataChannel.RED );
nBmp.bitmapData.copyChannel( mainBmp.bitmapData , mainBmp.bitmapData.rect , pt , BitmapDataChannel.BLUE, BitmapDataChannel.BLUE );

On every frame, I’m applying the shader on bitmap. Red component of pixel is the neuron response, green is the input current and blue is the gating variable. This time, I’m leaving alpha component alone. Because of this approach, I must copy RED channel from shaded bitmap to output bitmap, to see the graphical illustration of neuron response. The same thing happens with BLUE channel, which I copy to another bitmap. This is the kernel source: model.pbk. And this is the compiled kernel: model.pbj

Finally, 4 online demos. Try clicking the stage to generate some input current.
256×256 grid, first bitmap illustrates neuron response, second – gating var ( click the left bitmap )
The same as previous, but 512×512 grid
512×512 neuron response grid
512×512 gating var grid

Ok, so I’ve decided to make simple flash simulations of biological neuron behaviour ( http://en.wikipedia.org/wiki/Neuron_model ).

I don’t want to bore you with neuron model theory, if you are here, you probably know what’s this. And if you don’t, you probably don’t want to know : )
I’ve made 3 experiments. All of them are based on real-life sodium – potassium Hodgkin-Huxley model.
First one is a 2d plot of current flow. The blue line is the input current, red and green ones are the neuron’s answer to the input current. Green is gating variable, red – neuron’s voltage.
It shows, how the current propagate in neurons connected into some kind of chain.

Drag the blue line to modify the input current. The sound, is the neuron’s response converted to waveform.
Here is the source: http://exp.teleranek.org/neuro_stuff/biological/neuronTest.as

The second experiment, is the 3d simulation of the same equations

Drag the stage to change camera position.
Source for this experiment:
http://exp.teleranek.org/neuro_stuff/biological/neuronTest2.as

The third experiment pictures Hodgkin-Huxley’s model bifurcations from sample vector field. It’s shown as particles propagating thourgh the vector field. Click and hold the left mouse button to shoot the particles.

Source for this experiment:
http://exp.teleranek.org/neuro_stuff/biological/phaseTest.as

Two screencasts:

The first is the primitive  volleyball game for 1 player.
http://exp.teleranek.org/screencasts/teniz2.swf

The second – speedway. It’s for 2 players, so I’ve tried to simulate 2 player race ;p
http://exp.teleranek.org/screencasts/jougel2.swf

I don’t believe anybody will be willing print the markers to play this, so I didnt upload these games…

These screencasts are exported with “jing”, so the quality is high, but the size is … uh. Maybe some day I will convert them to mp4 …

Games were made with modified flartoolkit, as3 library for marker detection.

That’s the little AS3 Class I’ve written. Nowadays there’s some strange trend in ripping off OSX GUI, so I’ve decided to make your life a little easier.
I’ve been googlin for this effect, but I haven’t seen anything event close, to what you can see on OSX.

So here comes this little class – GenieFX:

Click grey button-like object to see the animation.

This is the fragment pulled from demo’s source:

addChild( gfx = new GenieFx(
( new demoBmp() ).bitmapData , /* object to animate - DisplayObject or BitmapData */
150                          , /* x position of genie's "tail" */
0                              /* start from hidden image */
) );


You can pass a vector shape or whatever else to animate.  The “x position of genie’s tail” is randomly generated after every button click,that’s why the image comes to and from different places.
Source for this demo is available for download here:
http://exp.teleranek.org/proj/genie/demo.zip

The demo uses almost all functions of this effect, so you will figure out how to use it : ) It’s ultra-simple.

The class uses a bit buggy ( but free to use on commercial projects : P ) tweening lib called “Twease”, feel free to change it to TweenLite or whatever else.