Day18でGitHub Copilotコードレビューの指摘にしたがって「三角関数の波」のコメントを修正しました。コード実装に対する指摘に対応していきます。
リポジトリ：
GitHub Page（最新）：
対象プルリクエスト
コードの重複
指摘内容
せんぱい、drawSineWaveとdrawCosineWaveの実装を見てみたんですけど、ほとんど同じコードが重複してますね💦
2つの関数の違いは、76行目と113行目でp.sin()かp.cos()を使うかだけです。DRY原則（Don't Repeat Yourself）に従って、共通のdrawWave関数を作って、三角関数を引数として渡すようにすると、コードがもっとシンプルになって保守しやすくなりますよ✨
対応してもらう
ギャルの指摘をギャルに伝言します
チャットプロンプト (Agentモード、Claude Sonnet4.5）：
drawCosineWaveとdrawSineWaveってほとんど一緒だよね？共通のdrawWave関数を作って、三角関数を引数として渡すのはどう？
リファクタリングしました✨ せんぱい、いい感じになりましたよ！
変更内容：
🔧 共通関数 drawWave を作成
- 三角関数を引数として受け取る汎用関数
- p.sin や p.cos を渡すことで、どんな波でも描画可能
📚 高階関数の説明を追加
- 「関数を引数として受け取る関数」という概念を解説
- コードの重複を減らす重要なテクニックとして紹介
✂️ drawSineWave と drawCosineWave をシンプルに
- それぞれ1行の呼び出しだけになった
- 「ラッパー関数」として機能
これで、コードが読みやすく保守しやすくなって、学習教材としても「高階関数」の良い例になりました💖
背景の描画
指摘内容
せんぱい、ここで毎フレーム背景のグラデーションを再描画してるんですけど、これパフォーマンスに影響する可能性がありますよ💦
他のアートワーク（circle.jsやspiral.js）では、p.background()で一度だけ背景を塗りつぶしてるのに対して、このコードは毎フレームp.height回（300～500回）のp.line()を呼び出してるんですよね。
drawGradientBackground()関数を一度だけ呼ぶか、静的な背景ならp.background()で単色にすることをオススメしますです✨
対応してもらう
ギャルの指摘をギャルに伝言します
チャットプロンプト (Agentモード、Claude Sonnet4.5）：
drawGradientBackgroundをマイフレーム呼ぶの、パフォーマンス的に問題ない？
変更点：
🚀 パフォーマンス向上
- 背景を setup() で一度だけ描画してキャッシュ
- draw() では保存した画像を表示するだけ
- 毎秒30,000回以上の描画が60回に削減！
💾 オフスクリーンバッファの使用
- p.createGraphics() でメモリ上に別のキャンバスを作成
- そこに背景を描画して保存
- p.image() で高速にコピー
🔄 リサイズ対応
- ウィンドウサイズが変わったときも背景を再作成
📚 学習教材として
- パフォーマンス最適化の重要性を説明
- オフスクリーンバッファの概念を解説
- これで動作が軽くなって、学習教材としても良い例になりました💖
オフスクリーンバッファというものがあるのですね。なるほど。なるほど。
対応結果
ここまででマージしちゃいます。
ようやく「三角関数の波」公開！
と思ったら…
あれ？背景だけになっちゃっています…。
おかしいなローカルでは動いていた気がするんだけど…。
とローカルで確認したら、同じ画面…。さっき見たのは何だったのか…。
自動リロードがうまくいっていなかったのか何なのか…。
つぎやること
直していきます…。Day20