はじめてのReact VR
Reactのコンポーネントの中にthree.jsのsceneを配置したら面白いんじゃないか…
というようなことを考えていたらReact VRとやらが登場していたので少し触ってみた。
DEMO nishaya/my-first-react-vr
componentの切り出しは、通常のReactと同様
export default class MyText extends React.Component { render() { return ( <Text> {this.props.children} </Text> ) } }
と定義したものを、importして使う
import MyText from './components/my_text.js' ... render() { return ( <View> <MyText First </MyText>
Reactをある程度知っていれば、
Componentの定義やstateの更新による再描画など基本的な書き方は同じなので、
Reactでwebアプリケーションを組む感覚でVRのシーンが組めそうだと感じた。
ちなみに、webブラウザ上での実行時の描画にはThree.jsが使われている。
React/ReduxのBoilerplateを作った
React/Reduxを使ってちょっとしたもの(楽器とか)を作ろうと思ったとき、
実験用のコードを書くよりも環境構築に時間がかかってあほらしいので、
自前でboilerplateを作った。
既存のboilerplateを使えばいいのだけれど、
余分なもの、自分が理解していないものが混じっているのは嫌だったので、
自分が使う範囲のものだけを含めたminimalなものにした。
nishaya/react-redux-boilerplate
特別なことは何もしていないが、
.eslintrc の下記の箇所は意図的に緩くしてある。
no-mixed-operators: 0 no-console: 0
- no-mixed-operators: オシレータの処理などで演算子の優先順位を明示すると長くなるのでオフ
- no-console: UglifyJSのdrop_consoleで落とすのでオフ
PUSH TURN MOVE
電子楽器のUIデザインに関する本が出るらしい。
PUSH TURN MOVE
4/18(火) よりKickstarterで募集開始。
気になる内容は、
- Jean-Michel Jarreによる序文
- サウンド: ソフトウェア/ハードウェアにおける音の可視化
- コントロール: ノブ、フェーダー、タッチストリップ、ボタン、スクリーンなど、さまざまなコントロール要素
- レイアウト: 電子楽器・コントローラのインターフェースデザインにおける原則とテクニック
- コンセプト: ハード/ソフト/AppにおけるDAWs, Grids, Modular, Collaborative, Radial, Gesturalといったコンセプト
- ユーザ: ユーザビリティ、ワークフロー、体験デザイン - UCDについて
- 歴史: 電子音楽をとりまくインターフェースの進化 - テルミンからAbleton Liveまで
- 楽器メーカーの開発者インタビュー
などなど、280ページ
必読の予感。
電子書籍版でいいから早く読みたい。
シーケンサを作る準備
Reactでシンセサイザーを作ったので、
次はシーケンサを作りたいと思っている。
最低限押さえておきたいのはこのあたり
- ズレのないタイミング制御
AudioScheduledSourceNode.start(when)を使う- テンポの変更を演奏にリアルタイム反映
- 明快なUI
- 一音一音打ち込みたいという気持ちもあるが、今回のメインはそこじゃない
- 頻度、密度、スケール、分散といったパラメータから生成
- モジュール式のシーケンスエフェクト
- パターン
- 手頃な数(32くらい)を保存したい
- 保存先、Firebaseいいかなと思うけど一旦localstorageで
最終的には、Teenage EngineeringのOP-1みたいなものが
ブラウザで動くようになるといいなと思っている。
