Canvasの描画を動画にする

GLSL などで動かした canvas 上の絵を動画にしてみたい。

MediaRecorder API を軽く触ってみます。

 

動作環境は Chrome、開発に React (Next.js)GLSLgl-react を使っています。

続きを読む Canvasの描画を動画にする

【つぶやきGLSL】スポットライト風のアニメ

ツイッターでGLSLを書くという試み「#つぶやきGLSL」があります。

266文字という短いコードで何とかしようという楽しい遊びです。

今回描いたものは結構手こずったので出来上がるまでの流れと、文字数削減の方法を残しておきます。

 

ツールとして twigl.app を使わせていただきます。

 

過去のコードなどは以下に置いてます。

続きを読む 【つぶやきGLSL】スポットライト風のアニメ

【GLSL】雷を降らせる

前回は線分を書けるようになったので、それを使って雷を書いていきます。

 

基本部分の線分を書くところは以下を見てください。

続きを読む 【GLSL】雷を降らせる

【GLSL】2点を結ぶ線分を書く

前々回前回と直線を書いたので、より使いやすくするために線分を書けるようにします。

※前々回の失敗版は実は線分でした。

続きを読む 【GLSL】2点を結ぶ線分を書く

【GLSL】2点を結ぶ直線の補足

前回線を引くときに頭をよぎった「数式が書けるなら y=ax+c の形に点 p を当てはめるだけでいいんじゃない?」を少し考えます。

※もちろんよくないです。

 

ついでに縦線も引けるように。

続きを読む 【GLSL】2点を結ぶ直線の補足

【GLSL】2点を結ぶ直線を書く

GLSL で雷を書いてみようと思ったので1から書いていく。

とりあえず直線をと思って適当に書くと微妙に見た目が悪かったりするのが気になったので、まずはきれいに直線を書くことを考えます。

環境によっては draw() とかで済ませられそうなものですが、GLSLで書こうとするとちゃんと考える必要がありました。

続きを読む 【GLSL】2点を結ぶ直線を書く

【GLSL】ドット絵パターン

GLSLでドット絵のパターンを考えていて、ひし形(正方形を45度傾けた形)ドットを作りたかったので色々試して勉強します。

続きを読む 【GLSL】ドット絵パターン

新アプリ「カラーマスター」をリリース

新アプリ「カラーマスター」をリリースしました。

画像やカメラの色を好きに変更するアプリです。

続きを読む 新アプリ「カラーマスター」をリリース

GLSLで集中線を書く

漫画やアニメなどでよくある集中線をGLSLで実装します。

テクスチャを読み込んで混ぜるのが一番簡単ですが、形状や場所に限界があるのでGLSLの関数を使って自由に書けるようにします。

続きを読む GLSLで集中線を書く

GLSLファイルをimportする

Next.jsgl-reactを使ってGLSLを使っていますが、文字列直書きなのが気になり始めたので.frag.vertなどのGLSLファイルに分けて管理しようと思います。

 

具体的にはwebpackのローダーを追加して読み込めるようにした覚書き。

他のモジュールバンドラでも文字列読み込みはあると思いますが、大体の環境ではBabelでトランスパイルしてwebpackでバンドルしてると思います(主観)。

続きを読む GLSLファイルをimportする