CoffeeCollider勉強会(2013.12.20)用のスライド

README.md

CoffeeCollider勉強会(2013.12.20)用のスライド

GistSlide でスライドになります http://1000ch.net/2013/07/05/GistSlide/

slide.md

CoffeeCollider

mohayonao

• Twitter: @mohayonao
• GitHub : mohayonao
• Blog : 音の鳴るブログ

主な活動

• http://the.mohayonao.com/
• JavaScript で音を出す活動
• WEBコンソールに寿司を表示する活動 link
• たまにたくさんのコードを書く

JavaScriptで音を出す活動

• 2010年ごろからJavaScriptだけで信号処理が可能になった
• Audio Data API (Mozilla)
  • Firefox25 からは Web Audio API に移行
• Web Audio API (Webkit)
  • Chrome/Safari/Firefox/Operaが対応
  • IEもサポートする動きがありそう？？
• あまりやっている人がいない

JavaScriptの良いところ

• 簡単に使える
  • コンパイルがいらない
  • HTMLで適当な GUI がすぐに作れる
• 共有しやすさ
  • 特別なアプリケーションを用意する必要がない
  • URLだけで共有できる (Twitterやブログ等との相性)
• モバイル端末(iOS, Android)でも動く

JavaScriptの良くないところ

• 実行速度が遅い
  • 高速な計算を大量に行うのに適した言語ではない
• ブラウザごとに微妙に違う
  • Web Audio APIまわりは結構バッドノウハウが多い

音響プログラミング

• 高速な計算が必要
  • C++ の独壇場
• 学習コストが高い (難しい)
• 簡単に参照できる資料が少ない
• 興味ある人は多いと思う

JavaScriptでの音響プログラミング

• ○ 簡単に始められる
• ○ 共有しやすい
• × (音響プログラミングを行うには) 実行速度に難あり
• × 資料が少なくて難しい
• × ブラウザごとの微妙な違いとの不毛な戦い

JavaScriptでの音響プログラミング

JavaScriptは遅い？

• C++と比べなければ充分使えるレベルには速い
• 限界にチャレンジしなければ良い

音響プログラミングは学習コストが高い？

• 音を出したい ≠ 信号処理を学びたい
• ライブラリ化すると簡単に使える
• バッドノウハウの集約化の効果もある

JavaScriptで音響プログラミング

• 既存の音響アプリケーションの置き換えでなく
  • ブラウザに Pro Tools を移植！！！
  • ボーカロイドがブラウザで！？
• カジュアルに使える音響アプリケーションとしての可能性
  • ボタンを押すだけで音が鳴る
  • 覚えたことをちょっと試す
  • 音の鳴る #sc140
• パブリックなコミュニケーションツールとしての音楽

JavaScript と SuperCollider

• supercolliderjs
  • WebSocket を介して SuperCollider を制御する
• node-supercollider
  • node.js と SuperCollider のブリッジ

他言語 と SuperCollider

• Closure: overtone
• Haskell: hsc3

SuperCollider がないと使えない..

全部 JavaScript でやれば？

CoffeeCollider

CoffeeCollider

コンセプト

CoffeeScript を SuperCollider のように実行する

• SuperCollider と同じ API
  • ノウハウに互換性がある
• 100% JavaScript で実装する
  • WEBらしさ (共有/手軽さ)
• CoffeeScript を使う
  • 書きやすさ

仕組み

• コンパイラ
  • CoffeeScriptのコードをライブラリ向けに書き換える
  • CoffeeScript → CoffeeScript → JavaScript
• ライブラリ
  • APIを提供する
• サーバー
  • 信号処理を行う

コード (SynthDef)

test = SynthDef (freq=440, amp=0.5)->
  Out.ar(0, SinOsc.ar([freq, freq*1.25]) * amp)
.add()

x = Synth(test)
x.set(freq:880)

###
SynthDef("test", { |freq=440, amp=0.5|
  Out.ar(0, SinOsc.ar([freq, freq*1.25]) * amp);
}).add;

x = Synth("test");
x.set(\freq, 880);
###

コード (Task)

Task ->
  Infinity.do syncblock (i)->
    console.log i
    1.wait()
.start()

###
Task {
  inf.do {|i|
    postln(i);
    1.wait;
  }
}.start;
###

コード (Chord)

synth = SynthDef (freqs=[0, 0, 0])->
  chord = Mix(PMOsc.ar(freqs, freqs * 7, 1.5) * 0.25)
  Out.ar(0, chord * Line.kr(1, 0, dur:1.5, doneAction:2))
.add()

Task ->
  chord = "C5".midichord("M", -1)
  Synth(synth, freqs:chord.midicps())
  "bpm100 l2".wait()
  
  chord = "G4".midichord("M")
  Synth(synth, freqs:chord.midicps())
  "bpm100 l2".wait()
  
  chord = "C5".midichord("M", -2)
  Synth(synth, freqs:chord.midicps())
  "bpm100 l1".wait()
.start()

CoffeeScriptの今後

• バグフィックス、最適化
  • 音は途切れるとすぐに分かる
• グラフィックライブラリとの連動
  • three.js や d3.js とかと連動しやすさの検討
• 使い勝手の向上
  • 正直 SuperCollider よくわかっていない
• GitHub で開発に参加できます(是非!)
  • 雑談用のissueもあります link
• マスコットキャラクター

Let's play it.

http://goo.gl/Z2JmZ2