出典のある44の数式を、動かして、組み合わせて、書き出す。ジェネレーティブ・パターンのウェブアプリを無料公開しました。
数学的アルゴリズムで視覚伝達する、ジェネレーティブ・パターン装置「O®b.（オーブ）」を制作し、公開しました。ブラウザだけで動き、インストールもアカウント登録も要らず、無料でお使いいただけます。
扱うのは、6つのカテゴリに分かれた44のモデルです。葉序（Vogel, 1979）、ローレンツ・アトラクタ（Lorenz, 1963）、ペンローズ・タイル（Penrose, 1974）、ジュリア集合（Julia, 1918）など、どれも出典のある数学のモデルです。描いている数式は、現在のパラメータの値を代入した形で常に画面に表示されており、パラメータを動かすと、絵と一緒に数式の値も変わります。
画面全体がキャンバスで、どこをドラッグしても、そのモデルの主な2つのパラメータが変わります。パターンのバリエーションは、モデル（44）・プリセット（217）・対称展開（8種）の組み合わせで広げ、さらに線の座標そのものを変形するトランスフォーム（8種）と、画面上で動かすモーション（8種）を重ねられます。
企画・UI設計・フロントエンドの実装までを私が一人で行いました。ここからは、O®b.の実装の技術的なポイントを紹介します。
外部ライブラリを使わず、すべての図形を数式からSVGで生成する。
O®b.の図形は、すべて数式からSVGの文字列として生成しています。画面の描画にCanvasやWebGLを使わないのは、画面に見えている絵と書き出したファイルを一致させ、FigmaやIllustratorで再編集できるようにするためです。Canvasを使うのは、PNGを書き出すときに、そのSVGを画像にする場面だけです。
外部のライブラリは使っていません。ボロノイ分割・ドロネー三角形分割・等高線・タイリングなどの計算も含めて、約3,650行のES Modulesで実装しています。
対称展開（8種）は、巡回群 Cₖ・二面体群 Dₖ・壁紙群 pmm／p4 などの群論にもとづきます。画面上では1つの図形を<defs>と<use>で複製してDOMを軽く保ち、書き出すときは複製を実際のパスに展開します。そのため、書き出したSVGには<use>による参照が残らず、背景も透過のまま、そのまま編集できます。
パラメータとシード値が同じなら、どの端末でも同じ絵になる。
乱数は、シード値（乱数の初期値）から毎回同じ並びを作る方式にしています。カオス的なモデル（アトラクタなど）は、ブラウザや端末ごとのMath.sin／Math.cosの計算結果のわずかな差で軌道がずれないよう、四則演算だけで実装したsin／cosを使っています。画面の端まで模様を広げる17のモデルは、ウィンドウの大きさが変わっても、同じ場所には同じ絵が描かれます。
ドラッグ中は毎フレーム描き直すため、1回の生成は16ms以内を目標にし、テストでは上限を400ms・700kBとして検査しています。本番用のファイルは、index.htmlが約10kB、CSSが約47kB、JSが約199kBです。
ライト／ダークの切り替えはView Transitions APIで押した位置から円形に広げ、対応していないブラウザでは色のトランジションで代えます。「動きを減らす」の設定（prefers-reduced-motion）では、アニメーションをすべて止めます。
企画、UI設計、フロントエンド実装までを一貫して行うことで、操作の細部まで統一感のあるWebアプリケーションを制作します。
O®b.のUIはモノクロを基調としながら、任意設定で描いた模様を専用カラーバから選べるようにしています。常に見えているナビメニューも最小限にし、詳細なアクションは、選択したボタンからモーション表示で出現するインタラクティブなメニューUIを採用。画面の設計も数値計算の実装も私自身が行っているため、動きの長さや反応の細部まで、設計の意図どおりに作り込めます。
こうしたWebアプリケーションの企画・設計・実装は、お仕事としても承っています。詳しくはWEBアプリケーションのページをご覧ください。O®b.のほかの自作ツールはPRODUCTにまとめています。
O®b. の詳細とアプリのご利用はこちら。
Generative Pattern Instrument. ジェネレーティブ・パターン装置「O®b - オーブ」 Designed and Developed by HIGASHIYUKI®