Gatsby だと時折見かける gray-matter ですが、Next.js でも非常に役立つので使い方と利点を書いておきます。
マークダウンでコンテンツを分けることを合わせて pages/ の負担を減らせます。
Next.jsで外部APIを叩く３つのパターン
【React / GLSL】音の波形をGLSLで色々表現する
前回 React + GLSL で音声波形の表示ができたので、どんなふうに描画するのがいいかいくつか試してみました。
今回は基本的に GLSL のコードサンプルになります。
【React / GLSL】音の波形を canvas に描画する
react-dropzoneの紹介と実装サンプル
Reactで使えるドラッグドロップのライブラリが非常に良かったのでメモ。
シンプルに使える上にできることが多い。
フレームワークとして Next.js と Material UI を使っています。
サンプルコードを少し変えつつ動かしてみます。
動画に音を合成する
Canvasの描画を動画にする
GLSL などで動かした canvas 上の絵を動画にしてみたい。
MediaRecorder API を軽く触ってみます。
動作環境は Chrome、開発に React (Next.js)、GLSLは gl-react を使っています。
【つぶやきGLSL】スポットライト風のアニメ
ツイッターでGLSLを書くという試み「#つぶやきGLSL」があります。
266文字という短いコードで何とかしようという楽しい遊びです。
今回描いたものは結構手こずったので出来上がるまでの流れと、文字数削減の方法を残しておきます。
ツールとして twigl.app を使わせていただきます。
過去のコードなどは以下に置いてます。
