日本語

Fractal Designer

105種類のGPUレイヤーでフラクタル/生成アートを構成し、音楽でアニメーションを動かして、動画・透過画像・印刷向けに出力できるWebGPUスタジオです。

アプリを起動する 無料 インストール不要
象牙色の繊細な縁取りが付いた青緑と琥珀色のマンデルブロ渦巻き。横にフラクタルツール、5つのレイヤー、グラデーション「Dusk」、4つのキーフレームを持つタイムライン。アプリを起動する

固定されたピクセルではなく、手続き的なドキュメント

Fractal Designerのドキュメントはビットマップではなく、「記述」です。各レイヤーは、マンデルブロ集合、ボロノイ模様、ドロップシャドウといった自分の種類とパラメーターを保存し、画像はその記述をレンダリングして生まれます。そのため保存したプロジェクトは数キロバイトのJSONにすぎず、どんな解像度でも劣化なく再レンダリングでき、数値を1つ変えれば画像が劣化するのではなく描き直されます。例外は自分で持ち込んだファイル(サウンドトラック、写真、動画クリップ)で、これらは別の環境でも欠けずに開けるようにそのままプロジェクトに含まれ、その分サイズが大きくなります。

エディターには70のジェネレーターと35のエフェクト、合計105種類のレイヤーがあります。レイヤー型の画像編集ソフトと同じ感覚で、11種類の描画モード、独自のエフェクトチェーンと変形を持つグループ、色・グラデーションへの近さ・別レイヤーの輝度によるマスクを使えます。2Dレイヤーはどれも傾けたり奥行き方向へ押し下げたりできます。処理はすべてWebGPUでGPU上で行われ、各レイヤーはパラメーターのハッシュでキャッシュされるため、実際に変わった部分だけが再計算されます。

フラクタルの種類とテンプレート

マンデルブロ、ジュリア、Feather、Lyapunov、Kaliなどの脱出時間フラクタル、自身のパラメーター空間上に描くHénon、Duffing、Ikeda、Chirikovのカオス写像、レイマーチングによる6種類の3Dフラクタル、平面や立方体を埋める空間充填曲線、パーティクルアトラクター、植物とLシステム、ドメインワーピングやプラズマ、大理石などの有機的なパターン、図形、グラデーション、テキスト、ASCIIアート、そして手持ちの画像や動画まで揃っています。ツールは「脱出時間フラクタル」「カオス写像」「曲線と構成」「3Dフラクタル」に、エフェクトは「色とトーン」「ぼかしと光」「ゆがみ」「網点とレトロ」に分類されています。

16種類のスターターテンプレートは完成した構図から始まり、パラメーターを1つずつ分解して学べます。テンプレートはプレビュー付きのカードから選べ、キーボードでも操作できます。画像の上に表示されるドキュメント名は、保存や書き出しのファイル名としても使われます。

深いズームから大判印刷まで

  • 専用のマンデルブロレイヤーは摂動論を使います。CPUで倍精度の参照軌道を、GPUで単精度の差分を計算するため、単純なシェーダーがブロック状に崩れる地点をはるかに超えて拡大できます。ジュリア、Burning Ship、Tricorn、Celtic、Spider、Phoenixも、自動で切り替わる演算精度により深いズームで細部を保ちます。
  • キーフレームはシーン全体のスナップショットなので、まったく異なるレイヤー構成のキーフレーム同士でもクロスフェードできます。カメラはズームとパンを連動させるVan WijkとNuijの手法で補間され、オニオンスキンや往復再生も使えます。
  • 音楽を読み込むと、あらかじめ音量、低音、中音、高音、アタック、明るさのカーブに解析され、任意の数値パラメーターを数式で結び付けられます。時間、進行度、手でタップしたテンポ、ズームの深さも使えます。解析を先に済ませるため、書き出した動画はプレビューとフレーム単位で一致します。
  • 画像や動画クリップは通常のレイヤーとして変形、合成、マスクが可能です。クリップは開始位置、長さ、負の値も取れる速度でトリミングでき、音声は書き出すサウンドトラックにミックスされます。
  • グラデーションエディターはアルファを考慮してOklab空間で補間し、ブラウザー内のライブラリーに保存できます。画像を2次元のグラデーションとして使うことも可能です。ライティング効果は明るさや不透明度から高さマップを作り、色相を保ったまま陰影を付けます。
  • 完成した作品は、ツールを隠した全画面表示で見せられます。
  • アルファチャンネル付きPNG、劣化のないループ可能なアニメーションPNG(APNG)、ブラウザーがエンコードできる場合はMP4(H.264とAAC)やWebM(VP9とOpus)、物理サイズ・300 dpiで継ぎ目のないタイルとしてレンダリングするPDF(A1ポスターも可)に書き出せます。プロジェクトはJSONとして保存します。

実際の作業の流れ

  1. スターターテンプレートを選ぶか、空の透明なページから始めます。
  2. インデックスのツールをクリックするかキャンバスへドラッグしてレイヤーを追加し、レイヤーパネルで並べ替え、グループ化、マスクを行います。
  3. レイヤーを選び、インスペクターでパラメーター、パレット、変形、マスクを調整します。キャンバス上をドラッグして移動し、ホイールでズームします。
  4. 動きを付ける場合は、タイムラインでキーフレームを記録して再生します。
  5. ページ形式を決めて、PNG、動画、アニメーションPNG、PDFのいずれかに書き出すか、後で続けられるようプロジェクトをJSONで保存します。

どんな人に向いているか

ソフトウェアをインストールしたりシェーダーを書いたりせずに、フラクタルや手続き的な画像を作りたいデザイナー、ジェネレーティブアーティスト、開発者に向いています。レイアウト用の透過素材、ループアニメーション、大判印刷など、実際に使えるサイズで成果物が必要な場合に役立ちます。テンプレートは完成した構図から始まるので、フラクタルの数学の知識は不要です。レイヤー、描画モード、マスクは一般的な慣習に沿っているため、レイヤー型の画像編集ソフトに慣れていると取りかかりやすくなります。

ローカル処理と動作条件

すべてブラウザー内で完結します。アプリにはネットワーク処理のコードが一切なく、通信、テレメトリー、解析、第三者サービスはありません。画像、プロジェクト、設定が端末の外へ出ることはなく、レンダリングもローカルのGPUで行われます。ブラウザーのローカルストレージには、作業セッション(ドキュメント、アニメーション、表示)、配色、パネル幅、インデックスのサムネイルサイズ、書き出し設定、グラデーションライブラリーが保存され、サイトデータを消去すれば削除できます。埋め込んだメディアはセッションをまたいでブラウザーのストレージに保持されますが、プライベートウィンドウ、ストレージの消去、ディスク容量不足で失われることがあります。プロジェクトファイルには常に含まれています。同時に開けるドキュメントは1つで、自動保存はすべてのタブで共有されるため、2つのタブを開くと互いのセッションを上書きします。アプリの状態はURLに含まれず、プロジェクトはJSONファイルで共有します。

WebGPUは必須で、ソフトウェアやWebGLによる代替はありません。動画の書き出しにはさらにWebCodecsが必要です。開発とテストはデスクトップ版ChromeとEdgeの最新版で行われていますが、WebGPUに対応したほかのブラウザーでも使えます。エディターはデスクトップのウィンドウ向けで、スマートフォンやタブレット用のレイアウトはありません。幅の狭いウィンドウではパネルが折りたたまれます。インストールできず、再読み込みにはネットワークが必要なため、オフラインでは使えません。動画にはアルファチャンネルがなく、透明部分はページの背景で塗りつぶされるので、透明度を残したい場合はPNGかAPNGを使ってください。PDF書き出しでは画像が白背景に統合されます。深いズームは参照軌道の倍精度によって限界があり、NewtonとNovaにはライティングがありません。アプリのインターフェースはドイツ語と英語です。

エディターはキーボードで操作できます。元に戻す・やり直し、削除、複製、コピーと貼り付け、グループ化、保存、再生・一時停止にショートカットがあり、タイムラインもキーボードで移動できます。テキスト入力中はショートカットが働きません。操作部にはラベルがあり、ライトとダークのテーマはOSに追従し、文字のコントラストはWCAG AAを基準に測定されています。既知の課題として、レンダリングされた作品はcanvas内にありスクリーンリーダーからは読み取れません。また、レイヤーをグループに入れる操作は今のところドラッグでしか行えず、アニメーション再生は動きを減らす設定に対応していません。