今回も前回に引続き、ofxFaceTracker2を使用したフェイストラッキングを使用して様々なプログラミングを行っていきます。
前回使用した、顔のランドマークを検出する方法で眼や鼻など顔のパーツの位置を特定することが可能となりました。この座標の情報を元に顔にパーツを合成することも簡単です。しかしこの方法の欠点は、2次元の座標をもとに合成するため顔の向きを変化させたときに不自然になってしまう点です。この欠点を補うため、今回は顔の位置と傾きの情報を検出し、その3D空間での情報を元に3Dオブジェクトを合成して立体的な表現に挑戦します。
サンプルのビルドには以下の学習データが必要です。下記からダウンロードしてそれぞれのサンプルプロジェクトの bin/data/ フォルダ内に格納してください。
本日は最終課題の制作実習を行います。最終課題の制作を進めてください。わからないことは随時質問してください。
patatapを参考にして、キーボードからの入力に反応して音とアニメーションが再生されるインタラクティブな作品を作成してください。サウンドはネットからダウンロード可能なフリー音源を使用して構いません。
制作にあたっては、下記の制作テンプレートをforkして使用します。
最終課題の作品は、OpenProcessingにアップロードしてそのURLを下記のフォームに記入してください。最終締切は、7月29日までとします。
今回は、openFrameoworksのAddonの紹介の3つめとして、ofxFaceTracker2を取り上げます。
SnapCameraやFaceAppといった、カメラに映した顔を加工するアプリケーションが流行しています。実際に試してみると、その精度に驚かされます。このアプリの背後には、コンピュータビジョン (CV) と機械学習による顔のパーツを立体的にトラッキングする技術、Face Tracking が活用されています。
今回は、openFrameworksでFace Trackingを行うためのAddon、ofxFaceTracker2を実際にプログラミングしながらその基本を紹介していきます。
サンプルのビルドには以下の学習データが必要です。下記からダウンロードしてそれぞれのサンプルプロジェクトの bin/data フォルダ内に格納してください。
この講義「データ構造とアルゴリズムでは」変数と定数、反復、乱数、論理式と条件文、アニメーションとベクトル、配列の操作、関数、そしてオブジェクト指向プログラミングと様々なトピックスを扱ってきました。最終課題はこれらの内容を総動員して、Patatap (https://patatap.com/) のようなインタラクティブなオーディオビジュアル作品をp5.jsで制作します。
Patatapはとてもシンプルなインタラクションで構成された作品です。キーボードを操作すると、それぞれのキーにシンプルなアニメーションが割り振られていて、同時にサンプリングされたサウンドが鳴るようになっています。仕組みはとても単純なのですが、キーボードをリズムにあわせてタイピングすることで音と映像が同期して、まるでVJのパフォーマンスをしているような気分を味わえます。キーボードの組み合わせは無限にあるので、いつまでも飽きることがありません。
今回は、最終課題として、p5.jsをつかってPatatapを制作するための方法について解説していきます。
課題制作のための資料・サンプルなど
本日分でできた作品についてはまず以下のフォームから提出してください。
課題の最終的な提出は、7月30日 (木) とします。7月31日 (金) 13:00から、自由参加で最終講評回を行います。都合のつく方は参加してください。
この講義「データ構造とアルゴリズムでは」変数と定数、反復、乱数、論理式と条件文、アニメーションとベクトル、配列の操作、関数、そしてオブジェクト指向プログラミングと様々なトピックスを扱ってきました。最終課題はこれらの内容を総動員して、Patatap (https://patatap.com/) のようなインタラクティブなオーディオビジュアル作品をp5.jsで制作します。
Patatapはとてもシンプルなインタラクションで構成された作品です。キーボードを操作すると、それぞれのキーにシンプルなアニメーションが割り振られていて、同時にサンプリングされたサウンドが鳴るようになっています。仕組みはとても単純なのですが、キーボードをリズムにあわせてタイピングすることで音と映像が同期して、まるでVJのパフォーマンスをしているような気分を味わえます。キーボードの組み合わせは無限にあるので、いつまでも飽きることがありません。
今回は、最終課題に向け、p5.jsをつかってPatatapを制作するための方法について解説していきます。
最終課題で制作した作品は、OpenProcessingにアップロードして下記のフォームからURLを提出してください。
今回も前回に引続きopenFrameworksを用いた “Aiudio Visual” の表現について探求していきます。前回解説した、openFrameworksでFFTを行うofxFft、さらにFFTによる解析を簡単に行えるようにしたofxEasyFftの復習をしていきます。後半は、さらにFFT解析した結果を分析し様々な情報を取り出すことのできる、ofxProcessFftについて解説し実際に活用しながら様々なビジュアライズを試していきます。
今回も前回に引き続き、p5.jsによるオブジェクト指向プログラミング (OOP) について学んでいきます。
今回は、オブジェクトを生成する際に実行される初期化のための関数であるコンストラクター (constructor) に注目します。ここまでやってきたようにコンストラクターはオブジェクトが初期化 (インスタンス化) される際に自動的に実行されます。つまりクラスの初期化関数として機能しています。インスタンス化は以下のように行ってきました。
let object = new ClassName();
クラス名の後に () があるところに注目してください。クラス側で設定することによってインスタンス化の際にコンストラクターの引数としてパラメータを受け取ることが可能です。つまり以下のようになります。
let object = new ClassName(arg1, arg2, arg3...);
こうすることで、クラスからオブジェクトを生成する際に引数の値によって様々なバリエーションのオブジェクトを生成することが可能となります。1つの工場 (= クラス) から、様々なバリエーションの車 (= オブジェクト) を生成するイメージです。
実際にp5.jsのコードを動かしながら、インスタンス化とコンストラクターについて理解していきましょう。
今回作成したクラス「Blob」を改造して新たな作品を制作してください。コンストラクターから引数を受けとって、様々なバリエーションのオブジェクトを大量に生成してみましょう。もちろん、元のサンプルプログラムから全然違う形や動きや色にしてしまって構いません。
OpenProcessingに作成して、URLをオンラインフォームから提出してください。
ライブラリー (Library) とは、 汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたもので、多くのプログラミング言語で活用されています。p5.js自体もJavaScriptのライブラリーの1つです。p5.jsではさらにライブラリーを活用することで、p5.js単体では実現が難しい様々な機能を追加していくことが可能です。p5.jsのWebサイトでは様々なライブラリーが紹介されていて、すぐに利用することが可能です。
今回は、p5.js Libraryの中から音を扱かうための p5.Soundライブラリーを使用してp5.jsによるサウンドプログラミングに挑戦します。今回の内容の発展が今期の「データ構造とアルゴリズム」の最終課題となります。しっかりと理解して活用できるようになりましょう。
openFrameworksでは、画像や動画ファイルなどと同様に、プログラムにサウンドファイルを読み込み、再生したり、波形を表示することが可能です。しかし、音の波形を表示したら音響を視覚化したことになるでしょうか。
実は我々の耳は音を波形ではなく、周波数に分解して知覚しています。ですので、波形をそのま操作して表示しても、あまり音と一致した映像にはなりません。音を周波数の帯域ごとの音量に分解するには、フーリエ変換という手法を用います。これにより、音を周波数帯域ごとの強さにわけて取得することが可能となります。フーリエ変換は、コンピュータ内で高速に処理する高速フーリエ変換（FFT）というアルゴリズムが考案され、現在ではPC内でリアルタイムに変換していくことが可能です。今回は、このフーリエ解析を利用して、音を可視化してみましょう。
openFrameworksでは、ofxFftというアドオンを用いて簡単にFFT解析を行うことが可能です。またofxFftには、ofxProcessFFTというFFTを利用したより詳細な音響析用のクラスも同梱されています。このofxProcessFFTも利用して、音を効果的に視覚化していく方法について探っていきます。
今回はp5.jsで生成的(Generative)な形態を生みだすにはどうすればよいのか、試行錯誤しながら実験していきます。まず初めに、コードを用いた生成的な表現の実例をいくつか紹介した後、実際にp5.jsでプログラミングしていきます。
まず始めに、完全にランダムな確率で動きまわる「ランダムウォーク」な動きをする点の動きをつくり、その軌跡を描いてみます。次にこのランダムな動きを増殖させていきます。増殖の際に今回は全てを一つのプログラムに書くのではなく、それぞれの点を細かなプログラムで実装し、その小さなプログラム達を組合せることで一つの機能を生みだすような設計にします。この小さなプログラムを「オブジェクト (Object)」と呼び、オブジェクトを構成単位にしてプログラムを作成していく手法を、オブジェクト指向プログラミング (OOP) と呼びます。このOOPの考え方は今後も重要な内容となってきますので、実例を通して確実に理解していきましょう。
ランダムウォークの動きをするクラス (Walker) を改造して生成的な作品を制作してください。改造する内容は自由です (色の変化、動き、速さなど) 。今回もGoogle FormからOpenProcessingのURLを投稿して提出してください。
