最近、ルービックキューブ（3x3x3）の回転論理を平面の円交差点に投影する表現手法があることを知りました。
3Dの面回転を平面同心円の90度回転（3パーツシフト）にマッピングすることで、群論的なパズルとしての楽しさをそのまま2Dで再現できる点に魅力を感じ、ブラウザ（HTML/SVG/JavaScript）で遊べるWebアプリとして実装してみました！
🎮 作ったもの
- アプリ名: 2D Circle Rubik
- 公開URL: https://eninlatot.github.io/2d-circle-rubik/
PCおよびスマートフォンのブラウザで直接動作します。
💡 こだわったポイント・実装の工夫
1. 本物のルービックキューブと同じ回転規則（群論の再現）
初期の試作では1コマ（30度）ずつの回転でしたが、本物のルービックキューブ（3x3x3）の1面回転ルールを忠実に採用しました。
1回の回転操作で90度（3パーツ分）が一括で隣の交差点エリアへとシフトします。
2. 視認性とアニメーション演出
- 軌道の可視化: 操作時にどの層が回転しているかをハイライト表示。
- 滑らかなイージング: 1手動かすたびに、約0.3秒（300ms）かけてパーツがぬるっと滑らかに交差点間を移動します。
🤖 自動解答機能についてのお断り（笑）
アプリ内には「HELP 次の1手」や「自動解答」ボタンを実装しています。
……ただし、本格的なルービックキューブ解法アルゴリズム（Kociemba等）を積んでいるわけではなく、**「シャッフルした時の操作履歴（Move Log）を逆順に遡って再生しているだけ」**です！
ですので、シャッフルした状態から自力で何手も回してしまうと正解へ戻れなくなるお茶目な仕様となっています（笑）。このあたりは今後のアップデート課題としたいところです。
🛠️ 使用技術
- フロントエンド: HTML5 / SVG / JavaScript (Pure ES6+)
- ホスティング: GitHub Pages
- 生成AI: Gemini / チャッピー
外部ライブラリを一切使わず、シングルファイルのVanilla JSとSVGアニメーションのみで軽量に構築しています。
📝 おわりに
3Dの立体パズルを2Dの幾何学模様として捉え直すのは、数学的にも開発的にも非常に面白かったです！
スマホのタッチ操作・スワイプにも対応させていますので、ぜひ遊んでみたり、アドバイスなどをいただけると嬉しいです。