1. Creative Music Coding
オーディオ・ビジュアル作品のための
オープンソースなソフトウエア・フレームワークの現状と展望
2014年2月22日
第19回 JSSA研究会
田所 淳 (http://yoppa.org)

2. 発表内容
‣ クリエイティブ・コーディング + コンピュータ音楽
!
‣ 「クリエイティブ・コーディング」と総称されている開発
フレームワークをコンピュータ音楽作品、オーディオビジュ
アル作品の創作に用いる手法の現状を紹介
!
‣ 将来への展望
!
‣ 簡単なデモ

3. クリエイティブ?

4. 「クリエイティブ・コーディング」とは?
‣ コーディング(プログラミング)
‣ それ自体がクリエイティブな活動
!
‣ では「クリエイティブ・コーディング」とは何か?

5. 「クリエイティブ・コーディング」とは?
‣ 正式な定義はないのが現状
!
‣ ここでは、以下のように考えたい
‣ 「表現」(2D/3Dグラフィック、映像、サウンド) に関する
機能に特化した、開発フレームワーク

6. 「クリエイティブ・コーディング」とは?
‣ Pure Data、SuperCollider、Cmix、ChucK などの音響合成
のための開発環境は、クリエイティブ・コーディング?
‣ → おそらくYES
!
‣ ただし、今回はより汎用的な開発フレームワークについて
言及していきたい

7. 「クリエイティブ・コーディング」とは?
‣ 例えば、openFrameworksでは、様々な機能を繋ぎあわせ
る「糊」と表現している
main.cpp
testApp.h
testApp.cpp
ofSimpleApp, ofGraphics, ofImage, ofTrueTypeFont,
ofVideoPlayer, ofVideoGrabber, ofTexture,
ofSoundPlayer, ofSoundStream, ofSerial, ofMath,
ofUtils ...etc.
OpenGL
GLUT
FreeImag
FreeType
fmod
RtAudio
QuickTime
OpenCV

8. 「クリエイティブ・コーディング」とは?
‣ 例えば、openFrameworksでは、様々な機能を繋ぎあわせ
る「糊」と表現している
main.cpp
testApp.h
testApp.cpp
プログラム開発のための
ofSimpleApp, ofGraphics, ofImage, ofTrueTypeFont,
ofVideoPlayer, ofVideoGrabber, ofTexture,
ofSoundPlayer, ofSoundStream, ofSerial, ofMath,
ofUtils ...etc.
!
糊 (Glue)
OpenGL
GLUT
FreeImag
FreeType
fmod
RtAudio
QuickTim
OpenCV

9. 主要な開発フレームワーク

10. 主要な開発フレームワーク
‣ どのような開発フレームワークが主流なのか?
‣ 正式な統計資料があるわけではない
‣ 話題になったアートプロジェクトなどから類推

11. 主要な開発フレームワーク
‣ Creative Applications 紹介
‣ コードを用いた様々なプロジェクトを紹介 (2008∼)

12. 主要な開発フレームワーク
‣ Creative Applicationsでは、掲載したプロジェクトを開発
フレークワーク毎にタグ付けしている
‣ その数を集計することで、現在の傾向の参考となる
‣ あくまで、一つの指標として…

13. 主要な開発フレームワーク
‣ 開発フレームワークごとの掲載件数 (2014年2月)
開発フレームワーク
件数
1
openFrameworks
304
2
Processing
300
3
Flash
88
4
Javascript
64
5
Max/MSP
56
6
Cinder
54
7
vvvv
49
8
Java
16
9
Quartz Composer
10
10
Unity
8
11
Three.js
6

14. 主要な開発フレームワーク
‣ 今回対象とするのはこのあたり (オープンソースのもの)
開発フレームワーク
件数
1
openFrameworks
304
2
Processing
300
3
Flash
88
4
Javascript
64
5
Max/MSP
56
6
Cinder
54
7
vvvv
49
8
Java
16
9
Quartz Composer
10
10
Unity
8
11
Three.js
6

15. クリエイティブコーディング + サウンド
‣ Processing、openFrameworks、Cinder、vvvvなどのフ
レームワークを音響合成に使いたい
!
‣ 現状ではフレームワーク単体では、音響合成の機能が貧弱
!
‣ クリエイティブコーディングのフレームワークで、音響作
品やオーディオ・ビジュアル作品を制作する手法を概観

16. 3つの型

17. 3つの型
‣ おおまかに分類
連携型
拡張型
内包型

18. 1. 連携型
‣ アプリケーション間をOSCで連携
Processing
openFrameworks
Cinder
PureData
SuperCollider
ChucK

19. 1. 連携型
‣ アプリケーション間をOSCで連携
‣ … 今回は割愛

20. 2. 拡張型
‣ 開発フレームワーク内で、拡張機能として音声合成機能を
実現する方法
!
‣ それぞれの開発フレームワークには、機能拡張のための仕
組みが用意されている
!
‣ Processing → Library
‣ openFramewokrs → Addon
‣ Cinder → CinderBlocks

21. 2. 拡張型
‣ 拡張機能を利用して、音響合成機能を強化する
!
‣ 例：
‣ Processing + Minim
‣ Processing + Sonia
‣ openFrameworks + ofxUgen
‣ openFrameworks + ofxTonic
!
‣ MinimとofxTonicを実際に紹介

22. 2. 拡張型
‣ minim : ProcessingのLibrary
‣ 現在は、Processing本体に同梱されている

23. 2. 拡張型
‣ FM合成 : Processing + Minim
import ddf.minim.*;
import ddf.minim.ugens.*;
Minim minim;
AudioOutput out;
Oscil fm;
!
void setup(){
size(640, 480, P3D);
minim = new Minim( this );
out
= minim.getLineOut();
Oscil wave = new Oscil(200, 0.8, Waves.SINE);
fm
= new Oscil(130, 400, Waves.SINE);
fm.patch(wave.frequency);
wave.patch(out);
}
!
void draw(){
}

24. 2. 拡張型
‣ ofxTonic : C++で実装された音響合成ライブラリTonicを、
openFrameworksのAddonとして実装

25. 2. 拡張型
‣ FM合成 : openFrameworks + ofxTonic
#include "testApp.h"
!
void testApp::setup(){
ofSoundStreamSetup(2, 0, this, 44100, 256, 4);
float basePitch = 400;
float index = 200;
SineWave car = SineWave();
SineWave mod = SineWave();
mod.freq(130);
Generator frequency = basePitch + (mod * index);
car.freq(frequency);
synth.setOutputGen(car);
}
!
void testApp::update(){
}
!
void testApp::draw(){
}

26. 3. 内包型
‣ フレームワーク内に他の音響合成エンジンを内包する方法
‣ 一つのアプリケーションに集約されるので便利
‣ オープンソースであり、かつ使用するフレームワークと同
じ言語で実装されている必要あり
!
‣ openFrameworks + ofxPd
‣ openFrameworks + ofxSuperColliderServer

27. 3. 内包型
‣ ofxPd : Pure DataをopenFrameworksに内包

28. 3. 内包型
‣ ofxPdの場合
openFrameworks
+
Pdの音響合成エンジン
実行時にデータとして読込

29. 3. 内包型
‣ ofxSuperColliderServer : SuperColliderをoFに内包

30. 3. 内包型
‣ ofxSuperColliderの場合
SuperCollider
openFrameworks
+
SCの音響合成エンジン
楽器(Synth)ファイル書出
Synthdef
実行時にデータとして読込

31. 3. 内包型
‣ 最終的には一つの実行ファイルに
‣ とりあつかいが楽!!

32. 3. 内包型
‣ ofxPdコードサンプル
!
‣ Pdパッチ

33. 3. 内包型
‣ ofxPdコードサンプル
#include "testApp.h"
!
void testApp::setup() {
ofSetFrameRate(60);
ofSoundStreamSetup(2, 1, this, 44100, 2048, 4);
pd.init(2, 1, 44100);
Patch patch = pd.openPatch("pd/osc.pd");
pd.start();
}
void testApp::update() { }
void testApp::draw() { }
!
void testApp::exit() {
pd.stop();
}
!
void testApp::mouseMoved(int x, int y) {
float freq = ofMap(y, ofGetHeight(), 0, 100, 8000);
pd.sendFloat("freq", freq);
}

34. 3. 内包型
‣ ofxPdコードサンプル
void testApp::audioReceived
(float * in, int buf, int n) {
pd.audioIn(in, buf, n);
}
!
void testApp::audioRequested
(float * out, int buf, int n) {
pd.audioOut(out, buf, n);
}

35. 3. 内包型
‣ ofxSuperColliderコードサンプル
#include "testApp.h"
!
#include "ofxSuperCollider.h"
#include "ofxSuperColliderServer.h"
!
ofxSCSynth *synth = NULL;
!
void testApp::setup(){
ofxSuperColliderServer::init();
synth = new ofxSCSynth("test_inst");
synth->create();
}
!
void testApp::update(){ }
!
void testApp::draw(){ }
!
void testApp::mouseMoved(int x, int y ){
if(synth){
synth->set("freq",
ofMap(y, ofGetHeight(), 0, 100, 8000));
}
}

36. デモ
‣ openFrameworks + ofxSuperColliderServer

37. 将来の展望

38. 将来の展望
‣ ネットワーク、Webブラウザの活用
‣ 音響合成のプラットフォームとしてのHTML5
!
‣ サウンド
‣ Web Audio API
‣ Web MIDI API
!
‣ グラフィック
‣ Canvas
‣ WebGL

39. 将来の展望
‣ Gibber (http://gibber.mat.ucsb.edu/)

40. 将来の展望
‣ CoffeeCollider (http://mohayonao.github.io/)

41. 将来の展望
‣ ライブコーディング
‣ TopLap (http://toplap.org/)

42. 将来の展望
‣ ライブコーディング
‣ ofxGLSLSandobox