Truchet 瓷砖

Truchet 图案的核心是：每个格子里画一段圆弧，弧线方向由哈希函数随机决定。关键代码是：

下面拆解每一步。

---

分格：floor 和 fract

画面被分成 6×6 的格子。i 是整数格子坐标，用来生成随机值。f 是格子内的局部坐标，用来画图案。

---

hash21 生成随机方向

hash21(i) 把格子编号 (x, y) 变成一个 0–1 的伪随机数。同一格子每次结果相同，相邻格子差异很大。

如果随机值 r < 0.5，就翻转 f.x（1.0 - f.x），相当于把格子内的坐标左右镜像。这让圆弧的起点和终点互换，产生两种不同的弧线走向。

---

画圆弧：到角点的距离

length(f - 0.5) 是局部坐标到格子中心的距离。

step(length(f - 0.5), 0.35) 在距离小于等于 0.35 时返回 1，大于 0.35 返回 0，画出一个以格子中心为圆心、半径 35% 的圆形遮罩。

翻转 f.x 之后，这个圆的位置相对格子角点发生了偏移——两种翻转状态在格子中画出的弧线恰好能衔接成连续的 Truchet 图案。

---

试着改一改

改动	效果
把 6.0 改为 4.0	格子变大，弧线更粗犷
把 0.35 改为 0.5	圆弧填满整格，相邻格子的弧线连接成圆
把 0.35 改为 0.15	圆弧变小，格子大部分是背景色
把 r < 0.5 改为 r < 0.2	大多数格子保持同一方向，弧线更规律

---

练习

把练习区中注释掉的 if (r < 0.5) f.x = 1.0 - f.x; 添加进代码，让每个格子的弧线方向随机翻转。

答案解析

hash21(i) 根据格子编号生成 0–1 的随机数。当 r < 0.5 时，f.x = 1.0 - f.x 把格子内坐标左右翻转。这等价于选择了另一种弧线走向。

练习初始代码有 f 和 hash21，但缺少翻转语句，导致所有格子的弧线方向相同，图案完全对称无随机性。加上 if (r < 0.5) f.x = 1.0 - f.x 后，约有一半的格子被翻转，产生 Truchet 迷宫效果。

试着把 f.x = 1.0 - f.x 改为 f.y = 1.0 - f.y，看看弧线方向有何不同。