この課題をデジタル領域の広告制作プロダクションである私たちが持つ「伝える力」と「デジタルテクノロジー」で解決できないかと考え Synchronized Aquarium (シンクロ アクアリウム) という作品をつくりました。

Synchronized Aquarium (シンクロ アクアリウム) は「遊泳の美しさ」、「模様の面白さ」、「生態のヒミツ」といった魚の持つ魅力を映し出す不思議な水槽です。

この作品では、水槽の前面に貼った透明フィルムに、自由に泳ぐ魚の動きにシンクロした映像を重ねて投影しています。

リアルタイムに魚の軌跡、種類を認識し、魚の魅力をモチーフにさまざまな映像演出を行います。

従来の水槽の鑑賞体験をアップデートし、魚の魅力により気づき、学び、感動できる新しい水槽の鑑賞体験を目指しています。

魅力を伝える２つのモード

現在、このシステムには「ショータイム」、「吹き出し」という２つのモードがあります。

（１）魚に心を動かされる「ショータイム モード」

このモードでは「遊泳の美しさ」「模様の面白さ」をモチーフにした映像を音楽と魚の動きにあわせて、水槽に投影します。
泳ぐ魚に映像を重ねることで、映像が観賞魚の持つ本来の美しさを際立たせる補助線のような役割を担います。
また、映像を定期的にアップデートすることによって、シーズンにあわせた演出をすることが可能です。

（２）魚について学べる「吹き出し モード」

このモードでは、「お魚の名前、出身地」や「隠れた生態のヒミツ」などを魚自身が吹き出しで話してくれます。
説明パネルと水槽内の魚を照らし合わせて見る必要がなく、水槽を眺めているだけで図鑑で得られる知識を学ぶことができます。
魚の種類ごとに口調を変えたり、キャラクターを付けることで、より楽しく魚について学ぶことができます。

設置イメージ

現在のシステムは水槽の後ろからカメラで魚の位置をトラッキングし、水槽の前面に貼った透明フィルムに映像を投影しています。

HACKist 4th Exhibition、SXSW2018への出展、博報堂アイ・スタジオのエントランスでの展示風景はこちらです。

※ 弊社のエントランスでは６月末までこちらの水槽を展示しております。

Future Work

こちらの作品に興味があるクライアント or パートナーさまを募集しております。

(1) パッケージのカスタム販売

現在わたしたちがもっている水槽ソリューションに興味があるクライアントさまを募集しております。

(2) 未来の水槽のありかたを一緒に探れるパートナーさま募集

大型の水槽で実施できるよう研究開発を進めたいと思っています。
未来の水槽のありかたを一緒に探れる、大型水槽をお持ちのパートナーさまを募集しております。

問い合わせ先

ご興味がある方はお問い合わせ用フォームより、お気軽にお問い合わせください。

※ もし作品を「うちの施設においてみたい」という方がいらっしゃいましたら、ご一報ください。連絡方法はこの記事の下のほうです。

PLUS ANIMA ってなに？

PLUS ANIMA はモノとコミュニケーションをするためのインタフェースです。

「モノとおしゃべりできたらな〜」と思ったことありませんか？ 「食べ物」にオススメの調理法を聞ききたい。「カメラ」の詳しいスペックがよくわからないから説明をしてもらいたい。「博物館の土偶」から歴史の話を詳しく聞きたい。「ぬいぐるみ」と寂しい時におしゃべりしたい。などなど…etc

PLUS ANIMA は ディープラーニング ＋ プロジェクションマッピング の技術によって、モノに魂 (ANIMA) を宿し、擬人化した演出をすることで、「人とモノとの直接的なコミュニケーション」の実現をします。

PLUS ANIMA では「魂が宿ってるかのように振る舞い、擬人化され、コミュニケーションのとれるモノ」が、今までの人とモノとの関係をアップデートし、人がモノと触れ合う行為をより楽しく、直感的に拡張すると考えて、取り組んでいます。

くわしくはこちらの動画をご覧ください。

どうやって使うの？

使い方はとてもシンプルです。

ようは、「モノをテーブルにおくだけ」で、モノに魂がやどり、勝手にしゃべりかけてきます。
モノからの質問には YES or NO ボタンに手をかざすと、返答できます。

どんなユースケースを想定しているの？

「モノを擬人化し、おしゃべりさせる」テクノロジーはさまざまな場面での使い方が想定できます。その中で、私達がおもに考えている 教育、セールス、エンタテイメントの 3 つのシーンでのユースケースをご紹介します。

教育施設（博物館、科学館など）での使い方

博物館、科学館などの教育施設の展示品が子供たちへ自分自身の成り立ちついて説明をすることで、より直感的にその展示物への理解を深めることができる、と考えています。

歴史的な壺や、化石が、たとえば、「私はマンモスの牙です。私が若い頃は、こんな体してたんですよ〜。私に含まれる化学成分が◯△✕だから、縄文時代のものだとわかり…etc」と映像とともに、自身の成り立ちについて、わかりやすく解説してくれるコンテンツを作ることができます。

セールスでの使い方

小売店で商品が自分自身についてのセールストークをしたり、生活者の商品についての疑問点を解消したり、また、生活者の声を集めてPDCAを回すための装置としても、役立つのではと考えています。

たとえば、食品売り場で、じゃがいもを乗せたら、「にんじんも一緒に買って、カレーにして食べるとおいしいよ」と、調理法や一緒に買うとよい品をレコメンドしてくれたり。

家電売場で、カメラ同士が会話をはじめて、「カメラAくんは高いよね。でも、画質が僕に比べるといいよね。」などと、わかりやすく商品スペックの比較をしてくれたり。

エンタテイメントでの使い方

モノを擬人化させることで、アミューズメント施設の世界観を効果的に演出するためのツールとしての利用法を考えています。

風船をもって、てくてく歩いていると、あるエリア内では、ふつうの風船に、突然、魂が宿り、顔がついて、「Welcome!」と風船がしゃべりはじめ、来場者を驚かせたり。その風船が施設内を案内してくれたり。といったユースケースを想定しています。

どんなテクノロジーが裏側で動いているの？

「モノにまるで魂が宿ってる」という演出を行うための裏側のテクノロジーについて説明します。

ディープラーニングによる物体認識

PLUS ANIMA ではモノにセンサーやタグなどは一切埋め込んでいません。

事前に学習させておいたモノの画像データをもとに、テーブル上部に設置されたカメラで撮った画像から、「そのモノがはなに？」という物体認識をしています。そのため、モノにセンサーやタグなどをつける必要がなく、商品をありのままの状態で演出させることができます。

✨ プロジェクションマッピングによる演出

深度カメラ、RGBカメラの２つのカメラでモノの輪郭、色、をリアルタイムにセンシングし、プロジェクションマッピングの技術を用いて、モノへの演出をリアルタイムにジェネレートしています。

モノの形状解析からのパーソナリティ・トークシナリオ生成

独自アルゴリズムにより、モノの外見的特徴（色、サイズ、形）にあわせたパーソナリティ（性別、年齢、性格）を生成しています。また、そのパーソナリティに応じて、モノのトークシナリオを、動的に生成しています。

よくあるご質問

SXSW 2016や、HACKist展で展示をしていた際に、よく頂いたご質問を紹介させていただきます。

Q. テーブルの上にはどんなモノをのせても認識しますか？

A : あらかじめ学習させておいたものは精度が高く認識ができます。あらかじめ学習していないものでも、インターネット上から一番近そうなモノの名前を頑張って探してくるので、なんらかの認識結果が出ます。

Q. あらかじめの学習はどのようにしますか？

A : モノをさまざまな角度から動画で撮影し、認識用のデータをわたし達のほうで作らせていただきます。

Q. 2 つ以上モノをおくとどうなりますか？

A : 現状はあとにおいたモノが喋りはじめる仕様になっています。いづれは 2 つの似ているモノを置いたら、スペックの比較ができるような機能があるとよいと思っています。

PLUS ANIMA を実験的に導入して頂ける施設の方を大募集しております！

こんな感じでつくった PLUS ANIMA ですが、まだ実験的プロトタイプ段階で、世の中でまだ活用頂く機会に恵まれていません。

そこで、 「PLUS ANIMAを導入してみたい」 という施設の方がいらっしゃったら、ご一報いただけると幸いです。「擬人化されたモノの可能性」を一緒に探って、人とモノとの新しい関係性について考えられたら嬉しいです。

もしご興味ある方がいらっしゃったら、このページのお問い合わせメニューから、ご連絡ぜひお待ちしております！

/ Staff List

• クリエイティブディレクター : 望月重太朗
• 企画 ＆ プログラマー : 貴田達也 、茶谷亮裕
• デザイナー : 手塚健太郎、中川美香
• プロデューサー : 山本恭裕、館由依子
• おたすけプログラマー : 菅沼慎平

—

3月に行われた SXSW2016 での展示の様子を Gizmode さんの Twitter でご紹介いただきました！

「Hello World!（https://t.co/uHCpFfS5iQ）」by HACKist ものを置くとそれを判別して、話し始めるテーブルです。YES／NOのボタンも出てくるのでものと会話しているような気分に #SXSW pic.twitter.com/ijdLqU0j0z

— ギズモード・ジャパン (@gizmodojapan) March 14, 2016

SXSW2016 での展示の風景です。

2016/5/21と5/28、原宿Galaxy銀河系にて行われた３回目のHACKist展「DIGITAL DIVREZ」内の、DE DE MOUSEさんとのコラボレーションイベントように「人工知能ラッパー」をつくりました。

「人工知能ラッパー」ってどんなの？

「人間のラッパーさんのように、即興でラップできる人工知能を作りたい」という大目標を掲げつつも。

今回はその超初期段階として、DE DE MOUSEさんの曲のビートに合わせ、ぼくがライブ中に与えた任意のフレーズに沿って、即興でリアルタイムに以下をジェネレートするシステムを作りました。

• 歌詞 : ライム（韻）を踏んだリリック
• 歌いまわし : フロウ
• VJ : 映像

どんなライムやリリックを生成してくれるの？

こんかい、歌詞パートでは2種類の歌詞生成アルゴリズムを用意しました。

１つ目は、「シンプルにライム（韻）を踏んだワードを繰り返す」というもの。たとえば、「あんこ」と入力すると、こんな感じの結果がでます。

$ node app1 あんこ
サンゴ
音頭
ちゃんこ
鮮魚
酸素
コント
金魚
珊瑚
チャンコ
散歩
端午
インコ
店舗
元祖
雲母
田んぼ
暗渠
販路
タンゴ

2つ目は、「ライム（韻）を踏んだリリックを生成する」というもの。例えば、「”筋肉の歌”を作詞して！」と人工知能にお願いすると、こんな感じの結果がでます。

$ node app2 筋肉の歌
強烈な腹筋
饒舌なスッピン
神経もやられ退屈がfill me
神経もやられ怪物がfill me
朝から筋肉
伽耶から筋肉
唄はじまる
修羅はじまる
金色の甘い股関節
金色の甘いシャヴァネル
筋力アップだ!バーロー!
金属カムだ!バーロー!
デカく幅広い骨盤
セッタく幅広い骨盤
その眼球
その晩秋
繋ぎながら楽しい曲をCOMPOSE作詞作曲
繋ぎながら楽しい曲をCOMPOSE葉月茶道
歌声はなかなか先生、とても
カラオケはなかなか先生、とても
これは七年前の唄
これは七打点前の通夜
あなたの笑顔がかわいい第一関節
ちゃんばらの笑顔がかわいい第しり半月

それっぽい雰囲気のフレーズがでるときもありますが、意味不明なはちゃめちゃなフレーズが出るときもあるところがかわいいところでした。

２つ目のアルゴリズムはこんな感じでした。

• テーマを入力（筋肉の歌）
• そのテーマをmecabで名詞だけ抽出（筋肉、歌）
• word2vecで関連語取得（筋肉、全身、神経、腹筋、筋力、股関節、歌、唄、作詞、声、主題歌）
• その関連ワードをもとに、過去8万曲程度の歌詞を形態素解析したものを、マルコフ連鎖でつなげなおしてフレーズ生成（強烈な腹筋）
• そのフレーズに韻を踏ませる（饒舌なスッピン）

どんなフロウだったの？

フロウは人間と比べる全然できてないのですが、このパートでは、max/mspやsay・soxコマンドを使って、以下のようなことをやりました。

• バース（小節）の頭に、フレーズの頭が来るようにテンポ同期
• フレーズレベルの音程、速さ、リバーブ、エコーなどのサウンドエフェクト調整

ラップにはフレーズのはじまりを小節の頭からあえてちょいずらしするテクニックや、フレーズの中で韻を踏んでる部分だけ強調して発話するテクニックなど、いろいろ奥が深いので、そのあたりの再現もっと頑張りたいところでした。

ライブは、実際、どんな感じだったの？

本番のときの映像撮ってなかったので、togetter的にエゴサーチ結果貼り付けさせて頂きます！

AIはラッパーの夢を見るか#Hackist #DEDEMOUSE pic.twitter.com/abHpdzxOsg

— shoko (@sho1115) May 28, 2016

人工知能ラッパー登場した
#HACKist pic.twitter.com/ydbfj1CsTh

— Atsunori s (@freeman_as) May 28, 2016

DEDEMOUSE×HACKist
先週よりも進化していた人工知能ラッパーのやつ#ピ pic.twitter.com/70Rzqlg2sV

— ふあゆー (@riinuht) May 28, 2016

DIGITAL DIVERZ今週もたのしかったー(｢･ω･)｢
人工知能ラッパーが1週間で目覚ましい進化を見せてくれたのがびっくり！
もしかして人工知能にも心があるのかもな。なんてことを思った。#HACKist pic.twitter.com/J0OohIBMG3

— zun (@zun_ver0) May 28, 2016

DEDEMOUSE × HACKist 人工知能ラッパー
これ面白かった！もっと進化したの見てみたいなー！
気付いたら最後まで撮ってたけど、近すぎで全部入らず、音割れも。https://t.co/X3Oe8R3gWL

— 坂井愛 (@SAKAI168) May 29, 2016

#HACKist #dedemouse #AI

Amari.さん(@amari_amamam)が投稿した動画 – 2016 5月 28 8:12午前 PDT

DE DE MOUSEと人工知能ラッパー。 これ、とてもおもしろい。 #dedemouse #デデマウス #hackist #ai #人工知能 #ラッパー #人工知能ラッパー フナさん(@funa_22)が投稿した写真 – 2016 5月 21 8:21午前 PDT

今回、作った子の裏キャラ設定として、以下のようなのを考えておりました。

• 文脈ははちゃめちゃだけど、語彙力はすごい
• おっちょこちょいのフィメール（女子）ラッパー
• 「ヘイ」「ヨー」などテンポをとるフレーズは人工知能女子らしく「ピ ピ ピ」て言わせました

やってみた感想と、次回出演機会募集のお知らせ

人工知能によるラッパーさんの再現はまだまだ到底むずかしくて、言葉遊びを楽しむレベルのものになってしまった感じがありますが、終わったあとに、お客さんから「おもしろかったー」て声が聞こえてきたのは嬉しかったです。

わたし達としては初めての試みでしたが、１回やってみて改善点もたくさん見えたので、これで終わるのはもったいないと思っていて、今後もこの子を育てていきたいのですが、いまのところ、次回出演予定がありません！笑

なので、出演オファーやコラボのご相談など、もしありましたら、このページのお問い合わせメニューから、ご連絡ぜひお待ちしております！

※ 参考にさせて頂いたもの

ラップを学んだり、過去に「コンピュータにラップさせる」にチャレンジされていた方の事例を参考にさせていただきました。

• テレビ番組 フリースタイルダンジョン
• ラップの教科書 DVDで学ぶ超実践的ラップ講座
• Your Cosmos ライゾマティクス忘年会 2014/12/26 IDOL
• 文章中から韻を踏んでいるフレーズの組み合わせを検出する gem を作りました
• 自動で韻を踏むソフトウェア作った
• 勝手にラップをつくって歌うロボットをつくってみた
• ライムサーチ（韻踏み検索）

みんなで人工知能ラッパーを作って、人工知能ラッパー同士でのバトルとか勃発すると面白そうです

人工知能ラッパー制作チーム クレジット /

• 企画・プログラム：貴田達也
• ビジュアルプログラミング：登山元気、菅沼慎平
• アートディレクション：竹尾梓

おまけ映像

PC内での実行結果です。現場でターミナル開いてコマンドを打って本当にリアルタイムにワード生成してました。

■ どんなインタラクティブ演出をしたの？

ざっとハイライトすると。

スクリーン上のドクロがわるくちを言いながら、自由に動きまわるアイドル４人をおっかけたり。

歌って踊るアイドルの頭上から、歌詞がぼわっと出てきたり。

お客さんがサイリウムを振れば振るほど、スクリーンをアイドルの推し色ペンキで塗れたり。

ライブを聞きながら、サイリウムを振ることで、みんなで音ゲーできたり。

という演出を行いました。

また、今回はHACKistチームだけでなく、Bapa卒業生の「SyncRingチーム」さんと一緒に開発させて頂きました。HACKistチームは「舞台上のアイドルトラッキング」、Bapaチームさんは「客席のお客さんトラッキング」という分担で開発をしました。
 

■ くわしい動画もあるので、みてください！

舞台上の４人のアイドルの動きに合わせた演出です。

約３００人のお客さんのサイリウムの動きとらえたインタラクティブ演出です。

お客さんが振っているサイリウムはこんな感じでした。

技術的には、Kinectやら、赤外線カメラやらを組み合わせて実現しております。

■ ラストクエスチョンさんより次回ワンマンライブの告知

HACKistが参加する予定はいまのところないですが、ラストクエスチョンさんの次回ワンマンライブは２０１６年１月１３日＠渋谷クラブクアトロです。いろいろな手法で観客参加型ライブをされてるので、気になった方は是非チェックしてみてください。
チケットはこちらから。

■ さいごに

ラストクエスチョンさんのインタラクティブライブ演出の実施は２回目で、博報堂と、BapaのSyncRingチームさんと、HACKistで実験的に行わせていただきました。（１回目の記事はこちら。）

関係者のみなさまおつかれさまでした！

 
Credit／
▼SCRAPチーム
プロデューサー：吉村さおり
出演：ラストクエスチョン
運営：高松秀臣、佐々木惣一郎、大木啓輔

▼インタラクティブ演出（博報堂+HACKist+Bapaチーム）
企画・進行：夏海紫
プログラマー：貴田達也、茶谷亮裕、水落大
技術・映像制作：登山元気
デザイナー：児嶋啓多、山下和宏
ディレクター：木下剛

※ エンドロールより。

Ricoh Theta Sって？

Ricoh Theta Sは360度撮影ができる全天球カメラです。先週発売されたてホヤホヤです。ご存知の方が多いとおもいます。

LiDARって？

LiDARはレーザーで360度のデプスデータが撮影できるセンサーです。少なくとも家電量販店とかには売ってないので、初めて聞かれた方も多いのでは、と思います。

わかりやすく言うと、「360度＋遠距離を撮影できるKinect」。Kinectよりもかなり測定距離が長く（約100[m]とか）、その代わり、機種によりますが、仰角の画角がやや限られる（約30度とか）、という性質があります。

２つのカメラの360度データをリアルタイムに組み合わせて、映像生成しました

LiDARから得られるデプスデータを3角形で繋いで、メッシュを作って、そこにTheta SからUSB経由で得られるリアルタイム全天球映像（1280×720[px]、15[fps]）をテクスチャとして貼ってみました。場所は会社近くの高架下です。

次に、あらかじめ撮影したTheta Sのマックスで高解像度（5376×2688[px]）な静止画をテクスチャにしてみました。場所は弊社のエレベーターホールや、休憩スペースです。

やってみてわかったことは以下です。

• ２つのカメラは別物なので、どうしても撮れる映像はチョイずれしてしまう。なので、ぴったりテクスチャをメッシュに合わせるのはむずかしい。けど、ざっくり遠目にみるぶんには合っているようにみえた。
• LiDARの仰角が限られるため、その部分だけ切り取ると、リアルタイムなTheta Sの映像だと、テクスチャの解像度がやや低くなってしまった。静止画のThetaの解像度くらいだと、それなりにクッキリ見える。

なにに使えるの？

最近、360度動画が流行ってて、ふつうの360度だと、ぐるぐる見渡せて、単純な動画とくらべて「角度」は自由になるんです。

ですが、その空間上で見たい位置に動けないんです。「位置」が不自由なんです。

今回のように、空間を3Dスキャンして、360度撮影を組み合わせると、空間を自由な位置・角度から眺めることができるようになります。

要するに、この技術をつきつめると、「ムービーの空間を好きなように動き回れるかも」てことです。

これまでの動画体験とは全く違った感覚が得られそうですよね。

裏っかわのテクノロジーについてざっくり

今回はぜんぶopenframeworksを使いました。

（１）Ricoh Theta S編
リアルタイムキャプチャ画像が欲しかったので、USBを繋いで、ofvideoGrabberで取得してみました。そしたら、こんな感じの魚眼画像になりました。

LiDARから得られるメッシュは全天球状ではないので、このまま貼れなくて、魚眼画像をパノラマに変換するシェーダーを書きました。

これを見ると、ThetaSの持つ２つのレンズの端っこの領域は、ややカブってますが、アルファブレンディングとか細かいスティッチ処理を実装できていないので、パノラマのつなぎ目が雑です。（汗）

（２）LiDAR編
こちらはLANケーブル経由のUDP通信でXYZのポイントクラウドデータがバイナリ形式で送られてくる感じでした。

なので、仕様書にそってひたすらパースしました。

秒間でのデータ量が多いので、リアルタイムに処理し切るのにいろいろ工夫しました。

もし需要ありそうだったら、公開できるようにキレイにしようと思います。

今までHACKistでは2014年4月「DIGITAL SDRAMBLE＠神宮前ROCKET」と、
2015年5月「DIGITAL FRAGMENTS＠神宮前Galaxy Gingakei」などの
展示イベントオーガナイズ＆運営などを行わせていただいております。
HACKistのよく言えばプロデューサー、内情は裏方兼いじられ担当として日々奮闘中です。

今回は、去る2015年7月23日に代官山UNITで行われた、
DE DE MOUSE リリースワンマンパーティー「for 2EPs」に
HACKistがVJで出演させていただいた様子をレポートさせていただきます。
きっかけは、先述の「DIGITAL FRAGMENTS＠神宮前Galaxy Gingakei」に
DE DE MOUSEさま(以下敬称略)にご出演いただいたことでした。
その際のHACKistVJとのコラボレーションをよりアップデートした形とのことで、
リリースパーティーという大舞台にオファーいただきました。

と、その前に今回の機材セッティングについて簡単にご説明します。
今回はUNITメインスクリーンの両端にHACKistが開発したトランスペアレントスクリーンを2つ設置しました。
合計の3画面にて、全てに同じ映像を出力するのではなく、1つの映像を３画面で映し出すことにより
奥行きのある表現を可能としました。

また、DE DE MOUSEの動きと音楽をKinectとマイク入力でセンシングして、
それを映像に反映させるインタラクティブな仕組みを導入しました。
特にKinectの認識においては、事前のリハでDE DE MOUSEのライブ中の動きをとって学習させて、
より精度を上げた形でのインタラクティブな演出を行いました。

各自のインプット＆ソフトウェア構成は下記となります。
１、小井パート　:　 Kinect → WebGL
２、公文・貴田パート　：　Kinect → openFramework + MAX/MSP
３、茶谷パート　：　Kinect → Unity5
４、qawasakiパート　：　Audio(Mic) → Unity5

3つのスクリーンを従え、DE DE MOUSEの2ndセットが始まります。
冒頭の画面には無数の岩のような手の動きに合わせて動くパーティクルが漂っていて、
DE DE MOUSEが手を掲げるとパーティクルが集まり、ブレイクに合わせて元気玉のように放つ！
という直感的なインタラクションで会場は沸き立ちます。

ちなみに、少しネタばらしをすると実はこの時パートのVJはWEBブラウザで再生されていました。
VJの小井はGIGAZINEなどネットメディアで話題となった「metrogram3D」の作者で、
WEBブラウザ上では表現が難しい滑らかな動きをそのプログラミングスキルで実現しています。
今回もスクリーン３画面を横断した1ブラウザでのVJプレイとなりました。

その後も小井が作る吸い込まれるように滑らかな動きとDE DE MOUSEの楽曲の旋律が重なり、
心地よい興奮が続きます。
*小井の作品は、9/27まで「動きのカガク展＠六本木21_21 DESIGN SIGHT」でもご覧いただけます。

冒頭パートが終わると曲は「supernova girl」になり、楽曲も四つ打ちになりよりクラブ仕様に。
画面にはなんとDE DE MOUSEの分身が巨大化して画面に登場し、ポリゴンやワイヤーフレーム調など
様々なエフェクトがかかった姿に変身していきます。
ダンサブルなビートに様々な姿のDE DE MOUSE映像とストロボの照明が交錯することで、
楽曲のキラキラとした世界をうまく演出できたのではないでしょうか。

2ndセットも中盤となり、「fading last night」の叙情的なメロディーに合わせて
映像もファンタスティックな世界観へとチェンジしていきます。
誰もいないビル街を彷徨い続け、花火が上がったりとよりグラフィカルに、
まるで自分がその場所にいると錯覚するような幻想的な情景です。
その後もDE DE MOUSEの動きに合わせて灼熱の星から火の玉が飛び出したり、
雲を操ったりと2ndセット終盤に向けて徐々に上がっていくテンションを演出していきます。

終盤、曲調がガラっと変わりハードでアップテンポな曲となると、
それに合わせてBPMを検出し音とシンクロした映像へと切り替わります。
楽曲によって青・赤・白など単色でシンプルながら力強く映像が躍動し、
まるで音が物体として可視化されているような錯覚を覚えました。

そして、HACKistがPVを制作した「milkyway drive」のVJもライブで行いました。

イベント前に、「milkyway drive」のPVだけではなく、Unityの拡張機能を活用して、
自分だけのPVを作ることができるインタラクティブPVを制作しました。
空を飛び交う文字や空の色を色々変えたりすることが可能です、PCよりお楽しみください。

最後のアンコール「sun end girl」では2セットという長丁場の締めにふさわしい、
ステージの上にあがったまるでロックスターのような演奏でした。
HACKist担当の2ndセットはこちらで終わりです！

長文となってしまいましたが、今回HACKistとしては
音楽アーティストのDE DE MOUSEとコラボレートしたVJ演出を行う
という全く新しい取り組みでした！
最初に話を頂いた時はどうなるものかと思われましたが、
500人規模のお客さまの前で最高の演出をしたと、自画自賛ですが思っています。

最後となりましたが映像をより際立たせていただいた照明のMichinari Maruiさま、
イベント運営スタッフの皆さま、お越しいただいたお客さま、そして今回話をいただいたDE DE MOUSEさま、
本当にありがとうございました！

またこういった取り組みは、近いうちにやるかもしれません。というか、やっていきたいです！！
それではまた近々！！

—
DE DE MOUSE 「for 2EPs」 -milkyway drive side- HACKistスタッフリスト
Creative Director: 望月重太朗
VJ: Junpei Qawasaki, 小井仁, 公文悠人,貴田達也,茶谷亮裕
Producer: 西尾奏
Special Thanks: 進藤俊彦

先日のHACKist展「Digital Fragments」で展示した、<ヤバい>という作品について説明します。

※以下、作品名を<ヤバい>、作品名以外の形容詞・感嘆詞を「ヤバい」と表記します。

<ヤバい>とは

本作品<ヤバい>は、体験者の発する「ヤバい！」という音声から、状況のヤバさを計測し、
タイポグラフィとして表現するインスタレーションです。

普段何気なく発している言葉について、再認識を促すために制作しました。

ヤバさをはかってみよう

体験者は手元の入力ボタンを押しながら、
最近体験した「ヤバい」ことを想像しつつ、「ヤバい！」と発声します。

発せられた声から、「悪いヤバさ」なのか「良いヤバさ」なのかを<ヤバい>が点数化し、
点数に対応するタイポグラフィを説明文とともに表示します。

自分の声によって表示されたタイポグラフィは、その場でステッカーとしてお渡ししました。

ヤバさをはかる仕組み

<ヤバい>は、入力された音声から「体験者のテンションが高いのか・低いのか」、また「ヤバさの程度が大きいのか・小さいのか」を算出します。
「テンション」の算出には「ピッチ(音の高さ)」を、「程度」の測定には「音量(音の大きさ)」を使用しました。

「テンションが上がると人の声は高くなり、反対にテンションが下がると声も低くなる」という考えのもと、
音声のピッチを抽出して、一定の基準より高ければ「良いヤバい」、低ければ「悪いヤバい」とシンプルに振分けています。

さらに、声の音量を測定して抽出したピッチの値と掛け合わせて点数を算出しています。

<ヤバい>の活用方法としては、例えば商品を試用できるキャンペーンイベント等で、
その商品がどれだけ「(良い意味で)ヤバい」のかを可視化する装置として使うことができたりするのではと思います。

最近はヤバくないことにもついつい、相づち的に「ヤバい」と言ってしまうこともありますので、
本作品が自分の言葉について再考するきっかけになれれば幸いです。

ーーーーーーーーーーーーーーーーーーーーー
企画：手塚 健太郎 / 加藤 愛
デザイン：手塚 健太郎
プログラム：加藤 愛
スペシャルサンクス : 徳永 茜（イラスト）

まずライブの様子を動画で御覧ください。

何をやったの？

イベント中の「観客の腕振り」をリアルタイムに追跡する仕組みを開発し、そのデータをインプットとして、「謎解き」「ライブ」での演出に反映しました。

「ライブ」では、観客の腕と同期して動くアバターをスクリーン上に出現させたり。

歌と連動して自由落下してきた歌詞を腕振りで吹っ飛ばしたり。

腕と同期してオブジェクトに引力を持たせて、ハートのパーティクルとたわむれたり。

観客の腕振りの総量を「観客の盛り上がり指数」として、グラフィックの色や大きさに反映したり、という演出を行いました。

どんなシステムなの？

謎に直結するため、あまり多くは語れませんが、今回、開発したシステムは、「参加者が体一つで、気軽に参加できる」仕組みになっています！

ライブで観客参加型のインタラクティブな仕掛けをする場合、「スマホを活用して〜」という話になりがちですが、「ライブ中にお客さんがスマホの画面を見ると盛り下がっちゃう」という場合も時にはあるので、そんな時にこのシステムは効果を発揮します。詳しくは、謎が解禁になった時にまた、詳しく記事にさせて頂きます。

次回再演！？

先日のライブが好評で、次回４月中旬にまたインタラクティブライブを行える可能性が出てきました。
詳しく決まり次第、また告知させていただきます！

なぜやったの？

博報堂＋HACKistチームで、「ライブラボ」というチームを組み、メディアアート的なデジタル手法を用いて、ライブをインタラクティブに楽しく演出する方法を模索しており、その考えにSCRAPさんに賛同頂き、今回このようなライブを実験的に行うことができました。今後もこのチームで新しいライブ体験を作っていけたらと思います！

Credit／
▼SCRAP チーム
出演：クエス？チョン
プロデューサー・ライブ台本制作：吉村さおり

▼博報堂 + HACKist チーム
プランナー：夏海 紫、木下剛
プログラマー：貴田 達也、公文 悠人、茶谷 亮裕
アートディレクター：児嶋 啓多（博報堂）
協力：西尾 奏、宮林 竜平、進藤 俊彦

こんにちは。貴田です。

ここ最近、スマホ対応ガジェットがKickStarter界隈を中心にどんどん世間に出てきている印象がありますが、今回は2010年から存在するOrbotix社製のiPhone、Androidから制御できるボール型ロボット「Sphero」という商品をいじってみましたので、そのレポートです。

簡単にSpheroについてご紹介

とにかく対応アプリが豊富でさまざまな楽しみ方があります。ラジコンカーのように自由にSpheroを操作できるアプリ。お絵かきをすると、その軌跡をSpheroがなぞるように動くアプリ。マクロと呼ばれるコマンドを使って、「緑に光りながら、８の字に動く」などの一連の特定の動きを命令できるアプリもあります。

その他にも、Spheroをスマホカメラで認識してあそべるARアプリや、Spheroを3軸ジャイロセンサ搭載のコントローラーとして使うアプリが存在したり、Sphero自体は水上に浮いて走れる特性を持っていたりと、その楽しみ方は本当に豊富です。

今回のSpheroの制御実験のテーマについて

今回、私がチャレンジしたのは、「PCで指定した位置に、Spheroをピンポイントで到達させること」です。

通常のアプリで、「円を描く」、「８の字で描く」などの命令を送っても、SpheroはGPSのような空間内での絶対位置を把握するセンサを搭載していないので、出発地点と、ひとまわりした後の終着地点では、わずかにズレが生じてしまいます。

そこを外部のセンサ（今回はWebカメラ）を用いて補うことで、ピンポイントで目標地点にSpheroを移動させることにチャレンジしました。

制御実験の結果について

制御実験結果をムービーで撮影しましたので、ご覧ください。

「9秒〜」は、マウスでクリックした緑の点を目標地点にして、Spheroが進んでる様子がわかると思います。画面が紫がかっているのは、赤外光フィルタを通して、みているカメラの映像を使ってるためです。赤外光フィルタを通してみると、反射材を貼り付けたSpheroが綺麗に白く映り、青い枠できちんと認識できているのがわかります。ちなみに、赤の点はキャリブレーション時に使用している４隅の点です。

システム構成について

システム構成は上図になります。Spheroには、iOS、Android、Ruby、Python、Arduinoなど様々なSDKが存在しますが、今回は僕が個人的に慣れているという理由でNode.jsを採用しました。カメラでのSpheroの認識はOpenCV+OpenFrameworksを使いました。実験は、社内の自席の隣の通りの床で行いました。窓と近接しているので、照明環境が安定せず、色認識で行うのが困難だったため、色よりは精度の高かった赤外線＋再帰性反射材の組み合わせで認識を行いました。

図左が、Amazonで購入した「赤外線カメラ＋赤外線投光機」が一緒になったWebカメラに、ヨドバシで購入した赤外線透過フィルターを（ざつに養生テープで）貼り付けている写真です。図右がSpheroに東急ハンズで買った蛍光反射テープをベタベタ貼った結果の写真です。

これは社内の自席の隣の床です。認識エリアの四隅に白い養生テープを貼り付けて、アプリ起動時に４点キャリブレーションを行って、「カメラで撮影した画像」と「PC内用の正方形の２次元仮想空間」の射影変換に活用していました。

これは制御時のアルゴリズムです。単純なフィードバック制御で行いました。

実際やってみて難しかった点は、Spheroに「角度＋θ動け！」と命令しても、Spheroの回転軸が徐々にズレていってしまい、うまく目標座標に辿りつけなかったことです。対策として、移動するたびに、「理想の移動方向」と「実際の移動方向」の差分をとりフィードバックをかけることで、動きが改良されました。

応用例について

この「ピンポイントでのSpheroの位置制御」の技術が可能になることで、Spheroに特定の動きをさせることで、特定のメッセージを伝えるためのコンテンツへ応用できると思います。プロジェクションマッピングと連動させたり、複数のSpheroを連携させて、特定のビジュアルを作ることが考えられます。

以下は、DIsney Researchの「Display Swarm」という研究です。今回の僕のSphero制御実験のだいぶ先を研究されています。１台の時と比べると、複数のロボットを動かす際は、ロボット同士をぶつからないようにするソフトウェア制御が肝になりそうです。

今回は、赤外線認識や、Spheroをいじりたいという思いからの、夏の実験的な制作という位置づけでしたが、どこかできちんとしたアウトプットに落とし込めるようにしていきたいと思います！

• openFrameworksのofxFaceTrackerおもしろそうだなあ
• Chromeの音声認識の精度すごいからさわってみたいなあ
• アドベントカレンダーに参加してみたいなあ

という、3つの願望を同時に叶えるべく、今回はかんたんに「漫画の吹き出し表現」の実装にチャレンジしてみました。

（というわけで、この投稿は、openFrameworks Advent Calendar 2013の17日目の記事です！

それでは、今回実装したシステムの前で、2次使用がフリー化されている漫画「ブラックジャックによろしく」の名ゼリフをHACKistメンバーで喋ってみた様子をご覧ください。

個人的には、この技術は、デジタルサイネージと、WEBのクチコミをつなげるような分野で活用できたら、面白いのではと考えてます。

仕組みについて

吹き出しに表示する文字は、リアルタイムに音声認識をして取得しています。裏でChromeを立ち上げて、Web Speech APIを通じて認識結果を受け取り、一度、Node.jsで立てたサーバーを経由して、openFrameworksへ渡しています。

吹き出しの大きさは、openFrameworksのofxFaceTrackerという顔のさまざまなパーツの位置を取得できるライブラリを使って、以下のようなルールで実装しています。

• 口の大きさ（横幅、縦幅）を取得して、吹き出しの大きさを変更しています。
• 唇の位置を取得して、吹き出しのちょんを、常に話者の近くに出すようにしています。

ちなみに、ofxFaceTrackerでは、以下の図のように、かなり細かい顔パーツの位置を取得できます。

アドベントカレンダーに初参加して思ったこと

個人的にアドベントカレンダー初参戦で、間に合わすように記事を書いてしまったので、突貫となり反省点も多いですが、実装からアップまでのスピードもあまり時間をかけず行えたので、今回のような技術を試す系の記事には、この強制感は心地よいなあとも思いました。今後も「試したらあげる」のテンポで、ポンポンいきたいな、と思いました。

それではまた！