Truchet Tiles
A Truchet pattern draws an arc in each cell, with the arc's orientation decided randomly by a hash function. The key code is:
Here's the breakdown.
Tiling: floor and fract
The canvas is divided into a 6×6 grid. i is the integer cell coordinate used to generate the random value. f is the local coordinate used for drawing.
hash21 generates a random orientation
hash21(i) maps the integer cell ID (x, y) to a pseudo-random value between 0 and 1. The same cell always returns the same value, while neighboring cells return very different ones.
If the random value r < 0.5, the code flips f.x by computing 1.0 - f.x, which mirrors the cell's local coordinate horizontally. This swaps the arc's endpoints, producing one of two possible arc directions.
Drawing the arc: distance to cell center
length(f - 0.5) is the distance from the local coordinate to the cell center.
step(length(f - 0.5), 0.35) returns 1 when the distance is at most 0.35, and 0 beyond that — a circle centered in the cell with radius 35%.
After flipping f.x, this circle shifts relative to the cell's corners. The two flip states produce arcs that connect seamlessly with adjacent cells to form the Truchet maze pattern.
Try changing it
| Change | Effect |
|---|---|
Set 6.0 to 4.0 | Larger cells, bolder arcs |
Change 0.35 to 0.5 | Arc fills the cell; adjacent arcs connect into full circles |
Change 0.35 to 0.15 | Smaller arcs, more background visible |
Change r < 0.5 to r < 0.2 | Most cells share the same direction, more regular pattern |
Exercise
Add the line if (r < 0.5) f.x = 1.0 - f.x; — commented out in the exercise — to randomly flip the arc direction in each cell.
Answer Breakdown
hash21(i) generates a 0–1 random number from the cell ID. When r < 0.5, f.x = 1.0 - f.x mirrors the local coordinate horizontally, choosing the alternate arc direction.
The exercise starting code has f and hash21 in place, but is missing the flip line. Without it, every cell has the same arc direction, making the pattern completely symmetric. Adding if (r < 0.5) f.x = 1.0 - f.x flips roughly half the cells, producing the Truchet maze effect.
Try changing f.x = 1.0 - f.x to f.y = 1.0 - f.y and see how the arc orientations differ.