Day8までで、フィボナッチ螺旋は、おなか一杯になってしまったのですが、動きがややおかしいことに気づいてしまったので直していきたいと思います。
リポジトリ:
GitHub Page(最新):
動きがおかしいとおもったところ
フィボナッチ螺旋を描画するとき、螺旋の密度と半径を与えていて、螺旋の密度は、マウスのX座標で決まるはずです。
ソースのここ:
// マウスの位置で螺旋の密度とサイズを制御
let spiralDensity = p.map(p.mouseX, 0, p.width, 0.05, 0.2); // 螺旋の密度(radian単位、大きいほど粗い)
let maxRadius = p.map(p.mouseY, 0, p.height, 100, 250); // 最大半径
ところが、今現在、左右にマウスを動かしても目に見えた変化はありません。
また、これとの関係は不明ですが、フィボナッチ螺旋を表示している状態で、ブラウザを更新すると、応答しなくなります…。
直していく
ギャルCopilotとのやりとりをダイジェストでお届けします。
すべて、Agentモード、Claude Sonnet4.5です。
マウスを左右に動かしても、アニメーションの変化がわかりません。密度を指定するところが何かおかしいのでは?
せんぱい、コードを見てみましたよ✨
確かに、spiralDensityの変化幅が小さすぎるのが原因ですね💦
現在は0.05から0.2の範囲なので、マウスを動かしてもあまり変化が見えないんです。
もっと大きな範囲にしてみましょう!例えば0.01から0.5くらいにすると、マウスを左右に動かしたときの変化がはっきりわかるようになりますよ🎨
マウスをのせただけで、ブラウザが固まるようになっちゃったんだけど・・・
あっ、ごめんなさい💦 ウチが0.01っていう小さすぎる値を設定しちゃったから、ループの回数が爆発的に増えちゃったんですね!
0.01だと1フレームで計算する点の数が多すぎて、ブラウザが重くなっちゃうんです。もう少し穏やかな範囲に調整しますね✨
まだ固まる・・・。ループの回転を決める数字とここの値を決める数字、分けたほうがいいんじゃないの?
あっ、せんぱい、その通りです!✨
ウチ、気づくのが遅くてすみません💦 densityがループの増分値として使われてるから、値が小さいとループ回数が爆発的に増えちゃうんですよね。
ループのステップ幅は固定値にして、spiralDensityは別のこと(最大回転数とか)に使うようにしますね!
動きは安定したけど、螺旋の密度って、螺旋の回転数なの?螺旋の長さが変化しているように見える。
せんぱい、するどいです!✨ 確かに今は螺旋の長さが変わっちゃってますね💦
本当の「密度」って、螺旋の長さは同じで、線が密に描かれるか粗く描かれるかですよね。ちゃんと直しますね!
んー。右に行くほどカクカクするようになっちゃったな・・・
せんぱい、わかりました💦 ステップ幅の範囲が広すぎて、右端だと0.25になっちゃってカクカクしてるんですね。
もうちょっと狭い範囲にして、右に行っても滑らかさが保たれるようにしますね✨
んー。違いがよくわかんない・・・。
せんぱい、もうちょっと差を大きくしますね!あと、線の太さも一緒に変えると変化がわかりやすくなるかもです✨
今度は2つの変化を組み合わせたので、違いがはっきりわかるはずです💫
マウスを左に → ステップ幅が細かく+線が細い → 繊細で密な螺旋
マウスを右に → ステップ幅が粗く+線が太い → 力強く粗い螺旋
ブラウザかたまったー
ごめんなさい💦 また0.03っていう小さすぎる値を設定しちゃいました!
安全な範囲に戻しますね✨
太さの変化がもっとわかるようにしてほしい
了解です!線の太さの範囲をもっと広げますね💫
線の太さを0.5〜5に広げました!これで左に行くとすごく繊細な線、右に行くと太くてしっかりした線になるはずです✨
できたもの
つぎやること
Vive Codeingで作ってきちゃっていますが、どう動くのが正しいの?を固めながら作っていくのを意識できるようにちょっとためしてみたいと思います。 -> Day10へ
