How to Create Infinite Patterns with Truchet Tiles in JavaScript // GenLab

> AESTHETICS_LAB // TRUCHET_TUTORIAL_INIT

Tutorial: Building emergent geometric systems using HTML5 Canvas.

The Ontology of the Truchet Tile

Some of the most complex generative patterns come from the simplest rules. That was true in 1704 and it is still true now.

In 1704, Sébastien Truchet, a Dominican friar and mathematician, documented a typographic system based on a single square tile divided by a diagonal line. The tile can be oriented in one of two ways. When placed in a grid, the random distribution of these two states generates continuous, non-repeating labyrinthine structures.

In the digital era, Truchet tiles form the backbone of procedural generation. By replacing the diagonal line with arcs, gradients, or 3D meshes, developers construct infinite topologies. This tutorial dissects the implementation of Truchet algorithms using JavaScript and the HTML5 Canvas API.

The Grid Logic

The Grid Architecture

To render a Truchet pattern, we must establish a two-dimensional coordinate matrix. The canvas is divided into a grid where each cell evaluates a pseudo-random boolean statement to determine its rendering state.

grid_setup.js

const canvas = document.getElementById('art-canvas');
const ctx = canvas.getContext('2d');

// Define cell dimensions
const step = 40; 

function drawGrid() {
 for (let x = 0; x < canvas.width; x += step) {
    for (let y = 0; y < canvas.height; y += step) {
      
      // The binary decision: 50% probability
 const isForwardSlash = Math.random() > 0.5;
 
 renderTile(x, y, step, isForwardSlash);
 }
 }
}

Rendering Logic: Diagonals and Arcs

The renderTile function executes the geometric drawing. The classic implementation uses diagonal lines. A more organic aesthetic is achieved by drawing quarter-arcs from the corners of the cell.

State A ( / )

Line from Bottom-Left to Top-Right. In arc mode: arcs originate from Top-Left and Bottom-Right corners.

State B ( \ )

Line from Top-Left to Bottom-Right. In arc mode: arcs originate from Top-Right and Bottom-Left corners.

render_arc.js

function renderTile(x, y, size, isForward) {
 ctx.beginPath();
 if (isForward) {
 // Top-Left Arc
 ctx.arc(x, y, size/2, 0, Math.PI/2);
 ctx.stroke();
 ctx.beginPath();
 // Bottom-Right Arc
 ctx.arc(x + size, y + size, size/2, Math.PI, Math.PI*1.5);
 ctx.stroke();
 } else {
 // Top-Right Arc
 ctx.arc(x + size, y, size/2, Math.PI/2, Math.PI);
 ctx.stroke();
 ctx.beginPath();
 // Bottom-Left Arc
 ctx.arc(x, y + size, size/2, Math.PI*1.5, Math.PI*2);
 ctx.stroke();
 }
}

[ TRUCHET_ALGORITHM_SIMULATOR ]

Modify the rendering state and grid density to observe algorithmic emergence.

Render Viewport

Render Mode

Grid Density (n)

Pan Velocity

Optimization

Scaling to Infinity

Creating a truly infinite canvas requires detaching the randomness from the frame loop. If we invoke Math.random() on every frame while translating the camera, the tiles will flicker chaotically.

To achieve a continuous, scrollable topography (as seen in the Hero header of this page), the boolean state of the tile must be mathematically bound to its coordinate position. We use a pseudo-random hashing function. Given an (x, y) grid coordinate, the function consistently returns the exact same float between 0 and 1.

This ensures that as the grid pans and new cells enter the viewport, they are rendered identically to how they would have appeared hours ago, achieving an illusion of boundless, persistent spatial continuity without storing massive arrays in memory.

Conclusion: The Logic of Emergence

The Truchet tile remains a fundamental exercise in creative coding because it perfectly shows the principle of emergent complexity. A single binary decision (forward or backward), executed in a loop, yields intricate, labyrinthine topologies that trick the human eye into perceiving complex design.

By mastering these foundational geometric primitives within the HTML5 Canvas, developers build the spatial intuition required to advance into more complex procedural systems like WebGL shaders, Perlin noise fields, and generative 3D meshes.

>> Bibliographic_References.log

[01] Truchet, S. (1704). Mémoire sur les combinaisons. Histoire de l'Académie Royale des Sciences.
[02] Smith, C. S. (1987). The Tiling Patterns of Sebastien Truchet and the Topology of Structural Hierarchy. Leonardo.
[03] Shiffman, D. (2012). The Nature of Code. (Foundational procedural patterns in JS).