会社名義でデジタルアートを作って展示した話

作品としてのまとめは /works/marblique にあります。

はじめに

六本木アートナイトというイベントに、弊社の有志メンバーでアート作品を出展しました。 私は開発者として実装を担当したので、そのプロセスをレポートします。

アイデア出し

最初に決まっていたのは「六本木アートナイトに応募しよう！」ということだけ。 何を作るかはまったくの白紙でした。

ただ、弊社の理念である「リアルとデジタルの境界を超えた体験の提供」に沿って、伝統的・物質的な“リアル”の要素と、先進的・非物質的な“デジタル”の要素を融合させる方向で進めようという意見が出ました。

ブレストでは、風鈴・風車・千羽鶴といった日本的モチーフや、水を使った仕掛けなどさまざまな案が上がりましたが、最終的には「マーブリング（墨流し）」の技法を活かした作品を制作する方針に決定しました。

初期型

初期段階では、複数の iPad を操作端末として使い、それぞれの操作を複数の画面に反映させるシステムを開発していました。

しかし、描かれるビジュアルがあまり印象的ではなく、チーム内でも「何を表現したいのか」が曖昧になってしまい、方向性の見直しが必要になりました。

第二版

次のバージョンでは、タッチした場所に好きなエフェクトをかけられる方式に刷新し、操作の楽しさを重視しました。

インタラクションとしては格段に楽しくなりましたが、肝心の「マーブリング感」が失われ、背景に意味が見えにくいという問題が発生。 また、運営スタッフとの話から、多くの来場者が訪れることを想定し、体験の回転率を上げる仕組みも必要になりました。

第三版

そこで、マーブリングらしい水面をかき混ぜる動きを活かしつつ、回転率向上のために iPad での操作を廃止し、カメラインプットを活用する方式へ変更しました。

（↓分かりづらいですが、人のシルエットをベクトルに変換しています）

しかし、効果が強すぎる＆見た目の分かりづらさから、最終的には手だけを検出する方式にシフトしました。

最終版

最終的な作品では、水面をかき混ぜる動作に加えて、色を塗る動作も追加。 Mediapipe を使ってユーザの手を検出し、直感的に操作できるインタラクティブなアート作品に仕上げました。

配色パターンにもこだわり、Warp エフェクトによって濃淡が自然に出るよう設計しています。

最終盤のシステム構成

細部は省きますが、全体の構成はこんな感じです。 web技術で作っています。（mediapipeもweb版で動かしています。）

graph LR
  Cam["Webcam"] --> MP["MediaPipe<br/>Tasks Vision"]
  MP --> IdT["Hand ID Tracker"]
  IdT --> Ctrl["force + dye handler"]
  Palette["Palette Cycle"] --> Ctrl
  Ctrl --> Fluid["Three.js Fluid Sim"]
  Fluid --> Shaders["GLSL shaders<br/>(Navier–Stokes)"]
  Shaders --> Canvas["WebGL2 canvas"]

ボツ案

デジタルに行き過ぎてる奴ら

下記のコードをテスト用に借用させていただき、ドラッグ時の流体的な挙動を追加したやつ。マーブリングとしては正しいけど面白みはなかったので没に。

その他

• 設営作業が想像以上にハードで、体力的にも大変だった
• 直前までコードを更新しており、本番当日にデバッグと修正を実施する羽目に
• Mediapipe は RGB ベースの認識なので、暗所や逆光に弱い。次回は測域センサの導入を検討
• 特に子どもは「スクリーン＝触るもの」と直感的に認識していたため、触る動作を拾える測域センサとの相性が良さそうと感じた

元記事: Qiita