データ構造とアルゴリズムの最終課題は、「p5.jsでPatatapを作る」です。最終課題制作のための情報をまとめました。
最終課題制作のヒント
- 最終イメージは、Patatapを参考に
- アニメーションを切り替える部分は、テンプレートをそのまま使用してください
- アニメーションを定義しているclassをどんどん追加していく
- それに合わせた音も追加する、サウンドファイルの入手は以下のサイトなどから入手
- 制作のヒント
- 必ずしも、凝ったアニメーションを作る必要はありません
- シンプルなアニメーションもインタラクティブで変化することで面白くなるはず
- 何か1つの要素が変化するだけでも面白い
- 色が変化、大きさが変化、角度が変化、位置が変化 …etc
最終課題提出フォーム
最終課題で制作した作品は、OpenProcessingにアップロードして下記のフォームからURLを提出してください。
OpenProcessingに保存する際に、geidaima22final のタグをつけて投稿してください!
最終課題提出フォーム
アンケート
本日の授業に参加した方はアンケートに答えてください。
アンケート
今回も前回に引き続きp5.soundを使用したサウンドプログラミングを行います。今回は、前回最後に紹介した波形の二乗平均平方根 (Root mean square, RMS) によるサウンドの解析の手法をさらに発展させて、FFTによるサウンドのビジュアライズに挑戦します。FFTクラスを使用すると、音に含まれる周波数成分をリアルタイムに解析することが可能となります。この機能を使うことで、音の周波数成分を可視化して「音を視る」ことが可能となります。今回は、Soundライブラリーを用いたサウンドファイルの再生から、FFTを使用した音のビジュアライズまでを順番に解説していきます。FFTによって分析されたスペクトルの情報を、色や大きさに変換することで、音を様々な手法で視覚化していきます。
映像資料
スライド資料
本日の課題
本日の映像資料を参考に、FFTを用いてサウンドを視覚的に表現してください。いつものようにOpenProcessingに作成し下記の投稿フォームからURLを提出してください。本日のタグは、 geidaima220708 です。
投稿フォーム
サンプルコード
周波数を対数軸でFFTをグラフ化 (画面クリックで再生開始)
色の濃度でFFTをビジュアライズ
色相で色を変化させて、左右対称に
円の大きさでビジュアライズ
応用: 回転するパーティクル
応用: 飛び散るパーティクル
データ構造とアルゴリズムの最終課題は、「p5.jsでPatatapを作る」です。最終課題制作のための情報をまとめました。
最終課題制作のヒント
- 最終イメージは、Patatapを参考に
- アニメーションを切り替える部分は、テンプレートをそのまま使用してください
- アニメーションを定義しているclassをどんどん追加していく
- それに合わせた音も追加する、サウンドファイルの入手は以下のサイトなどから入手
- 制作のヒント
- 必ずしも、凝ったアニメーションを作る必要はありません
- シンプルなアニメーションもインタラクティブで変化することで面白くなるはず
- 何か1つの要素が変化するだけでも面白い
- 色が変化、大きさが変化、角度が変化、位置が変化 …etc
最終課題提出フォーム
最終課題で制作した作品は、OpenProcessingにアップロードして下記のフォームからURLを提出してください。
OpenProcessingに保存する際に、mitda22final のタグをつけて投稿してください!
最終課題提出フォーム
アンケート
本日の授業に参加した方はアンケートに答えてください。
アンケート
今回も前回に引続き、ofxFaceTracker2を使用したフェイストラッキングを使用して様々なプログラミングを行っていきます。
前回使用した、顔のランドマークを検出する方法で眼や鼻など顔のパーツの位置を特定することが可能となりました。この座標の情報を元に顔にパーツを合成することも簡単です。しかしこの方法の欠点は、2次元の座標をもとに合成するため顔の向きを変化させたときに不自然になってしまう点です。この欠点を補うため、今回は顔の位置と傾きの情報を検出し、その3D空間での情報を元に3Dオブジェクトを合成して立体的な表現に挑戦します。
スライド資料
サンプルプログラム
サンプルのビルドには以下の学習データが必要です。下記からダウンロードしてそれぞれのサンプルプロジェクトの bin/data/ フォルダ内に格納してください。
本日のアンケート
アンケート
