Posted by: pixelero | December 21, 2008

Happy Holidays !

Wishing you Happy Holidays and a Good New Year 2009 …

Flash 10 demo with pixel bender used for rendering these crystal spheres …
some 3D-maths combined with crystallize

Posted by: pixelero | December 18, 2008

Reinventing the …

Reinventing the clock as a wheel – with Flash Player 10

Clockdemo for FP 10

Posted by: pixelero | December 12, 2008

Pixel Bender: MetaBlobs

I have now been posting these demoes for about 9 months. According to blog stats, your most popular search terms leading here are ‘Metaballs’ and ‘Pixel Bender’ – so I think it’s about time to combine those two !

To render blobs aka metaballs with Pixel Bender I came up with a slightly different algorithm – to avoid the problems with solving an implicit equation in real time rendering. First a weighted average of the distances to each blob – eight of those – is counted,  then the output is rendered as a spherical surface. You will find more information on the comments of the code.

The blobs have diffuse rendering with a specular highlight by a fast Blinn-Phong -algorithm, and abilities to adjust the position of light source, colors for the material, shadow and light. In the demo you can choose from some preset materials – looking like oil, chocolate, blood etc … – on the left on the player. You can use mouse pointer as a torch, and clicking changes the rotations.

The idea was to make a filter for removing a color cast from a picture – like in Photoshop you can by a single click convert some part to grayscale, and adjust the overall picture correspondingly – like the clouds in this picture:

Mathematically I solved this by rotating the rgb-space so that the coordinates of the old color (c in illustration) are mapped to the grayscale-axis (g in illustration)- a diagonal line from 0,0,0 to 255,255,255.  To get the actual matrix for color transformation I first need to count a normal vector n, and angle between θ :

Using new Vector3D and Matrix3D -classes, we can in fact do all this with just a few lines: here’s some essential part of code:

/* define the normal vector n = c x g  */
var normal:Vector3D = c.crossProduct(g);

/* theta, the angle between c and g, we need the value in degrees */
var theta:Number = Vector3D.angleBetween(c,g) *180.0/Math.PI;

/* create a new matrix3D, and apply such a rotation that point c transforms to the diagonal ‘greyscale’ line
from (0,0,0) to (255,255,255), r = g = b */

var mtrx:Matrix3D = new Matrix3D();
mtrx.prependRotation(-theta, normal);

/*  pass mtrx.rawData to the array in colormatrixfilter */

filter = new ColorMatrixFilter( [
mtrx.rawData[0],mtrx.rawData[1],mtrx.rawData[2], 0.0, mtrx.rawData[3], // red
mtrx.rawData[4],mtrx.rawData[5],mtrx.rawData[6], 0.0, mtrx.rawData[7], // green
mtrx.rawData[8],mtrx.rawData[9],mtrx.rawData[10], 0.0, mtrx.rawData[11], // blue
0.0, 0.0, 0.0, 1.0, 0.0 ] ); // alpha, no change

… and finally the Demo

( This could all have been done already with FP9, just that the calculations with vectors and matrices are so much simplier than with numeric variables,
matrix for rotating point(x,y,z) around (0,0,0)-(u,v,w) by angle θ,
read more )

( a small test for you: what’s the purpose of mtrx.rawData[3], [7] and [11] in above code, and what kind of values do they have ? )

Posted by: pixelero | October 30, 2008

Cellular Automata dressed for Halloween …

… demo with some ghostly looking CA:

… the algorithm is a variation of Constant-Addition Continuous CA, with some rotation added.

Posted by: pixelero | October 8, 2008

Flash 10, Part 6 of testing drawTriangles, shading objects

You’ll need Flash Player 10 for these demos to show corrently …

Doing a diffuse shading with graphics.drawTriangles(): the principle is to connect two shapes,
one with normally wrapped texture and one with shading:

To get the actual shading I’m using a bitmap-stripe with different shade values as the texture:

The u-coordinate for shading mapping is defined by the dot-product, = cosine of the between-angle, of the vertex normal and vector of light direction, from values near 0.0 in the dark parts to 1.0 on the brighter areas. Similar to Gouraud-shading, the color from the vertices is interpolated over the triangle by drawTriangles(). Using a bitmap as some kind of lookup-table also allows easy control of brightness, contrast and light color. Notice that I’ve used a very dark blue at the darkest parts to simulate ambient light and give the shape some extra depth (Africa in the image below).

and here’s the resulting image – and demo, two layers combined with blendmode ‘hardlight’ :

… source for globe-demo

… for comparing an earlier demo of a rotating globe with pixel bender

Ok, rotating cubes and spheres, seen it: let’s have some more advanced shapes, the classic Stanford Bunny with 500 vertices and mesh of 1000 triangles – in fact the smallest I could find on the net, the texture mapping may not be the best possible, the model had no uv-data, so I applied a simple sphere-mapping:

An Eagle with a mesh of 1500 triangles – hope it’s not after the bunny:

Update October 9, 2008:
Things are getting funnier, and the bunny’s getting bunnier: it’s gained some more weight, 2500 vertices with 5k triangles currently, and still keeps on rolling – this time with only the shading layer, but it does process through all the 2.5k vertices and normals and update the shading each frame :
stanford bunny 5000v


… Continuing with my ‘2.5-D’ stuff for the new Flash Player 10:
This time I have a slightly reversed approach, animating the utvData of the perspective projection. In all simplicity this demo draws just one rectangle – of two triangles, naturally -, only varying the texture-coordinates and having the texture repeating, which makes the perspective. Here an illustration of the variables used:

distantSize = 11.0 means that 11 blocks of the bitmap are drawn at the top of the image … likewise for the bottom (nearSize, 3.0) and height (depth, 6.0). Keeping these parameters approximately in a same range renders a isometric-like view (the case nearSize = distantSize), while having a greater difference (especially with nearSize<1.0) distorts the perspective more.

In the demo you can see the effect by varying the settings and choosing a different bitmap.


I could have written this using pixel bender as well, but decided to go with drawTriangles due all the simplity as you can see by having a look at the actionscript source code.

1) ‘Release 1.0’ – works best with near square bitmap
2) ‘Release 1.0’ – aliasing at the distance might look horrible – specially with the hexagon bitmap, using a bitmap scaled to a smaller size might help with this.
3) Maybe a should combine it with this

Some old-school tunnel -effects with Flash 10 Astro, based on graphics.drawTriangles – you’ll need the beta release of Flash Player 10 for these demos to show correctly:

Image tunnel:

Vortex of Neon PerlinNoise:

Vortex of smoking pixels:

(SmokingPixels in 2D and source. yes, probably nothing you haven’t already seen in all the particle-demos around the net, just that the 3D-effect adds so much to it)

As a principle it’s a cone and we’re taking a look inside of it, bended by adding a polynome to x,y-coords. As a 3D model it’s a relatively simple with no actual need for sorting the faces in z-direction, so it runs pretty fast and smoothly – I think.

Edit – September 2nd: updated with usage of PerspectiveProjection and Utils3D.projectVectors – although the maths for projection in the earlier version were as simple as x2 = x*radius/z; y2 = y*radius/z; .

Posted by: pixelero | August 28, 2008

Pixel Bender: Blur with Linear Focus

An old effect in photography I wanted to check out as a custom shader for Flash 10 Astro – beta version needed for this demo to show correctly:
blurring sample

It works with three parameters: one float3 for line equation where the picture appears sharp (coefs like in Ax+By+C=0, in the demo there’s two dragable blue blocks to modify that), two scales for the blur radius, in parallel and perpendicular direction at the distance of 100 pixels from the line: try setting either one to a very low value like <2.0 for a more dynamic effect:

The current pixel bender version has some limitations in looping, I ended up using the shader in a recursive way in combination with actionscript. One single shader counts the blurring only by four sampled points: for a better quality – see parameter ‘quality’ in– the principle is to add the same shader several times, like this.filters = [ shader1, shader2, …] . Original image and blurrings with 4, 16 and 64 samples – with 1,2 or 3 shaders: I’m glad the efficiency increases exponentally:

an example for using code:

package {
    import LinearBlurFilter;
    import flash.display.*;
    public class BlurExample extends Sprite {

        [Embed(source='someImage.jpg')] // url to any bitmap
        public var MyPhoto:Class;

        public var myPhoto:Bitmap;
        public var linearBlurFilter:LinearBlurFilter;

        public function BlurExample():void {
            var lineEquation:Array = [0.707,-0.707,-6.0];
            var uScale:Number = 10.0;
            var vScale:Number = 5.0;
            var quality:int = 3;

            linearBlurFilter = new LinearBlurFilter(	lineEquation,
            //	add listener to do something when bytecode gets loaded
            linearBlurFilter.addEventListener(Event.COMPLETE, shaderLoaded);

            myPhoto = new MyPhoto();

        private function shaderLoaded(e:Event):void {
            //	add filters
            myPhoto.filters = linearBlurFilter.filters;
            linearBlurFilter.removeEventListener(Event.COMPLETE, shaderLoaded);

For further information: Example in photography. The old large scale cameras had the possibilities to adjust the ‘plane of sharp focus’

See also Lensbabies.

Off topic: Art of Roman Verostko.

Posted by: pixelero | July 28, 2008

Various functions with modulo

Some functions using the modulo-operation (mod, %, remainder) :

basic case: y=x%100, value waves between 0 and 99:


addition of two different modulos: y=(x%100+x%79)/2
addition of three: y=(x%100+x%31+x%79)/3. I divide by n to get a result easier to compare, with f'(x)=1 when defined …
addition of four – and we’re approaching a fractal wave: y=(x%100 + x%79 + x%31 + x%17)/4


Subtracting two modulos: y=x%50 -x%30 – tops of the levels are horizontal e.g. f'(x)=0 when defined
and four y=x%50 -x%30 +x%20 -x%12, a ‘city skyline’-function


A zigzag function: y=|x%(2*m)-m| : m= wave’s height, 2*m = wavelength:
In the javascript-demo I defined a special function for that:

function zigzag(x,m) {
return Math.abs(x%(2*m)-m);

adding two zigzags, y=zigzag(x,25) +zigzag(x,15):
… and three, y=zigzag(x,25) +zigzag(x,21)+zigzag(x,15), for a ‘random’ mountain silhuette:

small javascript-demo for testing (try also (x*x)%100 or the ‘barcode’-function: (x*x*x)%150-(x*x*x)%75 )

Pixel Bendel -code as an example of this in 2D, creating a ‘random’ size tiling:

« Newer Posts - Older Posts »