I’ve been playing with Truchet tiles in my latest Turtletoy project. Let me explain what Truchet tiles are and why they’re cool for generative art.
What are Truchet Tiles?
Think of a grid made of squares. Now, instead of leaving these squares empty, we fill each one with a simple pattern. These patterns are our “tiles”. The key is that these tiles connect with each other in interesting ways when placed side by side.
In my project, each tile has connection points along its edges. I then draw lines or ribbons (multiple parallel lines) between these points. The simplest Truchet tile set might have:
- A tile with two lines connecting the midpoints of opposite edges
- A tile with two lines connecting the midpoints of adjacent edges
When you place these tiles randomly on a grid and rotate them, you get complex patterns from simple rules.
Creating Tile Sets
The magic of Truchet tiles is in how they connect at their edges. To create your own tile set, you need to think about:
- Tile shape (e.g., square, triangle, hexagon)
- Number and position of connection points on each edge
- How to connect these points (single line, curve, ribbon)
In my Turtletoy experiment, I’ve tried several combinations:
- Squares with one or two connection points per edge
- Squares in a brick pattern with two points per edge
- Triangles with two points per edge
- Hexagons with one point per edge
Instead of straight lines, I use Bézier curves to connect the points. This gives the patterns a more organic feel.
Turtletoy and Vector Graphics
Turtletoy is an online tool for making generative art with simple JavaScript code. It’s great for this kind of experiment because it creates clean vector graphics. These are perfect for plotting or high-res printing.
Try It Yourself
Want to see the results or make your own Truchet tile patterns? Check out my other experiment on Turtletoy. Interested in the details of Truchet tiles? Or would you like to see more beautifully created patterns? Check them out here:
- Truchet tiles on Wikipedia.
- Truchet Tiling explained by the Art of Code.
- Almost all shaders made by Shane.
Similar posts
If you like this post, you may also like one of my other posts:
- Contemporary Relief
- 3D Line Art Engine (port)
- Turtletoy
- Dittytoy
- Five years of Turtletoy: a minimalistic, generative art platform