Marblique

墨流し（マーブリング）と Web の流体シミュレーションを重ねたインタラクティブアート作品。六本木アートナイト 2025（2025/09/26–28） で株式会社GENEROSITY のブースとして展示。手をかざすとその位置から色が溢れ出し、別の誰かが伸ばした手の色と画面上で絡み合う。

社内理念「リアルとデジタルの境界を超えた体験」と、古い紙染めの技法をデジタルの流体力学で再演したかったところから出発している。

Context

• イベント: 六本木アートナイト 2025 — 「都市とアートとミライのお祭り」をテーマに、六本木エリア全体が会場の年 1 回の大規模アートフェス
• 会期: 2025/09/26 18:30 – 2025/09/28 20:00（金・土・日の 3 日間）
• チーム: 社内有志 4 名
• 出力: 会場で多数の来場者に体験してもらった

Pipeline

graph LR
  Cam["Webcam<br/>(getUserMedia)"] --> MP["MediaPipe<br/>Tasks Vision<br/>(WASM, hand landmarks)"]
  MP --> IdT["Hand ID Tracker<br/>(自前 / 近接 + TTL)"]
  IdT --> Ctrl["Shared Controls<br/>force + dye handler"]
  Palette["Palette Cycle<br/>(CSV or preset)"] --> Ctrl
  Ctrl --> Fluid["Three.js Fluid Sim"]
  Fluid --> Shaders["GLSL shaders"]
  subgraph Shaders["GLSL shaders (Navier–Stokes)"]
    direction LR
    Adv["advect"] --> Div["divergence"] --> Jac["jacobi"] --> Sub["gradientSubtract"] --> Splat["splatMulti / dyeSplatMulti"]
  end
  Shaders --> Canvas["WebGL2 canvas"]

Tech

• MediaPipe Tasks Vision (WASM) — ブラウザだけで手の 21 個のランドマークをほぼ 60fps で取得。@mediapipe/tasks-vision を postinstall で public/mediapipe/ にコピーしてオフライン化
• 自前 Hand ID Tracker — MediaPipe は毎フレーム別々の検出結果しか返さないので、位置の近接 + TTL で「同じ手」を追跡するトラッカーを実装。これが無いと色が毎フレーム入れ替わる
• Three.js + GLSL — 古典的な非圧縮 Navier–Stokes を ping-pong テクスチャで解く自作シミュ。advect / divergence / jacobi（圧力ソルバ）/ gradientSubtract / splatMulti（速度）/ dyeSplatMulti（色素）の 6 枚のフラグメントシェーダで構成
• Palette Cycle — 10 秒ホールド + 5 秒クロスフェードで色群を巡回。CSV アップロードで任意パレット差し替え可
• Three.js をリアル HW に投影 — 会場の大型ディスプレイに向けて描画解像度・アスペクト比・カメラ位置を会場当日に調整

Pivots

作品として成立させるまでに 2 回大きく方針を変えた。

1. 全身検出 → 手検出に絞る

最初は姿勢全体の動きを流体に反映させる設計だったが、

• 「何を動かしているのか」がプレイヤーに伝わらない
• ビジュアルがただの揺らぎに見える

→ 手（ランドマーク）だけに絞り、指の位置が色の発生点・流れの発生源であることを明示化。「自分が触って混ぜている」実感が出た。

2. iPad 操作 → カメラのみ

来場者数が多く体験回転率を上げる必要があった。当初予定していた iPad による色選択 UI を廃止し、全操作をカメラだけに寄せた。説明なしで並んだ人の順にそのまま手をかざせる体験に変えた結果、列がスムーズに捌けるようになった。

3. 操作性 → 「マーブリング感」

インタラクション応答性を高くしすぎると、色が即座に拡散して「デジタル感」が強くなる。墨流し特有のゆっくりと混じり合う濃淡が残るよう、消散率・粘性・splat 強度を展示前日まで調整。

Design Principles

• Wordless — 会場に説明書きは最小限。手をかざす以外の動作を要求しない
• Multi-hand — 複数人の手が同時に認識される。他人と色が絡み合うことそのものが作品の一部
• Palette as tone — パレットの巡回で全体の気分が変わる。同じ作品が 1 時間ごとに別の絵を描く

Links

• 制作記
• 六本木アートナイト 2025 公式サイト