1. Interactive Music II
SuperCollider応用 2 SuperColliderとPure Dataの連携
東京藝術大学芸術情報センター (AMC)
2013年12月12日
田所 淳

2. 今日の内容
‣ 先週の復習:
‣ OSC (OpenSoundControlについて)
!
‣ Pdから、OSCを介してSuerColliderの楽器を鳴らしてみる
‣ Pdをインタフェイスとして、SuperColliderの楽器を使用する

3. 先週の復習:
Open Sound Control (OSC) について

4. Open Sound Control とは
‣ Open Sound Control のポイント
!
‣ ポストMIDIを目指す
‣ インターネットのプロトコルの仕組みを、音楽やマルチメディ
アの世界へ適用 (UDP/IPを利用)
‣ 多くの機器、言語、アプリケーションに実装済み
‣ オープンでシンプルな命名規則 ← URLの仕組みに似ている

5. OSCのプロトコル
‣ では、実際にOSCのプロトコルは、どんななっているのか?
!
!
/trigger/inst/a
440 0.1 “hello”
OSC Message
OSC Arguments
•
情報内容をラベリング
•
•
URLに同様の名前付けの規則
•
情報の本体
いろいろな型を同時に含めることがで
きる

6. OSC Message
‣ OSC Messageのアドレスパターン → URLのような階層構造

7. OSC の通信のしくみ

8. OSC の通信のしくみ
‣ 送信側：IPアドレスとportを指定
IP: 192.168.1.3
port: 57120

9. OSC の通信のしくみ
‣ 受信側：ポートをオープン
IP: 192.168.1.3
port: 57120

10. OSC の通信のしくみ
‣ 接続
IP: 192.168.1.3
port: 57120

11. OSC の通信のしくみ
‣ 送信側：情報を送信
‣ 受信側：受信
/trigger/inst/a 440 0.1
hello
IP: 192.168.1.3
port: 57120

12. OSC の通信のしくみ
‣ 受信側：OSCのメッセージを解釈、アプリケーションに適用
/trigger/inst/a 440 0.1
hello
IP: 192.168.1.3
port: 57120

13. SuperColliderの構造
サーバー v.s. クライアント

14. SuperColliderの構造
‣ クライアント v.s. サーバー
SuperCollider application
Client
Server
language
sclang
scsynth

15. SuperColliderの構造
‣ クライアント v.s. サーバー
SuperCollider application
Client
Server
language
sclang
scsynth
OSCで連携

16. SuperColliderの構造
‣ クライアント v.s. サーバー
‣ 今までのプログラムも、その裏ではOSCで連携していた!!
!
‣ OSXのアクティビティーモニタで確認

17. SuperColliderの構造
‣ クライアント v.s. サーバー
‣ サーバーとクライアントのOSC連携の詳細

18. PdでSuperColliderを操作

19. PdでSuperColliderを操作
‣ dumpOSCで表示されたOSCメッセージを、そのまま外部のプ
ログラムから送信すると、同じようにコントロールできる
‣ 試しに、PdからOSCを送出して、SuperColliderを動かす
!
‣ SuperColliderのOSCの受信ポート: 57120
‣ sclangからscsynthが受信するポート: 57110

20. PdでSuperColliderを操作
‣ 接続の詳細
ip : 任意のものを
ip : 127.0.0.1
port：57120
port：57110
SC
lang
SC言語
SC
synth
SC音響合成
SuperCollider

21. PdでSuperColliderを操作
‣ 接続の詳細
‣ SCLangの代わりに、Pdから直接SCSynthに指示を送る
ip : 127.0.0.1
port：57110
SC
synth
Pd
SC音響合成
SuperCollider

22. PdでSuperColliderを操作
‣ Pdテストパッチ
‣ 上から順番にクリック、音が再生されるはず

23. PdでSuperColliderを操作
‣ もう少し複雑な例
//別の楽器
SynthDef("perc", {
arg freq, dur;
var out, env;
env = Env.perc(0.01, dur, 0.2);
out = SinOsc.ar(freq,0,0.5) * EnvGen.kr(env, doneAction:2);
out = Pan2.ar(out, Rand(-1.0, 1.0));
Out.ar(0, out);
}).store;

24. PdでSuperColliderを操作
‣ Pd側パッチ
‣ metroを使用して、連続してs_newを送出

25. PdでSuperColliderを操作
‣ SuperColliderの楽器のインターフェイスとしてPdを利用
!
‣ 例：
‣ SuperCollider側でFM合成の楽器
‣ Pdでパラメータをコントロール

26. PdでSuperColliderを操作
‣ SC側
//FM合成の楽器
(
SynthDef("fm1", {
arg detune = 0.001, freq = 440, carPartial = 1,
modPartial = 1, index = 3, mul = 0.3;
var mod;
var car;
mod = SinOsc.ar(
[freq * modPartial, freq * (1 + detune) * modPartial],
0,
freq * index * LFNoise1.kr(5.reciprocal).abs
);
car = SinOsc.ar(
(freq * carPartial) + mod,
0,
mul
);
Out.ar(0, car)
}).add;
)

27. PdでSuperColliderを操作
‣ Pd側

28. 次週へのステップ
Processing入門

29. Processingとは？
‣ Processingは、イメージやアニメーションそしてサウンドのプ
ログラミングをしたいと思っている人々のためのオープンソー
スのプログラミンング言語であり開発環境です。アーティスト、
デザイナー、建築家、研究者、そして趣味として使う人が、プ
ロトタイピングや制作のために使うものです。ビジュアルな文
脈でコンピュータプログラミングの基礎を教えるため、そして
ソフトウェアのスケッチブックとして、またはプロフェッショ
ナルのための制作ツールとして作られています。Processingは、
アーティスト達やデザイナー達によって、おなじ分野の商業ソ
フトウェアへの代替手段として開発されています。

30. Processingとは？
‣ Processingの特徴
‣ JavaやC++でプログラミングするよりも遥かに容易に、スケッチ
するようにインタラクティブなビジュアルプログラミングを構築
できる
‣ スレッド、ダブルバッファリングなど、初級者にとってハードル
となる技術的な詳細を外し、アイデアの実現に専念できる
‣ 独自のシンタックスで書かれたプログラムをJavaコードに解析、
コードは実行可能なJavaアプッレットとして書き出すことが可能
‣ PostScript、OpenGLの機能セットを利用した、カスタム2D/3Dレ
ンダリングエンジンを使用
‣ 既存のJavaライブラリを統合することで容易に拡張が可能
‣ 無料で利用できる
‣ Windows、MacOSX、Linuxで実行可能

31. Processing 誕生の歴史
‣ Design by Numbers - John Maeda (MIT Media Lab.)
‣ http://dbn.media.mit.edu/
‣ Processingの祖先

32. Processing 誕生の歴史
‣ MIT Media Lab. で John Maedaの博士課程の学生だった Ben Fry
とCasey Reas によりProcessing が生みだされた (2001)
‣ その後バージョンアップを重ねて現在のバージョンは1.5.1
‣ Javaをベースにしたクロスプラットフォーム
‣ Mac OSX, Windows, Linux 版
‣ JavaScript版のProcessing.jsなどの派生プロジェクトも

33. Processingに触れてみる
‣ まずは起動してみる
‣ Processingの起動画面

34. Processingに触れてみる
‣ メニューの解説
‣ 操作方法

35. Processingに触れてみる
‣ とりあえず、何も入力せずに再生ボタンを押してみる
‣ Windowが表示され、グレーの領域が表示
‣ 空の状態

36. Processingに触れてみる
‣ エディターの画面に次のプログラムを入力
!
!
line(0,0,100,100);
!
!
!
‣ 線が描かれる

37. Processingに触れてみる
‣ さらに命令を追加
line(0,0,100,100);
ellipse(50,50,80,80);

38. Processingに触れてみる
‣ Processingでは、簡単な命令(関数)で形を描くことができる
‣ 面倒な処理は勝手にやってくれる
‣ Windowの生成
‣ 描画する領域の生成
!
‣ プログラムの書き出し
‣ Java Applet
‣ 実行ファイル
‣ Javascript
‣ Androidアプリ
!
‣ クリエイティブな部分にのみ専念できる

39. Processingに触れてみる
‣ Java Appletとして書き出してみる
‣ Exportボタンを押すだけ

40. 次週までの課題
Hello Processingを視聴

41. 次週までの課題

42. 次週までの課題
‣ Hello Processing (http://hello.processing.org/)
‣ Daniel Shiffman 氏によるチュートリアル
‣ 映像とコードでインタラクティブに学べる教材

43. 次週までの課題
‣ 次週までに一通り視聴してきてください
‣ 1時間で終わります!
!
‣ 参考: 『Hour of Code』キャンペーン
‣ http://www.cbc-net.com/topic/2013/12/hourofcode/