幾何学をコードに変える。数学的な六角形タイルの描画ロジックをAIに生成させるコツ

【連載】GCP×AI：0円で創る近未来IT覇権ゲーム『ネオ・ジパング』開発記

前回の記事では、なぜ私たちが重い3Dエンジンを捨て、ブラウザ標準の「HTML5 Canvas」を選んだのか、その戦略的な理由をお話ししました。

今回は、いよいよ実践です。サイバー空間の最小単位であり、ボードゲームの華でもある「六角形（ヘックス）タイル」を、数学的な計算だけで描き出します。

「自分は数学が苦手だから無理だ」と思う必要はありません。そのためのAI（Gemini）です。ただし、AIに100点満点のコードを書かせるには、少しだけ「伝え方のコツ」が必要です。

なぜ「六角形（ヘックス）」なのか？

四角形のマス目ではなく、なぜわざわざ計算が面倒な六角形を使うのか。それは、六角形が「隣接するすべてのマスとの距離が一定」という、戦略ゲームにおいて完璧な性質を持っているからです。

この「美しくも合理的な形」を、画像ファイル（PNGやSVG）を使わずに、コードによる計算だけで描くこと。これこそが、リソースを極限まで削ぎ落とす「サバイバルDX」の真髄です。

AIに「数学的な指示」を出す3つのコツ

Geminiに「六角形を描いて」とだけ伝えると、時として扱いづらいコードが返ってきます。美しいマップを作るために、以下の3つの要素をプロンプトに盛り込んでみましょう。

1. 座標系を指定する（頂点か、辺か）

六角形には「尖った方が上のタイプ（Pointy-topped）」と「平らな方が上のタイプ（Flat-topped）」の2種類があります。 ネオ・ジパングでは、回路基板のような横の繋がりを強調するため、「尖った方が上のタイプ」を指定します。

2. 「中心点」と「半径」という共通言語を使う

AIには「中心点（cx, cy）と半径（size）を引数に取り、数学的に計算して描画する純粋な関数を作って」と指示します。 これにより、後からマップの大きさを変えたり、ズームさせたりすることが非常に簡単になります。

3. 三角関数（sin/cos）を明示する

AIに「三角関数を使って、60度ずつ回転させながら6つの頂点を計算して」と一言添えるだけで、無駄な外部ライブラリに頼らない、軽量で高速な描画ロジックが生成されます。

【実践】Geminiが紡ぎ出した「黄金のロジック」

実際にこれらのコツを踏まえてプロンプトを投げた結果、リードエンジニアAIが提案したコードがこちらです。

JavaScript

// 六角形の頂点を計算し、パスを描く魔法の数式
const drawHex = (cx, cy, size) => {
  ctx.beginPath();
  for (let i = 0; i < 6; i++) {
    // 360度を6分割（60度ずつ）し、頂点を計算
    const angle_deg = 60 * i - 30; // 30度ずらして「尖った上」を表現
    const angle_rad = Math.PI / 180 * angle_deg;
    
    const x = cx + size * Math.cos(angle_rad);
    const y = cy + size * Math.sin(angle_rad);
    
    if (i === 0) ctx.moveTo(x, y);
    else ctx.lineTo(x, y);
  }
  ctx.closePath();
  ctx.stroke();
};

わずか10行足らず。この短いコードが、ブラウザ上で無限のサイバー空間を生み出す種火となります。

数学は「最強の圧縮技術」である

画像を使えば数キロバイト消費するタイルも、この数式なら数バイトで済みます。 低スペックPCや細い回線環境であっても、この「数学という名の圧縮技術」を使えば、メガテック企業のトラフィックにも耐えうる強靭なUIが構築できるのです。

次なる戦局へ

「筆」と「描き方」は揃いました。 次回は、この一つ一つのタイルに「役割」を与えていきます。 「2-3: 『データセンター』や『暗号資産』。タイルに命を吹き込むアセット配置の自動化」。 ランダム生成アルゴリズムを使って、世界に一つだけのサイバーマップを構築する旅へと進みます。