HOMEWORKS2020に参加しました。

もう2ヶ月近く前の話ですが、、、
1月23日24日と大阪のPINE BLOOKLYNというイベントスペースで、
HOMEWORKSという展示のイベントに参加させていただきました。

その中で私は drawingBlobscapes という作品を展示させていただきました。

drawingBlobscapes

20210124_1324.gif

画像まとめ(flickr)
20200123-24_HOMEWORKS

コロナ禍ということもあり、中には東京からリモートで展示される作家さんもいらっしゃいましたが、私は帰省も兼ねて厳重にコロナ対策を行った上で現地にて参加させていただきました。

ちなみに大阪移動で新幹線のグリーン車に初めて乗ったのですが、普段乗っているものと結構違って少し衝撃でした。広くてすげー快適、人もわりかし少なかった。

経緯

HOMEWORKSについて以前から名前は知っていて、参加してみたいなあと思っていた展示でした。たまたま会社の同僚から紹介いただいて、いい機会だったので、ぜひにと参加させていただきました。

当初はVRゴーグルに使われるような高密解像度モニタを使って、
一見写真や絵画に見える展示物の中で一部映像が表示されているという作品を作ろうと考えていたのですが、
VRモニタとPCの相性が割と限られていたようで、予定していたPCではモニタに映像が正しく表示されないという自体が発覚し、展示内容を再検討しました。VRモニタはPC選んで別の機会に使ってみたい。

なにか使えそうなアイデアないかなと過去のプロジェクトなど見ていると、ちょうど1年前にopenFrameworksで作成していた実験プロジェクトを発掘し、自分としては改めて好きな表現だなーと思ったので、こちらを作品として仕上げてみることにしました。

作品について、

概要的な話をすると、
openFrameworksを始めてからkyndさんというアーティストを知り、プログラミングで作るアナログな表現に魅力を感じていました。

作っていく過程で、
抽象的に変換された自分の像を見ることで、自分にしかそれは自分だとわからない表現が面白いなと思ったり、
自分は写真に映るのが少し苦手なので、こういう曖昧な像の残り方は好都合だと思いました。

ちょっと余談ですが、記憶を探るには小石程度のきっかけで良いとパクノダが言ってました。
実際には、記憶は形を留めないけれど。美化され風化されるものだけれど。
個人的に思い出すということに関しては、別に正確でなくても十分に意味は果たしている、
むしろ正確に思い出すことはそこまで重要でなく、美化され風化され、
都合よく形を変えた方が思い出すということは豊かな気がします。

手書きのようなイラストチックな表現を目指した結果、いままでなんとなく好きだった表現に少し理由が見えてきた気がしました。

同じ絵でも、他人にはわからないけど、自分にとってはなんとなく理解できるものは、愛着を持ちやすいと思います。自分にだけの度合いが強ければなおさら。
また一見なんの手がかりにもならない写真や映像が、ある人にとっては、何かを思い出すきっかけになればいいなと思っていました。エモ。

イラストチックにするだけであれば、映像をアニメ調に変換するとか、鉛筆画風に変換するとか、シェーダーや機械学習を使った手法がたくさんあります。

それも悪かあないのですが、別の手法をとった場合、何かしらの制限によって別の手法が必要になった場合、自ずと差別化された新しい表現が生まれるものかもしれないです。
まあ今回の話では時間や自分の能力などの制限が仕方なく発生している部分もありますが。
だからこそ、このプロトタイプとしてゆるく展示できる場所には大きな意味があるとも感じました。


技術的な話をすると、
主な技術としてはopenCVのfindContours , k-meansというものが使われています。

撮影した映像の1フレームを対象にk-meansの処理を掛けることで、その1枚で使われている主な色を抜き出します。

K-meansとは、ものすごくざっくりと説明すると、複数ある値を指定したK個のクラスに分類する手法です。普通、平均を出すと、複数の値から1つの平均値を取り出しますが、それが複数個取り出せるみたいな。(今回は10個とか)
以下の図でいうと、XYにたくさんプロットされている点を3つのクラスタに分類すると、各点はどの分類に当てはまるか、またその主となるXYは(薄い大きな+OX)どんな値か。みたいな。
そして、取り出した色をもとにfindContoursという処理をあてます。

kmeans

findContoursについてもざっくり説明すると、1枚の画像から輪郭を検出するような処理です。
ピクセルごとに周りのピクセルと比較して明るさに大きなギャップがあるピクセルを輪郭のエッジとするみたいな。
で今回は、色を指定してこのfindContoursをかけ、指定した色の輪郭を検出するということをしています。

こうして検出された輪郭はいくつかの点の情報を持っています。この点をつないで輪郭線を書くわけなんですが、このときこの点の数を間引いていくことで抽象的な表現にしています。要は多角形を三角形に近づけていくみたいな話。
図形に近づけることで少しおしゃれな見え方になったりしてたのしい。gifでみると変化が見られたりしてたのしい。

でまた、この輪郭のことをContourとかBlobと呼ぶことをよく見かけます。
この輪郭・塊の集合で表された像を描いていく作品だったので、タイトルをdrawingBlobscapesとしました。

ちなみに本作はopenFrameworksを使用して制作したのですが、
K-meansは内部的にはピクセルに対して行われる処理ではあるので割と重たい処理です。なので、この処理は別スレッドで処理するようにしています。
来場者の中にopenCVに詳しい方、openFrameworksを触っていた方もいらしていて、まさにスレッドなど自分としては少し頑張った部分について質問していただいた方がいて嬉しかったです。

その他、今回はほぼshaderを使っていないので、今後のブラッシュアップもいろいろできるかなと思ったり。ただ、使わなかったからこその表現であった気もします。

おおまかな作り自体は1年前の元プロジェクトの時点でできていたものの、
展示用に最適化であったり、パラメータの調整的なところであったり、
簡易でマッピングの機能もいるわと思って、ofxWarpMeshで対応したり。

あとWebカメラの映像をそのままこの変換に掛けるのでなく、彩度やコントラストの調整は事前にWebCamSettingというアプリを使って処理しました。
その調整くらいならプロジェクトに仕込んでもよかったけど、ギリギリまで別の所を詰めるべきだと思ったので、そこは既存のアプリをありがたく使おうと割り切りました。こういう展示なら十分。

感想

思っていたよりもお客さんが来てくれていて、だけど会場が広くて込み過ぎもせず、とてもいいイベントに参加させていただきました。
めちゃくちゃ良いスペースだったのですが、もう営業終了してしまうということで非常に残念。

リアルな展示ではお客さんから直接感想やフィードバックを貰えるので、やった実感があって楽しかったです。

展示しながら人がいないタイミングでパラメータいじってみたり、gifでも出力しておきたいなと思って、急遽1分毎くらいに3秒分くらいを連番で書き出す機能を実装してみたり。個人的にはライブ感のある展示で退屈しなかったです。これもゆるめの展示だからこそ。

プロジェクターを割と大きなスペースにドンと投影するのは久しぶりだったので、やっぱりそれだけで少し嬉しかったです。
コロナが落ち着いてきているので、また少しずつこういうイベントが増えて参加できるといいなあ。

ご来場いただいたお客さん、企画運営などしてくださった方々、参加作家のみなさま、お疲れさまでした&ありがとうございました!!

20210124_1422.gif
20210124_1326.gif

#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が15x15の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を使って動画生成して〜
という手順になると思うのですが、、、残念、力不足でした。

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

 

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