先日、アイドルグループ notall さんのワールドツアー 【notall 2nd Anniversary Tour!! ~夏だ！騒ぐぜ！東名湾~】 にて、WebGLをつかったインタラクティブパフォーマンスのご協力をさせていただきました。

インタラクティブパフォーマンス

インタラクティブというと、対話、双方向といった意味になるのですが、今回のケースでは、アイドルメンバーやライブにいらしているお客さんの放つ声や音、カメラから入力された映像情報を元に、ステージ上に投影される映像演出をダイナミックに変えていくというパフェーマンスを行いました。
こういった演出の多くは、最近流行りであるUnityやMAX、openFrameworksといったソフトウェアを用いて行うのですが、今回は国内でも例の少ないWebGL/GLSLに特化させて演出を行っています。

今回は全体で4曲の演出を行ったのですが、その中から3曲の内容を少し紹介させていただければと思います。

1. UNU

【 0:00 – 0:10 】
EDM調の楽曲で、全体としてアブストラクトな表現を行っています。パーティクル系の表現と、光の効果を活かせるような構成を行いました。

2. ウサギツンデレラ

【 0:10 – 0:16 】
キネティックタイポグラフィという表現方法を使い、テンポ良く楽曲の中に背景を取り入れる演出を行いました。
楽曲と演者のマイクから入力された音により映像を変化させる仕組みを取り入れ、リアルタイムに変化する映像効果を実現しています。

3. マジ

【 0:17 – 0:32 】
パーティー感の強い楽曲で、曲の持つ楽しいイメージを再現するため、様々な3Dオブジェクトを作り、それを直接演出の中に取り込んでいます。3Dオブジェクトの生成にはBlenderとIllustratorを組み合わせ取り込みを行いました。

舞台裏

「マジ」のリハーサル中。
楽曲の音によって自動的な処理がかかる部分もありますが、人の手を入れる部分をあえて残すことで、リアルタイムVJプレイの要素も残しています。
VJだけの演出であればそう難しくはないのですが、実際はステージの進行と合わせることが必須であり、音響や照明機材、演者の状況などを含め連携しつつ進めていくため数時間にわたるリハーサルを入念に行っています。

機材はGPUを強化したマシンを軸に、キーボード、マウス、MIDIコントローラー、オーディオインターフェイスなどを揃え、今回の演出にカスタマイズした構成を用意。プラン通りの演出はもちろん想定される緊急時の対応方法まですべてをコントロール下におきました。

HACKistは今まで何度かVJに関わらせていただく機会に恵まれ、様々な演出を行っています。
今回は大規模なライブイベントで、WebGLを軸にしたステージの演出を行うことができ、最高の演出ができたと思っています。

今回はWebGLに特化したVJだったのですが、また機会があれば新しい体験の場を作れればと思っています。

■ Credit（HACKist制作スタッフ）
Creative:
谷岡 尚人
高野 祥宏 / 八木 啓太 / 齋藤 陽一
岩橋 卓 / 横山 幸正 / 荒瀬 亮太
佐野 彩香
小井 仁

PM:
小井 仁

Produce:
十字 賢

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チーム）
企画・進行：夏海紫
プログラマー：貴田達也、茶谷亮裕、水落大
技術・映像制作：登山元気
デザイナー：児嶋啓多、山下和宏
ディレクター：木下剛

※ エンドロールより。

ご存知の方も多いと思います。Google Chromeの43から「WebMIDI API」がサポートされております。
これは平たく言うと、外付けMIDIキーボードをサポートしますよ。という事になります。
HACKistではVJイベントや、データビジュアライズと言われる分野をよく行うのですが、その際につかう外部デバイスの選択肢が一気に広がるということもあり、非常にわくわくしながら恒例のデモを一つ作ってみました。

残念ながらMIDIコントローラーで動かすという物ですので動画を用意しています。
このデモでは、MIDIコントローラから送った値をブラウザ側で取得し、それをWebGL（GLSL）に送り込む事でVJとしての機能を実現しました。ちなみにこれは先日のDE DE MOUSE リリースパーティー「for 2EPs」のときに小井が実際に使ったWebGLをカスタマイズした物になります。

ちなみに余談になるのですが、弊社のVJコントロール界隈（の、ごく一部）では、「コントローラーは物理的な物の方が直感的でよい」という派閥と、「ボタンが自由につくれないから作った方が汎用性がある」（ハードという物理的な制約が生まれるのでソフトウェアコントローラーを作る）という派閥に分かれています。
ちなみに小井は前者の物理ボタン派ですが、必要な状況に応じてコントローラーも選択できるというのは非常に適応能力の高いチームだと改めて感じました。

ではまた！

今まで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: 進藤俊彦