昔ながらのビデオシンセサイザーはsin波をそのまま電圧(?)として入力して波形を出していた、というのを見かけたのでやってみた。
参考にした動画。走査線上に上から順に書いていく。
www.youtube.com
できた。nanoKONTROL2に対応している。
MIDIコントローラで波形のパラメータを調整しつつ色を描画する https://t.co/OD3c0pPXKl pic.twitter.com/EP7AnXO8cs
— 趣味はマリンスポーツです (@hitode909) 2020年1月16日
操作慣れてきたけど意味ないスキルっぽい https://t.co/RA2muTIr43 pic.twitter.com/QgKHOKBRGW
— 趣味はマリンスポーツです (@hitode909) 2020年1月16日
FPS60出るまで縮小するようにしたところCPUでやってるためすごい小さくなったのでフルスクリーンボタンを置いた pic.twitter.com/H28us5Jkao
— 趣味はマリンスポーツです (@hitode909) 2020年1月16日
考察
- MIDIコントローラがあると複数の数字を同時に変化させられるのがよくて、マウス1つではこういう遊びはできないと思われる
- 素朴にJavaScriptでループして計算しているので60フレーム出そうとすると320x240くらいしか出せない。WebGLを使うことになるとGLSLを書くことになりそう
- ベクトル画像の重ね合わせということにすればSVGでもできる?
- フルスクリーンにするとテンションが上がる。フルスクリーンにすることを見越して画面のアスペクト比にあわせたcanvasを作るようにした
- 16ms以上かかってたら解像度を下げたり、8ms以下なら解像度を上げる、とかしてみたら解像度が変わる瞬間がウェブの動画ストリーミングの画質が変わる瞬間みたいで情けない
