oFでBase64変換する

openFrameworksでBase64というstringに変換する方法

Base64てのは画像ファイルとか音声ファイルとかいろんなデータを64種類の文字列に変換する方式のことで、これすることでデータサイズはちょい増えるけどたいていのファイルを簡単にテキスト化して受け渡しできるというもの。みたい。
https://ja.m.wikipedia.org/wiki/Base64

ターミナルとかなら簡単で、ofSystemなどでコマンド実行して〜みたいなやり方もあると思いますが、oF上でスマートに変換したかったので、いろいろ調べてまとめました。

base64のエンコードとかデコードはC++のネットワーク系ライブラリPocoの中にも実装されていて、今回のやり方ではそれを利用しています。

※of0.10.0からはPocoがアドオン化されているので、ProjectGeneratorなどからofxPocoを追加する必要があります。

ofImageにおける変換については探してみたらもろ答えがあった。ありがたみ🙏
https://gist.github.com/kidapu/0b9c2cbe98191a394c80

 




 

あと、変換したstringに改行コードが含まれている場合があって、それが邪魔してデコード失敗するときなどがありました。
というわけで、変換後のstringから改行コードを削除する関数(removeCRLF)も用意しています。
参考にしたのはこちら、そのままだけど。
https://teratail.com/questions/34367

他にも音声ファイルを変換したかったので、やりました。
※音声ファイルはofSoundBufferをwavとしてofBufferに直しています。こちらは後日ついきします。

とりあえず画像や音声データ→Base64に変換(エンコード)がしたかったのでそれのみ。

確認の時に使ったブラウザ上で画像↔Base64の変換確認できるサイト
https://lab.syncer.jp/Tool/Base64-encode/

最近よくoFからAPIを叩くのですが、その時にファイルを送るときは大抵Base64に変換したものを送るので、こうやってまとめておくと便利かも☺︎

使い方としては、ofApp.hなどで #include “ofBase64.h” ってしといて

string imageData = ofBase64::base64_encode(fbo);

という感じで。

classを作る代わりにnamespaceを作って、static関数を定義すれば、グローバルな関数(厳密には違う?)を作れるんですね。地味に結構便利そう。

 

ofColor::red みたいな書き方のwarningを消す

めちゃ些細なこと。openframeworksネタ。

他人の環境でどうなってるのかわからないのですが、ofSetColor(ofColor::red)みたいな書き方をするとXcodeでwarningが出てました。

Instantiation of variable ‘ofColor_<unsigned char>::red’ required here, but no definition is available

別にビルドする分には問題なかったのですが、warning消すことできたのでメモ。

参考にしたのはこちら
https://github.com/openframeworks/openFrameworks/issues/5546

で実際にしたのはこんな感じ

ofGraphics.hで以下を追加。

//### ADD ######################
// reffered from https://github.com/openframeworks/openFrameworks/issues/5546
extern template struct ofColor_<unsigned char>;
//##############################

これでwarning出なくなったので、気兼ねなくofColor::redとか使える!

たまたまつい最近参考にしたフォーラムが更新されてました。githubのoF0.9.8なら解消されているのかも。

openFrameworksで作った.appを配布する

openFrameworksで作ったアプリを共有したい時、どのファイルを共有すればいいのか情報があまりなかったので、メモ。
といっても下記参考サイトをそのまま。

実際どの方法が正しいのか私自身よくわかってないけれど、とりあえずは以下の方法が良さそう。環境はMac OSXでのみ確認、、、確認中です。
Mac同士では問題なさそうだけど。。

手順はふたつ!
まず、XcodeからBuild Phasesを開いて、RunScriptに以下を追加する。

cp -r bin/data "$TARGET_BUILD_DIR/$PRODUCT_NAME.app/Contents/Resources";

※上をコピペすると”がフォントの違い?でパスとして認識されませんでした。
→「”」だけ手入力で修正したらパスの文字列が赤色になって有効になります。

うえすることで、bin/data以下に入っているイメージとかなんやかんやが、ビルド時にできるOOO.appファイルのResourcesファイルにコピーされるわけですね。
これがうまくいってるかはビルドして生成されるOOO.appを右クリック→パッケージの内容を表示 でResourcesフォルダ確認できます。

で次に、ofAppのsetup()内で以下を追加

ofSetDataPathRoot("../Resources/data/");

うえすることで、bin/dataフォルダではなく、app内のResourcesフォルダからデータ取ってくると指定している。

そんな感じだと思います。

こうすれば、OOO.appを他のPCでも動かせるようになります。
dataフォルダに画像素材とか置く必要ないのであればこんな処理も必要ないだろうけど。

参考:
https://stackoverflow.com/questions/4882572/how-to-bundle-an-openframeworks-application-in-xcode-relative-resource-linking

20190106追記

app化したファイルをAirdropで別のPCに送ると、dataフォルダを参照できないことがありました。実際には、ofxGuiの設定xmlをセーブなどできてもロードできないというもので、たしかにappのコンテンツの中のResourceフォルダのxmlが更新されていませんでした。

詳しいことはわかりませんが、Airdropで送ったappをダウンロードフォルダにおいたまま開くと上のような現象が起こり、一度デスクトップや別フォルダに移動させると正しいdataパスを指定していました。

ofFilePath::getCurrentExePath() などでちらっと確認したところ、Airdropで送りたてのappではprivate/~~の一時的なフォルダにappが置いてあるみたいで、期待するdataフォルダ(この場合は~~~/downloadsにあると思ってた)を参照しないようです。

とにもかくにも上の現象が起こる場合は、一度別のフォルダに移動して開いてみると良いかもしれません。

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

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

 

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