ml5.jsは、ニューヨーク大学ITP(Interactive Telecommunications Program)を中心に開発が進行中の機械学習のためのJavaScriptのライブラリーです。今まで難しくて高度なプログラミング能力が必要というイメージだった機械学習を、Processingやp5.jsのように、わかり易い文法で開発が可能にしています。しかし、その内部ではGoogleで開発されたTensorFlow.jsを使用しているので、最新の機械学習の研究成果を活用することが可能です。今回は、このml5.jsをプログラミングしながら、機械学習による表現の可能性について考えていきます。
今回も前回に引き続き、Processingによる音の可視化について探求していきます。前回使用したProcessingのSoundライブラリーは少し不安定でしたので、今回はMinimライブラリーに変更します。
今回は最終課題を見据えて、より実践的なプログラムをいくつか紹介していきます。
本日使用したプログラムのサンプルは、以下からダウンロードしてください。
Sonic Piを用いて生成した音響作品をProcessingで視覚化した、30秒から1分程度のオリジナルのオーディオ・ビジュアル作品を制作してください。
2018年7月31日 (予定)
3つの提出データ(Sonic Piソース、Processingソース、スクリーンショト)を圧縮せずにメールに添付して提出。その際に以下の情報もあわせて本文に入力してください。
tadokoro+teu18@gmail.com
この講義ではProcessingを使用してクリエイティブ・コーディングの基礎を学んできました。今回は、これまでのまとめと、ここから先へ進むためのステップについて解説します。
Processingの基礎を身に付けてから次に進む様々な手段がありますが、ここでは次の2つの方法を紹介します。
openFrameworksは、クリエイティブコーディングのためのC++のオープンソースツールキットです。その最大の利点はスピードです。Processingでは処理が追いつかずコマ落ちしてしまうような表現も高速な演算で実現可能です。より本格的な作品制作を目指す方にはProcessingを習得した後、openFrameworksにステップアップすることをお勧めします。openFrameworksには、Processingのライブラリーにあたるアドオン(addons)という拡張機能があり、膨大な数のアドオンが公開されているのも魅力の一つです。
TouchDesignerは、ノードベースのビジュアルプログラミング環境です。様々な機能が内包された箱(オペレーター)を画面上に配置して、それらをパッチケーブルで接続していくことで、多彩で高機能なプログラム開発が可能となります。ただし、TouchDesignerはDerivative社が開発販売している製品であり、ProcessingやopenFrameworksとは違いオープンソースのプロジェクトではありません。ただし、非商用の利用で、画像の最大サイズが1280×1280 Pixel以内であれば、無料で使用することが可能です。
自分の作品の表現形態やテーマにあわせて、次のステップへ進んでいきましょう!
時間の経過でシーンを切り替えたい、ユーザーとのインタラションによっていくつもの画面を用意したいなど、openFrameworksで作品をつくる際に、1つのアプリケーションの中で複数の場面を切り替える必要が出てくる場合があります。そうした際にofAppクラスの中に全ての場面を詰め込もうとすると、各操作での条件分岐などが複雑になり、扱いが大変となります。
今回は、大量の場面を効率的に取り扱う方法について考えていきます。今回は、こうした複数のシーンを管理する方法を2種類紹介します。1つ目は、ofBaseApp (ofAppの元となっているクラス) を継承したBaseSceneというクラスを作成して、ofAppからBaseSceneの配列を管理することでシーンを切り替える方法です。2つ目は、Addonを利用する方法です。ofxStateMachineを利用すると複数の状態(State)とその遷移を、とてもスマートに実装可能です。
この講義では、前半にProcessingを使用したインタラクティブなアニメーションの基本、後半はSonic Piを使用したサウンドプログラミングを行ってきました。今回はいよいよこの両者を融合して、音と映像を同時に用いた表現に挑戦していきたいと思います。
まず始めにProcessingを用いて音を視覚化する方法を検討します。単純に感覚的手法で視覚化するのではなく、音を周波数成分に分解しその変化を視覚的に表現します。ここでは、FFT（高速フーリエ変換）という手法を用います。
次に、この視覚化の手法を用いて、Sonic Piで作成してレコーディングした音をProcessingで読み込み、視覚化する方法について解説します。サウンドの解析には、Processingのコアライブラリである、Soundライブラリーを使用します。
サウンドファイルの再生
//Soundライブラリーの読み込み
import processing.sound.*;
//サウンドプレイヤー
SoundFile soundfile;
void setup() {
//サウンドファイルを読み込んでプレイヤーを初期化
soundfile = new SoundFile(this, "sound.aiff");
//ループ再生
soundfile.loop();
}
void draw(){
}
マウスで再生スピードと音量を変化
//Soundライブラリーの読み込み
import processing.sound.*;
//サウンドプレイヤー
SoundFile soundfile;
void setup() {
size(800, 600);
//サウンドファイルを読み込んでプレイヤーを初期化
soundfile = new SoundFile(this, "sound.aiff");
//ループ再生
soundfile.loop();
}
void draw() {
background(0);
//マウスのX座標で再生スピードを設定
float rate = map(mouseX, 0, width, 0.0, 2.0);
//マウスのY座標で音量を設定
float amp = map(mouseY, 0, height, 1.0, 0.0);
//再生スピードを適用
soundfile.rate(rate);
//音量を適用
soundfile.amp(amp);
}
音量を円の直径に反映
//Soundライブラリーの読み込み
import processing.sound.*;
//サウンドプレイヤー
SoundFile soundfile;
//音量解析
Amplitude rms;
void setup() {
size(800, 600);
fill(0, 127, 255);
noStroke();
//サウンドファイルを読み込んでプレイヤーを初期化
soundfile = new SoundFile(this, "sound.aiff");
//ループ再生
soundfile.loop();
//音量解析を初期化
rms = new Amplitude(this);
//音量解析の入力を設定
rms.input(soundfile);
}
void draw() {
background(0);
//音量を解析して値を調整
float diameter = map(rms.analyze(), 0.0, 1.0, 0.0, width);
//取得した音量で円を描く
ellipse(width/2, height/2, diameter, diameter);
}
FFTによるスペクトラム表示
//Soundライブラリーの読み込み
import processing.sound.*;
//サウンドプレイヤー
SoundFile soundfile;
//オーディオデバイス
AudioDevice device;
//FFT(高速フーリエ変換)
FFT fft;
//FFTサイズ
int bands = 1024;
//グラフの高さのスケールを設定
float scale = 20.0;
void setup() {
size(800, 600);
fill(0, 127, 255);
noStroke();
//オーディオバッファーの設定
device = new AudioDevice(this, 44000, bands);
//サウンドファイルを読み込んでプレイヤーを初期化
soundfile = new SoundFile(this, "sound.aiff");
//ループ再生
soundfile.loop();
//FFTの初期化
fft = new FFT(this, bands);
fft.input(soundfile);
}
void draw() {
background(0);
//FFT解析実行
fft.analyze();
noFill();
stroke(255);
//線分の描画開始
beginShape();
//FFTのバンドの数だけくりかえし
for (int i = 0; i < bands; i++) {
//FFTの解析結果を高さにグラフを描く
vertex(i * width/float(bands), height - fft.spectrum[i] * height * scale);
}
//線分の描画終了
endShape();
}