Coloring Truchet Tiles
I first heard about computer programs that use Truchet tiles to make tilings something like two or three decades ago. (I can't say for sure. I'm not very good with time.) But in all of those years, I've never heard anyone talk about coloring Truchet tiles. I mean, I've heard of people generating tilings and then coloring them in using a paint program or whatever but nothing about coloring in the tiles before generating a tiling. This is the method I discovered for coloring Truchet tiles.
Truchet tilings always begin with a tile,
, and its
complement,
.
Instead of lines, though, I want to focus on fills,
and
. These
tiles are better, but the curves might lead to optical illusions that
make it hard to see patterns, so let's abstract once more and use
and
. These
tiles should be good tools for exploring how colors relate in a
tiling.
The key is to start simple and place a single tile.
Then continue the row until there's a pattern.
|
|
|
⋯ |
Then continue the column until there's a pattern.
|
|
|
⋯ | ||
|
|
||||
|
|
||||
| ⋮ |
To make the pattern easier to see and talk about, let's indicate the
major diagonal and also stipulate that magenta means the primary color
is aligned with the major diagonal and cyan means it's not. So
and
.
Perfect! Let's use that and finish filling in our pattern from above.
|
|
|
|
|
⋯ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| ⋮ | ⋱ |
Beautiful! We have discovered that the pattern for coloring Truchet tiles is a fixed checkerboard pattern alternating between aligned and unaligned tiles in all directions.
Now we need to step back from the abstract and reintroduce the quarter
circles and 90˚ rotations. The result is similar to the colors. The
quarter circles can run either along the major diagonal or the minor
diagonal but arbitrarily as opposed to a fixed pattern which is the
part that's different from how coloring works. Meaning only four tiles
in total are needed to render any tiling in full color. The four tiles
are divided into two alignment groups with two tiles, normal and
rotated, in each alignment group:
(aligned
normal),
(aligned
rotated),
(unaligned normal), and
(unaligned rotated).
It would have been cool enough if the story ended there, but there's one more observation we can make. The checkerboard pattern reveals that any 2×2 group of tiles can be placed adjacent to any other 2×2 group of tiles. I call these 2×2 groups of tiles super tiles.
What's neat about super tiles is that there are only two possible tiles, normal and rotated, for each of the four tiles that make up one super tile. Since the checkerboard coloring is implicit in the position of a tile within the super tile we only need to count the two possible tiles in each position of the 2×2 super tile to derive a unique super tile. In other words, since 2 × 2 × 2 × 2 = 16, only 16 unique super tiles are needed to render any and all possible tilings in full color. Amazing!
It is super convenient to represent these 16 super tiles with binary numbers from 0b0000 to 0b1111 where 0 means normal and 1 means rotated. The bits from left to right align with a 2×2 super tile's top left, top right, bottom left, and bottom right, respectively. Here are all 16 super tiles in numerical order.
Once you have super tiles, all it takes to cover a plane is to loop through all of the rows and columns placing one of the 16 tiles at each step. Usually but not necessarily at random. The app drawing the tiling at the top of this page does just that.
Technically speaking, uncolored Truchet tiles can be made into super tiles, too, but it doesn't buy you as much in terms of reducing complexity. So it's kind of pointless.
With this in mind, it should be pretty straight forward to understand the code for building up super tiles and drawing them onto a canvas.