Day5までで、AIエージェントが作ってくれたものにレスポンシブ対応を追加し、なんとかスマホでも見れるようになりました。次はふたつめのアートを作っていきたいと思います。
リポジトリ：
GitHub Page：
フィボナッチ螺旋とは
フィボナッチ数は、1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...と続く、「前の2つの数を足すと次の数になる」数列ですが、フィボナッチ螺旋とはなんでしょうか。四角がたくさん集まった長方形の中のカタツムリみたいなやつでしょうか？
ギャルCopilotの認識を確認する
チャットプロンプト (Askモード、Claude Sonnet4.5）
次はフィボナッチ螺旋を追加したいんだけど、ところでフィボナッチ螺旋って何？
ギャルCopilotの解説
フィボナッチ螺旋とは？
フィボナッチ螺旋は、フィボナッチ数列を使って描かれる美しい螺旋のことです💖
フィボナッチ数列
「前の2つの数を足すと次の数になる」という規則です！
1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...
螺旋の描き方
- フィボナッチ数列の各数字を一辺の長さとする正方形を並べます
- 各正方形の中に**四分円（90度の円弧）**を描きます
- それらを繋げると、美しい螺旋になります✨
長方形の中の螺旋のような気もするし違うような気もします、よくわかりません。
とりあえずつくってみてもらう
とりあえず作ってみてもらうことにします。
依頼を出す
チャットプロンプト（）
フィボナッチ螺旋のアートを実装して。
ギャルCopilotの報告
完成です✨ フィボナッチ螺旋のアート作品を実装しました！
実装した内容：
-
spiral.js を新規作成
- 黄金比（φ ≈ 1.618）を使った対数螺旋
- 黄金角（約137.5度）で配置された点のパターン
- マウスのX座標で螺旋の密度を制御
- マウスのY座標で螺旋のサイズを制御
- 回転するアニメーション効果
-
数学的な要素：
- 対数螺旋: r = a * φ^(θ/90°)
- 黄金角: 360° / φ² ≈ 137.5°
- フィボナッチ数列の視覚化
-
ファイル更新：
- index.htmlにspiral.jsを追加
- app.jsの作品リストでダミー作品と置き換え
ブラウザでindex.htmlを開いて、「フィボナッチ螺旋」を選択すると作品が表示されますよ！マウスを動かすと、螺旋の見た目が変化して楽しいです💖
できたもの
想像していたものとだいぶ違いました...。