[Day22]で、「シェルピンスキーの三角形」を実装しました。中身を改めて確認しつつ、Copilotコードレビューに対応していきます。
リポジトリ：
GitHub Page（最新）：
対象プルリクエスト：
再帰の深さを決めるところ
マウスの座標によって、再帰の深さを決めているところに対して、爺やから疑義が出されております。
爺やCopilotによる指摘：
マウスの座標を深さに変換する範囲が1から8となっておりますが、次の行で1から7に制限されております。この処理により、マウスを右端に移動しても深さは7までしか上がらず、1から8の変換が無駄になっております。変換範囲を1から7.99程度に変更するか、制限を1から8に変更することをご検討くださいませ。
該当箇所はここです。たしかに。1から8に変換しておきながら、1から7に制限するのは直感にも反しています。
// 【インタラクティブ機能1】マウスX座標で再帰の深さを制御
// Math.floor(): 小数点以下を切り捨てて整数にする
// p.map(): 値の範囲を別の範囲に変換するp5.jsメソッド
// (マウスX座標, 0からキャンバス幅, を1から8の範囲に変換)
depth = Math.floor(p.map(p.mouseX, 0, p.width, 1, 8));
// p.constrain(): 値を指定範囲内に制限するp5.jsメソッド
depth = p.constrain(depth, 1, 7); // 1～7の範囲に制限
実装者であるギャルCopilotに理由を聞いてみましょう。
チャットプロンプト (Askモード、Claude Sonnet4.5）：
マウス座標を1から8の間に変換してるのに、depthを1から7で制限するの、直感に反するんだけど、なんでこうなってるの？
せんぱい、鋭い指摘ありがとうございます！✨
これ、ウチのミスですね💦 確かに直感に反してますよね！
現在の問題点:
- p.map()で1～8の範囲に変換してるのにその後p.constrain()で1～7に制限してる
- つまり、マウスを右端まで動かしても深さ8には絶対ならない😅
理由（たぶん）:
深さ8だと三角形が6561個（3^8）になって、ブラウザが重くなるのを避けたかったんだと思います💦 でも、これだと混乱しますよね
修正案は2つあります:
①最初から1～7にマップする（シンプル！）
②深さ8まで許可する（パフォーマンス注意）
シンプルに①を適用することにしようと思いましたが、コメントだけ変わっていて、コードとしては変わっていません…。どういうことでしょう。
// 【インタラクティブ機能1】マウスX座標で再帰の深さを制御
// Math.floor(): 小数点以下を切り捨てて整数にする
// p.map(): 値の範囲を別の範囲に変換するp5.jsメソッド
// (マウスX座標, 0からキャンバス幅, を1から7の範囲に変換)
depth = Math.floor(p.map(p.mouseX, 0, p.width, 1, 8));
// p.constrain(): 値を指定範囲内に制限するp5.jsメソッド
depth = p.constrain(depth, 1, 7); // 念のため1～7の範囲に制限
①にしたいんだけど、コード自体は同じだね？
あっ、せんぱい、その通りです！💦
ウチ、コメント文だけ変えて、コード自体は全く同じものを提示してましたね😅
正しくは、p.map()の第5引数を8から7.1に変更する必要がありますよ✨
なぜ7.1なのか？
- Math.floor()で切り捨てるので、p.map()の結果が7.0以上7.99...以下なら深さ7になります
- でもp.map()の第5引数を7にすると、マウスが右端のときに「ちょうど7.0」になっちゃって、誤差で6.999...になる可能性があります💦
- だから、7.1とか8にしておくと確実に7が取れるんです！
んー。7.1にするのもなんかあれ何で、p.map()の第5引数は、8にしたいと思います。
変数の命名規則
爺やCopilotによる指摘：
変数名に h_triangle を使用されておりますが、他のアート作品では一般的にキャメルケース（例：hTriangle）が採用されております。プロジェクトの命名規則に合わせて、キャメルケースに統一することをお勧めいたします。
おっと。これは、本来Lintツールなどで対策をするなり、コーディング規約でギャルCopoilotを縛っておくところですが、こうして「他のソースの書き方と比べて」指摘してくれるのは、ありがたいです。
プルリクエストのCommit Suggestionボタンをポチっとしてみます。
意気揚々とローカルにプルしてきて、ブラウザで確認してみたら、エラーでてるやんけ！
残ってるやんけ！
// 頂点3 (x3, y3): 右下の頂点
let x3 = x1 + size / 2; // 中央から右に一辺の半分
let y3 = y1 + h_triangle; // 上頂点から高さ分下
悔しいので、エラーをそのまま、チャットに貼り付けて直してもらいます。
🌸 p5.js says: [sierpinski.js, line 109] It seems that you may have accidentally written "h_triangle" instead of "triangle". Please correct it to triangle if you wish to use the function from p5.js. (http://p5js.org/reference/#/p5/triangle)
せんぱい、エラーを見つけてくれてありがとうございます✨
109行目の h_triangle は、変数名のタイポですね💦 正しくは hTriangle です！
表示されるようになりました。ありがとう。
チェックリストの確認
ざっと確認してみて、ココで気づいてしまいました。
### 6-1. ウィンドウリサイズ
- [ ] **確認項目**: ブラウザウィンドウのサイズを変更しても正しく表示される
- [ ] **判断基準**:
- ウィンドウを小さくする → キャンバスサイズが自動調整される
- ウィンドウを大きくする → キャンバスサイズが自動調整される
- 三角形が画面からはみ出さない
ウィンドウを小さくするときにキャンバスサイズが自動調整されないことに…。
大きくするときは大丈夫なのに、なんでなん…。
チェックリストの有効性を再認識しつつ、見なかったことにします。
その他気になるところ
三角形を描画するところを、細かくは見れていませんが、終わりにします
次やること
アドベントカレンダー2025としては、終わりが見えてきてしまったので迷うところですが、上から順番に次は「リサジュー図形」に行きたいと思います。Day24