Vol. IThe Flux ManualMMXXVI

Flux Bloom

A field manual of procedural forms
— 生成芸術 六種 の 手引き

Six algorithms · six palettes · six parameters · one seed
printed in browser · editioned in code · 〇 reproduction free

の小冊子は、 数学が生むかたち を ブラウザのなかで すぐ見るための 道具です。 紙の上では 著者と読者が 一対一で 出会いますが、 generative art では 著者と作品の あいだに もう一つ — 偶然 — が 挟まる。 そこで FluxBloom は、 6 つの古典的な アルゴリズム、 6 つの色相、 6 つの可変パラメータ、 そして ひとつの整数 seed を、 同じ卓に 並べました。 何度でも 振り直し、 何度でも 再現できます。

── Specimen — 作品見本 ──

上の見本は あなたの ブラウザのなかだけで 計算されています。 数値を 動かすたびに、 別の作品が 同じ canvas に 描き直されます。

The Six Plates

図版 六種 / six algorithms in flux

フロー場Flow Field

256 個の擬似乱数 順列テーブル と 8 方向の勾配ベクトル を、 Hermite 多項式で滑らかに 補間して 2 次元 ノイズを得る。 場の勾配を読みながら 80〜600 個の粒子が 80〜300 ステップ歩く。 粒子が描く軌跡は 自然界の流体や 風の通り道に近い。

noise(x, y) → angle → step

ボロノイVoronoi

平面に 8〜88 個のシードを 落とし、 各点から 最近傍のシードまでの距離を計算する。 同じシードに最も近い領域が ひとつの細胞になる。 結晶 / 葉脈 / キリン の柄 / 都市の影響圏に似た 分割パターンが生まれる。

argmin |p − s_i|

樹形L-System

幹から 2〜3 本に枝分かれし、 各枝が さらに 同じ規則で 枝分かれする。 角度・長さ・本数を ランダムに 揺らすと、 同じ規則からでも 千差万別の植物形態が 生まれる。 5〜10 段の 再帰で 末端に 葉のドットを置く。

F → F[+F][-F]

リサジューLissajous

x = sin(at + φ), y = sin(bt) の 周期曲線。 a と b の整数比と 位相 φ で 蝶 / 結び目 / 星形 / 円 が 連続的に変化する。 2 〜 12 段 重ね合わせると、 干渉縞のような 軌道網ができる。

x=sin(at+φ), y=sin(bt)

等高線Contour

Perlin ノイズを 3 オクターブ 重ねた 仮想的な地形を、 一定間隔の高さで 水平に切断する。 切断面の 連続線が 等高線となり、 地図 / 指紋 / 砂浜の波紋 に似た 重層的な縞模様を作る。

fbm(x, y) > t

曼荼羅Mandala

原点から 4 〜 16 軸の鏡映で 1 つのドットを 同心円状に 複製する。 同心リングの 半径を sin 関数で 波打たせ、 ドットの大きさを Perlin で 揺らすと、 仏教曼荼羅 / 万華鏡 / 雪の結晶に似た 神聖幾何学が現れる。

symmetry × N

Color Studies

色相 六種 / palette references

Operator's Notes

操作員の手記 / marginalia

i.

What is this booklet for?

FluxBloom は、 6 つの古典的な generative art アルゴリズム — Perlin の フロー場、 Voronoi の領域分割、 Lindenmayer の L-System、 Lissajous の周期曲線、 fbm の等高線、 そして対称ミラーによる曼荼羅 — を、 ひとつの ブラウザ内エンジンとして 提示する 小さな ラボラトリー です。

ii.

Reproducibility

全ての乱数性は 1 つの整数 seed から 線形合同法 (LCG) で 派生します。 同じ seed と 同じパラメータなら 必ず 同じ作品が出ます。 ⌗ URL コピー を押すと、 アルゴリズム / パレット / 6 パラメータ / seed が URL の query にパックされ、 誰かが そのリンクを開けば 完全に同じ作品が 復元されます。

iii.

Why pure JS, no libraries

Perlin noise / Voronoi 近傍探索 / L-System 再帰 / リサジュー / fbm 等高線 / 対称ミラー — どれも 数学的に小さく、 30 〜 60 行で 自前実装できる。 p5.js / Three.js / d3 等を 読み込まずに、 ページ を開いた瞬間に 描画が始まる軽さを 優先しました。

iv.

License & commercial use

出力された PNG は あなたの作品です。 商用利用 / SNS アイコン / 壁紙 / NFT / 名刺 / Tシャツ POD / 同人誌 / プレゼン背景 — 全て自由に。 透かしも クレジット強制もありません。 アルゴリズム自体 (Perlin / Voronoi / L-System / Lissajous) は 数学概念であり 著作物ではないため、 出力に 第三者の権利は 入りません。

v.

Where the noise comes from

Perlin ノイズは 1985 年に 映画 「TRON」 の質感生成のために 考案されたもので、 256 のシャッフル順列テーブルと 8 方向の勾配を bilinear 補間する わずか 30 行のアルゴリズムです。 Hermite 多項式 6t⁵ − 15t⁴ + 10t³ で 区間境界を 滑らかにし、 連続的に変化するランダム値を 得ます。

vi.

Privacy

あなたが触ったすべての操作、 すべての seed、 すべての出力 PNG は、 あなたの ブラウザ JavaScript の中だけで処理されます。 サーバーに 何も 送信されません。 ネットワーク タブで 確認可能です。

vii.

Related works in this lab

ラボの ジェネレーター 7 本柱 のうち、 type-forge (3D 文字)・hue-deck (配色)・patch-pad (シンセ)・glyph-forge (紋章) は 「題材を与えると 形を作る」 ジェネレーター、 raise-draft (給与交渉)・rent-cut (家賃値下げ) は 「文面を作る」 ジェネレーター。 FluxBloom は その 7 本目で、 唯一 「何も与えなくても 形が始まる」 = procedural generative side を 担当します。