読者です 読者をやめる 読者になる 読者になる

Shut the fuck up and write some code

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

Audio Reactive + Shader Effect by Three.js

Three.js WebGL

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の本格的に盛り上がってくるといいですな。