title: "六角形タイル" description: "六角形グリッドの座標系とハニカムパターンの作り方を学びます。" chapter: "05-transforms" order: 4 challenge: description: "六角形タイルに色のバリエーションをつけてください。各六角形のセルIDを使って、異なる色で塗り分けましょう。" hints:

• "セルIDからハッシュ値を計算して色に使います。fract(sin(dot(id, vec2(127.1, 311.7))) * 43758.5453) のように。"
• "ハッシュ値をhue（色相）として使い、HSVからRGBに変換すると綺麗な色分けになります。"
• "3つの異なるハッシュ値をRGBの各チャンネルに使う方法もあります。"

六角形タイル

六角形グリッドの考え方

正方形のタイリングは fract で簡単にできましたが、六角形タイリングはもう少し工夫が必要です。

六角形グリッドでは、行ごとに半分ずれた配置になります。偶数行と奇数行でオフセットが異なります：

 /‾\ /‾\ /‾\
|   |   |   |
 \_/ \_/ \_/
  /‾\ /‾\ /‾\
 |   |   |   |
  \_/ \_/ \_/

六角形の座標系

六角形タイリングの基本的なアプローチ：

vec4 hexCoord(vec2 uv) {
    vec2 r = vec2(1.0, 1.732); // 1, sqrt(3)
    vec2 h = r * 0.5;

    // 2つのグリッド候補
    vec2 a = mod(uv, r) - h;
    vec2 b = mod(uv - h, r) - h;

    // 近い方の中心を選ぶ
    vec2 gv;
    vec2 id;
    if (length(a) < length(b)) {
        gv = a;
        id = floor(uv / r);
    } else {
        gv = b;
        id = floor((uv - h) / r);
    }

    return vec4(gv, id);
}

この関数は：

• gv（xy成分）：セル内のローカル座標
• id（zw成分）：セルの識別子

を返します。

六角形の距離関数

六角形のSDFを使って、各セル内に六角形を描くことができます：

float sdHexagon(vec2 p, float r) {
    const vec3 k = vec3(-0.866025404, 0.5, 0.577350269);
    p = abs(p);
    p -= 2.0 * min(dot(k.xy, p), 0.0) * k.xy;
    p -= vec2(clamp(p.x, -k.z * r, k.z * r), r);
    return length(p) * sign(p.y);
}

ハニカムパターン

六角形タイリングと六角形SDFを組み合わせると、ハニカム（蜂の巣）パターンが作れます：

vec4 hex = hexCoord(uv * 5.0);
vec2 gv = hex.xy;

float d = sdHexagon(gv, 0.5);
float outline = abs(d) - 0.02;
float pattern = smoothstep(0.01, 0.0, outline);

まとめ

• 六角形グリッドは2つの正方形グリッドをずらして構成
• 各点がどちらのグリッドの中心に近いかで所属セルを決定
• セルIDを使ってセルごとのバリエーションが可能
• ハニカムパターンは六角形SDFのアウトラインで作れる