Pixel Bender -filter for tiling with regular hexagons, and as a tutorial a couple of words to explain how this hexagonalization was done:

// petri(dot)leskinen[at]aalto(dot)fi

// Espoo, Finland, 25 Feb, 2008 – June 2008

//

<languageVersion: 1.0;>

kernel HexCells

< namespace : “Hex cells – not just pixels”;

vendor : “Petri Leskinen”;

version : 1;

description : “Hexagonal Tiling”;

>

{

<

minValue: float2(-200,-200);

maxValue: float2(800,500);

defaultValue: float2(400,250);

description: “base point”;

>;// some constants needed for hexagon maths

const float sqrt3 = 1.7320508076;

const float halfSqrt3 = 0.866025404;input image4 img;

output pixel4pxl;void evaluatePixel()

{

// Tiling by counting a distance to two regular grids,

// and choosing the sample point of the closer one

// Scales of this transformation are ‘size’ in x-direction

// and sqrt(3)*size in y-direction

float2 grid = float2(size,sqrt3*size);

// First grid ( like red dots in the above image )

// to get regular ‘pixelation’ we first divide by grid size,

// apply ‘floor’ and then multiply back

float2 po1 = floor((outCoord()-base)/grid+0.5);

po1 = po1*grid +base -outCoord();

// squared distance to a center point of that

// (we only compare the distances, so no reason applying ‘heavy’ sqrt-operation )

float dst1 = po1.x*po1.x + po1.y*po1.y;

// Same thing with the Second grid (blue dots):

// base point here is in the middle of first grid

float2 base2 = base+size*float2(0.5,halfSqrt3);

float2 po2 = floor((outCoord()-base2)/grid+0.5);

po2 = po2*grid +base2 -outCoord();

// second distance

float dst2 = po2.x*po2.x + po2.y*po2.y;

// pick the closer point for sampling :

po1= (dst1<dst2) ? po1 : po2;

pxl= sampleNearest(img, po1+outCoord());

}

}

———–

———–

DEMO (for Flash Player 10 beta) featuring also FileReference.load() and .save() – up’n’download your own picture to player ! ps. If you try save, do not overwrite an older file, it has a know bug. … and here’s an hexsample of same image saved and loaded a couple of times

———–

I used Kevin Goldsmith’s PB HTML formatter for code hilighting – although pasting to this site didn’t support all the tabs …

———–

When it comes to the algorithm for hexagonal tiling as explained above, there might be some ‘simplier’ ways of achieving it – as maths it’s ancient stuff. Anyway, when I first tried googling for more info and perhaps some code snippets, somehow I didn’t came up with any generally useful examples, in case of pixel manipulation algorithm. Nevertheless I did find a whole lot of inspirating stuff such as Spidrons or more on uniform tilings. So where next ?

———–

‘Pingback’ : Brooks Andrus has a pb-demo showing plenty of pb-filters collected around the net, including HexCells.

once again a nice one, petri.

By:

Frank Reitbergeron June 13, 2008at 6:49 am

i am wondering how can i apply the script in the pixel bender. can u help me with it.pls.

By:

zackon August 6, 2009at 9:08 am

@zack: you can either copy-paste the code from my post – or just download the pbk: http://www.petrileskinen.fi/Actionscript/HexCells/HexCells.pbk

By:

pixeleroon August 6, 2009at 5:06 pm

thanx a lot man…

By:

zackon August 7, 2009at 4:19 am

[…] seconds. In this example we transition “to” each state using a modified version of the Hexagonal Tiling shader written by Petri […]

By:

Just Suppose » Getting Fancy with Flex 4on January 6, 2010at 9:18 pm

[…] https://pixelero.wordpress.com/ […]

By:

Tutorial Pixel bender + Flash | Fellyph Cintraon March 5, 2010at 6:06 am

[…] you’d like to understand tiling further, pixelero did a good article about it. there’s also this wikipedia […]

By:

spidron « HIDIHO!on November 2, 2010at 1:09 am

Hi! Nice filter too.

Did you try to make antialiasing on edges?

By:

Bellon January 24, 2011at 2:24 am

Thanks for your comments everyone.

@Bell, no, I haven’t tried that … but I did try to add a solid border between the cells.

I think supersampling would be one solution for antialiasing … count the values of several points inside a pixel and average those.

By:

pixeleroon January 24, 2011at 7:28 am

What about this:

add new parameter:

parameter float feather

;

and calculate result:

float feather2 = feather * feather * size / 10.0;

float m = smoothStep(-feather2, feather2, dst1 – dst2);

pixel4 px1 = sampleNearest(img, po1 + outCoord());

pixel4 px2 = sampleNearest(img, po2 + outCoord());

pxl = mix(px1, px2, m);

By:

Bellon January 26, 2011at 6:31 pm

[…] 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 […]

By:

Pixel Bender: Floret Pentagonal Tiling « Pixeleroon April 29, 2011at 6:23 am