はじめに
この記事は先日Flying Tokyo #19に参加した際にCinderに触発されたopenFrameworksを使っている大学生の書いた記事です。
すごいよCinder!!
Flying Tokyo #19について
Cinderについて
Cinderとは、画像、音声、動画等を簡単に処理＆可視化できる、主にビジュアルデザイン向けの強力なC++ライブラリであり、The Barbarian GroupのAndrew Bell氏が中心となってオープンソースとして開発が進められています。
同様の思想を持つProcessingやopenFrameworksによく似ており、C++で簡単に記述できるうえ、Windows、MacOSX、iOS(iPhone/iPad)といった複数のプラットフォームをカバーしています。
https://research.preferred.jp/2010/11/cinder-intro/より引用
openFrameworksとの違いについて
ビジュアルデザイン向けの強力なC++ライブラリという点でかなり両者は似ています。私もCinderを始めたばかりなので、詳しいことはわかっていませんが、Simonさんの話を参考にさせてもらうと
そもそもProcessingやopenFrameworksはアーティスト、デザイナー、そして学生にコーディングを教えるためにつくらたもので、CinderはというとBarbarian Group(米国のインタラクティブマーケティング企業)の内製ライブラリとして誕生し、プログラマがプログラマのために作ったものである。そのためCinderはアーティスティックでクリエイティブなツールをその中心に置きながらも、モダンで標準的なC++言語の作法を尊重するという特長を持っているらしい。
確かに今回のワークショップでも、ある程度C++11やテンプレートに関する知識、const correctnessとか、Smart Pointerとか知識あるの前提みたいな感じだったので、oFより敷居は高いかもしれません。
しかしながら、setup(),update(),draw()があるよとか、openFrameworksをやっていれば役立つ知識はかなり多いです！
Cinderのすごいとこ！(Flying Tokyo #19で感じた点)
- Runtime Compileのblock(oFでいうとこのaddon)があるのでライブコーディングできちゃう！(Cinder-Runtime)
- ファイルなど(画像ファイル、ソースファイルなど)に変更があった場合の監視ができ、イベントを受け取れる(oFでも多分できるけど、CinderはWatchDogでサポートしてくれている)
- イベントは
getWindow()->getSignal~~みたいなので大体受け取れてイベント駆動っぽいのも書きやすい。 - Windowの指定が簡単、複数台ディスプレイとかがあってもどこに何を出すかとかの設定がとてもしやすい。
- オブジェクト指向のライブラリ設計アプローチ。例えば四角形を描画するときoFでは
ofDrawRectangle( x, y, w, h )と書いていたけど、xとか何入れてるかよくわからない、、、対してCinderはgl::drawSolidRect( Rectf( x1, y1, x2, y2 ))のように書く。(最近ではoFでもそのような書き方もサポートされたが、) - Batchというのを使うと、Gpuをうまく使える！oF以上にパフォーマンスあげるのがライブラリのおかげで楽な面が多い。
- geomのサポートが熱く、3Dモデルとかなくても簡単な地形など作れる！(Teapod/Sphere/Cylinder/WireCapsuleなどのSourceが一行で呼び出して使える+Perlin Noise,Twist,Transformなどでの変形)(oFでも3Dモデルなくても作れたりするけど、transformとかあった？？かな？？)
などなど...
参考
Workshopの際に講師のSimonさんが準備してくださったレポジトリをTeiichi Otaさんが翻訳を加え、私が多少修正、コメントを加えたものです。READMEが超充実してるので、参考にどうぞ！
https://github.com/Hiroki11x/FlyingTokyo19
特に、コンパイラを標準のものを使用していない方、Cinder-Runtimeを使う際にinstall.shでコンパイラが怒られる方、こちらが参考になればと思います。
OSX の gcc を変更した話
Simonさんのサンプルプロジェクト
以下にSimonさんが作られたサンプルプロジェクトがまとまっています。その中の幾つかを紹介します。
1. CascadedShadowMapping
![gif1]
(https://github.com/Hiroki11x/Gif_Animations/raw/master/cinder/CacededShadowMapping.gif)
2. PBRBasics
![gif2]
(https://github.com/Hiroki11x/Gif_Animations/raw/master/cinder/PBRBasics.gif)
3. PBRTexturingBasics
![gif3]
(https://github.com/Hiroki11x/Gif_Animations/raw/master/cinder/PBRTexturingBasics.gif)
4. ParallaxCorrectedCubemap
![gif4]
(https://github.com/Hiroki11x/Gif_Animations/raw/master/cinder/ParallaxCorrectedCubemap.gif)
5. TessellatedNoise
![gif5]
(https://github.com/Hiroki11x/Gif_Animations/raw/master/cinder/TessellatedNoise.gif)
Blockのサンプル(openFrameworksで言うaddon)
6. CinderImGui
GUIツールキットimguiのCinderBlockです。
よくあるコールバック式ではなく、Immediate Mode という少しめずらしい構造をしています。
例えばボタンなら以下のような形です。スライダーなども大体こんなかんじです。
// draw 関数内
if(ui::Button("button 1")) {
printf("push !\n");
}
毎秒何回も更新されるアプリケーションに大変親和性の高いGUIパラダイムと言えるでしょう。
openframeworksのaddonもあります >> ofxImGui
![gif6]
(https://github.com/Hiroki11x/Gif_Animations/raw/master/cinder/CinderImGui.gif)
7. CinderRuntime
これはopenFrameworksで言うaddonのsampleプロジェクト
![gif7]
(https://github.com/Hiroki11x/Gif_Animations/raw/master/cinder/CinderRuntime.gif)
標準のサンプル
8. ClothSimulation
sample内に標準で入ってます！
![gif8]
(https://github.com/Hiroki11x/Gif_Animations/raw/master/cinder/ClothSimulation.gif)
9. DeferredShadingAdvanced
sample内に標準で入ってます！
![gif9]
(https://github.com/Hiroki11x/Gif_Animations/raw/master/cinder/DeferredShadingAdvanced.gif)
10. EarthQuake
sample内に標準で入ってます！
![gif10]
(https://github.com/Hiroki11x/Gif_Animations/raw/master/cinder/EarthQuake.gif
)
11. ExponentialShadowMap
sample内に標準で入ってます！
![gif11]
(https://github.com/Hiroki11x/Gif_Animations/raw/master/cinder/ExponentialShadowMap.gif)
12. FallingGears
sample内に標準で入ってます！
![gif12]
(https://github.com/Hiroki11x/Gif_Animations/raw/master/cinder/FallingGears.gif)
13. Flickr
sample内に標準で入ってます！
14. Geometry
sample内に標準で入ってます！
15. GoodNightMorning
sample内に標準で入ってます！
16. MandelbrotGLSL
sample内に標準で入ってます！
17. MeshVoxels
sample内に標準で入ってます！
18. NormalMapping
sample内に標準で入ってます！
19. PaletteBrowser
sample/_timeline内に標準で入ってます！
![gif19]
(https://github.com/Hiroki11x/Gif_Animations/raw/master/cinder/PaletteBrowser.gif)
20. ParticleSphereGPU
sample/_opengl内に標準で入ってます！
![gif20]
(https://github.com/Hiroki11x/Gif_Animations/raw/master/cinder/ParticleSphereGPU.gif)
21. PickingFBO
sample/_opengl内に標準で入ってます！
![gif21]
(https://github.com/Hiroki11x/Gif_Animations/raw/master/cinder/PickingFBO.gif)
22. VoronoiGpu
sample内に標準で入ってます！
![gif22]
(https://github.com/Hiroki11x/Gif_Animations/raw/master/cinder/VoronoiGpu.gif)
23. Wisteria
sample内に標準で入ってます！
![gif23]
(https://github.com/Hiroki11x/Gif_Animations/raw/master/cinder/Wisteria.gif)
他のすごそうなサンプル集
追記
Ushio@githubさんからCinderImGuiについて編集いただきました、ありがとうございます！