Shut the fuck up and write some code

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

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を読み進めます。

広告を非表示にする

AngularJSを触ってみた感想

 「嫌い」やら「死ね」やら「好き」やら、昼ドラばりの愛憎劇で話題沸騰中のMVCフレームワーク、AngularJSを勉強がてら触ってみたのでその感想を書きます。

 勉強作ってみたのはyoutube検索して検索結果からプレイリストに追加削除出来るようにしたもの。よくあるサンプルだとTODOばっかりなので少しアレンジしてみた。

http://verytired.github.io/angular-app/#/

 勉強の流れですが、ドットインストールで簡単に学んだ後(移動中に)、サンプルいじって、さらに自分なりのアレンジを加えて自分のサンプルを作ってみたという流れです。ドットインストールは深いことは学べはないけど、そこそこの深度で概要が理解出来るのでいいですね。前は動画内で書いてるコードのコピーが貼ってあリましたが、有料ユーザにしか開放されなくなって無料だと動画を見ながら直接写経せざる得ないの。でもそれが逆に良かったです。

 で、肝心のAngularについては「独特」「黒魔術」などと形容されることが多いですが、確かに「ngって何やねん!」とツッコミたくなる記法は癖あるなあと。双方向データバインディングはクソ便利だと思うけど、応用な効かなさそうな感は否めない。細かい演出実装を入れるとなると結構面倒なことになりそう。ただサックリとサイト作るには便利なのは間違いない。が、流儀には逆らえないし(逆らいづらい)、高い拡張性は無いというか、大変そう。デザイナさんが入ってエンジニアと同時に触るのに向いてるのかなとも思う。

 まあ他のFWについてはBackboneを20分くらい触って本を斜め読みしただけで他のFWはほとんど触ってないし、仕事で使うことも皆無なので、あまり偉そうなことは言えないですが! 選択肢としてはアリではないでしょうか。他のFWなんてアホみたいにありますしね

AngularJSリファレンス

AngularJSリファレンス

AngularJSアプリケーション開発ガイド

AngularJSアプリケーション開発ガイド

シングルページWebアプリケーション ―Node.js、MongoDBを活用したJavaScript SPA

シングルページWebアプリケーション ―Node.js、MongoDBを活用したJavaScript SPA

openFrameworks 0.8.4 iOS + Xcode6でビルド出来ない

世間はiPhone6の話題が多いのですが、自分といえば夏ー秋は仕事が多忙過ぎてビッグウェーブには乗り切れず・・最近になりようやく時間が出来てきたので久しぶりにoFを触ってみました。

Xcodeも6が出たので、最新リリース0.8.4を動かしてみようとしたのですが、iOS版はサンプルがエラーが出てビルド出来ない。もしやと思って空のプロジェクトをビルドしてみると、やはりエラーが出てビルド出来ない。またですか・・・そもそも Deployment Targetが3.1とかなってるじゃないですか。意味不明。ターゲットw変更しても下記のようなエラーが。

ld: warning: ignoring file ../../../libs/FreeImage/lib/ios/freeimage.a, missing required architecture i386 in file ../../../libs/FreeImage/lib/ios/freeimage.a (2 slices)
ld: warning: ignoring file ../../../libs/glu/lib/ios/glu-ios.a, missing required architecture i386 in file ../../../libs/glu/lib/ios/glu-ios.a (2 slices)
Undefined symbols for architecture i386:
  "_fwrite$UNIX2003", referenced from:
      _WriteProc(void*, unsigned int, unsigned int, void*) in freeimage.a(FreeImageIO.o-i386)
      LibRaw::dcraw_thumb_writer(char const*) in freeimage.a(libraw_cxx.o-i386)
      _opj_image_create in freeimage.a(image.o-i386)
      _png_default_write_data in freeimage.a(pngwio.o-i386)
      LibRaw::ppm_thumb() in freeimage.a(dcraw_common.o-i386)
      LibRaw::jpeg_thumb_writer(__sFILE*, char*, int) in freeimage.a(dcraw_common.o-i386)
      LibRaw::write_ppm_tiff() in freeimage.a(dcraw_common.o-i386)
      ...
  "_mktime$UNIX2003", referenced from:
      LibRaw::get_timestamp(int) in freeimage.a(dcraw_common.o-i386)
      LibRaw::parse_rollei() in freeimage.a(dcraw_common.o-i386)
      LibRaw::parse_riff() in freeimage.a(dcraw_common.o-i386)
  "_strerror$UNIX2003", referenced from:
      Iex::throwErrnoExc(std::string const&, int) in freeimage.a(IexThrowErrnoExc.o-i386)
  "_strtod$UNIX2003", referenced from:
      _png_handle_sCAL in freeimage.a(pngrutil.o-i386)
ld: symbol(s) not found for architecture i386
clang: error: linker command failed with exit code 1 (use -v to see invocation)

どうしたものかと一瞬思いましたが対応方法はすでにありました。素晴らしい。

Xcode6 Beta + OF 0.8.1 for iOS 8.0 - openFrameworks

Deployment Targetが3.1に指定されているのを任意のバージョンを指定して、main.mmに下記を追記。

extern "C"{
    size_t fwrite$UNIX2003( const void *a, size_t b, size_t c, FILE *d )
    {
        return fwrite(a, b, c, d);
    }
    char* strerror$UNIX2003( int errnum )
    {
        return strerror(errnum);
    }
    time_t mktime$UNIX2003(struct tm * a)
    {
        return mktime(a);
    }
    double strtod$UNIX2003(const char * a, char ** b) {
        return strtod(a, b);
    }
}

とりあえず空のプロジェクトでのビルドは通りました。自分のアプリのソースのビルドが通るかはこれから試します。怖い!