前に Audio API で音を作ったので、音を足した動画にしてみます。
カテゴリー: OpenGL
Canvasの描画を動画にする
GLSL などで動かした canvas 上の絵を動画にしてみたい。
MediaRecorder API を軽く触ってみます。
動作環境は Chrome、開発に React (Next.js)、GLSLは gl-react を使っています。
【つぶやきGLSL】スポットライト風のアニメ
ツイッターでGLSLを書くという試み「#つぶやきGLSL」があります。
266文字という短いコードで何とかしようという楽しい遊びです。
今回描いたものは結構手こずったので出来上がるまでの流れと、文字数削減の方法を残しておきます。
ツールとして twigl.app を使わせていただきます。
過去のコードなどは以下に置いてます。
【GLSL】雷を降らせる
【GLSL】2点を結ぶ線分を書く
【GLSL】2点を結ぶ直線の補足
【GLSL】2点を結ぶ直線を書く
GLSL で雷を書いてみようと思ったので１から書いていく。
とりあえず直線をと思って適当に書くと微妙に見た目が悪かったりするのが気になったので、まずはきれいに直線を書くことを考えます。
環境によっては draw() とかで済ませられそうなものですが、GLSLで書こうとするとちゃんと考える必要がありました。
【GLSL】ドット絵パターン
GLSLでドット絵のパターンを考えていて、ひし形（正方形を４５度傾けた形）ドットを作りたかったので色々試して勉強します。
新アプリ「カラーマスター」をリリース
GLSLで集中線を書く
漫画やアニメなどでよくある集中線をGLSLで実装します。
テクスチャを読み込んで混ぜるのが一番簡単ですが、形状や場所に限界があるのでGLSLの関数を使って自由に書けるようにします。