web-dev-qa-db-ja.com

ピクセル座標への六角形グリッド座標

六角形のグリッドを使用しています。とてもエレガントなので、この座標系を使用することにしました。

grid

この質問 は、座標自体の生成について話し、非常に便利です。私の問題は、これらの座標を実際のピクセル座標との間で変換することです。座標x、y、zの六角形の中心を見つける簡単な方法を探しています。ピクセル座標の（0,0）が16進座標の（0,0,0）にあり、各六角形に長さsのエッジがあると仮定します。 x、y、zはそれぞれ座標に沿って軸に沿って特定の距離を移動するように思えますが、奇妙な方法で相互に関連しているため、頭を完全に包み込むことはできません。

ボーナスポイントは、他の方向に進み、ピクセル座標の（x、y）ポイントをそのポイントが属するヘックスに変換できる場合に使用します。

mathcoordinate-systemshexagonal-tiles
45
captncraig

明確にするために、「六角形」の座標を_(r,g,b)_とします。ここで、r、g、およびbはred、green、およびblueです。 =それぞれ座標。座標_(r,g,b)_と_(x,y)_は、次の関係があります。

_y = 3/2 * s * b
b = 2/3 * y / s
x = sqrt(3) * s * ( b/2 + r)
x = - sqrt(3) * s * ( b/2 + g )
r = (sqrt(3)/3 * x - y/3 ) / s
g = -(sqrt(3)/3 * x + y/3 ) / s

r + b + g = 0
_

導出：

  • 六角形の水平行（定数y- coordinateが必要）には定数b座標があり、yはbにのみ依存していることに最初に気付きました。各六角形は、長さがsの辺を持つ6つの正三角形に分割できます。 1つの行の六角形の中心は、次の行の中心の上/下1.5辺の長さです（または、おそらく見やすく、1つの行の中心は、2つの行の中心の上/下3辺の長さです） ）したがって、b内の_1_が変更されるたびに、yが_3/2 * s_を変更し、最初の式が得られます。 bに関してyを解くと、2番目の式が得られます。

  • 指定されたr座標を持つ六角形はすべて、原点から_3/2 * s_であるr軸上の点でr軸に垂直な線上に中心があります（yの上記のbの派生と同様）。 r軸には勾配-sqrt(3)/3があるため、それに垂直な線には勾配sqrt(3)があります。 r軸と線上の点の座標は_(3sqrt(3)/4 * s * r, -3/4 * s * r)_です。したがって、x- coordinate yの六角形の中心を含む線のrおよびrの方程式はy + 3/4 * s * r = sqrt(3) * (x - 3sqrt(3)/4 * s * r)です。最初の式を使用してyを代入し、xを解くと、2番目の式が得られます。 （これは実際にこれを導出した方法ではありませんが、私の導出は多くの試行錯誤を伴うグラフィカルであり、この代数的方法はより簡潔です。）

  • 特定のr座標を持つ六角形のセットは、そのg座標を持つ六角形のセットの水平方向の反射です。したがって、xおよびrに関するb座標の式は、__ some_variableのある式のxgはその逆です。これにより、3番目の式が得られます。

  • 4番目と5番目の式は、rをbに置き換え、rまたはgをxとyで解決したものです。

  • 最終的な式は観測から得られ、以前の式を使用して代数によって検証されました。

41
Isaac