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点を結ぶ直線を書く

MMDで初めての動画作成【+エフェクト】

画像処理、3D、音声や音をやってきていて動画を作ったことがない。

Unity はそれなりに使っていたんですが、BlenderMMD はまともに使ったことがありませんでした。

汎用性や将来性を考えると Blender がよさそうですが、多種多様な素材があって日本語情報の多い MMD で簡単に作ってみることにします。

 

今回は基本の流れとエフェクト追加をやります。

続きを読む MMDで初めての動画作成【+エフェクト】

Next.jsをvercelにデプロイする

VercelNext.js プロジェクトをデプロイします。

公式で色々なフレームワーク向けの紹介をしているのでバニラ状態からやるのは簡単そうですが、色々と弄った後なので難しいんじゃないかと危惧してました。

実際に使ってみると「なんでもっと早く使わなかったんだ」って思うほど便利だったので、一連の流れを覚書きしておきます。

続きを読む Next.jsをvercelにデプロイする

Next.jsでマークダウンを使ってコンテンツを分離する

Next.js + Material UI でコンテンツ部分にマークダウンを使うことを考えます。

メタデータ(Front-matter)を含むやつは今回は対象外です。

続きを読む Next.jsでマークダウンを使ってコンテンツを分離する

「ドドソソララソ」でwavを作れるWEBツール

なんとなく頭の中にワンフレーズ浮かんだときに、カタカナで打ち込んだ音を鳴らしたり保存したりするツールを作りました。

 

DTMは無料でも素晴らしいものが多くありますがインストールから少し敷居が高い感じがありますし、ちょっと使うだけでもしばらく練習がいります。

手軽に使えるように機能を絞ってシンプルにしつつ、個人的にやりたいことを詰め込んだ感じです。オタマジャクシが一切現れないピアノツール。

続きを読む 「ドドソソララソ」でwavを作れるWEBツール