( redistribution.html )

redistribution は、画像やポインタから生成した密度場を使って、画面上の像やグリッドを再配分するデモ。画像の勾配エネルギーから「圧縮されにくい」列と行を求める image source と、ポインタ入力で波動方程式を駆動する field source を切り替えながら、密度がレイアウトや像の形にどう作用するかを確認できる。 表示側は、WebGL2 による warped image と Canvas 2D による density grid の2種類を持つ。warped image では、1次元密度から逆 CDF の LUT を作り、x 軸・y 軸を分離して画像を再サンプリングする。density grid では同じ密度を 8x8 のトラック幅と高さに変換し、セルの面積がどのように再配分されるかを直接読めるようにしている。 実装面では、source と substrate を小さなレジストリとして分離し、同じ DensityField を複数の出力基板に流し込める構成にしている。ポインタ、ドラッグアンドドロップ画像、キーボード操作、prefers-reduced-motion、WebGL context loss への対応も含め、Redistribution の基礎アルゴリズムを検証するための最小限のインタラクティブなデモとして作っている。