Reactで使えるドラッグドロップのライブラリが非常に良かったのでメモ。
シンプルに使える上にできることが多い。
フレームワークとして Next.js と Material UI を使っています。
サンプルコードを少し変えつつ動かしてみます。
カテゴリー: 技術
動画に音を合成する
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で書こうとするとちゃんと考える必要がありました。
MMDで初めての動画作成【＋エフェクト】
画像処理、３D、音声や音をやってきていて動画を作ったことがない。
Unity はそれなりに使っていたんですが、Blender や MMD はまともに使ったことがありませんでした。
汎用性や将来性を考えると Blender がよさそうですが、多種多様な素材があって日本語情報の多い MMD で簡単に作ってみることにします。
今回は基本の流れとエフェクト追加をやります。
Next.jsをvercelにデプロイする
Vercel に Next.js プロジェクトをデプロイします。
公式で色々なフレームワーク向けの紹介をしているのでバニラ状態からやるのは簡単そうですが、色々と弄った後なので難しいんじゃないかと危惧してました。
実際に使ってみると「なんでもっと早く使わなかったんだ」って思うほど便利だったので、一連の流れを覚書きしておきます。