Mandelbrot・Julia・Burning Ship フラクタルをプログレッシブレンダリングで実装した

作ったもの

Fractals — https://sen.ltd/portfolio/fractals/

• 3 種のフラクタル: Mandelbrot / Julia / Burning Ship
• Canvas 描画、5 カラーパレット
• クリック & ドラッグで矩形ズーム、ホイールズーム、ドラッグでパン
• プログレッシブレンダリング（低解像度プレビュー → 本レンダリング）
• プリセットビュー（seahorse valley、mini Mandelbrot など）
• PNG エクスポート

vanilla JS、ゼロ依存、ビルド不要。node --test で 60 ケース。

Mandelbrot 本体

while (x*x + y*y < 4 && iter < maxIter) {
  const xt = x*x - y*y + cx;
  y = 2*x*y + cy;
  x = xt;
  iter++;
}

z ← z² + c を |z| > 2 になるまで繰り返す。脱出までの回数が色になる。

Burning Ship は abs を足すだけ

y = Math.abs(2*x*y) + cy;
x = Math.abs(xt);

数学的には絶対値で対称性が崩れ、炎が立つ船のような形が現れる。1992 年発見。

プログレッシブレンダリング

1/8 解像度で先にプレビューを出し、canvas に拡大表示。その後フル解像度をチャンク単位で async レンダリング（50 行ごとに await setTimeout(0)）。UI がブロックされず、進捗が見えて気持ちいい。

アルゴリズム vs 数学の差

c = -2+0i は数学的には Mandelbrot 集合の境界だが、エスケープタイムアルゴリズムでは |z|² < 4 を厳密評価するので escape 扱い。Wikipedia の「集合に属する点」リストと実装の挙動が食い違うので、テストはアルゴリズムに対して書く。

シリーズ

100+ 公開ポートフォリオ シリーズの #59 です。

• 📦 リポジトリ: https://github.com/sen-ltd/fractals
• 🌐 デモ: https://sen.ltd/portfolio/fractals/
• 🏢 会社: https://sen.ltd/