読者です 読者をやめる 読者になる 読者になる

びぃえるくぅと。

ガラケーは打楽器。

WinのResolume上でTwitterのタイムラインを表示させる (Spout, Processing)

VJどんな感じにすればいいかいろいろやってみているYadex205です。

以前、別のブログで「Windows7でProcessingとResolume Avenueとを連携させる」話を雑に書いていたのですが、 雑な管理でブログごと消し飛ばしてしまいました。

で、Win8.1でやろうとしてソフトの相性が悪くてうまくできてなかったのですが、Win10になって復活したので、 備忘録兼ねてもう一度簡単にまとめます。

本題

Resolumeは、AvenueとArenaという二つのVJソフトを手掛けているオランダの会社で、僕はAvenueを使ってます。前の記事に書いた通りライセンスふっ飛ばしたので体験版モードですが。

サークルのライブで友達がDJしている隣でVJしていた時、せっかくハッシュタグ用意してTLが盛り上がっているのだから、スクリーンにそのツイートを乗っけれたら面白いんじゃないかと思ったのが始まりです。ちょっと違うけどテレビ番組でもハッシュタグ拾ってリアルタイムに表示するやつとかあるじゃないですか。

ただし、Resolumeには(というかVJソフトで普通では)Twitterのタイムラインやツイートを表示する機能はデフォルトでは入っていません。ので、こちらで用意する必要があります。今回は、一つのクリップとしてツイートをリアルタイムに表示できるようにします。

なお今回は Resolume Avenue 4.2.1 でやってます。Arenaの場合やほかのバージョンの場合は適宜置き換えてください。

注意 1. この記事はWindowsが対象です。MacはSyphonがあるから羨ましいよ!! 2. 僕は、この後に出てくるProcessingについて初心者です

Processing

Processingは、Java言語でビジュアルな表現を可能にする環境(?)です。普通のJavaとは違って少し決まりごとがありますが、Javaオブジェクト指向言語の練習でよく用いられるイメージがあります。ビジュアルパフォーマンス等にも十分生かせますよね。

さて、ここでTwitterとの関係なのですが、Twitter4JというJavaで書かれたTwitterAPIの有名なライブラリがあります。今回はこのTwitter4Jを使ってProcessingでプログラムを書き、描画ウィンドウ上に特定のタイムラインのツイートを表示する仕様です。

ただ、今回この記事ではコードを割愛させていただきます、、すみません。 一番大事なところですが、手元にあるコードがガバガバすぎてお見せできません、もうちょっとましにしてからGistか何かで公開しますね。。

Processing のプロジェクトディレクトリに code というディレクトリを作成し、Twitter4Jの各種jarファイルをその中に入れて、それからいろいろやります。。なお出来たものが以下の画像のようになります。

f:id:yadex205:20151005235352p:plain

Spout

Processingでツイートを表示させるところまでは良いのですが、ではどうやってResolumeのクリップとして取り込めるでしょうか。MacOSXだとSyphonっていう神機能があって、アプリケーション間でそれぞれが描画しているものをやり取りできますが、Windowsだともちろんありません。

そこで登場するのがSpoutです。本当にWindows版Syphonと言えると思います。アプリケーションはSyphonより限定されるとは思いますが、これもアプリケーション間で描画しているものを送ったり受け取ったりできるようにするものです。

まず、Spoutがインストールされたディレクトリ C:\Program Files (x86)\Spout2\ に移動すると、その中の FFGL というディレクトリに SpoutReceiver2.dll が 入ってると思います。これを C:\Program Files (x86)\Resolume Avenue 4.2.1\plugins\vfx ディレクトリにコピーします。 その後Avenueを起動したときに、 Sources欄のFFGL SourcesSpoutReceiver2が入っていたら成功です。

次に確認のために、本当にSpout経由でAvenueで映像が取得できるか確かめます。Spoutディレクトリの中の DEMO というディレクトリの中に SpoutSender.exe という実行ファイルがあります。これをクリックしたら、Spoutのロゴがテクスチャとして張り付けられてる立方体がくるくる回る画面が出ると思います。その次にResolumeで Sources欄から先ほどの SpoutReceiver2 をクリップ欄に入れ、選択します。すると下部のプロパティ画面のClipセクションのパラメータ一覧に Select が出現すると思います。 このSelectボタンを押すと、Spout経由で描画内容を転送しようとしているSenderの一覧が表示されます。この中で Spout DX9 Sender があると思うのでそれを選びます。

うまくいけば、SpoutSender.exeを起動したときに出てきた描画内容とまったく同じものが、AvenueのOutput Monitorにも描画されてるはずです。

ProcessingとAvenueで連携

さて、先ほどのProcessingで描画している内容を、SpoutのSenderになるようにします。 具体的には、先ほどのProcessingのプロジェクトにファイルをいくつか追加し、書いたコードに数行追加するだけです。

まず作成したProcessingのプロジェクトのディレクトリ内の code ディレクトリに、 Spoutディレクトリの PROCESSING\x64\SpoutSender\code の中身をコピーします。なお使ってるProcessingが32bit版なら、Win32ディレクトリ に入ってるものをコピーしてください。

次に、Processingのプロジェクトディレクトリに、PROCESSING\x64\SpoutSender内にあるJSpout.javaspout.pdeをコピーします。

なので、ファイル配置は以下のようになりますね。

(Processingのプロジェクトディレクトリ)
|- code
    |- JSpout.class
    |- JSpout.dll
|- JSpout.java
|- spout.pde
|- 作成したProcessingファイル.pde

最後に、作成したプログラムファイルにSenderとして機能するためのコードを追加します。

まず、setup()関数の前に

Spout spout;

と書き、変数を宣言します。この時点ではまだ初期化されていません。

次に、setup()関数内の終わりに

spout = new Spout(); // Spoutクラスのインスタンスを作成
spout.initSender("Spout Processing", width, height); // Senderを初期化。

を追加します。spout.initSender()の第1引数には、Senderの識別用の名前を指定します。第2, 3引数のwidthとheightは、setup()関数中でsize()関数を実行した際に値が割り当てられるやつです、放置して大丈夫です。

次にdraw()関数内の終わりに

spout.sendTexture();

を追加します。これで描画内容をSendすることができます。

最後に、exit()関数内に

spout.closeSender();
super.exit();

を追加します。終了処理ですね。

以上の作業を終えてから、Runをクリックしてプログラムを走らせてみてください。正常に動いてProcessingの描画画面が出たのを確認したら、AvenueのSpoutReceiver2のClipのプロパティ画面で、先ほどと同じようにSender一覧から選択する画面をだして見てください。spout.initSender()の第1引数で指定した名前が入っていたらそれをSelectしてみてください。

これでProcessingで描画したツイートがAvenueのクリップとして描画できたら、勝ちです。いかがでしょうか?

f:id:yadex205:20151005235406p:plain

おわりに

Resolume Avenue/Arena上でTwitterの特定のタイムラインのツイートを表示する方法について、ProcessingとSpoutを使った方法を軽く紹介しました。 プログラムを書かなくてはいけないことや、導入方法が面倒ではありますが、ある意味VJソフトの拡張を作るような気分で楽しいのではないでしょうか。

なお、Spoutは現在、Max, OpenFrameworks, Unity, VirtualDJなどにも対応しているらしいです。ちょっと前より対応ソフトがすごい増えてて、作られてる方本当にすごいと思います。 なので、ProcessingとResolumeだけじゃなくて、OpenFrameworksとMaxとかもできるはずです。

今回使ったものや環境

Copyright © 2015 Yadex205