情報処理学会 インタラクション 2016
IPSJ Interaction 2016

161A06
2016/3/2

Nightbird Audience Node: 観客が VJ の即興映像プログラミングを支援するシステム
小渕 豊1

加藤 淳2

濱崎 雅弘2

後藤 真孝2

福地 健太郎1

概要：本稿では，Visual Jockey (VJ) によるプログラミングを用いた即興映像パフォーマンスにおいて，スマートフォンから映像の操作に介入できるインタフェースを観客に提供することで，観客に映像の操作を楽しんでもらいながら，VJ のパフォーマンスを支援するシステム Nightbird Audience Node を提案する．即興プログラミングを用いた VJ プレイは，複数の映像をクロスフェードなどの決まった効果で切り替える一般的な VJ プレイに比べ，より複雑で魅力的な表現が可能となる．しかしながら，VJ が即興プログラミングをしている最中は，プログラムが未完成で映像の変化が単調になりがちである．そこで，提案システムは，プログラムの振る舞いに関わるパラメータ調整を，VJ だけでなく観客がスマートフォンを用いてできるようにする．また，提案システムは，複数の観客がパラメータ操作した結果を統合したり，観客自身が新たなパラメータを提案したりできる．これにより，観客は映像表現を好みに応じて調整でき，楽しみながら即興映像パフォーマンスに参加できる．結果として，即興映像パフォーマンスが，より多彩な映像の変化を持ったものになることが期待できる．

Nightbird Audience Node: Adding Audience Supportto VJ Performance Based on Visual Programming
Yutaka Obuchi1

Jun Kato2

Masahiro Hamasaki2

Masataka Goto2

Kentaro Fukuchi1

Abstract: In this paper, we present Nightbird Audience Node, an extension to visual programming environments for visual jockey performances. It allows audiences to participate in the performance with theirsmartphones to help visual jockeys create programs. While typical visual jockey performances connect multiple videos with simple visual eﬀects such as cross-fading, improvisation of visual jockey programming has
a potential to create more complex and appealing visuals. However, such performances tend to produce
simple eﬀects and could be boring in the beginning when the program is incomplete. To address the issue,
we propose Audience Node that allows audiences to tweak parameters of program components through theirsmartphones. It is capable of simultaneous operations of a single parameter by multiple audiences, whoseresults are merged to have a single value. It also allows the audiences to propose pseudo parameters tosuggest the VJ to implement new Audience Nodes. As a result, the audiences can customize visual eﬀects,participating in programming with fun to enrich visual performances.

1. はじめに指す．多くの VJ は，予め用意された複数の動画をクロスフェードなどの限られた数の効果で切り替えるスタイルのVisual Jockey (VJ) とは，ナイトクラブなどにおいて，VJ プレイをしている．一部の VJ は，即興で映像プログラ音楽に合わせて映像パフォーマンスを観客に提供する者をミングを行うことで，クロスフェードなどに留まらず，複数の動画を同時に加工して表示するような，バリエーショ

12

明治大学
Meiji University
産業技術総合研究所
National Institute of Advanced Industrial Science and Technology (AIST)© 2016 Information Processing Society of Japan

ンに富んだ映像表現を実現している．しかし，即興でこのようなプログラミングを行うことは容易ではない．特に，複雑なアルゴリズムを実装している最中は，プログラムが180情報処理学会 インタラクション 2016
IPSJ Interaction 2016

図 1

161A06
2016/3/2

Nightbird のインターフェイス全体（左）と出力結果（右）．

Fig. 1 Overview of Nightbird (left) and an example output from the program (right).

不完全で映像の変化が単調になりがちである．
そこで本研究では，観客にプログラムの振る舞いに関わるパラメータを操作するためのインタフェースを提供し，観客に楽しみながらプログラミングに参加してもらうことで，より多彩な映像の変化を持った映像パフォーマンスを支援するシステム Nightbird Audience Node を提案する．

2. 関連研究2.1 VJ ソフトウェア

図 2Nightbird における Node と Link の例．

Fig. 2 Examples of Nodes and Links on Nightbird.

ベースのプログラミング言語を利用する必要がある．Pure

多くの VJ ソフトウェアは，大量の動画ライブラリからData[8] や vvvv[9]，本研究で利用する Nightbird は，ビジュ複数の動画を選択し，クロスフェードなどの効果を用いてアルプログラミング言語を利用する開発環境であり，文字つなげながら表示することで VJ プレイを行う．Müller らを入力せず直接操作で映像表現を行うことができる．

は，VJ プレイの準備中及びパフォーマンス中に，事前にメタデータが付与された映像メディアを効率的に管理する

2.3 観客参加型パフォーマンス

技術 [1] を提案した．
「あのタグで待ってる」[2] は，事前に観客を巻き込んだ即興パフォーマンスに関する研究は，動画へタグを付与しておくことで，VJ プレイ中に関連すこれまでにも数多くなされている．Carpenter らは，観客る動画を効率的に提示でき，連想ゲームのように動画を選に赤と緑の札を挙げさせ，撮影した映像を画像処理するこ択できる VJ ソフトウェアである．とで得票比率を計算できるシステム [10] を提案している．

本研究では，動画の選択手法ではなく選択済み動画の加Maynes-Aminzade らは観客参加型インタラクティブシス工手法に着目しており，これらの既存手法と組み合わせる

テム [11] を提案し，実験を通じて観客参加型エンタテインことも可能である．

メントについて考察した．磯山らは，一般参加者が演者となり，参加者が身につけたセンサ，壁や床に投影された映

2.2 ライブコーディング・ビジュアルプログラミング
ライブコーディングとは，コードの変更が即座に実行

像，スピーカーとヘッドホンからの音を組み合わせ，演技にインタラクションを付与するシステム [13] について報告

結果として反映される開発環境を利用した即興パフォー

した．Laursen らは，観客から送信された Like アイコンやマンスである．ライブコーディングは主に音楽の即興パコメントを DJ インタフェース上に表示する手法 [14] を提フォーマンスに用いられる手法である．多くのライブコー案している．本研究は，観客をパフォーマンスへ参加させディング用開発環境は主に音楽の即興パフォーマンス用にることで，観客を楽しませるだけでなく，観客が VJ のパ設計されている．例えば，ChucK[3] はその先駆けであり，フォーマンスを直接支援できる点に特徴がある．

SuperCollider[4] など後続研究も多い．
ライブコーディングの考え方は映像の即興パフォーマン

3. Nightbird

スにも適用され，音楽と映像を同時にプログラミングできる

本章では Nightbird について紹介する．Nightbird のスク

Overtone[5] や，Web ブラウザ上で動作する Gibber[6]，映像リーンショットを図 1 に示す．Nightbird は映像パフォー

表現に特化しておりカメラを利用した Augmented Reality

マンスのためのビジュアルプログラミング言語であり，の表現が可能な Fluxus[7] などが開発されている．

GitHub でオープンソース公開されている [15]．

これらのライブコーディング用開発環境はテキスト© 2016 Information Processing Society of Japan

図 2 は Nightbird を用いて構築した簡単なプログラムで181

情報処理学会 インタラクション 2016
IPSJ Interaction 2016

図 3

161A06
2016/3/2

スマートフォン上で動く Audience Node Client と，Nightbird 上の Audience Node．

Fig. 3 Audience Node Client on smartphone and Audience Node on Nightbird.

ある．ウインドウのような外見を持つ 4 つの要素をそれぞ

4.1 VJ 用インタラクション

れ Node と呼び，Node 同士を結ぶ赤や青の線を Link と呼Audience Node は，VJ が他の Node と同様に扱うこと

ぶ．各 Node は入出力端子を持つ．Node 同士を Link で連ができる（図 3 中央）．Audience Node は，Time Node の結することにより，Node から Node へ様々な情報を伝達

ように 1 つの数値の出力を持ち，観客がスマートフォンし，プログラムを構築することができる．赤い Link は数を用いて操作する Audience Node Client（以下値の情報，青い Link は映像の情報をそれぞれ示す．

Client については後述する）から送られた数値が出力され，Client，

図 2 のプログラムは Time Node，Formula Node，GIF

Formula Node や GIF Node などの他の Node の数値入力

Node，Shader Node という 4 種類の Node を組み合わせたにつなげることができる．Audience Node は，Client に対ものである．時間を出力する Time Node と，入力数値に任してサーバの役割を持っている．VJ は Audience Node に意に定義できる数式を適用させ出力する Formula Node を対して名前を指定することができ，観客に Audience Node組み合わせることにより， 時間に sin 関数を適用させ，0.0の役割を名前により伝えることができる．

から 1.0 を往復する数値出力を得ている．この数値出力を，

Audience Node は Activate 状態と Deactivate 状態を切GIF Node という，入力数値で GIF アニメーションの再生り替えることができる．Audience Node を追加した時点でフレームを制御できる Node に入力することにより，アニは Deactivate 状態となっていて，Audience Node の出力メーションの動きを往復させている．この映像出力を，入が他のどの入力にもつながっていない未実装の Audience

力映像にフィルタを適用させる Shader Node と組み合わNode や，不具合が生じている Audience Node を，観客がせることにより，さらに複雑な映像効果を得ている．

操作できないように設定できる．Audience Node の実装がNightbird はこの他にも，定数を出力する Value Node，複数の映像を合成する Layer Node，能動的音楽鑑賞サー完了した時点で，Activate 状態にすることにより，観客にその Audience Node を操作してもらえるようになる．

ビス Songle[16] による音楽理解情報のうち，ビート情報と楽曲構造情報を数値として出力する Songle Node など，4.2 観客用インタラクション

様々な Node が実装されている．Nightbird は，このようAudience Node Client は，観客が持っているスマートな Node の組み合わせを次々とつなげていくことにより，フォン上で動作する Graphical User Interface (GUI) であ

図 1 のような複雑で多彩な映像表現を可能とする．さらる．Client は Audience Node に対してクライアントの役に，JavaScript が扱えるユーザは新たな Node を実装する

割を持っている．観客はスマートフォンの Web ブラウザこともでき，表現の幅をより拡張することができる．

を通じて Client にアクセスし，Audience Node が出力する

4. Audience Node
提案手法は，Audience Node という，Nightbird の新たな Node として実装されている．

数値を操作できる．
観客はまず，Client に表示される選択画面（図 4）から自分の操作したい Audience Node を選択する．各 Audience

Node は VJ によって指定された名前で表示されているため，観客は名前から Audience Node の役割を把握することになる．Audience Node は，VJ が追加した時点では© 2016 Information Processing Society of Japan182

情報処理学会 インタラクション 2016
IPSJ Interaction 2016

Deactivate 状態となっているため，観客は Deactivate 状態の Audience Node を選択し操作することはできない．

161A06
2016/3/2

るようにした．
観客は，Client の Audience Node 選択画面（図 4）の一番選択画面で Audience Node を選択すると，操作画面（図 3下にある + ボタンより，新たな Audience Node を追加で左側）が表示される．操作画面は上下に動かせるスライ

きる．このとき，Audience Node には VJ が追加した場合ダーとなっていて，観客はこのスライダーを操作し，選択と同様に名前をつけることができる．どのように Audience

した Audience Node から出力される数値を 0.0 から 1.0 のNode を命名すれば良いかわからない観客向けに，Audience間で入力できる．

Node の名前の入力フォームには，いくつか名前が例示される．観客が追加した Audience Node は，Deactivate 状態で4.3 複数の観客による Audience Node の操作
ひとつの Audience Node の操作には複数の観客が参加でVJ 側のインタフェースに現れ，VJ が追加した Audience
Node と同様に扱うことができる．

きる（図 5）．このとき，Audience Node は，複数の観客のこれにより，観客が VJ が用意した既存の Audience Node

入力した数値を統合し，ひとつの数値として出力しなけれが物足りないと感じた場合に，観客が操作したいパラメーばならない．本システムはこの統合手法として，Average

タを VJ に伝えることができる．VJ が観客より提案さmode と Turn mode という二種を用意し，VJ が用途に応れた Audience Node を気に入れば，VJ がその Audienceじて選べるようにした．

Average mode は，操作に参加するすべての観客の意見を取り入れることができるモードである．Average modeを選択した場合，全参加者の操作する数値を平均して出力する．Turn mode は，参加者を時間などで区切って Audi-Node を実装し Activate 状態にすることで，観客は提案した Audience Node を実際に操作することができる．

5. 考察
5.1 観客によるパラメータ操作

ence Node の操作に割り当てることができるモードである．

プログラミングができないユーザがプログラム上のパラ

Turn mode を選択した場合，Audience Node に数値の入メータを操作する手法は，Kato ら [12] がアニメーション

力が一つ増え，Time Node などの他の Node から出力されのパラメータを調整するためのスライダーなどの GUI を容た数値を Audience Node の入力に接続することができる．

易に実装できるフレームワークを，プログラマに対して提数値を入力することにより，参加者の操作する数値のうち供する手法を提案している．本研究は，この手法をビジュいずれか一つを，時間などの任意の数値により決定するこ

アルプログラミング言語を用いたライブコーディング環とができる．

境に適用し，即興プログラミングの最中に，観客が操作可能な新たなパラメータを動的に追加できるようにした．こ4.4 観客による Audience Node の追加
本システムは，観客が VJ の用意した既存の Audience

Node を物足りないと感じた場合のため，観客が Audience

れにより，VJ があらかじめ用意していなかった Audience

Node を映像パフォーマンス中に追加することによって，より即興性の高い映像パフォーマンスが可能となる．

Node を追加し，操作したいパラメータを VJ に提案でき
5.2 観客による映像パフォーマンスに対する提案
本システムは，4.4 節で述べたように，VJ が用意したAudience Node だけでなく，観客が新たな Audience Nodeを追加できるようにした．もし観客が既存の Audience

Node では物足りないと感じ，他の映像パラメータを操作

図 5
図 4 Audience Node Client の Audience Node 一覧画面．

Fig. 4 Audience Nodes listed on an Audience Node Client.

© 2016 Information Processing Society of Japan

各 Audience Node には同時に複数の観客が参加できる．

Fig. 5 Multiple audiences can simultaneously join each Audience Node.

183

情報処理学会 インタラクション 2016
IPSJ Interaction 2016

161A06
2016/3/2

したいと感じた場合，観客は操作したい映像パラメータ名を Audience Node に命名し，VJ に希望を伝えることがで

[11]

きる．
観客がパフォーマーに対してフィードバックを送信する
手法は，Laursen ら [14] が DJ インタフェース上に観客か[12]ら送信された Like アイコンやコメントを表示する手法を提案している．本研究では，Audience Node によって観客が映像についてのより具体的な提案を送信することができ，[13]提案が受諾された場合は，観客が Audience Node を操作することによって，より多彩な映像表現が可能となる．

[14]

6. おわりに
本稿では，VJ の即興プログラミングによる映像パフォー
マンスにおいて，観客がスマートフォンを用いて映像の操作に介入できるインタフェースを提供することで，観客に映像の操作を楽しんでもらいながら，VJ のパフォーマンスを支援するシステム Nightbird Audience Node を提案し

[15]
[16]

http://www.cinematrix.com/.
D. Maynes-Aminzade, R. Pausch and S. Seitz. Techniques for interactive audience participation. In Proceedings of the 4th IEEE International Conference on Multimodal Interfaces (2002).
J. Kato, T. Nakano and M. Goto. TextAlive: Integrated
Design Environment for Kinetic Typography. In Proceedings of the 33rd Annual ACM Conference on HumanFactors in Computing Systems (2015).
磯山 直, ウォーリー 木下, 出田 怜, 寺田 努, 塚本 昌彦: ”
観客参加型演劇 YOUPLAY におけるインタラクション設計”, エンタテインメントコンピューティングシンポジウ
ム 2014 論文集, Vol.2014, pp.168-179 (2014).
L. F. Laursen, M. Goto and T. Igarashi. A Multi-Touch
DJ Interface with Remote Audience Feedback. In Proceedings of the 22nd ACM International Conference on
Multimedia (2014).
Nightbird.
https://github.com/FMS-Cat/nightbird
後藤 真孝, 吉井 和佳, 藤原 弘将, Matthias Mauch, 中野
倫靖: ”Songle: 音楽音響信号理解技術とユーザによる誤り訂正に基づく能動的音楽鑑賞サービス”, 情報処理学会
論文誌, Vol.54, No.4, pp.1363-1372 (2013).

た．Audience Node は，Nightbird に限らず，Node を複数つなぐことでプログラムを構築する，一般的なビジュアルプログラミング言語に対して実装できるものである．
今後は，より適切な複数の観客からの値の統合手法やClient の操作方法，観客からの VJ へのフィードバック手法を検討し，評価実験を通してより有用なシステムへと発展させたい．さらに，Audience Node の手法を，テキストベースのプログラミングを含む，より一般的なプログラミング環境へと適用させ，リアルタイムにおけるプログラマとユーザのコミュニケーションについて考察したいと考えている．
参考文献
[1]

[2]
[3]

[4]
[5]
[6]

[7]
[8]
[9]
[10]

P. Müller, S. Müller Arisona, S. Schubiger-Banz andM. Specht. Interactive Media and Design Editing forLive Visuals Applications. In International Conference on Computer Graphics Theory and Applications(GRAPP) (2006).
あのタグで待ってる.
http://www.cobaltbombalphaomega.com/anotag/.
G. Wang and P. R. Cook. ChucK: A concurrent, on-thefly audio programming language. In Proceedings of theInternational Computer Music Conference (2003).
J. McCartney. Rethinking the Computer Music Language: SuperCollider. Computer Music Journal (2002).
S. Aaron. Overtone.
http://overtone.github.io/.
C. Roberts and J. Kuchera-Morin. Gibber: Live Coding
Audio in the Browser. In Proceedings of the International Computer Music Conference (2012).
D. Griﬃths. Fluxus.
http://www.pawfal.org/fluxus/.
M. Puckette. Pure Data.
https://puredata.info/.
vvvv.
http://vvvv.org/.
R. Carpenter and L. Carpenter. Cinematrix.

© 2016 Information Processing Society of Japan

184