今回も前回に引き続きp5.soundを使用したサウンドプログラミングを行います。今回は、前回最後に紹介した波形の二乗平均平方根 (Root mean square, RMS) によるサウンドの解析の手法をさらに発展させて、FFTによるサウンドのビジュアライズに挑戦します。FFTクラスを使用すると、音に含まれる周波数成分をリアルタイムに解析することが可能となります。この機能を使うことで、音の周波数成分を可視化して「音を視る」ことが可能となります。今回は、Soundライブラリーを用いたサウンドファイルの再生から、FFTを使用した音のビジュアライズまでを順番に解説していきます。FFTによって分析されたスペクトルの情報を、色や大きさに変換することで、音を様々な手法で視覚化していきます。
映像資料
スライド資料
本日の課題
本日の映像資料を参考に、FFTを用いてサウンドを視覚的に表現してください。いつものようにOpenProcessingに作成し下記の投稿フォームからURLを提出してください。
投稿フォーム
サンプルコード
周波数を対数軸でFFTをグラフ化 (画面クリックで再生開始)
色の濃度でFFTをビジュアライズ
色相で色を変化させて、左右対称に
円の大きさでビジュアライズ
応用: 回転するパーティクル
応用: 飛び散るパーティクル
今回も前回に引続きopenFrameworksを用いた “Aiudio Visual” の表現について探求していきます。前回解説した、openFrameworksでFFTを行うofxFft、さらにFFTによる解析を簡単に行えるようにしたofxEasyFftの復習をしていきます。後半は、さらにFFT解析した結果を分析し様々な情報を取り出すことのできる、ofxProcessFftについて解説し実際に活用しながら様々なビジュアライズを試していきます。
スライド資料
サンプルプログラム
参考動画
ALVA NOTO – UNIEQAV #08 UNI MIC B
アンケート
授業に参加した方は下記のアンケートに回答してください。
John Maeda, Design in Tech Report 2019
この講義の後半は、PCを使用したグラフィクスデザインの基礎を行っていきます。初回となる今回は、そもそもデザインとは何なのか、また今後どのように変化していくのかについて解説していきます。その上で、デザインのための作業の概要を解説した上で、Figmaを用いてデザイン制作の導入を行います。
スライド資料
次回までの課題
各自で使用しているノートPCに、以下のアプリケーション/フォントの環境構築をしてください。次回以降は、各自のノートPCを用いて作業していきます。
データ構造とアルゴリズムの最終課題は、「p5.jsでPatatapを作る」です。
最終課題制作のヒント
- アニメーションを切り替える部分は、テンプレートをそのまま使用してください
- アニメーションを定義しているclassをどんどん追加していく
- それに合わせた音も追加する、サウンドファイルの入手は以下のサイトなどから入手
- 制作のヒント
- 必ずしも、凝ったアニメーションを作る必要はありません
- シンプルなアニメーションもインタラクティブで変化することで面白くなるはず
- 何か1つの要素が変化するだけでも面白い
- 色が変化、大きさが変化、角度が変化、位置が変化 …etc
最終課題提出フォーム
最終課題で制作した作品は、OpenProcessingにアップロードして下記のフォームからURLを提出してください。
OpenProcessingに保存する際に、mitda21final のタグをつけて投稿してください!
最終課題提出フォーム
Animated Motion: Part 1, Norman McLaren & Grant Munro, 1976
コードを用いたアニメーションについて考えていく第一回目として、今回は座標とベクトル (Vector) を用いたアニメーションについて解説していきます。まず、Norman McLarenによるアニメーションのチュートリアルを視聴した後で、A地点からB地点までなめらかに直線運動する動きをp5.jsで記述する方法を、様々な手法を用いて解説していきます。解説は以下の手順でステップバイステップで進めていきます。
- Step 1 : 座標の更新
- Step 2 : ベクトル (p5.Vector) を使う
- Step 3 : 線形補完 (Linear interpolation, lerp) を使う
- Step 4 : 座標以外の要素もアニメーションさせる – 大きさ
- Step 5 : 座標以外の要素もアニメーションさせる – 色
- Step 6 : パラメータをオブジェクトにまとめる
スライド資料
実習 : アニメーションを試してみる!
サンプルプログラムを参考にして、アニメーションを試してみる!
- 基本 : A地点からB地点までの動きに適用
- 応用 : amountの値を様々な属性にあてはめてみる
- OpenProcessingに投稿してURLを提出
- 保存する際に mit210626 のタグをつける!
- 質問があれば、適宜受け付けていきます!
参考: 角度と色と大きさの変化 https://openprocessing.org/sketch/1224911
サンプルコード
Step 0 : 指定した分割数で、0.0〜1.0までカウントアップ
Step 1 : 座標の更新
Step 2 : ベクトル (p5.Vector) を使う
Step 3 : 線形補完 (Linear interpolation, lerp) を使う
Step 4 : 座標以外の要素もアニメーションさせる – 大きさ
Step 5 : 座標以外の要素もアニメーションさせる – 色
Step 6 : パラメータをオブジェクトにまとめる
ライブラリー (Library) とは、 汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたもので、多くのプログラミング言語で活用されています。p5.js自体もJavaScriptのライブラリーの1つです。p5.jsではさらにライブラリーを活用することで、p5.js単体では実現が難しい様々な機能を追加していくことが可能です。p5.jsのWebサイトでは様々なライブラリーが紹介されていて、すぐに利用することが可能です。
今回は、p5.js Libraryの中から音を扱かうための p5.Soundライブラリーを使用してp5.jsによるサウンドプログラミングに挑戦します。今回の内容の発展が今期の「メディアアート・プログラミング I」の最終課題となります。しっかりと理解して活用できるようになりましょう。
映像資料
スライド資料
本日の課題
本日の映像資料を参考に、サウンドを用いた表現を行ってください。いつものようにOpenProcessingに作成し下記の投稿フォームからURLを提出してください。
投稿フォーム
openFrameworksでは、画像や動画ファイルなどと同様に、プログラムにサウンドファイルを読み込み、再生したり、波形を表示することが可能です。しかし、音の波形を表示したら音響を視覚化したことになるでしょうか。
実は我々の耳は音を波形ではなく、周波数に分解して知覚しています。ですので、波形をそのま操作して表示しても、あまり音と一致した映像にはなりません。音を周波数の帯域ごとの音量に分解するには、フーリエ変換という手法を用います。これにより、音を周波数帯域ごとの強さにわけて取得することが可能となります。フーリエ変換は、コンピュータ内で高速に処理する高速フーリエ変換（FFT）というアルゴリズムが考案され、現在ではPC内でリアルタイムに変換していくことが可能です。今回は、このフーリエ解析を利用して、音を可視化してみましょう。
openFrameworksでは、ofxFftというアドオンを用いて簡単にFFT解析を行うことが可能です。またofxFftには、ofxProcessFFTというFFTを利用したより詳細な音響析用のクラスも同梱されています。このofxProcessFFTも利用して、音を効果的に視覚化していく方法について探っていきます。
スライド資料
サンプルプログラム
アンケート
本日の授業に参加した方は、以下のアンケートに答えてください。
2019年の4月に前橋に引越してきてから2年とちょっと、いろいろ生活に慣れてくると、群馬の生活は基本車移動ということを痛感するようになってきた。ちょっと買い物するにも自転車で行ける範囲でのスーパーは限られているし、バスなどの公共交通は全く話にならない。
そんなわけで、49歳にして自動車免許を取ることを決意。仕事の都合で合宿は無理なので、通いで取ることに。あまり無理をせずAT限定にした。
近所にはいくつか教習所がある。2つ見学してみて、受付の方の応対が親切だったのと河川敷にあるコース周辺が緑に囲まれていて雰囲気が良かったので、大渡自動車学校に決定。4月21日から通い始めた。
群馬はさすがの車社会で、自宅の前までマイクロバスで送迎してくれる。仕事がある日は、そのまま大学まで送ってもらった。とても便利。
自分が学生の頃は、教官は下手だと怒鳴ったり不親切だったりして苦労したらしいが、いざ通ってみると現代の教習所の教官はみんな親切。きちんと説明してくれるし、失敗しても怒られるようなことはまずない。選んだ教習所がたまたま良かったのかもしれないけど。
あと感心したのが学科教習。退屈にならないように制作された『DON!DON!ドライブ』 (通称ドンドラ) というビデオ教材がとても良くできていて感心してしまった。いろいろなキャラが出てくるのだけど、個人的には「よりとも君」が好き。
免許取得までのカリキュラムはいろいろ複雑。ざっとこんな感じだった。
- 第一段階
- 学科 : 1〜10 (10時間)
- 技能 : 12時間 (コース内)
- 第一段階の効果測定 (学科の模試)
- 修了検定
- 第二段階
- 学科 : 11〜26 (16時間)
- 技能 : 19時間 (路上)
- 第二段階の効果測定
- 卒業検定
- 学科試験
- 免許発行
ちなみに、4月21日に入学して、5月2日に第一段階の効果測定と技能を終え、ゴールデンウィークを挟んで5月11日に仮免検定 (一発合格!)、5月13日から29日で第二段階を終え、5月30日に卒業検定 (一発合格!!)、5月31日に交通センターでの学科試験 (一発合格! ) 。という感じだった。約1ヶ月と10日で取得。我ながら良く頑張った!
中古のプリウスが安く売っていたので、免許取得の勢いで買ってしまった…
もう49歳になると、一から新たな技能を習得することってあまりないので、とても新鮮な体験だった。
あと面白かったのが、技能教習の時に、いろいろな教官から「免許取るのは初めて?」と聞かれたこと。どうやら、違反をして免許取消になって再度受講しに来たのではないかと思われているみたい。そのたびに「引越してきたら車が無いと不便なので」という説明をすると、どの人も嬉しそうな顔で「群馬は車がないと生活できなからねえ〜」って答える。ホントに車社会なんだなあ…
この講義「データ構造とアルゴリズムでは」変数と定数、反復、乱数、論理式と条件文、アニメーションとベクトル、配列の操作、関数、そしてオブジェクト指向プログラミングと様々なトピックスを扱ってきました。最終課題はこれらの内容を総動員して、Patatap (https://patatap.com/) のようなインタラクティブなオーディオビジュアル作品をp5.jsで制作します。
Patatapはとてもシンプルなインタラクションで構成された作品です。キーボードを操作すると、それぞれのキーにシンプルなアニメーションが割り振られていて、同時にサンプリングされたサウンドが鳴るようになっています。仕組みはとても単純なのですが、キーボードをリズムにあわせてタイピングすることで音と映像が同期して、まるでVJのパフォーマンスをしているような気分を味わえます。キーボードの組み合わせは無限にあるので、いつまでも飽きることがありません。
今回は、最終課題に向け、p5.jsをつかってPatatapを制作するための方法について解説していきます。
スライド資料
最終課題提出フォーム
最終課題で制作した作品は、OpenProcessingにアップロードして下記のフォームからURLを提出してください。
提出の際には、mitda21final のタグをつけて投稿してください!
最終課題提出フォーム
サンプルプログラム
Addon(アドオン)とは、openFrameworksに機能を拡張するためのライブラリーやフレームワークです。processingのLibrariesのように、openFrameworks単体ではできなかった様々な機能を実現することが可能となります。Addonは、oF本体の開発者以外でも独自に開発して追加することが可能であり、繰り返し用いる機能や、CやC++で記述された既存のライブラリーをopenFrameworksに統合することが可能となります。
今回はAddonの導入を、まずofxGuiというプロジェクトにGUIを追加するアドオンで行います。ofxGuiを使用することで、例えば周囲の環境が異なる場所でインスタレーションを設置する時など、すぐにパラメータを最適な状態に調整して保存することができ、とても便利です。
スライド資料
サンプルファイル
本日の課題
本日の授業に参加した方は、以下のアンケートに答えてください。
投稿フォーム
