Day12でマンデルブロ集合の定義を確認し、見た目を少しかわいらしくしました。自分のスマホで確認したら、描画が崩壊していたので、対策ができるならしていきます。
リポジトリ：
GitHub Page（最新）：
描画の崩壊っぷり
こうなってます。
ブラウザの開発者ツールで見るとこんな感じです。（適当に選んだ Pixel7 412*915）
開発ツールで見えているほうも形がゆがんでいるので、たぶん、座標の扱いが何かおかしいのでしょう…。
対応してもらう
スマホの画面キャプチャをチャットにはりつけ、丸投げます。
チャットプロンプト (Agentモード、Claude Sonnet4.5）：
スマホでみたら、キャンバス画面が変なことになってるんだけど、なんでだろう？ブラウザの開発者ツールだと、ちゃんと表示されている。
修正しました！✨
原因
p.noLoop()を設定すると、draw()が自動で呼ばれなくなります。そのため、クリックやリサイズなどのイベントがないと描画されない状態でした💦
スマホでは最初にクリックしないと描画されなかったんですね。
修正内容
setup()の最後にp.redraw()を追加して、初回の描画を実行するようにしました！
これでスマホでも、ページを開いた瞬間にちゃんとマンデルブロ集合が表示されますよ💖
本当だろうか？という猜疑心とともにもうひとつ加えてみます。
んー。でも、いま、タッチすると、キャンバス部分が細長い長方形のまま、全面ピンクになっちゃうよ？
せんぱい、タッチイベントの座標取得がうまくいってないみたいです💦 修正しますね！
(中略）
修正しました！✨
変更点
- mousePressed → mouseReleased に変更：タッチイベントでは、離した時に座標を取得する方が正確です
- 長押し対応：0.5秒以上タッチするとズームアウト、短いタップでズームイン
- イベントの伝播を防止：return false でデフォルトの動作を防ぎます
これで、スマホでも正しく動作するはずです💖 短くタップすると拡大、長く押してから離すと縮小できますよ！
本当でしょうか・・・。
ここまで、PC上で軽く動作確認する限りは、破壊的な変更はしていなさそうなので、いったんmainにマージしてみます。
とマージしてみたら、なんと、ブラウザの開発者ツールでも再現するようになってしまいました。
以下、ダイジェストでお届けします。
ブラウザの開発者ツールでも、こんな風に、キャンバスが3つ並ぶようになっちゃったんだけど？
せんぱい、それは前のp5インスタンスが削除されずに残っちゃってるからです💦 app.jsを確認しますね！
app.jsは問題なさそうです。currentP5Instance.remove()とcontainer.innerHTML = ''でちゃんとクリアしてます。
マンデルブロ集合の作品を最初に開いた時に3つ並ぶんでしょうか？それとも、何度か作品を切り替えると3つになりますか？
マンデルブロ集合の作品を最初に開いた時に3つ並びます。
せんぱい、原因わかりました！setup()の最後に追加したp.redraw()が問題です💦
実は、noLoop()を設定しても、p5.jsはsetup()完了後に自動的に1回draw()を呼ぶんです。そこにredraw()を追加で呼んでいるので、複数回描画されてしまってます。
かわんないよ。そもそも、PCサイズだったら、キャンバスひとつでちゃんと表示されているから、そこじゃないんじゃない？
せんぱい、その通りです！すみません💦
PCで1つ、スマホで3つということは、スマホ特有の処理が問題ですね。app.jsのメニュータップ部分を確認させてください！
スマホでタップした時、touchstartとclickの両方が発火して、selectArtworkが複数回呼ばれている可能性があります。修正しますね！
修正しました！スマホでタップ時にイベントが複数回発火するのを防ぐようにpreventDefault()を追加しました。
これで試してみてください💖 それでもまだ3つ並ぶようでしたら、ブラウザのコンソールにエラーが出ていないか確認してもらえますか？
開発者ツールではキャンバスひとつになりました。プッシュして、mainにマージしてしまいましょう。
...だめでした。
再度、ダイジェストでお届けします。
実機だとだめだね。
せんぱい、原因がわかりました💦 noLoop()を削除したせいで、draw()が毎フレーム呼ばれてしまってます。マンデルブロ集合は重い計算なので、これが問題です。
これで試してみてください💖
開発者ツールのエミュレーターでもだめだね。
せんぱい、スマホ特有のタッチイベントでselectArtworkが複数回呼ばれてる可能性が高いです。デバウンス処理を追加しますね！
修正しました！✨
かわんない
せんぱい、デバッグログを追加して、何が起きてるか確認させてください💦
- recreateP5Instance called for: が何回出るか
- Canvas count after creation: が何個と表示されるか
これを教えてもらえますか？💦
（コンソールにでていたメッセージを貼り付ける）
せんぱい、recreateP5Instance は1回しか呼ばれていないのに、キャンバスが3つあるということは、mandelbrot.js の中で問題が起きてます💦
ログを追加しました！もう一度マンデルブロ集合を開いて、コンソールに何が表示されるか教えてください💦
- mandelbrot setup called が何回出るか
- Canvas created, count in container: が何個と表示されるか
- mandelbrot draw called が何回出るか
（コンソールにでていたメッセージを貼り付ける）
この出力を待っている間にワタクシ、はたと気づきました。「キャンバス3つ」じゃないということに。ギャルも気づいたようです。
せんぱい、ログでは1回しか呼ばれていないのに3つ表示されるのは変ですね💦
もう少し詳しく確認させてください。開発者ツールのElements（要素）タブで、canvasContainerの中を見てもらえますか？本当にタグが3つあるのか、それとも1つのキャンバスが何らかの理由で3つに見えているだけなのか確認したいです
ごめん、開発者ツールで確認したら、canvas要素としてはひとつっぽい。
canvasの中身に同じものが3つ表示されているように見えるだけかも。
せんぱい、わかりました！canvas要素は1つなんですね✨
キャンバスの中身が3つに見えるということは、描画処理で何かが3回繰り返されている可能性があります。試しに、描画の最初に背景をクリアしてみましょう！
これで試してみてください💖 もしこれで3つが消えないなら、他の原因を探りますね！
そろそろあきらめようかと思い始めました。
かわらないです。
せんぱい、これはキャンバスの表示サイズやCSSの問題かもしれません💦 styles.cssを確認させてください！
わかりました！#canvasContainerにoverflow: hidden;が設定されていますね。キャンバスのサイズ指定も確認させてください。画像を見ると、細長い長方形が横に並んでいるように見えますが、もしかしたらキャンバスのサイズ計算に問題があるのかもしれません。
デバッグのため、実際にキャンバスのサイズを表示してみましょう：
もう一度コンソールを確認してもらえますか？特にContainer sizeとCanvas element size、Canvas style sizeの値を教えてください💦
（コンソールにでていたメッセージを貼り付ける）
せんぱい、原因がわかりました！✨
Canvas element size: 1080 x 900 なのに、描画ループで 360 x 300 しか処理していないんです💦
p5.jsはデバイスピクセル比（Retina対応）で自動的にキャンバスを3倍のサイズ（1080x900）で作成していますが、p.widthとp.heightは表示サイズ（360x300）を返すので、実際のキャンバスの1/3しか描画されていません。
だから3つに見えるんです！修正しますね：
修正しました！p.pixelDensity(1)を追加して、ピクセル密度を1に固定しました。
これでキャンバスのピクセルサイズと表示サイズが一致するので、3つに見える問題が解決するはずです💖
試してみてください！
な。なるほど？p5.jsの便利機能が仇になった形でしょうか…。
この状態で、PCの開発者ツールのエミューレタでOKなことを確認し、ギャルに報告。
やった！せんぱい、良かったです✨
それでは、スマホ実機でも確認してもらえますか？そして、デバッグログも不要になったので削除してコードをきれいにしますね！
そして、無事、実機でも1つの図形パターンが表示されるようになりました。
途中、開発者ツールだとOKで実機でだめだった理由は、よくわかりません。
あと、スマホだと座標がゆがんでいるような気もしますが、気にしないことにします。
めでたしめでたし。
次にやること
数学的に簡単そうなやつにしたいと思います…Day14