GIG&TAKE vol.9 にVJで出演しました!
こんにちは。前回に引き続いてまたVJ出演の話になります。
2回目のVJ出演
今回は、高円寺にある DJs Bar Cave (Homepage)にて開催された、 アニソンクラブイベント GIG&TAKE vol.9 (Tweetvite)で VJさせていただきました。出演された方々やイベントの詳細については上記のTweetviteを見ていただければと思います。
VJはユータローさんと交代しながらやっていました。
前回初めてVJやった時とは異なる点がいくつかあって
- 純粋に2回目なので慣れてきている
- 持ち素材が増えた
- 以前GIG&TAKEに行ったことがある
といった感じです。どんな具合に素材を組み合わせてみようか、といったことについては少しは成長した状態で 考えることができたのではと思います。 一番大きかったのは、以前そのイベントに行ったことがあったので、VJがどんな感じでパフォーマンスされてたかを 知っていて、つまりはどんな感じにVJすればよいかの参考になった点です。ユータローさんにはホント頭が上がりません。。
よかったこと
まずは、この界隈に僕を引きずり込んでくれた僕の友達と共演(?)できたことです。彼がDJやってる時間帯に僕がVJを担当でき、 彼が流したアニソンRemixに合わせた映像を2, 3回ほど出すこともできたので、とても満足でした。なおアニソンVJとしては Fランな僕ですので、これからも精進します。
そして、今回のVJについて、他の方から褒めていただけたのが本当にうれしかったです。大学のサークルの外でVJ初めて良かったと思いました。 現地では眠さとコミュ障でアレでしたが実はめっちゃくっちゃ喜んでました。特に、僕が初出演したときに共演された方々に褒めていただけた ことが何よりもうれしかったです。
悪かったこと
一つは、前日徹夜していたので後半の方すごく眠くなってしまったことです。体調を整える基本的なことができてなかったので、今後は睡眠はしっかり取って臨もうと思います。
次に、コミュ障発揮して数人に挨拶できませんでした、ごめんなさい。。
そして、crankさんが「SUSHI食べたい」のRemixを流しているときにそのPVを出したのですが、さらに上に2レイヤー動画を重ねてしまった結果、 よく見ないとPVが見えないということに後々気付きました。今後の課題とします。。
自作(大爆笑)
金がないからGrandVJやResolumeを買えない。ということで今回VJソフト的なのを作ってきました。本当に博打でした。
名前はとりあえずBERKUTって付けてます。なんか昔JavaScriptで同じ名前を付けた全く関係ない自作ライブラリあったけどもう気にしない。
仕組み的なことについていうと、VVVV(Homepage)という「ビジュアルプログラミング言語」な環境を用いて作りました。 同ジャンルのものでは、MaxやPureData、Quartz Composerなどがありますが、Windowsで使えて、非商用であればフリー、かつ日本語の文献があるものということでVVVVを選びました。
このVJソフトを作った話の詳細は、後日記事でまとめようと思っていますので、お待ちいただければと思います。ぶっちゃけほとんどライブラリに頼ってます。
機能としては、A, Bの二つのデッキが左右にあって、それぞれ3レイヤー動画を重ねられます。重ね方には乗算や差分など様々な方法が選べ、またOpacityも変更でき、バイパスすることも可能です。 そして、AとBをフェーダーで行き来するような感じです。なお、Roland V-4シリーズの「Transform」に相当する機能も付けているので、フェードじゃなくて一瞬で切り替えることも可能です。
目玉機能(?)はBPM Syncです。まず動画ファイルが「foo_beat_8.avi」のように「_beat_n」がファイル名の末尾に入っており、その動画を入れたレイヤーのBPM Syncスイッチをオンにすると、Syncしてくれます。 なおBPMはキーボードで入力はもちろん、Korg nanoPad 2でのタップをもとに調整してくれるようにしました。個人的に一押しなのは、BPMに合わせて画面の背景色が発光するところです。
この子の悪いところは、ひたすら重い点です。ThinkStationで開発していたので気付かなかったのですが、ThinkPadで動かしたら動画テクスチャが飛び飛びになったり不具合満載でした。
VVVVに
おわりに
素直にGrandVJを買いたいです。
GIG&TAKE vol.9に出演された皆様、来てくださったお客様、DJs Bar Cave のスタッフの皆さま、本当にありがとうございました!!! とても楽しかったです!!!
初VJしました。
もうそんなに暑くはならないですね。Yadex205です。
今日インフルの予防接種してきました。歴代2番目くらいに痛かったです。はい。
初VJしました
twodar さんをはじめとする個性あふれる方々が主催されてるパーティー「musabeat」が10/10(土)にあり、 そこで初めてVJで出演させていただきました。
今回、ユータローさんとねいさんと僕で3人でVJすることになり、お客さんからも「今日VJ多いな!笑」というお言葉もいただきました。 本当にお二方に助けられっぱなしでした、、ありがとうございました。。
お店のレイアウト上DJされてる方のすぐ脇でVJする形になり、結果としてお客さんがこっちを向いてる感じだったので、 今までとまったく違う立場でアニソンパーティーに参加している、ということをひしひしと感じながらVJしていました。 自分は映像をガチャガチャするのに必死だったんですが、色々と考えさせられることもあって本当に良い体験でした。
反省
今まで大学のサークルで何回かVJをやったことがあったのでその調子でいけるかなと思ったのですが、完全に甘かったです。 ただカッコイイ映像流しときゃええんでしょってのは、特に今回のようなアニソンパーティーだとよくなかったですね。 お客さんが流れてる映像をよく見てらっしゃることに気づかされて、映像も単なる雰囲気作りのためだけじゃないなと。
今回のようなアニソン主体のパーティーでアニメ映像一切持ってこなかったのは一番の痛手でした。アニソンはアニメのソングですし、 せっかく映像出せる環境があるのに、アニメ映像を持ってこなかった訳です。 考えたらアニソンパーティーでアニメ流すだけじゃなくて、新木場のAgehaで中田ヤスタカさんがDJされてるときもPerfumeのPVとか流してたなって。
カッコイイ映像とかは確かに必要だと思うのですが、そうじゃないメインの映像もこれからしっかりと用意していきたいと思いました。
よかった事
まず、初めてV-4をVJ用途で触れたということです。大学サークルだと4カメの映像を切り替えるためにV-4EXをつかってて、ビジュアルパフォーマンスとかそういうのではなかったので、 今回すごく面白かったです。ただサークルでV-4やV-4EX触った経験も少しは生きてて、「これ押したらこんなエフェクトがかかる」とか大まかにわかってたのは大きかったですね。 ただやっぱ雑にエフェクトかけたりしてしまったので今度は落ち着いてやりたいです。 あと、VJのユータローさんのV-4の使い方が面白くて、仕込んでおいたネタ画像をTransformでサブリミナル的に出すのはちょっと真似してみたいなと。
そして、今回持ってったThinkPadの内蔵ドライブをSSDにしていて正解でした。お客さんが跳ねてすごく揺れるのに加えて、自分が持っていったPCスタンドがすごい揺れてて、 これHDDだったらまともにデータ読み込めなかっただろうなと思いました。あと実際VJソフトが安定して動いてくれます。
失敗したこと
さっきの反省とは別に、小さな反省点がいくつかありました。
まず、接続したUSB機器が多すぎて給電が追いつかす機器の認識ができなくなり、そのたびにWindowsを再起動するハメになりました。 繋げていたのは
このうち一番電気食ってそうなのがIntensityだったので途中からはずしました。USB3.0を全力で使うHDMIキャプチャです。 予定としてはこれにGoProからの映像を入れて、VJソフトでエフェクトかけて～みたいなことをやるはずでした。 なので、次回までには外部電源の使えるUSBハブとかを手に入れておきたいですね。
あとは、さっきも書いたのですが自分のPCスタンドがえらく揺れるので、内蔵ドライブはSSDだから良いのですが、絶対映像ライブラリが肥大化して256GBのSSDに 入りきらなくて外付けHDDが必要になるので、ゆれると多分HDDが読み込んでくれなくて困るだろうと。PCスタンドはレビューみて安定とかその辺チェックしたほうが良いですね。。
そして、VJソフトを体験版モードで使って本当にごめんなさい。ソフトのロゴが終始映りっぱなしでした。ライセンスキーは大切に扱います。
おわりに
今回の musabeat 04 で本当に良い経験をさせていただきました。 主催されてる方々や今回一緒にDJ, VJされた方、武蔵小杉アルファクロスのスタッフの方々、来ていただいたお客さんに本当に感謝しています。
ありがとうございました。これからも頑張ってVJしていきたいです。
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ファイルをその中に入れて、それからいろいろやります。。なお出来たものが以下の画像のようになります。
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 SourcesにSpoutReceiver2が入っていたら成功です。
次に確認のために、本当に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.javaとspout.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のクリップとして描画できたら、勝ちです。いかがでしょうか?
おわりに
Resolume Avenue/Arena上でTwitterの特定のタイムラインのツイートを表示する方法について、ProcessingとSpoutを使った方法を軽く紹介しました。 プログラムを書かなくてはいけないことや、導入方法が面倒ではありますが、ある意味VJソフトの拡張を作るような気分で楽しいのではないでしょうか。
なお、Spoutは現在、Max, OpenFrameworks, Unity, VirtualDJなどにも対応しているらしいです。ちょっと前より対応ソフトがすごい増えてて、作られてる方本当にすごいと思います。 なので、ProcessingとResolumeだけじゃなくて、OpenFrameworksとMaxとかもできるはずです。
今回使ったものや環境
現状報告・VJで出ます 01
タイトルが思いつかなかったので現状報告です。ゼミかよ。
Yadex205です。今週大変だったことと来週大変になることを書きます。
卒研計画発表
理系学部4年生の避けて通れない道、卒論のための計画発表会が今日終わりました。 結果がどうなっているかはわかりませんが、とりあえず終わって一息つけてます。
発表のための資料などを夏休み後半をほとんど(少し盛ってる)使って書き、 直前ではスライド作ったり発表練習をしたりしていました。もうパソコン見たくないって思うくらい。
とりあえず、小休止おいてからまた研究の作業とかも進めていって、ちゃんと結果を残せるように頑張ります。
初めてVJ出演します
話がゴロっと変わって、なんと来週初めてVJをすることになります。 VJってなによって方はWikipediaをご参照ください。
詳細をいうと、10/10土曜日に、武蔵小杉のアルファクロスというお店で行われる musabeat 04 にてVJを一部担当します。 今日の発表会がおわったばっかりでまだ緊張が来てないですが、たぶんすぐ緊張が来ます。出演される方はこの界隈だと有名な方ばかりです、すごいです。 今はvimeo.comでfreeのvj loopを探してみたり、いくつか(といってもまだ1個)自作で素材を作ったりしています。ちゃんと対策と練習してから行きます。
先日に僕の大学の友人がとあるアニクラで初DJをしたときに、その友人と繋がりのあるクラブ界隈の方とお話ができ、 自分が大学のサークルでVJやってたことを話したら出演の話をいただいた、という次第です。本当に驚きましたしうれしかったです。
ですが、お誘いを受けた直後にResolume Avenue(VJソフト)のライセンスを誤ってふっ飛ばすとかいうことをやらかしました。 Resolumeは体験版モードだとロゴが時々写りこむ仕様なんですよ。確認したらそれでもOKとのことだったので事なきを得た感じですが、 次回はちゃんと気を付けようと思います。。。ちなみにVJソフトの自作も考え(笑)、Node.js(厳密にはio.js)とElectronでせっせと何か 作ってたんですが、やっぱ動画処理のところがウェブ技術だけだと難易度あがりますね、たぶん間に合いません。ちなみにSeriously.jsが面白そうです。
おわりに
10/10、関係者のみなさま、どうぞよろしくお願いいたします。
大学院に受かりました。
Yadex205です。ちょうど台風ですけどめげずに学校にきました。
院進学
おかげさまで電気通信大学の大学院に受かることができました！引き続き、インターネットやネットワークにかかわる研究を進めていきたいと思います。これからもよろしくお願いいたします。
なにしよう
受かってほっとしたので何か作ろう、というわけにもいかず、研究計画発表が夏休み終わりに待ち構えてるので、とにかく作業を進めていかなくてはいけません。がんばります。
それが終わったら、以下のことは必ずやろうと思います。
- バイトはじめる
- 以来されてる動画を作る
- VJの練習とか
- 某Twitterライブラリの改変
p.s.
僕が所属していた音楽サークルのライブ、労害枠でどうか出させてください（切実
【Android】 ListPreferenceのentryValuesにinteger-arrayは使えない?
結局ブログ放置気味なので、本当に備忘録みたくちょこまかと記事更新していこうと思って第一弾がこれです。
AndroidのPreference(設定画面のパーツのクラス?)の中にListPreferenceという、多数の項目からラジオボタンで選択するタイプのものがありますが、それの項目設定で少し詰みました。
<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen
xmlns:android="http://schemas.android.com/apk/res/android">
<ListPreference
android:key="pref_list"
android:title="@string/pref_list_title"
android:dialogTitle="@string/pref_list_title"
android:entries="@array/pref_list_entries"
android:entryValues="@array/pref_list_entryValues"/>
</PreferenceScreen>
ここで、@array/pref_list_entryValuesはinteger-arrayです。この状態で設定項目を選択するとNullPointerExceptionがおきます。
。。。結局は下のStackoverflowの質問で解決しました。回答者は「Arrayなアイテムしか受け付けない」と書いてますね。
なので上記のandroid:entryValuesに入れる配列もstring-arrayに変更したところエラーは起きなくなってます。
ちなみに何がNullなのかはよく分かりませんが、どうやらListPreferenceクラスの中で選択アイテムを格納する配列があり、それがNullになってるのかな。。？
JavaScriptだけでアプリ作る環境を作るのに苦労した話
こんにちは、Yadex205です。 自分のツイッターのプロファイル文に「ツイッタークライアント作ってます」的な事を 書いてるんですが(リリースすらしてないけど)、いままでそのベストな開発環境を 見つけられないままズルズル引きずってました。(純JSなアプリ)
今まで試したこと
初めはWindows Store App向けのつもりで作ってたのでVisualStudioでJSアプリを 作っていましたが、VisualStudioの導入が必須になり、Emacsキーバインドは 導入できないしgitとの連携も面倒臭そうなので、直接ブラウザ上での開発に 以降しようと思いました。
ところがTwitterとの通信で、CORS(Cross-Origin Resource Sharing)の壁に遮られます。 Ajaxを使った別ドメインのリソースへのアクセスをもうちょっと安全にしたもの(ちょっと違う) なんですが、TwitterはこのCORSに対応してない、つまり
純粋なJavaScriptと現状のブラウザだけでTwitterアプリは開発できない
んですよ。困った。なのでブラウザのCORSを無効化してしまえばいい話だと気づいたので、 いろいろ探してみました。
結果分かった事として、Chrome系(Blink)のブラウザは起動時に
$ chrome --disable-web-secutiry
というオプションをつけると、ウェブセキュリティーの機能の一つとみなされてる為でしょうか、 CORSが無効化されるので、VisualStudioで開発していた時のように通信に支障がでなくなります。
ただ自分は体質上の理由でGoogle製のものに触ると爆発してしまうので、なんとかFirefoxでもできないかと いろいろ探して見たところ、最近のバージョンのFirefoxではCORSを無効化するオプションが無効化(?)。
終わった。
Cordova の導入
Apacheから、Android、iPhone、Windowsなどのたくさんのプラットフォームで動かせるアプリを HTML5で作れる「Cordova」というものがリリースされています。 最近のVisualStudio2013にはプロジェクト作成の際に、Cordovaを使ったプロジェクトが作れるようになってます。 自分はそこでCordovaの存在を知ったのですが、今回自分のCentOS環境にそれを整えてみようかなと思いました。
今回は導入方法は書かないので、英語でかかれてますが公式ドキュメントの方を参考に、 やりたい人はやってみてください。
結論
Chromeの--disable-web-secutiry使うのが一番サクサクだと思うよｼｮﾎﾞｰﾝ(AA略
ちなみにCordovaで使うシミュレーターは、FirefoxOSが一番快適だと思います。Androidエミュの遅さは 皆さんご存知だと思いますし、あとiPhoneアプリはMacじゃないと、Win系アプリはWinじゃないと ビルドできません。
なんかいい環境ないんですかねぇ・・。
— グッフォーのHELLO61のペンキ (@yadex205) 2015, 5月 13
