Shut the fuck up and write some code

グダグダ言わずにコードを書きたいブログ

AtomからProcessingを実行するPackageを作ってみた

久々にProcessingを触り始めたところ、やっぱり標準エディタはカスタム出来ず使いづらいなと思い、Atomでの開発環境と整えることに。 もうSublimeの時代は終わったw

シンタックスハイライトのパッケージは既にあったのでそちらを利用。

Atomから直接実行したいなと思ってそのパッケージも入れてみるもエラーが出てインストールが出来ない・・・どうもバージョンが古いようだ。アップデートも全然対応してない模様・・・なので新しいバージョンでも動くように、パッケージを新たに作って移植してみた。ついでに公開もしてみました。

atom.io

processingのコマンドラインツールをインストールしてあればalt+cmd+bで実行可能。

atom結構いい感じなのでもう少し使い込んでみよう。

ofxBox2dを使う時のオブジェクトの宣言

今更ながらにoFでのopenCV+Box2dという組み合わせを試してたのですが、某書のサンプルを使ってたみたところ動かず、かなりハマったのでメモっておきます。

環境はoF0.8.4+ofxBox2d最新版です。

某書のサンプルの記述ではBox2dのオブジェクトのインスタンスを生成して

ofxBox2dCircle circle;
circle.setup(box2d.getWorld(), pos.x, pos.y, 4);
contourCircles.push_back(circle);

となっていますが、これだとどうも挙動がおかしい。インスタンスは生成されて描画されますが、1mmたりとも全く動かない。 Box2Dめえ・・・。

で次のような記述に変更。

ofPtr<ofxBox2dCircle> circle = ofPtr<ofxBox2dCircle>(new ofxBox2dCircle);
circle.get()->setup(box2d.getWorld(), pos.x, pos.y, 4);
contourCircles.push_back(circle);

この方法の意味がよくわかってないのですがどうもofPtrというクラスでラップしてやらないといけないらしいです。 サンプルがこのような記述になっていたので、おそらくこの書き方がデフォルトらしい。

vanderlin/ofxBox2d · GitHub

もちろんヘッダの定義も

vector <ofPtr<ofxBox2dCircle> > contourCircles

と書いておきます。

これでとりあえず想定される挙動になりました。

f:id:very_tired:20150312184502p:plain:w300

某書第2版も出版されてから結構経つのでそろそろ新しい情報をとりまとめた本が出て欲しい・・・。

oFShaderでGLSLを読み込んで表示

Three.js経由でwebGL触り始めてシェーダーに興味が出てきて、本格的に触り始めたのでoFでも試してみました。

試した環境はopenFrameworks iOS 0.8.4です。

既にoFの中に、GLSLファイルを読み込むサンプルがあるので(iosES2ShaderExample)それをいじる形で。

まず頂点シェーダファイル作ります。

attribute vec4 position;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;

void main(){
    
    vec4 pos = projectionMatrix * modelViewMatrix * position;
    gl_Position = pos;

}

これをhoge.vertで保存。

そしてフラグメントシェーダを作ります。 サンプルにこちらをまるっと使わせてもらいます。 http://glsl.herokuapp.com/e#5423.1

これをhoge.fragで保存。

シェーダファイルの置き場所はプロジェクトフォルダ内のbin/data/shadersとしてます。

で、oF側の実装。 ロード処理をsetupに記述。

void ofApp::setup() {
   
    shader.load("shaders/hoge.vert", "shaders/hoge.frag");

}

描画処理をdrawに記述。 ofRectで描画領域を作るのがポイントです。

void ofApp::draw() {
    ofPushStyle();

    shader.begin();
    
    shader.setUniform2f("mouse", mouseX, mouseY);
    shader.setUniform2f("resolution", ofGetWidth(), ofGetHeight());
    shader.setUniform1f("time", ofGetElapsedTimef());
    
    //描画領域
    ofRect(0, 0, ofGetWidth(), ofGetHeight());
    
    shader.end();
        
    ofPopStyle();
}

結果

f:id:very_tired:20150306162245p:plain:w300

openGL ES 2.0 と webGLの互換性がどこまであるのか良くわかってないですが、とりあえず動くっぽいです。

追記 3/10

main.mmでES2のレンダリングを有効にしておかないと動かないですね

int main() {
    ofAppiOSWindow *window = new ofAppiOSWindow();
    window->enableRendererES2();
    
    ofSetupOpenGL(window, 1024, 768, OF_FULLSCREEN);    // setup the GL context
    ofRunApp(new ofApp());                            // run app.
}

Audio Reactive + Shader Effect by Three.js

openFrameworksをやっていたら「OpenGL勉強しなければ」→「WebGLでも書けるかも」→「 Three.jsで良くね?」という流れになり、気が付いたら Three.jsやってました。

今回作ってみたのはシェーダとWeb Audio APIを組み合わせてビートに合わせて適用するシェーダをランダムで切り替える Visualizerのデモサンプルです。

実装自体はTypeScriptを本格的に使い始めてみた。文法は書きやすいけど、意味不明(意味はあるのだろうけど自分の理解が足らず)のコンパイルエラーが多くてまだうまく使いこなせてない。書き続けてたら何とかなりそうだけど。

そして今更ながらに動画をアップすることを始めてみたので、久しぶりにYoutubeにアップ。7年ぶりに動画をアップしてみました、あんまりビートに合わせて切り替わってる感じが出せずじまい・・・もっと突っ込んで勉強しないとダメだな。

実装方法ついては、こちらを参考にしたというか、もうコードとかモロ使わせて頂いております。感謝。 http://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/

WebGL/Three.js(+TypeScript)だいぶ面白くなってきたのでもっと掘り下げていきたい。oFもやらねば。言語は違えど、Visualizationの方法論は変わらないので、ゴリゴリ書いていければと。

INTERACTION DESIGN―インタラクションデザイン

INTERACTION DESIGN―インタラクションデザイン

こんな本も出てるので、 もうゲーム開発はお腹一杯なのでCreativeCodingの本格的に盛り上がってくるといいですな。

oFで実行画面のキャプチャ画像を保存する

取り急ぎ手っ取り早く画面キャプチャをしたいときにkeyPressedなどにペロっと貼って使う用です。

    // ofImage定義
    ofImage myImage;
    
    //キャプチャの描画
    myImage.grabScreen(0, 0, ofGetWidth(), ofGetHeight());
    
    //書き出し
    myImage.saveImage("./file_name.png", OF_IMAGE_QUALITY_BEST);

これでプロジェクトフォルダのbin/data以下にキャプチャした画像が出力される。

oF 0.8.4 (ios)でのビルドエラーの対処

昔作ったoF(ios)アプリのソースを0.8.4+Xcode6.1.1環境でビルドしようとしたところ

of_v0.8.4_ios_release/libs/openFrameworks/types/ofTypes.h:9:10: 'tr1/memory' file not found

なるエラーが出た。

一通り調べてるみるとどうもDeployment Targetを6以下にしないとダメな模様。6.0にしたところビルド通りました。iOS8.1でも動作しました。

こういうエラーが多いのがoFの一番悩ましいところだなあ。

ofMapを使う

openFrameworksをまたまた触り始めてる。毎度通常業務で時間取れず、勉強がかなり中断しがちなんですが・・・今度こそコンスタントに触ってアプリの一つや二つ作りたい。

今回は1から勉強しようと思ってMatering openFrameworksを買いました。

Mastering openFrameworks: Creative Coding Demystified

Mastering openFrameworks: Creative Coding Demystified

次いでにvoyageも買ってkindle版で購入。簡単に辞書が引けるので便利。

なので読書記録になりますが、得たものをこまめに書こうかなと思います。まあちょっとした気付きレベルですが。。。

今回はofMapの使い方。

float ofMap(float value, float inputMin, float inputMax, float outputMin, float outputMax)

第一引数に変換したい値を入れて、第二、第三にその引数のレンジ(最大、最小)を指定、第四、第五引数に変換するレンジを指定する。

また第六引数でclampをbooleanで指定してやるとレンジ内で値が収まるようになる。

float f = ofMap(5, 0, 10, 0, 20); 
 cout << f << endl; //出力は10

float f = ofMap(30, 0, 10, 0, 20,true); 
 cout << f << endl; //出力は20

引き続きMastering oFを読み進めます。

広告を非表示にする