Raking Generative Tiles

Not every post in this notebook will have a nice hero image - sometimes I might be just posting a thought or work in progress with code samples. To add some interesting visual in the listing even without images, I decided to add a little square tile that follows the theme of this website.

The home page of this site is a zen garden you can rake with some tools. Following that idea, each post gets its own small patch of raked sand in a tile, generated from the post’s address slug. Test it out: type a title below and watch one being built:

Same title, same tile

The tile is seeded by the post’s slug, raking-generative-tiles for this one. The slug is hashed into a number, and that number drives a small pseudo-random generator. Every “random” choice after that — the pattern, the angles, where the pebbles go — comes out of it in order.

1
function rng(seed: string) {
2
  let h = 2166136261;
3
  for (const ch of seed) h = Math.imul(h ^ ch.charCodeAt(0), 16777619);
4
  return () => { /* scramble h, return a number between 0 and 1 */ };
5
}

So a post always gets the same tile, on every build and every device, as long as the title remains the same.

Four steps

1. Sand. The open sand is raked in two directions, always 45° or 90° apart. Either in bands stripes that alternate direction, or in a checker, a grid of squares raked alternately across and down, like the Japanese ichimatsu pattern.
2. Pebbles. The tile can get one to three of them. The biggest goes either on a rule-of-thirds intersection, or right on a corner of the tile so it is partially hidden.
3. Rings. Each pebble gets rings raked around it, and the straight rakes are masked away where the rings are — just like in a real garden, where you rake around the stone after the sand.
4. Tile. Clip it to a square, and the tile is done.

Random? Not quite.

The rules for placement are thought out and decided to create compositions. I have experimented with waves, arcs, lumpy hand-drawn-looking pebbles, and a single rake picked out in different color to break monotony. Together, the ideas looked like noise. Here’s what survived:

• Keep it geometric. The irregular pebbles were meant to feel organic. At a small size they just looked like mistakes. Circles won. Initially I had the pebbles drawn in a dark color, but they are now transparent to highlight the pattern rather than the dots.
• No accent color. I experimented with a colored rake that would spread to any pebble it touched, so it would feel more connected. It read as decoration rather than as part of the garden, and the aesthetic result was not looking right. The tiles are one color now.
• At least two directions. A single direction of rakes looked like a texture, not an intentional pattern. So the tiles now allow two directions, meeting at a clear angle.
• At least three lines per group. A rake has teeth. One or two lines on their own read as a scratch. No group of lines on a direction has less than 3 lines together.
• The second pebble is always smaller, and at least 60% of the tile away from the first. Two equal pebbles compete; a big one and a small one make a composition.
• The rule of thirds, with a catch. The four thirds intersections are only about 30% of the tile apart, too close for the spacing rule. So the main pebble takes an intersection, and smaller ones slide along a line until they’re far enough away. I also allow placing a pebble at one of the corners of the square.
• Checker stays square. Checker cells raked on the diagonal turned into op-art diamonds. They’re only raked across and down.

Built in conversation

This experiment has been built with Claude Code, one iteration at a time. The generator code is about one hundred lines.