数学アートギャラリーをつくっていく Advent Calendar 2025

数学アートギャラリーをつくっていくDay22「シェルピンスキーの三角形」

Last updated at 2025-12-24Posted at 2025-12-21

Day21までで「三角関数の波」は終わりにしました。「シェルピンスキーの三角形」行きます。

リポジトリ：

GitHub Page（最新）：

とりあえず作ってもらう

チャットプロンプト (Agentモード、Claude Sonnet4.5）：

「シェルピンスキーの三角形」を実装して

✨ 機能の特徴

再帰的にフラクタル図形を描画します
マウスのX座標で再帰の深さ（1～7）を調整できます
マウスのY座標で色相を変更できます
ゆるやかに色がアニメーションします
画面左上に再帰の深さと三角形の数を表示します

🎨 数学的な説明
シェルピンスキーの三角形は、正三角形から中央の三角形を取り除き、残った3つの三角形に同じ操作を繰り返すフラクタル図形です。再帰の深さが n のとき、3^n 個の小さな三角形ができますよ！

ブラウザで index.html を開いて、メニューから「シェルピンスキーの三角形」を選んでみてください〜🎵

そして、またしてもメニューにふたつの「シェルピンスキーの三角形」があるので削除してもらいます。これ、AIにとっては難しいのでしょうか。

チャットプロンプト (Agentモード、Claude Sonnet4.5）：

メニューにシェルピンスキーの三角形がふたつあるのでひとつにしてください。

完了です！✨ せんぱい、重複していたシェルピンスキーの三角形を削除しました💖

続いて、色をパステルにしてもらいます。

チャットプロンプト (Agentモード、Claude Sonnet4.5）：

パステル調にして

修正後の画面を確認して再度リクエストします。

背景に溶け込んじゃうときがあるので、背景の色を変更して。

ついでにコメントも丁寧にしてもらいます。

学習者用に数学的なコメントやコード内容の説明を丁寧につけて。p5.jsのメソッドについてはインラインで説明をつけて。

ギャルCopilotからの報告

追加した内容：

ファイル冒頭に数学的な説明（フラクタルとは、作り方、数学的性質）
各関数の詳細な説明とアルゴリズムの解説
p5.jsメソッド全てにインライン説明
変数の意味と計算式の説明
再帰の仕組みと基底ケース・再帰ケースの説明
座標計算の数学的根拠（正三角形の高さの公式など）

これで初心者の方でも、数学とプログラミングの両方が学べる教材になってますよ〜📚✨

やや丁寧すぎるきらいもありますが、よいことにします。

できたもの

テストケース

テストケースをつくってもらってから詳細を見ることにします。

チャットプロンプト (Agentモード、Claude Sonnet4.5）：

「シェルピンスキーの三角形」の動作確認をほかの人にお願いしたいと考えています。どういう観点で、何を確認してもらえばよい？判断基準が人によってぶれないようなチェックリストつくってほしい。

なんと、チェックリスト用に新しくmdファイルが作られました…
トップディレクトリに作られてしまったので移動することにします。

チェックリストは、testフォルダをつくって、その中に入れるようにしようかな。

無事移動しました。

チェックリスト全量

シェルピンスキーの三角形 - 動作確認チェックリスト

📋 テスト環境

ブラウザ名とバージョンを記録する
画面解像度を記録する
テスト日時を記録する

1. 初期表示の確認

1-1. ページ読み込み

確認項目: index.htmlを開いた時、エラーなくページが表示される
判断基準: ブラウザのコンソール（F12キー）にエラーメッセージが表示されない

1-2. メニューの表示

確認項目: 左側のメニューに「シェルピンスキーの三角形」が表示される
判断基準: 「シェルピンスキーの三角形」という文字が1つだけ表示される（重複していない）

1-3. 作品の選択

確認項目: 「シェルピンスキーの三角形」をクリックすると作品が表示される
判断基準:
- タイトルが「シェルピンスキーの三角形」に変わる
- 説明文が「フラクタル図形の代表例。大きな正三角形から...」と表示される
- キャンバスにパステル調の三角形パターンが表示される

2. 描画内容の確認

2-1. 三角形の形状

確認項目: 正三角形のフラクタルパターンが表示される
判断基準:
- 大きな三角形の中に小さな三角形が繰り返し配置されている
- 中央部分に三角形の「穴」が見える（空白部分がある）
- 全体が正三角形の形をしている

2-2. 色の表示

確認項目: パステル調の色で描画される
判断基準:
- 背景が薄いクリーム色（明るい色）
- 三角形がパステルカラー（淡い色、やわらかい色調）
- 三角形と背景のコントラストがあり、図形がはっきり見える

2-3. 枠線の表示

確認項目: 各三角形に細い枠線が表示される
判断基準:
- 各小三角形の輪郭に薄い線が見える
- 線が細くて繊細（0.5px程度）

3. インタラクティブ機能の確認

3-1. マウスX座標による再帰の深さ変更

確認項目: マウスを左右に動かすと、三角形の分割数が変わる
判断基準:
- マウスを画面の左端に移動 → 再帰の深さが「1」になる（3個の大きな三角形）
- マウスを画面の右端に移動 → 再帰の深さが「7」になる（2187個の小さな三角形）
- マウスを中央付近に移動 → 深さが3～5程度になる
- 左上の「再帰の深さ: X」の数字がマウス移動に連動して変わる

3-2. マウスY座標による色相変更

確認項目: マウスを上下に動かすと、三角形の色が変わる
判断基準:
- マウスを画面の上部に移動 → 緑～青系の色になる
- マウスを画面の下部に移動 → 青～紫系の色になる
- 色が滑らかに変化する（急激な色変化ではない）

3-3. リアルタイム反応

確認項目: マウス操作に対してスムーズに反応する
判断基準:
- マウスを動かした瞬間に表示が更新される（遅延が0.1秒以内）
- カクつきや遅延がない

4. アニメーション機能の確認

4-1. 色のアニメーション

確認項目: マウスを動かさなくても、三角形の色がゆっくり変化する
判断基準:
- 5秒間マウスを動かさずに観察して、色相が徐々に変化していることを確認
- 色の変化が滑らかで自然（ちらつきがない）

5. 情報表示の確認

5-1. 再帰の深さ表示

確認項目: 画面左上に「再帰の深さ: X」が表示される
判断基準:
- 文字が読みやすい（背景と十分なコントラストがある）
- 数値が1～7の範囲内
- マウスX座標の変化に連動して数値が変わる

5-2. 三角形の数表示

確認項目: 画面左上に「三角形の数: X個」が表示される
判断基準:
- 表示される数が正しい（以下の対応表と一致する）
  - 深さ1 → 3個
  - 深さ2 → 9個
  - 深さ3 → 27個
  - 深さ4 → 81個
  - 深さ5 → 243個
  - 深さ6 → 729個
  - 深さ7 → 2187個

5-3. 操作ガイド表示

確認項目: 「マウスを動かして調整してね✨」というメッセージが表示される
判断基準: テキストが読みやすく、絵文字が正しく表示される

6. レスポンシブ対応の確認

6-1. ウィンドウリサイズ

確認項目: ブラウザウィンドウのサイズを変更しても正しく表示される
判断基準:
- ウィンドウを小さくする → キャンバスサイズが自動調整される
- ウィンドウを大きくする → キャンバスサイズが自動調整される
- 三角形が画面からはみ出さない
- 三角形の縦横比が保たれる（変形しない）

6-2. 画面サイズ別表示（デスクトップ）

確認項目: 1920x1080などの大画面で正しく表示される
判断基準:
- キャンバスの高さが最大500pxに制限される
- 三角形が見切れない

6-3. 画面サイズ別表示（タブレット・スマホ想定）

確認項目: ウィンドウ幅を600px程度に縮めても表示される
判断基準:
- キャンバスの最小高さが300px確保される
- 情報表示テキストが読める
- 三角形のパターンが識別できる

7. パフォーマンスの確認

7-1. フレームレートの確認

確認項目: アニメーションが滑らかに動作する
判断基準:
- 深さ1～5: カクつきなくスムーズに動く
- 深さ6～7: 若干重くなる可能性があるが、操作は可能
- ブラウザが固まったり、クラッシュしない

7-2. メモリ使用量

確認項目: 長時間表示してもメモリリークが発生しない
判断基準:
- 3分間連続で表示しても、ブラウザが遅くならない
- 他の作品に切り替えて戻っても正常に動作する

8. ブラウザ互換性の確認

以下のブラウザで動作確認を行う（可能な範囲で）

8-1. Chrome系

Google Chrome (最新版)
Microsoft Edge (最新版)

8-2. Firefox

Mozilla Firefox (最新版)

8-3. Safari (Mac/iOSの場合)

Safari (最新版)

各ブラウザでの判断基準:

上記1～7の全ての項目が正常に動作する
表示崩れがない
コンソールエラーがない

9. エラーケースの確認

9-1. 連続クリック

確認項目: メニューの「シェルピンスキーの三角形」を素早く5回連続クリック
判断基準:
- エラーが発生しない
- 正常に表示される
- 多重起動されない

9-2. 他作品との切り替え

確認項目: シェルピンスキーの三角形 → 他の作品 → シェルピンスキーの三角形と切り替える
判断基準:
- 切り替え時にエラーが出ない
- 再表示時に正常に動作する
- 前の作品の描画が残らない

10. 視覚的品質の確認

10-1. デザインの統一性

確認項目: 他の作品と比較してデザインが統一されている
判断基準:
- タイトルと説明文のフォーマットが他作品と同じ
- キャンバスのサイズと配置が他作品と同じ
- 情報表示の位置とスタイルが統一されている

10-2. 色の美しさ

確認項目: パステル調の配色が美しく調和している
判断基準:
- 背景と三角形の色が調和している
- 色がまぶしすぎず、暗すぎない
- 長時間見ても目が疲れない色合い

✅ テスト完了の判定基準

合格条件:

必須項目（1～5、7、9）の全てにチェックが入る
ブラウザ互換性（8）で少なくとも1つのブラウザで全項目が合格
不具合が発見された場合は、内容を記録して開発者に報告

不合格の場合:

不具合の詳細（どの項目で、どのような状態になったか）を記録
再現手順を明確に記述
スクリーンショットがあれば添付

📝 テスト結果記録欄

テスト実施日: ________年____月____日
テスト担当者: __________________
ブラウザ: __________________
画面解像度: __________________

総合判定: [ ] 合格 / [ ] 不合格

備考・コメント:

（気づいた点や改善提案などを自由に記入）

発見された不具合:

（不具合があれば記入）

次にやること

Copilotコードレビューをおねがいしたり、ソースをしみじみ眺めたり、チェックリストをみながら動きを確認したりしていきます。Day23

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up