#BTH2018に参加しました

先日、10/20,21と東京ビックサイトで開催されたTOKYO BLOCKS HACKATHON (#BTH2018)に参加しました。
https://blockshackathon2018.peatix.com/

Maxアカウントメールにハッカソンしますってメールが来て知りました。
知ったのが開催の週の水曜日とか結構直前だったのでエイヤーって感じで参加しました。
一応ROLIという楽器を見たことがあったのと、個人的にも新しい楽器というものに少し興味があったので。

 

チームビルディング

心拍を使うアイデアの方がいて、とても興味があったので、なんとかかんとか仲間に入れてもらいました。
個人的には久々にMaxMSPを触って勉強したかったので、Maxを使ってBlocksをハックする部分を担当させていただきました。🙏

1日目終了時点でコンセプト的なものは決まっていたものの、具体的な作戦が決まっておらず、割と遅くまで残ってメンバー全員で作戦会議しました。
こういった経験は個人的にはとても貴重で楽しかった。

最終的には、
①AppleWatchから心拍を取って、
②JUCEで作ったアプリにOSCで心拍数を送り、AbletonLinkで共有、
③Maxで受け取ってBlocksへ表示
④別Maxで受け取ってリズムトラックのテンポへ反映・音を出力
⑤別Blocksを使って、変化するリズムトラックに合わせてリアルタイムに演奏
といった形。
僕が担当したのは③の部分。

AbletonLinkで受け取った拍からBPM計算して、数字を表示、拍に合わせてハートのイラストを伸縮(イメージ2枚を切り替え)ということをしています。

BlocksとMaxでの開発について

備忘録兼ねて技術的な話。

BlocksとMaxはBluetoothで接続します。
Blocksの電源入れて、Macのシステム環境設定からAudioMIDI設定からペアリングしました。
環境内にあるBluetooth端末が表示されているので、その中から手元のBlocksのIDと同じものを選択。
IDはBlocksの裏面に小さい文字で書いてありました。

MaxでFile > ShowPackageManagerからBlocksのパッケージをインストールすると、Maxからblocksのオブジェクトを作れるようになります。
blocks.button とか blocks.jit.matrixなどいろいろ用意されているのでヘルプから試してみると楽しい。

表示で重要なのはblocks.padというオブジェクト。
blocks.imageや、blocks.jit.matrixでBlocksのLEDを変化させることができるのですが、その際にblocks.padが必要になります。
Maxでプレゼンテーションモードにしたときに、このpadオブジェクトの上にblocks.jit.matrixなどサイズを合わせて配置する必要があり、これがズレるとBlocksの表示もズレてしまいます。

あとは、ヘルプにも書いてありますが、padオブジェクトの左上の三角をクリックしてオンにする必要があります。Max上で複数プロジェクトからblocksオブジェクトを操作している場合にどのオブジェクトを有効にするかはっきりさせるための操作のようです。

はじめ上の手順を踏んだはずにもかかわらずBlocks実機に表示されないことがありましたが、Max再起動やBluetooth接続し直しなどいろいろ見直すと無事繋がりました。

Max使ってBlocksで文字を表示する際にはjit.lcdを使うといいと@tatmosさんに教えていただきました。
Blocksが15×15のLEDで解像度が低いため、文字の表示はかなり厳しく、今回必要だった数字三桁程度の表示がギリギリな印象でした。
また、おそらくLED間は特にパーテーション的な区切りはなさそうで、黒字を出そうとすると、背景となる色に侵食されて可読性はほぼなしでした。
少しでも可読性確保するため、背景となるハートの画像は明るさを抑え、文字はできるだけ明るく、的なことを簡易的にしてました。

 

最終的なパッチはこんな感じ。(ハッカソン後、若干修正しました。)


heartbeat015.zip

 

感想

ハッカソンでは、メンバーにも恵まれて、なんだかんだ(謎の)特別賞をいただくことができました。
最後の発表前には、ネットワークが切断されてしまい、心臓が止まった状態となってしまいましたが、なんとかギリギリで動く状態に復帰でき、事なきを得ました。
ネットワーク改善のためうっかりMaxを再起動したので、いろんなパラメータの初期値が変わってしまってました。(後日修正しました)

久しぶりにMaxを触れて楽しかったと同時に、個人的な制作では使えても、仕事として利用することはなかなかないだろうなあと思ったり。

 

今回思い立ってハッカソンに参加させていただきましたが、とても学びが多かったです。
現場力とかつけるためにも、今後もハッカソンなどちょくちょく参加したいなあと思います。

 

ArtHackDay2018に参加しました

終了して1ヶ月ほど経っちゃったけど、ひょんなことからArtHackDay2018に参加させていただいてました。
個人的にはめちゃくちゃ勉強になったのと、またいつか参加したいなと思うので、感想書いときます。書かないよりはマシ程度で。思い出したら追記もします。
(別の場所で書いたものをより個人的なメモとして書いています。)

ArtHackDayは前々から参加してみたいと思ってたのですが、仕事の関係で日程的に微妙でエントリー忘れてました。

が、幸い、職場の人が参加されていて、Day1Day2が終わった時点で人数少ないからサポートで、ということで急遽参加させていただきました。

一応、Art Hack Day (アートハックデイ)とは、

アートに特化したハッカソン。参加申し込みから選出されたアーティストや技術者、そして研究者が一堂に会し、その場で結成したチームで、短期間でアート作品を制作する。

作ったもの

2台のディスプレイが向き合い、にらめっこや会話をしているような Apophenicという作品。

お互いが、お互いのディスプレイに映る木漏れ日のような映像の中から顔認識をしています。

ここでいう顔認識は、人間が木漏れ日や、シミ、木目などに見つける「顔っぽい」ものを認識することを意味しています。

心霊写真なども同じような現象ですが、これをアポフェニアというそうで、今回の作品ではその現象を利用して、ディスプレイというモノ同士がコミュニケーションしている様を表現しました。

Dlibってライブラリを使った機械学習を利用した顔認識なども試したのですが精度が高くちゃんと顔じゃないと顔と認識しなかった。

今回は「顔っぽい」を見つけることに注力するため、そういう精度のいいものではなく、丸が3つあって、その位置や大きさの関係性から顔っぽさを検出しました。アルゴリズムは取り急ぎ自分で考えたものを実装しています。
個人的には「曖昧な顔認識(ghost)」って呼んでいて、今後アート的な使いみちがありそうな可能性を感じていたりします。

アルゴリズムの話については、
openCvで取ったblobs(輪郭)ひとつひとつに対して、以下の処理を行います。

①まず一旦、仮にRightEye(仮)として登録
②他のblobsとのサイズ、距離を見て、LeftEye(仮)を設定する。該当するのがなければ①へ戻って次のblobに処理を移す。
③他のblobs(仮設定した右目左目を除く)とのサイズ、距離を見てMouthを設定する。なければ①へ戻る
④設定していた右目、左目、口を1つの顔っぽいオブジェクト(ghostFace)として設定する。

みたいな感じ。(すげー漏れありそう)

これをスレッド分けて計算させている感じです。雰囲気が伝われば嬉しい。
各blobsに対して上記の処理を行っていたので別スレッドで計算させる恩恵は大きかったっぽい。

 

そんで作品の話に戻ると、
顔っぽさを認識することで、映像に変化が起こり、その変化によってまた新たな部分に顔っぽさが見出されて映像が変化し…といった具合にディスプレイ同士が勝手にやりとりをし、その相乗効果によって、想像を超えた映像が生み出されるのではないか?的なところまで考えていたのですが、展示までにはどうもそこまでうまくは行かなかった。

パラメータの調整次第ではそんなことも実現できるかも。。
審査員の方からも似たようなご指摘いただいて、たしかにそのとおりなんだよなーと。分かる人にはわかるのかもしれないけど、それだけじゃさみしい。

 

個人的には、曖昧な顔認識っていうような(簡素な)アルゴリズムから自分で考えて実装して作品に組み込むということがたぶん初めてで、しかも2日くらいでなんとかできたというのは我ながら よく頑張りました◎です。半年くらい前の私には想像つかないようなことだったので、一応レベルアップしてたんだなと。
あと作る前に、ある程度頭で設計のイメージしてコーディングに移るという流れが取れたのもよかったです。ちゃんと設計できてないのについつい手を動かして試してみがち〜ってあるあるを払拭できた。

と言ってもできなかったことがあったり、お粗末なコードが多々あったりなので、、精進します…

この作品を作るに至るまで、メンバーの方とオンラインで1,2時間会議したりして、あーでもないこーでもないを繰り返しました。個人的にはそういう時間が貴重に感じるので楽しかったです。

反省点はたくさんありますが、参加できてとてもいい経験ができました。何よりいろんな方と知り合えたのが嬉しい。あとみんなやさしい。

今後、できればこの作品をアップデートもしたいです。

 

oF_テクネID

NHKの「テクネ  映像の教室」という番組で公募されているテクネIDに応募しまして、ありがたいことにプログラミング部門で優秀作品として選出いただきました!ヤッタ-!
http://www.nhk.or.jp/techne/id/content.html#programming

作った映像はこちら

 

以下、ふりかえりなど。


プログラミング部門で応募すると決めていたので、“プログラミングならではの映像”ってことを意識して作りました。

樹木生成というテーマはプログラミングと親和性が高くて、一般的にもなんとなく理解してもらいやすそうな気がします。
プログラムを勉強する時にtree構造がどうとか、二分木がどうとか、、、

個人的に樹木生成のアルゴリズム使ってなにかしてみたいなと思っていて、今回ちょうどいいタイミングだったので挑戦してみました。

 

 

こういう枝がニョキニョキ伸びるのはUnityなど3Dにより強いツールを使えば簡単なのかもです。
ただプログラミング感(コードを書いてるよ感)を自身でも感じたいのと、oFの勉強がてら、というような理由からoFで制作しました。

アルゴリズムの部分はofxSpaceColonizationというアドオンを使いました。
https://github.com/edap/ofxSpaceColonization
oF公式サイトのアドオンをなんとなくに見てて、たまたま発見しました。アルゴリズム系のアドオンは“なんかよくわかんなくても、なんか楽しい”ので時々チェックします。
アルゴリズムの詳細や参考にした論文について上記のgithubページに記載されていて、一応僕も少し勉強してから制作しています。

初めはこのアドオンを2D用にアレンジして、樹木を2Dで表現しようかと思っていたのですが、
AfterEffectsとかでサクッと作れてしまうものになりそう→プログラミング部門として出す意味ない
と気づきアドオン通り3Dの樹木生成でいくことにしました。

ただなんとなく作りたいものを作るわけでなく、目指すべきゴールを持って制作できたのはひとつ良かった点だと思っています。

 

 

アドオンのサンプルを参考にある程度までは割とすぐできた印象。

はじめの段階では文字を表現する実の数がもっと少なかったのですが、それだと文字として認識しにくいかもってなり、実を増やして(色も修正して)パッと見て認識してもらえるようにしました。
で、実の数を増やすとやはり動作が重くなったので、生成の計算処理を別スレッドで行っています。この点も今回個人的に頑張った・勉強になったところ。

before:

after:

ofxSpaceColonizeationのアルゴリズムでは枝のゴール地点(枝の先端)を予め指定したうえで、根っこのrootから枝が生えていきます。
枝が伸びきったときの最終的な形を予め指定できるので、実用的な話で言うと、「ざっくりこれくらいの大きさの、こんな形の木になるように枝を伸ばして」とパラメータを渡せば、その範囲でランダムに木のモデルを生成してくれるアルゴリズムです。
今回はこれを「だいたいTの形になるように枝をランダムで伸ばして」という形で利用し、枝が伸びきったタイミングで実を実らせるようにしています。
ちなみに余談ですが、ゲームなどでは木のモデルをたくさん用意して一本一本コピーして植えるよりも、こういったアルゴリズムで生成したモデルのほうが、モデルの容量を削減でき、動的に管理でき、かつ無限に異なるモデルを配置することができる、といったメリットがあるようです。

 

今回プログラミングで映像を作るということをしたわけですが、
プログラム上では毎回ランダムな成長の仕方をしており(実際は実の位置をある程度ランダムに分散させているだけ)、この例で言えば本来はそこがおもしろいところでもあったのだと思います。

最終的に映像という形にするのであれば、毎回ランダムで異なる計算がされていようと、予め枝の動き計算していようと、ひとつの映像として収めるのであれば同じなのですよね。
なので、おもしろさ100%でなかったかもという反省もあります。

最終的な文字一列の映像にするにあたっては、
oFの実行画面ををQuickTimeでキャプチャ録画 x 6文字分  → AfterEffectsで横並びにして書き出し
という手順を踏んでいます。

理想を言えば、
oFで6文字分の木を生成して回転させて〜、あとはそのまま動画書き出す、もしくは連番画像を書き出すaddonを使って動画生成して〜
という手順になると思うのですが、、、残念、力不足でした。

さらに言えば、はじめは枝が生えて文字が実って、そんで最後枯れていくまでをやりたかったのですが、これも力不足。

 

こういうの使って、文字だけじゃなく人の顔になる木を生成するとか、ありきたりかもだけど、おもしろそうだなーと思います。
最終的な理想は、リアルの木をハードウェアとして操作して表現したいのだけれど。