Kawanet Blog II

アクセスカウンタ

zoom RSS openFrameworks ワークショップでバージョン 0.07 を使ってみた

<<   作成日時 : 2011/04/30 20:17   >>

驚いた ブログ気持玉 3 / トラックバック 0 / コメント 0

openFrameworks の作者ザッカリー・リバーマン(Zachary Lieberman)さんの来日に合わせて
開催されたワークショップ『Flying Tokyo #5 Special: openFrameworks Workshop』で、
実際に作ってみたデモを紹介します。イベントについては、MTL ブログ にも書きました。
(書き換えたソースコードは、どうやって公開するのがいいかなあ…)

デモ その1


0.07 に取り組む前に、午前中の初心者セッションでは 0.062 を使います。

最初のワークは、ofRect() 関数で文字を描いてみようというお題。
前に Hello, world は書いたことがあった ので、それをベースに書き換えてみました。
既存のソースコードを書き換えて始めるのが、openFrameworks らしいやり方。

Study #1 at Flying Tokyo openFrameworks Workshop by @zachlieberman.See also http://bit.ly/l7algi

デモ その2


次に、update と draw で動かしてみようというお題。
これも前に書いた HSV→RGB の色コード変換のコード を使って、
色を変えたり、マウスカーソル位置に応じて回転させてみた。



openFrameworks の文化に合わせて、愚直にソースコードをコピー&ペーストして
単純なコードを心がけますが、ついつい専用の文字クラスを作りたくなってしまう。

デモ その2(続き)


しかし、画面キャプチャの静止画だと伝わらないので、残像を残すようにしてみました。
ofSetBackgroundAuto() と ofRect() で前のフレームを半透明にして残しています。



でも、こう見ると、何だかイマイチ格好良くないですね。(アレレ?)
同じ openFrameworks を使っても、いい表現にするには、センス大事ですね。

デモ その3


次に、Zach さんのワークショップ教材 ZIP ファイルをダウンロードして、
その中のサンプルコードを改造していきます。
bouncingMultipleObjectExample2 をベースに、
さきほどの半透明テクニックでボールの動きを軌跡として残してみました。
画面の左側が軌跡あり、右側が標準(フレームごとにリフレッシュ)です。



こうした処理を追加しても、さすが openFrameworks でスムーズに60fpsが出ます。

デモ その4


午後は、上級者編。ここから openFrameworks の次期バージョン 0.07 に取り組みます。

サンプル BillboardExample を書き換えて、各パーティクル毎に色を付けてみました。
10,000頂点ありますが、ofVbo クラスで、OpenGL の VBO 拡張を使って高速な描画を実現しています。



色の指定は、0.07 で新登場する ofColor クラスを使って、HSB→RGB 変換をしています。
なんで今までの openFrameworks 0.062 に ofColor クラスがなかったのか不思議です。
ただし、ofColor は RGB の各値が float 0〜255 を想定したクラスですが、
ofVbo クラスの setColorData は、0〜1 を想定しています。
/ 演算子が override されているので、color /= 255; が必要なので注意。

田所さんのデモ作品


ワークショップで、川崎の隣の席は Beyond Interaction の田所さんでした!
田所さんも同じサンプルコード BillboardExample をベースにしてデモ作品を作られました。
以下 MTL ブログ にも書きましたが、リアルタイムに 40,000個のパーティクルを操作しています。

photo

openFrameworks なら 60fps で 40,000個のドット操作も実現できそうな気もしますが、
このデモでは、シェーダーを使っていて、全ての頂点にテクスチャ画像が貼ってあるのです。
VBO により、頂点座標、色、ぼかしなどを配列経由で一括操作しています。

BillboardExample は静的テクスチャ画像 dot.png を使ったサンプルでしたが、
田所さんのデモでは Mac 内蔵のウェブカメラの映像に差し替えています。
なんと、40,000個のパーティクルは、全てリアルタイムのビデオ映像なのです!

例えば、宇宙空間に無数に存在する『パラレルリアリティ』を表現したアート作品なのか、
あるいはトンボのメガネなのか、いろいろなテーマを設定して、拡張していけそうです。

(関連記事)


2011/01/09 - openFrameworks で Hello, world! してみる (Mac OS X)
http://kawa.at.webry.info/201101/article_1.html
2011/01/09 - openFrameworks+ofxKinect アドオンで Kinect の深度センサーを試す
http://kawa.at.webry.info/201101/article_2.html
2011/01/12 - openFrameworks+ofxiPhoneでiPhone・iPad用Hello, world!
http://kawa.at.webry.info/201101/article_3.html
2011/04/30 - Zachary Lieberman 講演『openFrameworks workshop』を開催しました!
http://mtl.recruit.co.jp/blog/2011/04/zachary_lieberman_openframewor.html

テーマ

注目テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 3
驚いた 驚いた 驚いた

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
openFrameworks ワークショップでバージョン 0.07 を使ってみた Kawanet Blog II/BIGLOBEウェブリブログ
文字サイズ:       閉じる