六本木アートナイト2018

Pocket

今年の5月に行われた六本木アートナイトでまたCALAR.inkの面々と、
観客参加型のイベントをやってきました。
やっと重い腰を上げて動画編集したので、遅くなってしまいましたが振り返りと作品紹介をしたいと思います。


毎回CALAR.inkの制作ではストーリーと観客の体験をどう織り交ぜていくかの議論が全体工数の8割くらいを占めます。
ストーリーだけ詰めても観客が参加できる要素がうまく入れられなかったりするし、
逆にインタラクティブなもの沢山入れるとストーリーがつながらなかったりするし、
どちらも並行で考えないといけないので毎回とても苦労します。
脚本の作り方とか本を読んで勉強したりもしたけど、
CALAR.inkが作りたいものにはそれらのワークフローはあまりハマらないことも多くて、
まだまだ手探り状態です。
そういった議論が全体の8割くらいで、そしてどんどん実装の時間が無くなり…(死)
まぁそもそも展示やるって決めてから考え始めているのも原因の一つで、
予定がなくても案を考えておくっていうのは一つ解決策としてあるかも。
(しかし、結局スケジュールが入らないと動かないという怠惰、笑)

話が逸れましたが、そんな風にとても長ーい時間をかけてデザインした今回のストーリーと観客の体験はこんな感じになりました。

ストーリー

舞台は不思議な美術館。
この美術館では人々が見た夢が絵となって飾られています。
しかし、ある日それらの絵が突然消えてしまいました。
そこで絵の中に入ることのできる特殊能力を持った主人公たち(観客)が、
絵の中の世界に入り、夢の絵のパワーの源である夢のかけらというものを集めることによって、
絵を修復していきます。
というストーリー。

体験の流れと仕組み

会場では最初に、簡単なブリーフィングと夢のかけらを探すための魔法の筆が渡されます。
魔法の筆にはNFCタグが仕込んであって会場にたくさん仕掛けられたタッチスポットを見つけ出し、
タッチすると物語が進行します。
タッチスポットはなんと50か所以上!

大量のNFC

大量のNFC

会場には案内役の役者さんもいて観客を誘導したりライブペインティングしたりして場を盛り上げます。

タッチポイントはいろんな種類があって、模型とかパイプとか小道具に仕込まれていることもあれば、
壁の中に仕込んであってプロジェクションマッピングでインタラクティブに絵が動いたりもします。

NFCでタッチした情報はいったんNode.js製のサーバに送られます。
会場のプロジェクションマッピング制御はUnityで行っているので、
Node.jsサーバとUnityをUDPで繋ぎ連携させています。

このシステムはかなり汎用的なのでもっといろんな場所でコンテンツを変えて展開できそうじゃないですか?
すごくないですか?
と言ってもここまで書いた部分、わたしは全く実装しておらず坪倉氏と瓜田氏が頑張ったのでお問い合わせは彼らまで(笑)

自分は何をやってたかというと、観客の体験内容に応じてイラストを生成する部分を担当しました。
実は会場は2階構成になっていて、下の階(ビルの4F)で上記のシステムが動いていて、
観客はそこで遊んだ後、上の階(ビルの5F)に案内されます。

そこには自分が修復した絵が飾られています。
それらの絵は観客それぞれがタッチした場所によって違ったパターンが生成されるようになっているので、
同じものが2つと無いその人だけの絵になっています。

この部分は、Node.jsサーバから観客がNFCにタッチしたログをvvvvに送り、その内容を元にイラストを生成。
またvvvvで2台のプリンターを制御して印刷。
これらの過程を観客が下の階で遊び終わり、上の階にやってくるまでに行いました。

自分が体験した内容が入った絵がその場で実物となっていて、しかもこの絵はお持ち帰りOKにしています。
自分は上の階の裏方部屋にいて、プログラムと2台のプリンターのお守りをしながらお客さんの反応を伺っていたのですが、
自分が想像していた以上に絵を見た方々の反応がとても良くて、
本当に報われた! ありがとう!!!という気持ちでいっぱいでした。

イラスト生成/印刷に時間がかかったり、プリンターのインクがすぐ切れたりで運用大変だったのですが、
他のスタッフの方々の協力で何とか乗り切ることができ本当にありがたく思っています。
この辺りはプログラムの改善の余地あり。

イラスト生成

イラスト生成のアルゴリズムはどうしようかいろいろ迷い、
当初は力学モデルというものを使ってうまいことイラストにならないか試したものの、
意味のあるシルエットを形成するのが難しかったので不採用。

結局は愚直にピクセルの空いている部分を探し広い部分から埋めていくという方法にしています。
これはサークルパッキングと呼べるのかわかりませんが、結果としては似たようなものが出力されます。
http://www.tylerlhobbs.com/writings/circle-packing
ピクセルを畳み込み処理で空白を探しています。ちょっと重いかと思ったのですが、
古くて弱いGPUの乗ったノートPC1台で何とかしのげました…。
(あらかた実装が終わった後にサークルパッキングと名前がついている手法があると知ったのでどういったアルゴリズムが一般的なのかは調べていません、汗)

イラストのシルエットはあらかじめ用意しました。
もし気が向けばシルエットも自動で生成する仕組みを考えたいところです。
敷き詰めるイラストを変えればいろんなバリエーションが楽しめるので、
掘り下げればもっと面白い表現もできそうだと感じています。

個人的には今回のプロジェクトは、ユーザの行動ログを基にしたジェネラティブアートだと言う位置付けで取り組んだので、
その部分が大変うまくいって満足しています〇

てな感じで今回もいろいろと仕掛けを用意しました。
しかしイベントの都合上、これら全部一夜限り(正確には2日間)で完全撤収!
非常にリッチなイベントとなりました。
次回はまだ決まっていませんがまた機会があればどこかでお会いしましょう~。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください