I’m available for freelance work. Let’s talk »

Truchet images

Wednesday 17 August 2022

I got interested in Truchet tiles, and did some hacking around to understand them better, and then display some images using them. The code is not clean or documented, and it’s inefficient in dumb ways, but it made some nice pictures. The code is at nedbat/truchet if you want to experiment.

A simple example of Truchet is Smith tiles. The tiles are designed to fit together seamlessly even when placed randomly:

Random orientations of black/white tiles

Christopher Carlson came up with a way to generalize the tiles so they could be placed on top of each other at different sizes. A square can be covered by four half-sized tiles with inverted colors and extra wings, and the pattern will remain seamless.

Here are his tiles:

The 15 Carlson Truchet tiles

It can be hard to see how they overlap, but this is a start. This is three different sizes of tile overlaid randomly, with the grid displayed to help see the edges:

A Carlson tiling at three different sizes

I love the randomness of these images, how shapes emerge that were not in the tiles themselves. I’ve been using them as Zoom backgrounds and desktop wallpapers. But I wondered if they could be used to create images.

The set of gray values in the Carlson set is somewhat limited, so I created a new set of tiles with more opportunities for variation:

A larger set of new multi-scale Truchet tiles

These produced even more chaos and serendipity when used randomly:

Randomly placed N6 Truchet tiles

To make images, I used a photo as source and fit tiles onto it to match the gray levels. Larger squares would be subdivided when their sub-squares’ intensities differed more than some threshold:

Young Marilyn Monroe, photo
Young Marilyn Monroe, with Truchet tiles
Me, photo
Me, with Truchet tiles

The algorithm to pick a tile will try to choose a good orientation, to match the colors within the square. Notice the tiles used for my shoulders. Though, on the flip side, both these images clearly exhibit “the forehead problem” because there’s little color variation there.

Looking around for other high-contrast images, I tried a well-known blogger’s avatar:

Coding Horror, in Truchet

The subdivision algorithm uses a threshold to decide when a square has enough variation within it to deserve subdivision. What happens if we start that threshold very large, and slide it down to very small, animating the result?

Marilyn, emerging from coarse-grained to fine-grained detail

Comments

[gravatar]

I assume you already know about Chuck Close, but in case you don’t…

https://en.wikipedia.org/wiki/Chuck_Close

[gravatar]

Nice idea to create a more varied tile set by making compound tiles!

Add a comment:

Ignore this:
Leave this empty:
Name is required. Either email or web are required. Email won't be displayed and I won't spam you. Your web site won't be indexed by search engines.
Don't put anything here:
Leave this empty:
Comment text is Markdown.