今回も前回に引続き、ofxFaceTracker2を使用したフェイストラッキングを使用して様々なプログラミングを行っていきます。
前回使用した、顔のランドマークを検出する方法で眼や鼻など顔のパーツの位置を特定することが可能となりました。この座標の情報を元に顔にパーツを合成することも簡単です。しかしこの方法の欠点は、2次元の座標をもとに合成するため顔の向きを変化させたときに不自然になってしまう点です。この欠点を補うため、今回は顔の位置と傾きの情報を検出し、その3D空間での情報を元に3Dオブジェクトを合成して立体的な表現に挑戦します。
本日の授業に出席した方は以下のアンケートに回答してください。
この講義「データ構造とアルゴリズムでは」変数と定数、反復、乱数、論理式と条件文、アニメーションとベクトル、配列の操作、関数、そしてオブジェクト指向プログラミングと様々なトピックスを扱ってきました。最終課題はこれらの内容を総動員して、Patatap (https://patatap.com/) のようなインタラクティブなオーディオビジュアル作品をp5.jsで制作します。
Patatapはとてもシンプルなインタラクションで構成された作品です。キーボードを操作すると、それぞれのキーにシンプルなアニメーションが割り振られていて、同時にサンプリングされたサウンドが鳴るようになっています。仕組みはとても単純なのですが、キーボードをリズムにあわせてタイピングすることで音と映像が同期して、まるでVJのパフォーマンスをしているような気分を味わえます。キーボードの組み合わせは無限にあるので、いつまでも飽きることがありません。
今回は、最終課題に向け、p5.jsをつかってPatatapを制作するための方法について解説していきます。
最終課題「Patatapを作る」
最終課題制作のオンデマンドの教材を参考にしながら「Patatap」のようにキーボードからのタイピングで音と映像が同期する作品を制作してください。
この授業の最終課題の講評会を2022年1月14日と21日の2回に分けて開催します。講評会での発表をした方は一律10点 (100点満点中) 加算します。発表を希望する方は以下に学籍番号と氏名を記入してください。
締切 : 2022年1月12日 (水)
(冬休み)
今回も前回に引き続いてTouchDesignerとGLSLを組合せて高度な表現に挑戦します。前回はフラグメントシェーダー (ピクセルシェーダー) を用いてテクスチャー (TOP) を生成する2次元的な表現に留まっていました。今回はさらにGLSLを応用して3次元の形態(SOP)にGLSLを適用していきます。まず始めにGLSL TOPを用いてバンプマッピング (Bump mapping) をPhongマテリアル(Phong MAT)に適用しレンダリングの際に3Dの形状を変形するという手法を行います。さらに、続いて、GLSL MATを使用して頂点シェーダー (vertex shader) を用いて座標の情報をもとにマテリアルを動的に生成する手法に挑戦します。
本日の授業に参加した方は以下のアンケートに答えてください。
今回も前回に引続き、ofxFaceTracker2を使用したフェイストラッキングを使用して様々なプログラミングを行っていきます。
前回使用した、顔のランドマークを検出する方法で眼や鼻など顔のパーツの位置を特定することが可能となりました。この座標の情報を元に顔にパーツを合成することも簡単です。しかしこの方法の欠点は、2次元の座標をもとに合成するため顔の向きを変化させたときに不自然になってしまう点です。この欠点を補うため、今回は顔の位置と傾きの情報を検出し、その3D空間での情報を元に3Dオブジェクトを合成して立体的な表現に挑戦します。
サンプルのビルドには以下の学習データが必要です。下記からダウンロードしてそれぞれのサンプルプロジェクトの bin/data/ フォルダ内に格納してください。
本日の授業に出席した方は以下のアンケートに回答してください。
ライブラリー (Library) とは、 汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたもので、多くのプログラミング言語で活用されています。p5.js自体もJavaScriptのライブラリーの1つです。p5.jsではさらにライブラリーを活用することで、p5.js単体では実現が難しい様々な機能を追加していくことが可能です。p5.jsのWebサイトでは様々なライブラリーが紹介されていて、すぐに利用することが可能です。
今回は、p5.js Libraryの中から音を扱かうための p5.Soundライブラリーを使用してp5.jsによるサウンドプログラミングに挑戦します。今回の内容の発展が今期の「デザインとプログラミング」の最終課題となります。しっかりと理解して活用できるようになりましょう。
p5.soundを用いて、音を使用した表現をしてください。
音の再生と背景色の変化
マウスのx座標で再生スピードを変更
ローパスフィルター
音量を視覚化
今回は、openFrameoworksのAddonの紹介の3つめとして、ofxFaceTracker2を取り上げます。
SnapCameraやFaceAppといった、カメラに映した顔を加工するアプリケーションが流行しています。実際に試してみると、その精度に驚かされます。このアプリの背後には、コンピュータビジョン (CV) と機械学習による顔のパーツを立体的にトラッキングする技術、Face Tracking が活用されています。
今回は、openFrameworksでFace Trackingを行うためのAddon、ofxFaceTracker2を実際にプログラミングしながらその基本を紹介していきます。
Tech Riderを書いてみる!
Tech Riderは次週までの課題とします
今回は、openFrameoworksのAddonの紹介の3つめとして、ofxFaceTracker2を取り上げます。
SnapCameraやFaceAppといった、カメラに映した顔を加工するアプリケーションが流行しています。実際に試してみると、その精度に驚かされます。このアプリの背後には、コンピュータビジョン (CV) と機械学習による顔のパーツを立体的にトラッキングする技術、Face Tracking が活用されています。
今回は、openFrameworksでFace Trackingを行うためのAddon、ofxFaceTracker2を実際にプログラミングしながらその基本を紹介していきます。
今回も前回に引き続き、p5.jsによるオブジェクト指向プログラミング (OOP) について学んでいきます。
今回は、オブジェクトを生成する際に実行される初期化のための関数であるコンストラクター (constructor) に注目します。ここまでやってきたようにコンストラクターはオブジェクトが初期化 (インスタンス化) される際に自動的に実行されます。つまりクラスの初期化関数として機能しています。インスタンス化は以下のように行ってきました。
let object = new ClassName();
クラス名の後に () があるところに注目してください。クラス側で設定することによってインスタンス化の際にコンストラクターの引数としてパラメータを受け取ることが可能です。つまり以下のようになります。
let object = new ClassName(arg1, arg2, arg3...);
こうすることで、クラスからオブジェクトを生成する際に引数の値によって様々なバリエーションのオブジェクトを生成することが可能となります。1つの工場 (= クラス) から、様々なバリエーションの車 (= オブジェクト) を生成するイメージです。
実際にp5.jsのコードを動かしながら、インスタンス化とコンストラクターについて理解していきましょう。
1つのクラスから複数のオブジェクトを生成して表現してください。
今回の授業に参加した方は、以下のアンケートに回答してください。
今回は物理シミュレーションを行うことができる、ofxBox2DというAddonをとりあげます。
ofxBox2Dは、Box2DというC++で書かれた2Dの物理演算エンジンをopenFrameworksのAddon化したものです。Box2Dは質量、力、速度、摩擦といった古典物理学(ニュートン力学)の演算を高速に行う、物理法則の演算のためのライブラリーで、もともとはC++で書かれていますが、現在では、Java、C#、Python、JavaScriptなど様々な言語に移植されています。ofxBox2Dを使うことで簡単な物理法則を援用したアニメーションだけでなく、2次元のゲームやインタラクティブなコンテンツなどに応用可能です。今回は、ofxBox2Dの導入から、形を定義して物理世界に追加する方法、大量の物体を追加するための工夫などを紹介していきます。
授業に参加した方は、本日のアンケートに回答してください。