title: "fract関数" description: "fract関数を使った小数部分の抽出と繰り返しパターンの生成方法を学びます。周期的なパターンの基礎を理解します。" chapter: "03-shaping" order: 3 challenge: description: "fract を使って画面を 5x5 のグリッドに分割し、各セル内にグラデーションの円を描いてください。" hints:

• "vec2 grid = fract(uv * 5.0) で各セルのローカル座標が得られます。"
• "各セルの中心は vec2(0.5) です。セル内の距離は length(grid - 0.5) で求められます。"
• "float circle = 1.0 - smoothstep(0.2, 0.4, length(grid - 0.5)); で各セルに円が描けます。"

fract関数

fract とは

float f = fract(x);  // x の小数部分を返す

fract(x) は x - floor(x) と同じで、小数部分のみを取り出します。

例：

• fract(0.3) → 0.3
• fract(1.7) → 0.7
• fract(3.14) → 0.14

結果は常に 0.0 以上 1.0 未満 の範囲です。

パターンの繰り返し

fract の最大の用途はパターンの繰り返しです。

座標をN倍してから fract を適用すると、0〜1の範囲がN回繰り返されます：

float repeated = fract(uv.x * 5.0);
// 0~1 のグラデーションが5回繰り返される

これはタイリングの基本テクニックです。

floor とセルID

floor は fract の逆で、整数部分を返します。fract と floor を組み合わせると、繰り返しの中で各セルを区別できます：

vec2 scaled = uv * 5.0;
vec2 cellUV = fract(scaled);    // セル内の座標 (0~1)
vec2 cellID = floor(scaled);    // セルのID (0, 1, 2, ...)

セルIDを使うと、各セルに異なる色やパターンを割り当てられます。

グリッドパターン

fract で作った座標にシェーピング関数を適用すると、グリッドパターンが作れます：

vec2 grid = fract(uv * 10.0);
// 各セル内で step を使って線を引く
float lines = step(0.9, grid.x) + step(0.9, grid.y);

のこぎり波

fract(x) 自体が「のこぎり波」の形をしています。0から1まで直線的に増加した後、0に戻ります。

時間と組み合わせるとアニメーションになります：

float sawtooth = fract(u_time * 0.5);
// 0→1→0→1... を繰り返す

fract と mod の違い

fract(x) と mod(x, 1.0) は正の値では同じ結果ですが、負の値では異なります。シェーダーでは一般に fract の方がよく使われます。

まとめ

• fract(x) は小数部分を返す（0.0〜1.0未満）
• 座標をN倍してから fract でN回の繰り返し
• floor でセルIDを取得して各セルを区別
• タイリング、グリッド、のこぎり波の基本