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.


  1. wow, wish I had time to play around with your sources.
    Gorgeous effect!

  2. great to have you back after a year of scilence

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: