Posted by: pixelero | May 27, 2011

Pixel Bender: Disks

Click on the images above to go to the demo.
This post still continues with the familiar themes from my earlier posts: overlapping circles on hexagonal pattern — the usual you know.

And that’s not all yet. There’s also another version. What happens if we add a transition to parameter ‘radius’; we slide its value, let’s say like for instance from left to right ?
Well this, surprisingly effective result with quite simple means:

View the sources here. Download sources. Pixel Bender -source code. Pixel Bender -filter.

Posted by: pixelero | May 12, 2011

Pixel Bender: Metallic

Just like the name tells you, this shader is all about getting a metallic effect on an image, that’s just so back to 90’s effect.

Click on above image to go to the demo.

Generally this effect is at its best with graphics like text elements or on the World Map used as a default. Technically the filter first creates a normal map based on brightness values, the sample sizes are 3×3, 5×5 and 7×7 – smallest works best with very detailed images, largest for text elements. Secondly a phong-like shading is applied to that.

The shader takes two bitmap inputs:
instead of having a number of different parameters for the material appearance, I’m using a small bitmap stripe as a checkup table for the shading:
so that if current point is found in a complete shadow, the stripe is sampled from left edge, if on highlight, the right edge, and otherwise somewhere horizontally along the image.
Here are the bitmaps for some materials in demo:

View the sources here. Download sources.
The demo also allows to add a special effect on the background — making it look like grainy, wavy or bumpy — on images with alpha channel.
That’s not a PB-effect, it was created in actionscript by adding noise or perlinnoise on the back.
It just looks so nicely realistic like a metal sheet really was sandblasted or hammered.

Posted by: pixelero | May 6, 2011

Pixel Bender: Complex Circle Pattern

This filter is probably the weirdest combination of complex inverse-maths and circle packing I’ve ever coded.
The rational function evaluated here is z= d/[(z-a)(z-b)(z-c)]. This kind of mapping on complex plane are conformal – that means the angles remain the same.
In the demo you can change the parameters a,b and c by dragging the blue grips on stage.
Where parameter d as a complex number is located on the unit circle |d|=1, is has the effect of rotating the output.

Click on above image to go to the demo, and have fun modifying the parameters. But hey, warning and please be careful: The results might get really artistic sometimes:

View the sources here.
Download sources.
Pixel Bender -source code.

Pixel Bender -filter.

Posted by: pixelero | May 2, 2011

Pixel Bender: Circle Pattern

This filter is some weird combination of complex inverse-maths and circle packing.

Click on above image to go to the demo. There are parameters to modify the circle shape ratios and the amount of how much of a circle’s area is filled.

View the sources here.
Download sources.
Pixel Bender -source code.
Pixel Bender -filter.

Posted by: pixelero | April 29, 2011

Pixel Bender: Floret Pentagonal Tiling

Just like in my previous blog entry Cairo Tiling, Floret Pentagonal Tiling is made out of pentagonal tiles. Unlike in many other surface filling tilings, here the polygon is not regular. It’s more like a hexagon where one edge is stretched out.

Click on above image to go to the demo.

The principle of doing that with code is to first create a regular hexagonal tiling. Get the integer coordinates for current hexagon and evaluate the ‘magic’ modulo function (x+4y)%7. All the cells in a neighborhood of seven hexagons loop through numbers 0 to 6.
Using this result we can easily drop out the zero cell in the middle by handling it in a different manner, and get to the Floret pattern. It’s just so simple: just look at the awfully messy pbk-source code to get even more mixed up that you already are.

View the sources here.
Download sources.
Pixel Bender -source code.
Pixel Bender -filter.

When it comes to code, this is slightly different from Cairo Tiling: it uses adding a ShaderFilter on array ‘filters’ of a displayObject, while this uses ShaderJob to get the effect.

Posted by: pixelero | April 28, 2011

Pixel Bender: Cairo Tiling

I realized I had plenty of interesting stuff in my archives, so my next postings will be some pixel bender-filters I’ve done – but no 3D yet. I might have posted already some screenshots of these on my Flickr-account.
Cairo Tiling is made out of pentagonal tiles. Unlike in many other surface filling tilings, here the polygons are not regular.

Click on above image to go to the demo. Set the pattern size to zero to see the source image. Settings the parameter ’tiling truncation’ to -0.13 gives you a Snub Square Tiling.

But how to do that with code? On the first sight one might thing a lot of mathematics are required to handle all the lines in different angles and everything.
But no, if you place a regular orthogonal grid upon the image, things start to clear out:

Now there is a regular pattern inside every rectangular cell. Every other one is mirrored, handling the tilted coordinates is not that hard.

View the sources here.
Download sources.
Pixel Bender -source code.
Pixel Bender -filter.
And quite interesting things start showing up, if the same image is filtered twice:

Posted by: pixelero | April 27, 2011

SplineGradient – HTML5 Experiment

This is very similar to my previous post. It’s also deals with putting some extra effect to a spline curve, and it even shares some of the source codes. I got the idea for this from some Mathematica demonstrations with catacaustics, or ‘a curve formed by light reflecting from a curved surface. The principle there is so simple, just draw tangents of some curve, yet I find the results so beautifully surprising.
I wanted to come up with something similar, but having a smoother shading, instead of consisting of seperate lines.

Click the images above to see the demo. You can drag the controls on canvas (they might seem a bit sticky I know), and try changing the parameters.

The principle here is to generate a mesh of triangles along the curve, and render a linear gradient on each triangle. The densier the mesh, the smoother the result looks. Ok, there are still some fan-like clearly visible lines – those seemed a bit too complex to remove. Changing the coordinate orientation by a triangle’s three vertices in javascript is quite simple. This is how context.setTransform(x0,y0, x1,y1, tx,ty) aligns the coordinate system: Point (tx,ty) becomes the new origin (0,0), x-axis sets in direction (x0,y0) and y in direction (x1,y1).

Some example of code using this class:

// canvas = canvas element placed in html
context = canvas.getContext('2d');
if (!context) return; 

// Define a gradient
var gradient = context.createLinearGradient(0,0, 0,1);
gradient.addColorStop(0.0, 	'rgba(255,255,255, 1)');
gradient.addColorStop(1.0, 	'rgba(255,255,255, 0)');

// Define the splineGradient-object
var splineGradient = new SplineGradient(context, gradient);

// Set the angle and offsets from center axis
splineGradient.angle = Math.random()*Math.PI/2;
splineGradient.offset1 = 0;
splineGradient.offset2 = 1;

// And start drawing, methods are similar to javascript for canvas element
splineImage.moveTo(x0, y0);
splineImage.bezierCurveTo(x1,y1, x2,y2, x3,y3);

… I’ll be back, probably next time with some flash/pixel bender stuff.

Posted by: pixelero | April 26, 2011

SplineAlignedImage – HTML5 Experiment

Hi there! O oh, long time, no blog entry: well, that happens but it doesn’t mean I haven’t done plenty of Flash and image processing stuff lately.
I also know I’ve been really lazy answering all the comments or questions you’re posted here.

Anyway, I have also done some HTML5 – graphics stuff with canvas-element mostly.
So here’s a demo with sources for SplineAlignedImage. That generates a spline, cubic or quadratic, and renders a bitmap image along it.
Or simply put: if this is the source:
Image of a link in chain
the result will be this:
Image of a curved chain

Clicking the image above opens the demo, try dragging the grips on canvas, changing the scaling and positioning and check out the results of using different bitmaps as sources.

I have done something very similar already earlier with actionscript.
The principle is simply to place a dense stripe of triangles along the curve, and draw the image with correct displacement on each triangle:

example of divisions

From the demo you’ll also find the sources.
A code example of using this class:

// check that canvas-element and its graphics context exists
elem = document.getElementById('splineImageCanvas'); 
if (!elem || !elem.getContext) return; 
context = elem.getContext('2d');
if (!context) return;	
// Define the SplineAlignedImage-object and set image source for it
var splineImage = new SplineAlignedImage(context);
splineImage.image = img; 
// And start drawing, methods are similar to javascript for canvas element
splineImage.moveTo(x0, y0);
splineImage.bezierCurveTo(x1,y1, x2,y2, x3,y3);
// if coordinates for the first control point are null, the curve will follow the tangent of previous sequence:
splineImage.bezierCurveTo(null,null, x4,y4, x5,y5);
// there's also the quadratic version of curve
splineImage.quadraticCurveTo(x6,y6, x7,y7);
splineImage.quadraticCurveTo(null,null, x8,y8);

Image of a curved rope
( tested in mac: Safari, Firefox, linux: Firefox )

Posted by: pixelero | April 26, 2011

Away3D Essentials – my review

So here is a review on wrote on the book ‘Away3D Essentials’:
Away3D Essentials Book Cover
Away3D is a 3D-engine for Flash Player. Showing interactive 3D content in Flash Player has been one major point of development in recent years.
There has been a lot of blog entries with code examples by developers and computer graphics enthusiasts about it.
Generally the author Matthew Casperson has done a great job by collecting all this information into one very comprehensive book, Away3D 3.6 Essentials.

The book starts with very detailed information about how to get started: where to download the sources and how to install Away3d on different Flash IDEs. The book goes through all the abilities Away3D offers to a programmer: coordinate spaces, creating shapes, materials and displaying the stage. It also contains sights on more advanced techniques like adding text elements to a 3D scene and how to use modifiers to create and animate more freeformed shapes.

All the 3D engines for Flash Player are for real-time animation, so more photorealistic effects like ray-tracing based reflections and shadings are not yet easily available. On the other hand Flash Player 10 with its support for 3D was one major breakthrough in this area, and I know all the developers are looking forward to see what new opportunities the next releases will bring.

The book Away3D 3.6 Essentials, as the name indicates, concentrates on Away3d engine. It is good if the reader already has basic skills of coding in actionscript. On the other hand, I do not see any reason why someone would not learn actionscript by going through, playing and studying all the example codes in this book – there are plenty of those and they are all well explained and easy to follow. In my opinion learning to code is easy but getting to know the abilities and how to get the most out of it, is what makes a programmer a good one.

The book also deals with some basic schemes of 3D-graphics, like the use of coordinate space, how cameras project that to screen coordinates, how primitive shapes are constructed of triangles, lighting the scene, using materials on objects et cetera.
These general principles are of course a very basis of understanding and creating graphics in 3D, no matter what programming environment or 3D engine is used.

Read more about it on the site of Away3D
Publisher’s site

Posted by: pixelero | July 5, 2009

BelousovZhabotinsky, with perspective

I just couldn’t resist the temptation of checking the BZ-cellular automaton of my previous post with some perspective-effect.

Demo (keyboard: esc for fullScreen, delete for a new generation)

btw … if pattern appears too dense, make sure you’ve got the latest (FP 10.0r22) version installed.

I’ve already earlier demoed this principle, but I didn’t publish the code. The whole thing is done by first applying a perspective tiling, with graphics.drawTriangles, as in one of my earlier posts – and then adding the parallax effect by counting a displacement – a pixels position is raised by its color value – with BitmapData.set/getVector: then image is scanned through a vertical column by column. Here’s some essential part from the code: found in public function extrudeBitmapData

for (var column:Rectangle= new Rectangle(bmd.width,0,1,bmd.height); (column.x-=1)>-1 ; ) {

	levels = new Vector.<int>(bmd.height, true);

	pixels = bmd.getVector(column);

	heights = (heightMap) ? heightMap.getVector(column) : pixels ;

	//	first loop marks the displacements for each pixel
	//	'version 0.0' sampled from the blur-channel
	for (i = 0; ++i != bmd.height; ) {
		levels[i- ((heights[i]&0xFF) * i >>10) ] = i; // >>10 controls the height

	//	displace the column
	for (iz = -1, i = 0; ++i != bmd.height;) {
		pixels[i] = (levels[i] > iz) ? pxl = pixels[iz = levels[i]] : pxl ;

	//	rewrite on the image
	bmd.setVector(column, pixels);


So finally here’s that messy source with too few comments !

« Newer Posts - Older Posts »