今回は、関数 (function) についてとりあげます。といっても、ここまでの講義で関数は頻繁に使用してきました。ここまでで使用してきた関数は主に2つの場合に分けられます。
1つ目は、プログラミングしているp5.jsのスケッチからp5.jsのライブラリー内で定義されているの関数を呼び出しです。例えば
//circle()関数の呼び出し
circle(400, 300, 100);
といったp5.jsで実行していた命令は、p5.jsの関数を呼び出していたのです。
2つ目は、 p5.jsのライブラリーから呼び出されている関数を定義する記述です。これは、setup() や draw() 内で書いていたプログラムに相当します。
//setup関数の定義
function setup() {
createCanvas(windowWidth, windowHeight);
frameRate(60);
...
}
関数はプログラムを処理内容ごとにモジュール化して、プログラムの可読性を高めデバッグを容易にします。
また、関数は引数(arguments)を受け取り、内部の処理のパラメータとして使用することが可能です。このことにより1つの関数で様々なバリエーションを持つことが可能となります。
p5.jsで実際に描画しながら関数について学んでいきましょう。
スライド資料
人気ランキング
映像資料
https://youtube.com/watch?v=JAqX0lsx0Nk%3Fversion%3D3%26rel%3D1%26showsearch%3D0%26showinfo%3D1%26iv_load_policy%3D1%26fs%3D1%26hl%3Den-US%26autohide%3D2%26wmode%3Dtransparent
サンプルコード
本日の課題
関数を用いて作品を制作してください!
課題: 関数 (function) をつかって大量に形を増殖させる
引数によってバリエーションをつけながら何か形を描く関数を作成してください。作成した関数をdraw()関数から呼び出して大量に形を描いてください。
- 投稿したURLをアンケートから提出
- 投稿の際に sfc231201 のタグをつけてください!
- 締切: 2023年12月6日(水)まで!
アンケート
- 今回も、前回の提出作品の人気投票を行います!
- 前回のタグ sfc231117でOpenProcessingで検索 (検索方法をSketches that are tagged にする必用あり)
- 一番良いと思った作品に1票投票 (自信があれば自分の作品でも可)
TouchDesigner中級編の3回目となる今回は、前回に引続きオーディオリアクティブな表現を探求します。前回は波形の情報からRMS (二乗平均平方根) を算出して音量によるビジュアライズを行いました。しかし、音量の情報だけではビジュアライズの限界があります。
実は我々の耳は音を波形ではなく、周波数に分解して知覚しています。ですので、波形をそのま操作して表示しても、あまり音と一致した映像にはなりません。音を周波数の帯域ごとの音の成分に分解するには、フーリエ変換という手法を用います。これにより、音を周波数帯域ごとの強さにわけて取得することが可能となります。フーリエ変換は、コンピュータ内で高速に処理する高速フーリエ変換（FFT）というアルゴリズムが考案され、現在ではPC内でリアルタイムに変換していくことが可能です。今回は、このフーリエ解析を利用して、TouchDesignerで音を可視化してみましょう。
スライド資料
サンプルプログラム
アンケート
本日の講義に参加した方は以下のアンケートに答えてください。
TidalCycleでここまで使用してきた方法では、サンプリング(録音)したサウンドファイルを演奏してきました (cp hc bdなど) 。これは楽器に例えるなら、サンプラーを演奏している状態です。TidalCyclesではこの他にシンセサイザーのように音の波形を合成して演奏する「楽器」も用意されています。このシンセサイザーの機能はSuperCollider内で楽器 (Synth) として定義されていて、自分自身でプログラミングすることでオリジナルの楽器を作成することも可能です。今回の授業の前半はこのTidalCyclesのシンセサイザーの機能に着目していろいろ実験していきます。後半は、TidalCyclesでコード(和音)とスケール(旋法)を使う方法について取り上げます。Sonic Piと同様にTidalCyclesではコード名やスケール名を指定することで音列を生成することが可能で、この機能を活用することでアルゴリズミックにメロディーやコードを生成していくことが可能となります。
シンセサイザーを使用するには、SuperColliderにSC3 Pluginsがインストールされている必要があります。下記のリンクから最新版のものをダウンロードして所定の場所にインストールしてください。
参考:
スライド資料
アンケート
本日の授業に参加した方は下記のアンケートに回答してください。
サンプルコード
-- シンプルにシンセを鳴らしてみる
d1
$ s "supersaw*4"
# note 0
-- シンセの音色の種類を変えてみる
d1
$ s "supersaw superpwm supersquare superzow"
# note 0
-- シンセの種類
-- supermandolin, supergong, superpiano, superhex, superkick, super808,
-- superhat, supersnare, superclap, supersiren, supersquare, supersaw,
-- superpwm, supercomparator, superchip, supernoise, superfork,
-- superhammond, supervibe, superhoover, superzow, superstatic,
-- supergrind, superprimes, superwavemechanics, supertron, superreese
-- 音階を弾く
d1
$ s "supersaw*4"
# note "0 4 5 7"
-- ランダムな音階
d1
$ s "supersaw*8"
# note (irand 12)
-- 短かい持続
d1
$ s "supersaw*8"
# sustain "0.05"
# note (irand 12)
-- 短かい持続と長い持続
d1
$ s "supersaw*8"
# sustain "{0.05 0.2}%8"
# note (irand 12)
-- メロディーを生成してみる
d1
$ s "supersaw(11, 16)"
# sustain "{0.1 0.3}%4"
# note "{0 4 5 7 9 12}%11"
|-| note 12
|+| note "[0, 7, 12]"
-- メロディーを生成+変形
d1
$ jux (iter 16)
$ s "supersaw(11, 16)"
# sustain "{0.1 0.3}%4"
# note "{0 4 5 7 9 12}%11"
|-| note 12
|+| note "[0, 7, 12]"
-- メロディーを生成+変形+エフェクト
d1
$ echo 4 0.625 0.5
$ jux (iter 16)
$ s "supersaw(11, 16)"
# sustain "{0.1 0.3}%4"
# note "{0 4 5 7 9 12}%11"
|-| note 12
|+| note "[0, 7, 12]"
# lpf(range 100 12000 $ rand)
# resonance "0.2"
-- コード(C Major)
d1
$ s "supersaw*4"
# note "c5'maj"
-- コードネーム一覧
-- major maj minor min aug dim major7 maj7 dom7 minor7 min7
-- dim7 one 1 five 5 plus sharp5 msharp5 sus2 sus4 six 6 m6
-- sevenSus2 7sus2 sevenSus4 7sus4 sevenFlat5 7f5 m7flat5
-- m7f5 sevenSharp5 7s5 m7sharp5 m7s5 nine m9 m7sharp9
-- m7s9 maj9 nineSus4 ninesus4 9sus4 sixby9 6by9 m6by9
-- sevenFlat9 7f9 m7flat9 m7f9 sevenFlat10 7f10 nineSharp5 9s5
-- m9sharp5 m9s5 sevenSharp5flat9 7s5f9 m7sharp5flat9 eleven
-- 11 m11 maj11 elevenSharp 11s m11sharp m11s thirteen 13 m13
-- コード(C Major, G Minor 7)
d1
$ s "supersaw*4"
# note "c5'maj g5'min7"
-- コードネームをいろいろ変化させてみる!
d1
$ jux (iter 16)
$ s "supersaw(11, 16)"
# note "{c5'maj7 c5'sus4 a4'min7 c5'sus2}%3"
|+| note "[0, 12]"
# sustain "0.2 0.08"
# pan (rand)
# lpf (range 100 8000 $ rand)
#resonance "0.3"
-- コードネームを変数で指定
do
let chord = "c4'sus4"
d1
$ jux (iter 16)
$ s "supersaw(11, 16)"
# note chord
|+| note "[0, 12]"
# sustain "0.2 0.08"
# pan (rand)
# lpf (range 100 8000 $ rand)
# resonance "0.3"
-- スケール基本 (旋律)
d1
$ s "supersaw(16, 16)"
# note (scale "ionian" "[0 1 2 3 4 5 6 7]*2")
# sustain "0.15"
-- スケール一覧
-- minPent majPent ritusen egyptian kumai hirajoshi iwato
-- chinese indian pelog prometheus scriabin gong shang
-- jiao zhi yu whole augmented augmented2 hexMajor7
-- hexDorian hexPhrygian hexSus hexMajor6 hexAeolian major
-- ionian dorian phrygian lydian mixolydian aeolian minor locrian
-- harmonicMinor harmonicMajor melodicMinor melodicMinorDesc
-- melodicMajor bartok hindu todi purvi marva bhairav ahirbhairav
-- superLocrian romanianMinor hungarianMinor neapolitanMinor
-- enigmatic spanish leadingWhole lydianMinor neapolitanMajor
-- locrianMajor diminished diminished2 chromatic
-- スケールの変化とエフェクト
d1
$ echo 4 0.625 0.5
$ jux (iter 16)
$ s "supersaw(14, 16)"
# sustain "0.05 0.3"
# note (scale "iwato" "{0 .. 7}%9")
|+| note "[-12, 7, 0]"
# pan (rand)
# lpf (range 100 4000 $ rand)
# resonance "0.3"
-- スケールを変数で指定
do
let sc = "yu"
d1
$ echo 4 0.625 0.5
$ jux (iter 16)
$ s "supersaw(14, 16)"
# sustain "0.05 0.1"
# note ((scale sc "{0 .. 7}%9"))
|+| note "[-12, 7, 0]"
|+| note "[-12, 0]"
# pan (rand)
# lpf (range 100 4000 $ rand)
# resonance "0.3"
今回は物理シミュレーションを行うことができる、ofxBox2DというAddonをとりあげます。
ofxBox2Dは、Box2DというC++で書かれた2Dの物理演算エンジンをopenFrameworksのAddon化したものです。Box2Dは質量、力、速度、摩擦といった古典物理学(ニュートン力学)の演算を高速に行う、物理法則の演算のためのライブラリーで、もともとはC++で書かれていますが、現在では、Java、C#、Python、JavaScriptなど様々な言語に移植されています。ofxBox2Dを使うことで簡単な物理法則を援用したアニメーションだけでなく、2次元のゲームやインタラクティブなコンテンツなどに応用可能です。今回は、ofxBox2Dの導入から、形を定義して物理世界に追加する方法、大量の物体を追加するための工夫などを紹介していきます。
スライド資料
サンプルファイル
アンケート
授業に参加した方は、本日のアンケートに回答してください。
アンケート
TouchDesigner入門(4) – 音楽に連動させよう! の回では、音楽の音量に反応させて図形を描く基本を学習しました。今回から数回は、このテクニックをさらに応用して、音の様々なパラメータを解析したビジュアル表現について探求していきます。まず初回の今回は、音量による反応をより詳細に取り上げていきます。
今回の内容は、比嘉了さんによる東京藝術大学での講義「映像音響処理概説 2019」の「第11回: 音反応」を参考にしています。
参考映像
[triggering2018] Live performance for new 3 tracks (demo ver.)
Alva Noto – unitxt/univrs (Derivative Version)
[CHANNEL13] Daisuke Tanabe x HEXPIXELS
スライド資料
サンプルファイル
追加オーディオファイル
アンケート
本日の講義を受講した方は以下のアンケートに回答してください。
Addon(アドオン)とは、openFrameworksに機能を拡張するためのライブラリーやフレームワークです。processingのLibrariesのように、openFrameworks単体ではできなかった様々な機能を実現することが可能となります。Addonは、oF本体の開発者以外でも独自に開発して追加することが可能であり、繰り返し用いる機能や、CやC++で記述された既存のライブラリーをopenFrameworksに統合することが可能となります。
今回はAddonの導入を、まずofxGuiというプロジェクトにGUIを追加するアドオンで行います。ofxGuiを使用することで、例えば周囲の環境が異なる場所でインスタレーションを設置する時など、すぐにパラメータを最適な状態に調整して保存することができ、とても便利です。
スライド資料
サンプルファイル
アンケート
本日の授業に参加した方は、以下のアンケートに答えてください。
アンケート
p5.jsのp5.Imageクラスは、外部のビットマップ画像(Jpeg, GIF、PNGなど)をデータとしてプログラムに読み込むことができます。読み込んだ画像は単に画面に表示するだけでなく、色や明度やサイズを変更して表示することができます。さらには、画像に含まれる全てのピクセルの色情報を読み取り配列に格納することが可能です。そのデータをもとに別の画像を再生成することが可能となり、読み込んだ画像データの色情報をもとにした多彩な表現が可能となります。
今回はp5.jsに画像を読み込んで、分析再合成することで、様々な表現の可能性について探っていきます。
映像資料
スライド資料
人気ランキング
サンプルプログラム
応用
本日の課題!
課題: p5.jsに読み込んだ画像ファイルのデータで表現する!
- p5.jsに読み込んだ画像ファイルの情報から、新たなイメージを生成する
- 読み込む画像は自由です
- 作品は、OpenProcessingに投稿
- 完成した作品に、タイトルをつける
- 投稿したURLをアンケートから提出
- 投稿の際にsfc231117のタグをつけてください!
- 締切: 2023年11月29日(水)まで! (次回は三田祭休みのため再来週)
アンケートフォーム
- 今回も、前回の提出作品の人気投票を行います!
- 前回のタグsfc231103でOpenProcessingで検索 (検索方法をSketches that are tagged にする必用あり)
- 一番良いと思った作品に1票投票 (自信があれば自分の作品でも可)
前回までの内容で、SOPとGeometry COMPを用いることで3Dオブジェクトをレンダリングすることができるようになりました。このやり方で複数のSOPをレンダリングすることも可能ですが、大量のオブジェクトを配置するとすぐにPCの描画性能の限界になってしまいます。
TouchDesingerの描画に使用されているOpenGLでは、ジオメトリーのコピー (インスタンス) を大量に生成してGPUで処理することが可能です。そうすることで、大量の3Dオブジェクトを一度に描画することが可能となります。この手法を「インスタンシング (ジオメトリーインスタンシング)」と呼んでいます。インスタンシングによって大量の3D形状の全体的な動きや色をコントロールして量感のある表現が可能となります。TouchDesignerの表現力を高める重要な手法となりますので、しっかりと理解していきましょう!
映像教材
https://youtube.com/watch?v=oBcKMXSc-qU%3Fversion%3D3%26rel%3D1%26showsearch%3D0%26showinfo%3D1%26iv_load_policy%3D1%26fs%3D1%26hl%3Den-US%26autohide%3D2%26wmode%3Dtransparent
サンプルファイル
スライド教材
本日の課題
今日つくったプログラムを改造して以下のようなプログラムを作成してみましょう!
- インスタンスの形状を変えてみる (円、立方体、グリッド、トーラス…)
- 頂点情報を抽出している形状を変形させてみる
- 立体の形状を変更
- 立体を変形 (スケール、ノイズ)
自分なりに工夫して、美しい形状を作ってみましょう!
アンケート
本日の授業に出席した方は以下のアンケートに回答してください。
今回も前回に引き続きTidalCylesの基本について学びます。前回は “” で囲まれた1つのサイクル (小節) の中にbdやcpといったサンプル名を記述していってリズムを生成しました。しかしTidalCyclesにはパターンを生成したり変形するための様々な関数が用意されており、それらを駆使することで思いもかけないリズムパターンやメロディーが生成されていきます。今回は、そうしたリズムを変形させる関数についてとりあげていきます。ユークリッドリズム、タイムシフト、ポリリズム、ポリミーターなど複雑なパターンを生成するための様々な関数について実際に音を出しながら試していきます。
スライド資料
アンケート
本日の授業を受講した人は以下のアンケートに答えてください。
これまでのopenFrameworksのプロジェクトは、ofApp.h と ofApp.cpp という2つのファイルに全てのプログラムを記述してきました。しかし、この方法では徐々にプロジェクトが複雑になり巨大化するうちに、扱いが困難になってきます。プログラミングをわかりやすく保つには、役割ごとに内容を分割して記述すべきです。openFrameworksの元となるプログラミング言語であるC++では「オブジェクト」という単位でプログラムを構造化していきます。このオブジェクトを基本単位にしたプログラミング手法のことを「オブジェクト指向プログラミング (Object Oriented Programing = OOP)」と呼びます。OOPはC++だけでなく、Java、Python、Ruby、C#、Objective-C、Swiftなどでも利用されていて、現在のプログラミング言語の主流となっているパラダイムです。
今回は、このOOPをopenFrameworksで実現する方法を「生成的な形態を生成する」というテーマに沿って徐々に発展させていきます。今回の内容が今後のより本格的な作品制作のための重要なテクニックとなっていきます。しっかり理解していきましょう。
スライド資料、サンプルプログラム
アンケート
本日の授業に参加した方は、以下のアンケートに回答してください。
アンケート
