フラクタル描画

| |
描画中...
クリックでズーム、ドラッグで移動

※ ズームが深くなるほど描画に時間がかかります

📋 このツールを作ったプロンプト

以下のプロンプトをClaude・ChatGPT・GeminiなどのAIに貼り付けると、同じようなツールを作ることができます。

ブラウザで動くフラクタル描画ツールをHTML単一ファイル（HTML/CSS/JS完結）で実装してください。

【描画対象】
以下3種類をセレクトボックスで切り替えられる。
- マンデルブロ集合: z(n+1) = z(n)^2 + c、初期値 z=0、c が描画点の複素座標
- ジュリア集合: 同じ式だが c を固定（例: c = -0.7269 + 0.1889i）、描画点を z の初期値にする
- バーニングシップ: マンデルブロと同様だが zy の算出しに Math.abs を使用する

【カラーマップ】
以下5種類をセレクトボックスで切り替えられる。
- Classic: 繰り返し数をベースに黑→青→白のグラデーション
- Fire: 0−1 の t を 3 分割して赤→橙→白のグラデーション
- Ocean: t に応じた青系グラデーション
- Mono: t*255 のグレースケール
- Rainbow: t*360 を hue にした HSL→RGB 変換
集合内部（収束しない点）は黑にする。

【操作】
- クリック/タップ: その点を中心にズームイン（倍率 0.5 倍）
- ドラッグ: 移動に応じて視野をパン
- ホイール: スクロール方向に応じたズーム（マウス位置を中心に）
- ピンチ（タッチ）: 2指の距離比でズーム備率を変更
- ズームイン/アウトボタンとリセットボタンを表示する

【描画方式】
- canvas に createImageData で直接ピクセル書き込みを行う
- 描画は setTimeout の遅延実行にし　1忍ローディング表示を出す
- カンバス左下に現在の中心座標と倍率を表示する
- リサイズ時に再描画する

【制約】
- 外部ライブラリ不使用
- グローバル汚染防止のため即時関数（IIFE）で全体を囲む
- HTML/CSS/JS をすべて1ファイルに収める

その他