【React / GLSL】音の波形をGLSLで色々表現する


前回 React + GLSL で音声波形の表示ができたので、どんなふうに描画するのがいいかいくつか試してみました。

今回は基本的に GLSL のコードサンプルになります。

線グラフ

線分を引く」でやったように波形を線にします。

棒グラフ

fftSize に合わせて縦線を引く。

棒グラフ2

先ほどの棒を上下に書くだけ。

よく見かけるし音の波形というとコレというイメージがあります。

2色塗り分け

data の値の上下で色を塗り分ける。

個人的にはこれが一番好き。

2色塗り分けと棒グラフ

一番気に入った塗分けに棒グラフを重ねます。

横長の方が見栄えが良い気がしたので最後は適当な画像に重ねました。

塗り分けの条件や棒グラフの線分の太さを変えると、色が重なってシアンやマゼンタになっている部分の形を変えられます。


コメントを残す

メールアドレスが公開されることはありません。