今期のクリエイティブコーディングは「インタラクションを表現する」というテーマを最終課題とします。前回は、マウスとキーボードによる基本的なインタラクションを解説しました。今回はより高度なインタラクションの例として、音と映像を用いたインタラクションについて取り上げます。音のインタラクションの例として、ofxFftというAddonを用いて音を周波数解析(FFT)してその結果を用いてビジュアライズするサンプルを紹介します。また、映像を用いたインタラクションは、ofxCvといAddonでコンピュータビジョン(CV)の技術をopenFrameworksに取り入れる方法について解説します。
ここまで、この講義ではp5.jsを用いた2次元のグラフィクスやアニメーションを取り扱ってきました。p5.jsでは、2次元のだけでなく、3次元のグラフィクスやアニメーションを描画することが可能です。
p5.jsの3D描画には、WebGLというウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様を使用してレンダリングを行います。WebGLはグラフィクスカード(GPU)を用いて描画を行うため、とても高速な3Dグラフィクスの表示を可能にしています。
今回は、p5.jsでの3D表示の基本から始めて、アルゴリズムを用いた生成的な3Dグラフィクス表現までを目指します。
ここまで3回にわたって、TidalCyclesを使用したライブコーディングを行ってきました。TidalCyclesで最終的に出力されるのは音 (音響、音楽) でした。それに対して、映像を出力するためのライブコーディングの環境も数多く存在します。
今回は、ビジュアルのためのライブコーディングの環境の中から以下の3つの開発環境/言語を取り上げます。
音のライブコーディングとはまた違った世界を楽しみましょう!
Reactive Books, John Maeda, 1995 – 1999
インタラクション (Interaciton)とは英語の「 inter (〜の間に)」と「action (動作)」を合成した言葉です。つまり、インタラクションとは「人間が何かアクション (動作) をした時、そのアクションが一方通行にならず、相手側の機器やプログラムがそのアクションに反応してリアクションをする」ということを意味します。今期のクリエイティブ・コーディングの講義の最終課題はこのインタラクションをテーマにします。
今回は、openFrameworksで実現可能な最もシンプルなインタラクションの方法である、マウスとキーボードによるインタラクションを取り上げます。openFrameworksでは、通常はsetup()、update()、draw() のループの中でアニメーションを生成します。しかし、マウスやキーボードの動作によってこのループの中に割り込むことのできる「イベント」と呼ばれる関数がいろいろ用意されています。例えば、マウスポインタを動かした時や、マウスボタンを押した時、またはキーボードを押した時など、ユーザーの動作に反応するプログラムを作成することが可能となります。
今回も前回に引き続きp5.soundを使用したサウンドプログラミングを行います。今回は、前回最後に紹介したFFTによるサウンドの解析の手法を発展させてサウンドのビジュアライズに挑戦します。FFTによって分析されたスペクトルの情報を、色や大きさに変換することで、音を様々な手法で視覚化していきます。
Tiny Sorter, by Google Creative Lab
今回の講義の前半は、最終課題「Teachable Machineと、ml5.js + p5.jsを使用して機械学習を活用したインタラクティブなコンテンツを制作する」の制作のアイデアをプレゼンします。個々の発表について実現可能かどうか、また実現できるとするとどのように作っていけば良いのかアドバイスしていきます。
後半は最終課題制作のヒントとして、Teachable Machineのモデルをml5.js + p5.jsに適用する方法を簡単なサンプルの作成を通して学びます。
前回、前々回とTidalCyclesの様々な機能について学んできました。セットアップと起動の方法、パターン生成の基本、パターンを変形する様々な関数、エフェクト、テンポ、乱数、コード、スケールなどTidalCyclesではライブコーディングに関する膨大な機能を使用することが可能です。今回は、これまでの内容を総合して、TidalCyclesで演奏のための構造をつくるにはどのようにすれば良いのか、そのヒントとなる実例をいくつか取り上げます。今回紹介する方法が全てではありませんが、実際のライブコーディングの演奏の際のヒントとなるでしょう。
今回は、Addonの使用の3回目として、ネットワークを活用したインタラクションについて考えていきます。ofxOscは、openFrameworksでOpen Sound Control(OSC)という通信プロトコルを使用するためのAddonです。OSCは、openFrameworksのアプリケーション同士をEthernetを介して通信することができ、これにより、ネットワークを介して複数のユーザが１つのアプリケーションを操作することが可能となります。またopenFrameworksのアプリケーションを他のアプリケーション、例えば、Max/MSPやPd、SuperCollider、さらにはTouchOSCといったiPhoneアプリなどからコントロールすることが出来るようになります。
今回はp5.jsのライブラリー活用の2回目として、p5.jsで音を扱うためのp5.soundライブラリーを紹介します。
p5.soundライブラリーを使用することで、サウンドファイルの再生や、マイクやライン入力のキャプチャーだけでなく、音にエフェクトをかけたり、波形自体を生成したりと、サウンドに関する様々な機能が活用できます。さらに、FFTクラスを使用すると、音に含まれる周波数成分をリアルタイムに解析することが可能となります。この機能を使うことで、音の周波数成分を可視化して「音を視る」ことが可能となります。今回は、Soundライブラリーを用いたサウンドファイルの再生から、FFTを使用した音のビジュアライズまでを順番に解説していきます。
この講義ではここまでml5.jsを使用して、主に画像のクラス分け(Image Classification)と、転移学習(Transfer Learning)による画像のクラス分けと回帰 (Image Regression)を行ってきました。しかし、ml5.jsにはその他にも様々な機能が実装されています。画像に関する機能、音に関する機能、テキストに関する機能の3つのカテゴリーで、ml5.jsの機能をサンプルを動かしながら理解していきます。
最後に、最終課題の内容と今後のスケジュールについて説明します。
今回のサンプルは、ml5.jsのgithubのサンプルのリポジトリを使用します。