title: "タイリング" description: "fract関数を使った座標のタイリングと、floor関数によるセルIDの取得方法を学びます。" chapter: "05-transforms" order: 3 challenge: description: "市松模様（チェッカーボード）パターンを作ってください。白と黒が交互に並ぶパターンです。" hints:

"floor関数で各セルのインデックス（整数座標）を取得します。"
"セルのx座標とy座標の合計が偶数か奇数かで色を分けます。mod(ix + iy, 2.0) が 0 か 1 かで判定できます。"
"vec2 id = floor(uv * 8.0); float checker = mod(id.x + id.y, 2.0); で市松模様になります。"

タイリング

fract()によるタイリング

fract() 関数は小数部分だけを返します。これを使うと、座標空間を繰り返しパターンに変換できます：

float fract(float x) {
    return x - floor(x); // 常に 0.0 〜 1.0 の範囲
}

座標に fract を適用すると、0〜1の範囲が無限に繰り返されます：

vec2 uv = gl_FragCoord.xy / u_resolution;
vec2 tiled = fract(uv * 4.0); // 4x4のタイリング

uv * 4.0 で座標を4倍に拡大し、fract で各セル内の0〜1座標を得ます。

floor()でセルIDを取得

floor() は小数を切り捨てて整数部分を返します。これでどのセルにいるかを特定できます：

vec2 id = floor(uv * 4.0); // セルの整数座標 (0,0), (1,0), (2,0)...

このセルIDを使えば、セルごとに異なる処理ができます。

タイリングで図形を繰り返す

fract とSDFを組み合わせると、図形のタイリングが簡単にできます：

vec2 uv = gl_FragCoord.xy / u_resolution;
float tiles = 5.0;
vec2 tiled = fract(uv * tiles) - 0.5; // 各セルの中心を原点に
tiled.x *= u_resolution.x / u_resolution.y / tiles * tiles;

float d = length(tiled) - 0.2;
float shape = smoothstep(0.01, 0.0, d);

fract(uv * tiles) - 0.5 で各セルの座標範囲を -0.5〜0.5 にしています。

セルごとのバリエーション

セルIDを使って、各タイルに変化をつけられます：

vec2 id = floor(uv * tiles);

// セルIDから疑似ランダム値を生成
float random = fract(sin(dot(id, vec2(12.9898, 78.233))) * 43758.5453);

// ランダム値でサイズを変える
float radius = 0.1 + 0.15 * random;

タイリングの注意点

タイリングには1つ注意点があります。fract で座標を切り取ると、セルの境界付近で図形が途切れることがあります。図形のサイズがセルサイズの半分以下であれば問題ありませんが、大きな図形を扱う場合は隣接セルのチェックが必要になることがあります。

まとめ

fract(uv * n) で座標をn回繰り返すタイリングが作れる
floor(uv * n) でセルの整数IDを取得できる
セルIDを使ってタイルごとにバリエーションをつけられる
セル境界付近の図形の途切れに注意