ライブコーディングの祭典「Algorave Tokyo」に出演しました

12/22(金)、神楽坂で開催されたAlgorave TokyoにVJとして出演しました。
楽しかった〜

Algoraveとは

Algorave Tokyo 2017

一言でいうと、プログラミングによる音楽や映像パフォーマンスを行うイベントです。
Max/MSPのような音楽プログラミング環境や、SuperCollider等のライブコーディングシステムを用い、パフォーマンスを行います。
中には独自のシステムを開発している人もいます。

これにより

ミュージシャンは自分たちの音楽をアルゴリズムとして作曲し、そのまま生演奏することができる

ということです。

Algoraveは2012年頃に始まり、イギリス、ドイツ、カナダ、スペインといった世界中の都市で開催されてきました。
日本でもこれまでに4回開催されていたようですね。

今回のイベント

今回のAlgorave Tokyoは、東京神楽坂のKGR(n)で開催されました。
21組ものアーティストが集まり、2トラック並列で進行しました。

僕は当初出演する予定は無かったんですが、はてブで「行きたすぎる！！！」とコメントしたところ、なんと運営の方からお誘いをいただき、出演できることになりました。 メチャクチャ豪華なメンバーだったので緊張しました……！！

僕のパフォーマンスについて

僕はRenick Bellの演奏にあわせてVJしました。
VJに利用したコードはこちらで公開しています。

GitHub - fand/algorave2017: VJ set for Algorave Tokyo 2017

僕は自作のVEDAというソフトを用いてパフォーマンスしました。
VEDAはGLSLでライブコーディングを行うためのAtomパッケージです。
上のレポジトリをAtomで開きVEDAを実行すると、以下のような映像を出力できます。

f:id:amagitakayosi:20171231094821p:plain

今回は、マルチパスレンダリングで図形の描画とエフェクト追加を行なっています。
1パス目では頂点シェーダーで図形を描画し、2パス目のフラグメントシェーダーでエフェクトを追加するという流れです。
本番では、Renickの演奏に合わせて頂点の数を切り替えたり、音声入力に反応してレイアウトを切り替えたりしていました。
パフォーマンス後半では、レイトレーシングで回転するオブジェクトを描画し、表面に図形を貼り付けたりもしました。

あと、動画素材を使ってディスプレイスメントマップのような事もしていました。
事前に練習の段階では良い感じだったんですが、本番のスクリーンだとあんまりわかりませんでしたね……

普段のVJでは、VJ用の動画素材を切り替えつつフラグメントシェーダをガリガリ書いてエフェクトかけるという流れなんですが、今回はAlgoraveということで、ほぼ完全にシェーダーだけで表現できるように心がけました。
頂点シェーダによる表現は、先月の8時間耐久VJでも使ってみてたんですが、今回でスタイルとして形になってきた手応えがありました。
次のパフォーマンスでは、また新しい表現方法を考えないとなあ〜。

感想

これまでにいろんな所でお世話になった人が沢山出演していて、直接会話できる機会ができて嬉しかったです。
僕がライブコーディングを始めたのはkzrさんのKODELIFEによるパフォーマンスを見たからだし、Sascacciさんには東京Node学園祭でもお世話になったし、グリッチはucnv/aviglitchを写経して理解したし、Fuyamaさんには今年の夏に京都でライブを見て影響受けたし、田所先生にはopenFrameworksやTidalCyclesの入門記事でお世話になったし……！

今回のVJは全員自分でVJシステムを組んでた（！）事もあり、パフォーマンスを見ててすごく参考になった。
谷口さんは、今年の春の個展を見に行ったこともあり、どんな感じになるか楽しみだったけど、いつも通り日用品と自身の3DモデルがUnity上で動き回ってて、異様な空間になっていた……
GRAINnoirさんのVJソフトは、対話式にコマンドを実行していろいろ映像を生成する感じで、めちゃくちゃギークっぽかった。

Hexlerさんは、サブ会場でNintendo 64コントローラーを使ってVJしていて、これがめちゃくちゃクオリティが高かった。
KODELIFE上で動画素材+シェーダーでパフォーマンスしていたんだけど、エフェクトとコントローラーの使い方次第であんなにいい感じになるのか……！

お誘い頂き本当にありがとうございました！！

今後も機会があったらガンガン出演していきたい。
なんなら関西でもAlgoraveできたらいいな。

ShadertoyのSound ShaderをThree.jsで実装してみた

ヤッターGLSLで音が鳴るぞ！！

codepen.io

この記事はWebGL Advent Calendar 2017 の15日目の記事です。

こんにちは、 id:amagitakayosi です！ AtomでGLSLをライブコーディングできるパッケージを作ったりしています。

今日はShadertoyのコードを読んで、Three.jsで真似してみる、ということをやってみました。

経緯

ShadertoyにはGLSLで音声を出力できる機能があります。（以下 Sound Shader と呼びます） デモ用の効果音を生成したり、以下のようにガッチリ曲を作ったりできます。

qiita.com

しかし、その仕組みがどのようになってるか、どこにも解説されていない！ というわけで、Shadertoyのコードを読みつつ、ちゃんと理解するためにThree.jsで実装してみました。

解説

ShadertoyのSound Shaderは、以下の2つのメソッドを読むと仕組みが分かります。

  • EffectPass.prototype.Create_Sound
  • EffectPass.prototype.Paint_Sound

Create_Sound

(https://www.shadertoy.com/js/effect.js の243行目〜)

ここでは、Sound Shaderを実行するための準備を行っています。

Sound Shaderではメイン関数を vec2 mainSound として書きます。 xが左、yが右チャンネルです。

Create_Soundでは、ユーザーが書いたSound Shaderに、main関数を含む文字列を結合します。 main関数を読むと、ピクセルごとに異なる引数でmainSoundを呼び出していることがわかります。

レンダリングするテクスチャのサイズは 512x512 であることがわかります。 音声のサンプルレートは 44100 なので、SoundShaderは1回のレンダリングで約6秒の音声データを作成できるようですね。 (512 * 512 / 44100 ≒ 5.94)

また、 this.mPlayTime = 60*3; とある通り、Sound Shaderが生成できる音声には180秒までの制限があるようです。

Paint_Sound

(https://www.shadertoy.com/js/effect.js の1900行目〜)

Paint_Soundは、シェーダーの変更後はじめてPaintが実行されたとき呼ばれるようになっています。 つまり、Paint_Soundは1回の実行で180秒分の音声データをすべて作成します。

uniform変数をガチャガチャ設定してる部分はどうでもいいので読み飛ばすと、forループがネストした箇所が見つかります（2053行目〜）。 ここが音声生成のコア部分です。

やってることは単純です。 外側のループは、180秒分の音声データが生成し終わるまでレンダリングを繰り返す、というループです。 内側のループでは、レンダリング結果の各ピクセルの値を音声データに変換し、AudioBufferに詰める、ということをやっています。 この時、 bufL[off+i] = -1.0 + 2.0*(this.mData[4*i+0]+256.0*this.mData[4*i+1])/65535.0; とある通り、一つのサンプルを2バイトで表現しています。 mainSound が返すのはvec2でしたが、Create_Soundで追加されたmain関数の中身をよく見てみると、 以下のように上位ビットと下位ビットに分けて出力していることがわかります。

  vec2 vl = mod(v,256.0)/255.0;
  vec2 vh = floor(v/256.0)/255.0;
  gl_FragColor = vec4(vl.x,vh.x,vl.y,vh.y);

これはおそらく、GLSLの世界では音声はfloatとして表現されるけれど、出力すると1バイト (0 ~ 255) に丸められてしまい、音声として使い物にならないという問題があったのだと思います。 そのため、1サンプルをr+g or b+aの2バイトを使って表現することで、より精度の高い音声出力を実現したのでしょう。

ループが終わったら、AudioBufferSourceNodeをstartして、音声を再生しています。

感想

Three.jsでもシュッと実装できて楽しかった。 あとShadertoyのコード意外と読みやすい。

やり方はわかったので、VEDAにも機能追加しようと思います。 音声をループ再生したり、音声の長さを指定できたりすると、ライブコーディングでの音楽パフォーマンスが楽しくなりそうですね。