3Dシーケンサーをつくった
Web Music Hackathon で @aike1000 さんが作っていた 3Dシーケンサー を一人ハッカソンがてら自分でも作ってみた。いちおう出来たといえるレベルにはなっていて優しい感じの音が聴けます。
https://mohayonao.github.io/cubic-sequencer/
アイデア
8x8x8の3次元配列をシーケンスデータのコンテナとして使い、それをピアノロールにみたてた8x8の行列(行が音程、列が時間を表す)と8つのシーン(切り替えできるパターン)とみなす。これはXYZ軸のそれぞれの視点から取り出すことができるので、それをピアノ、パッド、ビープの3つのトラックとする。
使い方
右側の操作パネルを使います。
メインコントローラ
アプリケーション全体の設定
- PLY: 再生のON/OFF
- RND: パラメータを適当に設定
- CLR: パラメータのクリア
- BPM: テンポ
- AXIS: 視点(トラック)の移動
- → 赤: ピアノ / 緑: パッド / 青: ビープ
トラックコントローラ
各トラック(軸)ごとの設定
- PITCH SHIFT: 音高の調整
- LOOP LENGTH: ループの長さ
- → 2に設定すると1列目と2列目を繰り返す
- NOTE LENGTH: 音の長さ
- → 全音符 / 2分音符 / - / 4分音符 / - / - / - / 8分音符
- SCENE: シーンの切り替え
- MATRIX: ピアノロール(音程x時間軸)
使った技術
コントローラ部分は React と Redux、左側のグラフィックは Three.js。音は Web Audio API でサイン波とゲインだけを使用。音のスケジューリングは次の記事とそれを実装したライブラリを使っている。
- 2 つの時計のお話 - Web Audio の正確なスケジューリングについて - HTML5 Rocks
- https://github.com/mohayonao/web-audio-scheduler
ソースコード
課題
作業時間は 6時間+3時間 の休憩という感じでやったのだけど、間に合わなかった機能があったり無駄に時間を取られたりした箇所があった。
MIDIコントローラ
LaunchPad をコントローラとして使えるようにしたかったけど、音のタイミングとLED点滅のタイミングを同期させることとかを考えると、ややこしそうだったのでやめた。具体的には上述の音のスケジューリングの記事のやり方だと音は100msくらい先に予約するので、そのタイミングでLEDを点滅させると微妙にずれる。three.jsを使ったビューワーはそのあたりも考慮したのだけど、同じようなことをMIDIコントローラー向けにもやるのがちょっと面倒そうだった。このあたりは良い方法を考えたい。
3D Panner
ハッカソン時のコメントで音を3次元に配置すると良さそうというコメントがあったので、やろうと思ってたけど、ビューワーで見たままに音を配置しても気持ち悪そうだったのでやめた。ただ、音を立体的に配置するというアイデアは良さそうなので、いい感じに使う方法を考えたい。
Three.js
3Dで考えるのが苦手で軸を選択して回転させるだけのところですごく時間がかかった。Three.js本でも買おうかなと思う。
初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ
- 作者: Jos Dirksen,あんどうやすし
- 出版社/メーカー: オライリージャパン
- 発売日: 2016/07/23
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (2件) を見る
あとは、React/ReduxでのComponentの分割具合をミスった感がある。練習が必要。