Notes on Truchet tilings, for GA2021 XXIV GENERATIVE ART CONFERENCE

Fractals from Truchet tilings, H A Verrill


This is an all in one version of the files split up into 15 pages.
Contents of this page: Truchet tilings; hinged tilings; fractals; Combining these topics. Also varying iteration parameter across an image, and some reaction diffusion coloured paths. A mathematical and generative art journey. (More mathematical aspects in my arXiv paper.)

Truchet tilings
Hinged tilings
Fractal dragons

Truchet tiling

A Truchet tiling is a tiling made of the same square tile repeated over and over in a square grid with different orientations. See Wikipedia article. There are very many Truchet pages on the web.
Here is an example made from the tile below left. The sequence of tiles shows a sequence of explorations leading up to the fractal construction explained later.
Tile number and description: 0, as in Truchet's original investigation
change number of tiles in tiling=

Click or on the tiling to change the orientations of the tiles in the tiling. This alterates between being random or else repeating the first 2x2 block.
Click here to change the tile image in option 2 to your own file:
My goal is to understand the relationship between the different scaled Smith/Truchet quarter circle tilings.

Example of Three scales of Smith Truchet Tile

If we can multiply up to get a picture scaled up by √2, as in tiles 10-12 above, we should be able to scale down. Here is an example. In this tiling there are two tile designs which are alternated. A grey curve is added to each tile compared with tile 10 of the previous picture. This gives a scaled down Smith Truchet tiling.

Tile transformation

In the above picture, the blue curves can be transformed to the gray curves like this:

Slider to transform design:
What do we gain from this continuous transformation?

Fractal Space Filling Curves

What is a space filling curve? The Smith Truchet tiling of quarter circles is sort of space filling - it fills a lot of space. But for a mathematical space filling curve, we need a limiting process to pass from one level of iteration to another, as for example in the case of the famous Hilbert curve:

Example: Hilbert curve

Change level of iteration:

There are three types of tile, with replacement rules as follows, the replacement tiles are below the original:

Use the edge option in the above previous picture to more easily see the way the tiles are replaced with a continuous interpolation possible.
Once you have this basic transformation you can play around with it in lots of ways, e.g., as in the examples here.


What is the transformation rule for the quarter circle Smith Truchet tile?

Hinged tiling

The iterative process I use to get a mathematically space filling curve from a Truchet tiling is to use a hinged tiling.

Example Hinged tiling

There are lots of puzzles based around hinged tilings (or more precisely, to closely related hinged dissections Wikipedia page). Lots of different kind of tilings can be hinged.
My introduction to these was through origami, and work of Barreto, Palmer, Bateman (one of my own origami pages including aspects on this, including pdf page on square twist.) The following origami has a hinged tiling crease pattern.

The hinged tiling needed on this page is just a hinged tiling of squares. The following picture actually cheats to keep the rotations going in the same direction - the corners where the hinges are has to change at each step. In this example, the squares stay the same size as they turn, as thought this was a real physical model, but for the Truchet tiling I will change the size of the squares.

Hinged tiling applied to Truchet tiling

Now we can apply the hinged tiling procedure to a Truchet tiling. We can rotate either clockwise or anti clockwise, so the left and right below show the two cases for comparison.
Slider to rotate tiles:

Filling in the gaps

After rotating the tiles 45 degrees there are square gaps, which can be filled in with more truchet tiles. There is only one way to do this that results in a continuous deformation of the curves.

Wrong way!

In this example, the added tiles have been put in the wrong way! Interesting effect, but not continuous, doesn't preserve paths.

Right way!

In this example, the intermediate tiles are inserted in the right way, though because they are squashed into the diamond shaped holes, the transformation is not very smooth.
number of iterations

Here is a hinged Truchet tiling with smoothly inserted curves. Because of the smooth and continuous nature of the transformation, we can iterate at different rates across the image. In the Webgl code for the following image it is a bit of a pain to get colours to be transformed nicely to the added tiles each time the iteration step increases, so this image only iterates about two steps. Also it only rotates in one direction. In the end, I rewrote and used a different method, here.

Transformation rule

The transformation rule, which can be used repeatedly, can be described by the following pictures. The squares can rotate either clockwise or anti clockwise, and must rotate in the opposite direction from their neighbours. So there are two choices of transformation. I call squares odd or even, because that's what I use when programming, but you could call them black or white, just anything to distinguish neighbours from each other, so there is a chequer board arrangement. After the transformation, there are new squares, so a new chequer board colouring. The colouring is only to keep track of which squares are odd or even. Tiles have two possible orientations, (turn by 90 degrees or not) and two possible locations, either on odd or even squares. So there are four kinds of tiles, and we need to say how each is transformed.
Here are the two transformation rules.
Original 4 tile types Result of rule 1 Result of rule 2

Corresponding L-system

L-systems, (Wikipedia page) describe fractal like structres with words (strings of symbols) describing some fractal process and rules to transform them.
I give a picture to explain the description of this process as an L-system here. This shows that these curves are actually fractal dragon curves, already well known, but constructed from a new perspective - hinged tilings.

Binary tree of choices

Because the tiles can be rotated either clockwise or anti clockwise at each step, there is a binary tree of choices to move through in itteration of this fractal process. The pictures so far all just turn in one direction.

Interative programs where a choice can be made are here and here.

Varying number of iterations across image

By varying the number of iterations of the process over the image, we can get all kind of interesting effects, e.g.:

(produced by the program here.)


Here is an example of a fractal produced by this method, corresponding to a 11101111101101 choice of operations

Truchet tiling as image filter

The number of iterations of the process depend on the darkness of an image. It's best to use simple images with strong contrast, e.g., just black and white.

Use the mouse to move the control dots round the screen, or else use the following buttons for different effects.

Reset state of center of tile (this may not produce a noticable effect if there are many iterations)
Change base image: