CoffeeCollider:ブラウザ上でサンプルコードを鳴らす #Node.js

引きつづき、ブラウザ上でテキストベースで音を出せる言語 CoffeeCollider の記事です。

前回でセットアップが完了しワンライナー程度のコードで音出しできました。

今回は、もう少し複雑なコードを書いてみよう！
・・・ということでエディタ (ブラウザ画面) 上でサンプルコードを実行・編集してみます。

(ちなみに今回の記事の内容は WWW上で実行できるので、前回やったローカルのセットアップは踏まえておく必要がありません)

用意するもの

ウェブブラウザ (Google Chrome 31など)

必ずしも Chrome 31 である必要はないですが、比較的最近のブラウザをつかうのがよいみたいです。手元のブラウザ Safari 5.1.9 では音が出ませんでした。

サンプルコードを鳴らす

テルミンなサンプルを例に、操作方法を確認してみます。

1. コードを開く

http://mohayonao.github.io/CoffeeCollider/#mouse.coffee
もしくはローカルに保存した CoffeCollider-master/index.html から右側の "Examples" -> "-mouse"

以下のような 7行ほどのコードが表示されます。

mouse.coffee

(->
  freq = MouseY.kr(100, 1000, 'exponential')
  freq1 = freq * MouseX.kr(2, 0.5, lag:2.5)
  freq2 = freq * MouseX.kr(0.5, 2, lag:2.5)
  feedback = MouseButton.kr(0, 1.pi(), lag:5)
  SinOscFB.ar([freq1, freq2], feedback, mul:0.25)
).play()

2. 音を出す

1行目 (-> の左端にテキストカーソルを当てて、Cmd + return で音が出ます
あるいは画面上の "Run" ボタンを押しても同様に音が出ます

SuperCollider に準拠したキーバインドっぽいです。

つまり、実行したい処理が1行のコードなら、その行にテキストカーソルを当てて　Cmd + return。
実行したい処理が複数行(括弧でくくられてブロック化されている)なら、その括弧の外側にテキストカーソルを当てて　Cmd + return。

コードが難解でよくわからない時は、とりあえずテキストを全選択して　Cmd + return　してしまえばよいでしょう。

3. 音をとめる

Cmd + . カーソルの位置はどこでもいい
あるいは画面上の "Stop" ボタンを押す

4. コメント化する

# 1行コメント
###　〜 ### 複数行コメント

CoffeeScript に準拠しているみたいです。

実際にコメントをつかってサンプルコードをシンプルにしてみるとこんな感じ。

(->
  freq = MouseY.kr(100, 1000, 'exponential')
  ###
  freq1 = freq * MouseX.kr(2, 0.5, lag:2.5)
  freq2 = freq * MouseX.kr(0.5, 2, lag:2.5)
  ###
  feedback = MouseButton.kr(0, 1.pi(), lag:5)
  # SinOscFB.ar([freq1, freq2], feedback, mul:0.25)
  SinOscFB.ar([freq], feedback, mul:0.25)
).play()

まとめ

サンプルコードの表示・実行・編集方法を確認しました。
これらを押さえておくことで、以後サンプルコードを元に自分のコードを効率的に作成していくことができます。

CoffeeCollider:ブラウザ上でサンプルコードを鳴らす