順次処理 (sequence)、反復 (iteration)、条件分岐 (selection) は、プログラムを構造化する際の基本構造です。今回はこの3つのプログラムの基本構造の中から「反復 (iteration)」についてとりあげます。 コンピュータは何度もくりかえし処理することが得意です。プログラムで指定さえすれば、数百回、数千回、数万回と不満を言うことなく瞬時に反復処理を行います。反復によって人力の作業では膨大な時間がかかるような処理も瞬時に終えることが可能です。
今回はさらに、この反復処理に乱数を適用してみます。 乱数とは、サイコロを振って得られる数字のように規則性のない数のことです。p5.jsでは random() 関数を使用することで範囲を指定して乱数を生成することが可能です。
乱数と反復を組合せることで、偶然性を取り入れた表現が可能となります。図形の位置、大きさ、色などを乱数を利用して特定の範囲内でランダムに繰り返し指定することで、偶然性をコントロールしながら表現に取り入れることができるようになります。いろいろな可能性を試してみましょう。
スライド資料
制作サンプル
アンケート
本日の講義を受講した方は以下のアンケートに回答してください。
Toussaint, Godfried. “The Euclidean algorithm generates traditional musical rhythms.” 2005 先週の入門編に引き続き、Strudelを使用してリズムパターンを生成していきます。今回は、「変なリズム」を作成する様々な手法を紹介します。変拍子、奇数拍子、ポリリズム、ポリミーター、ユークリッドリズムといった様々な概念や手法と共に、Strudelでのパターン生成について理解を深めていきましょう。
スライド資料
次回までの課題
次回の講義は5月12日です。1週間の間があくので、簡単な課題を出題します!
課題: Strudelで5分パフォーマンス!
これまでやってきた内容をふまえて、5分間のライブコーディングによるパフォーマンスを発表してください。まだ試行錯誤しながらの荒削りなパフォーマンスで構いません。自分なりに工夫して楽しみながらパフォーマンスしてください! 次回 (5/12) の演習でPAを使用して簡単な発表会を行います。
サンプルコード
オーソドックスなリズム
// 8ビート
$: s("bd sd bd sd")// 8ビート + シンコペーション
$: s("bd sd [~ bd] sd")パラレルに演奏 (ポリリズム)
// 二拍子と三拍子
$: s("bd sd, hh hh hh")// 二拍子と三拍子と五拍子
$: s("bd sd, hh hh hh, ~ rim ~ rim rim")ポリミーター
// 二拍子と三拍子のポリミーター
$: s("{bd sd, rim hh oh}")// 二拍子と三拍子と五拍子のポリミーター
$: s("{bd sd, rim hh oh, hh hh hh*2 oh cr}")ユークリッドリズム
$: s("bd(3, 8), hh(9, 16)")$: s("bd(3, 7), hh(9, 14, 5), cp(5, 7, 2)")変拍子 + ユークリッドリズム + ポリリズム (+ ビジュアライズ)
$: s("bd(2, 7), hh(8, 12), cp(3, 14, 2), lt(3, 3), ht(4, 4)")
.bank("tr909")
.punchcard().color("gray")エフェクト (ディレイ)
$: s("bd sd [~ bd] hh")
.bank("tr909")
.delay(0.8).delaytime(5/8)エフェクト (ディレイ + リバーブ) + フィルター + ビジュアライズ
$: s("bd cp [~ bd] hh*2, bd:2(3, 8), hh*8, cp(7, 8)")
.bank("tr909")
.delay(0.8).delaytime(9/8).delayfeedback(0.5)
.lpf(sine.segment(128).range(400,8000).slow(16)).resonance(10)
.room(0.5).size(1.5)
.punchcard().color("pink")参考資料
「変なリズム」な曲プレイリスト
Take Five, The Dave Brubeck Quartet
Money, Pink Floyd
Scatterbrain, Jeff Beck
The Fish, Yes
Fire Back About Your New Baby’s Sex, Don Caballero
変拍子 (7/8 → 3/4 → 4/4 → 7/8)
Never Meant, American Football
Morning Bell, Radiohead
STRUCTURE I, DATE COURSE PENTAGON ROYAL GARDEN
ポリリズム, Perfume
Discipline, King Crimson
変拍子、ポリミーター (5/8 + 4/4, 17/16?)
The First Circle, Pat Metheny Group
アンケート
本日の実習に参加した方は以下のアンケートに回答してください。
今回からいよいよopenFrameworksによるプログラミングを開始していきます。
openFrameworksではProcessingやp5.jsのように新規ファイルを生成するだけではプログラムは開始できません。様々なファイルや設定を内包したプロジェクトを生成する必要があります。まず初めに新規のプロジェクトの生成の方法について説明します。
次に、openFrameworksでまず差し当って編集していく、main.cpp、ofApp.h、ofApp.cppという3つのファイルについて解説します。また、ofAppの中にある3つの重要な関数、setup()、update()、draw()の役割についても説明していきます。
後半はいよいよプログラミングしていきます。今回は物体が直線運動する簡単なアニメーションを完成させるところまでを目標とします。
スライド資料
アンケート
本日の授業を受講した方は、以下のアンケートに答えてください。
スライド資料
今回の内容
この講義では、TouchDesignerにおけるTOP (Texture Operators) を使った動画の扱い方と、それらを合成 したりエフェクト を適用したりする方法を学びます。具体的には以下の内容を進めていきます。
前回の復習: TOPの基本的な使い方、特に静止画の表示方法について簡単に振り返ります。Movie File In TOPで動画を再生: 静止画表示に使ったMovie File In TOPで、今度は動画ファイルを読み込み、再生する方法を学びます。基本的なパラメータ設定を確認します。キー操作による再生のコントロール: Keyboard In CHOPを使って、キーボードからの入力で動画の再生や停止などのコントロールを試みます（今回は主に切り替えに使用）。動画の切り替え: 複数の動画を用意し、キーボード操作で表示する動画を切り替える方法を学びます。Switch TOPとCHOPの連携がポイントです。TOPの合成、エフェクトの適用: Composite TOPを使って複数の映像（TOP）を重ね合わせる方法や、Edge TOP、Level TOPなどを使って映像に視覚効果を加える方法を探求します。実習: やってみよう!: これまでに学んだ内容を応用して、自分だけの簡易的なVJ（ビジュアルジョッキー）システムを作成してみましょう。
動画ファイルのサンプル
今回のサンプルファイルに使用している動画は、Beeple (Mike Winkelmann) 氏が作成したVJ LOOPS のパッケージ “RESOLUME vj pack ” を使用しています。以下のようにサンプルフォルダ内に「bin」フォルダを作成してその中に解凍した動画ファイルをコピーするとそのまま使用可能です。
前回の復習
まずは、前回の「TOPの基本」で学んだ内容を思い出しましょう。
TOPとは何か: Texture Operatorの略で、画像や映像、テクスチャデータを生成・加工するためのオペレーター群でしたね。TouchDesignerのビジュアル表現の核となる部分です。オペレーターの配置と接続: Tabキーでオペレータークリエータを開き、目的のオペレーター（例: Movie File In TOP, Constant TOP, Out TOPなど）をネットワークエディタ上に配置し、オペレーターの出力（右側）から入力（左側）へワイヤーをドラッグして接続しました。Movie File In TOPでの静止画表示: Movie File In TOPを選択し、パラメータウィンドウのFileパラメータで画像ファイルを指定することで、静止画を表示できました。パラメータの調整: 各オペレーターには多数のパラメータがあり、これらを調整することで見た目や挙動を変化させられることを確認しました（例: Constant TOPの色や解像度）。
実際にTouchDesignerを起動し、Movie File In TOPを配置して静止画を表示するところまで、もう一度手を動かして確認してみましょう。ワイヤー接続やパラメータの変更など、基本的な操作に慣れておくことが重要です。
本日のトピックス – Movie File In TOPで動画を再生
前回、静止画の表示に使用した Movie File In TOP は、その名の通り動画ファイルを読み込んで再生するための非常に強力なオペレーターです。静止画と同じ File パラメータに動画ファイル（.mov, .mp4などTouchDesignerがサポートする形式）を指定するだけで、基本的な動画再生が可能です。
Movie File In TOP の主要パラメータ（動画再生関連）:
File: 読み込む動画ファイルへのパスを指定します。右側の + ボタンからファイルを選択できます。Play Mode: 動画の再生方法を設定します。
Sequential (標準): フレームを順番に再生します。
Locked to Timeline: TouchDesigner全体のタイムライン（下部のアニメーションバー）の再生に同期します。
Specify Index: Index パラメータで指定したフレームを静止表示します。CHOPなど外部の値でフレームを制御する際に使います。
Play: Play Mode が Sequential のときに、再生（1）／停止（0）を切り替えます。Speed: 再生速度を調整します。1が標準速度、2で倍速、0.5で半分の速度になります。マイナス値を指定すると逆再生も可能です。Cue / Cue Point: 再生の開始点を指定します。Cue ボタンを押すと、Cue Point で指定したフレームにジャンプします。Loop Crossfade: ループ再生時に、動画の最後と最初をクロスフェードさせて、つなぎ目を滑らかにします。
今回は、このMovie File In TOPの動画再生機能をフル活用し、キーボード操作による動画の切り替えや、複数の映像の合成、エフェクトの追加などを試していきます。最終的には、これらの技術を組み合わせて、簡単なVJ（ビジュアルジョッキー）システムのようなものを作成することを目指します。
サンプル 1: シンプルに動画を再生
まずは基本中の基本、Movie File In TOPを使って1つの動画ファイルを再生してみましょう。これが今日の全ての活動の出発点となります。
手順:
新しいTouchDesignerファイル（.toe）を開きます。
ネットワークエディタ上で Tab キーを押し、オペレータークリエータを開きます。
TOP ファミリーから Movie File In TOP を選択し、配置します。
配置した Movie File In TOP を選択し、パラメータウィンドウを開きます。
File パラメータの右側にある + ボタンをクリックし、再生したい動画ファイルを選択します。（TouchDesignerに付属のサンプル動画や、ご自身で用意した動画ファイルを使用してください。）
Play Mode が Sequential になっていることを確認します。
Play パラメータのトグルスイッチをクリックしてオン（1）にします。これで動画が再生されるはずです。
（オプション）最終的な出力を確認するために、Movie File In TOP の出力から Null TOP を接続し、さらにその Null TOP の表示フラグ（右下の青い丸）をオンにすると、背景に表示されます。あるいは、Out TOP に接続しても良いでしょう。
(サンプル1のネットワーク: Movie File In TOPで動画を読み込み、Null TOPで中間確認)
サンプルファイル: 03-01_playMovie.toe をダウンロードして、実際の動作を確認してみてください。Speed や Loop Crossfade などのパラメータをいじって、動画の再生がどのように変化するか試してみましょう。
サンプル 2: 動画の切り替え
次に、複数の動画を用意し、キーボードのキーを押すたびに表示される動画が切り替わる仕組みを作ってみましょう。ここでは Switch TOP と CHOP (Channel Operators) を連携させます。
手順と考え方:
動画の準備: 複数の（今回は4つの）Movie File In TOPを配置し、それぞれ異なる動画ファイルを読み込みます。Play はすべてオンにしておきましょう。切り替え役 (Switch TOP): TOP ファミリーから Switch TOP を配置します。このオペレーターは、複数のTOP入力を受け取り、Index パラメータで指定された番号の入力だけを出力します。接続: 用意した複数の Movie File In TOP の出力を、すべて Switch TOP の入力に接続します。接続する順番が Index の番号（0から始まる）に対応します。キー入力の取得 (Keyboard In CHOP): CHOP ファミリーから Keyboard In CHOP を配置します。これはキーボードからの入力を検知し、対応するキー名のチャンネル（例: ‘k1’, ‘k2’, ‘space’ など）に 0 または 1 の値を出力します（押されている間 1）。今回は特定のキー（例: 1 キー）が押されたことを検知するために使います。パラメータで Keyboard を Use Number Keys などに設定すると特定のキーグループをまとめて扱えます。カウント処理 (Counter CHOP): Keyboard In CHOP の出力だけでは、キーを押した瞬間に 1 になるだけです。押すたびに数値を増やしていく（カウントアップする）ために、CHOP ファミリーから Counter CHOP を配置します。
Keyboard In CHOP の出力を Counter CHOP の Increment Input (2番目の入力) に接続します。これで、キーが押されて値が 1 になるたびに、Counter CHOP の count チャンネルの値が増加します。
Counter CHOP のパラメータで Limit タブを開き、Limit Maximum をオンにし、Maximum の値を 3 に設定します。（動画が4つなので、Indexは 0, 1, 2, 3 と変化させたい）。
Limit タブの Loop Min/Max をオンにします。これにより、カウントが Maximum (3) を超えると Minimum (0) に戻り、0, 1, 2, 3, 0, 1, 2, 3… というループが実現します。
CHOPからTOPへの連携: Counter CHOP が出力する count チャンネルの値を、Switch TOP の Index パラメータに適用する必要があります。
Counter CHOP の count チャンネルの値を参照するために、Null CHOP を Counter CHOP の後段に接続します。（CHOPの値を他のオペレーターから参照する際は、Null CHOPを挟むのが一般的です。後でCHOPネットワークを変更しても参照元が固定されるため便利です。）
Null CHOP の表示フラグ（Viewer Active）をオンにして、パラメータウィンドウの CHOP Export を有効にします。
Null CHOP の count チャンネル名を Switch TOP の Index パラメータフィールドにドラッグ＆ドロップします。これで Index パラメータにCHOPの値がエクスポート（参照）され、連動するようになります。（または、Switch TOP の Index パラメータの入力欄で op(‘null1’)[‘count’] のようにPythonで参照することも可能です。）
出力: Switch TOP の出力に Null TOP や Out TOP を接続して結果を確認します。
(サンプル2のネットワーク: 複数のMovie File In、Switch TOP、Keyboard In、Counter、Null CHOPの連携)
サンプルファイル: 03-02_playMovieSwitch.toe をダウンロードして確認しましょう。1 キー（または設定したキー）を押すたびに、Switch TOP の Index が変わり、表示される動画が切り替わるはずです。Counter CHOP の Limit 設定を変えると、切り替わる動画の数を変更できます。
ポイントのまとめ:
Switch TOP: 複数の入力から1つを選んで出力する、切り替えの要。Keyboard In CHOP: キーボード入力を検知し、CHOPデータとして出力。Counter CHOP: 入力（トリガー）があるたびに値を増減させる。Limit 設定で範囲とループを制御できる。CHOP Export (またはPython参照): CHOPで生成した数値データを、他のオペレーター（今回はTOP）のパラメータ制御に使うための重要な連携方法。
サンプル 3: 動画の合成
次に、複数の動画（TOP）を単純に切り替えるだけでなく、重ね合わせて表示（合成） してみましょう。これには Composite TOP を使用します。
手順と考え方:
ベースとなる動画: まず、背景となる（あるいは一方の）動画を用意します。Movie File In TOP を配置し、動画ファイルを指定します。重ねる動画: もう一つ、別の Movie File In TOP を配置し、異なる動画ファイルを指定します。合成 (Composite TOP): TOP ファミリーから Composite TOP を配置します。このオペレーターは、複数のTOP入力を受け取り、指定された Operation（合成モード）に基づいてそれらを合成した結果を出力します。接続: ベースとなる Movie File In TOP を Composite TOP の 1番目の入力 に、重ねたい Movie File In TOP を 2番目の入力 に接続します。入力の順番は Operation によって意味が変わることがあります。合成モードの選択: Composite TOP を選択し、パラメータウィンドウの Operation パラメータを変更してみましょう。
Over: 2番目の入力が1番目の入力の上に重なります（アルファ値が考慮されます）。
Add: 色の値を加算します。明るい部分がより強調されます。
Multiply: 色の値を乗算します。暗い部分がより強調されます。
Difference: 色の差分をとります。ネガポジ反転のような効果が得られることもあります。
その他にも Screen, Overlay, Subtract, Maximum, Minimum など、様々な合成モードがあります。Photoshopなどの画像編集ソフトのレイヤーブレンドモードと同様の考え方です。
出力: Composite TOP の出力に Null TOP や Out TOP を接続して、合成結果を確認します。
(サンプル3のネットワーク: 2つのMovie File InをComposite TOPで合成)
サンプルファイル: 03-03_playMovieMix.toe をダウンロードして試してみてください。Composite TOP の Operation パラメータをいろいろ変えて、それぞれの合成モードがどのような視覚効果を生み出すか観察しましょう。組み合わせる動画の内容によっても、合成結果の印象は大きく変わります。
ポイントのまとめ:
Composite TOP: 複数のTOP入力を指定されたモードで合成するオペレーター。Operation パラメータ: 合成の方法（アルゴリズム）を選択する重要なパラメータ。様々なモードを試すことで表現の幅が広がる。入力の順番: 合成モードによっては、入力の順番が結果に影響する場合がある。
サンプル 4: 動画のエフェクト
動画を再生し、切り替え、合成できるようになったら、次は映像にエフェクト をかけてみましょう。TouchDesignerには多種多様なエフェクト用TOPが用意されています。ここでは代表的なものをいくつか試します。
手順と考え方:
元の映像: サンプル3で作成した、Composite TOPで合成された動画（または単一のMovie File In TOPでも可）を用意します。エフェクトTOPの追加: エフェクトをかけたいTOPの後段に、エフェクト用のTOPを接続します。
Edge TOP: 画像の輪郭（エッジ）を検出します。パラメータ Edge Strength で強度、Edge Color でエッジの色などを調整できます。ノイズっぽい表現や線画のような表現に使えます。Level TOP: 色の明るさ、コントラスト、ガンマなどを調整します。Brightness, Contrast, Gamma パラメータを調整して、映像のトーンを変化させます。Invert で色を反転させることも可能です。Tile TOP: 画像をタイル状に分割して並べ替えます。Number of Tiles で分割数、Overlap でタイルの重なり具合、Order で並べ方（ランダムなど）を変更できます。モザイクのような効果や、映像を細かく分割して再構成するような表現が可能です。
接続: 元の映像を出力するTOP（例: Composite TOP や Null TOP）から、追加したエフェクトTOP（Edge, Level, Tileなど）へワイヤーを接続します。エフェクトは直列に繋いでいくことで、複数の効果を重ねがけすることも可能です。（例: Composite -> Edge -> Level -> Tile）パラメータ調整: 各エフェクトTOPを選択し、パラメータウィンドウで値を調整してみましょう。それぞれのパラメータが映像にどのような変化をもたらすか、試行錯誤しながら確認します。出力: 最終段のエフェクトTOPから Null TOP や Out TOP に接続して結果を表示します。
(サンプル4のネットワーク: 合成した動画にEdge, Level, Tileのエフェクトを直列に適用)
サンプルファイル: 03-04_playMovieFx.toe をダウンロードして、実際にエフェクトを試してみましょう。エフェクトTOPを繋ぐ順番を変えると、結果がどのように変わるかも試してみてください（例: LevelをEdgeの前に入れるか後に入れるか）。
ポイントのまとめ:
エフェクト用TOP: TouchDesignerには映像加工用のTOPが多数存在する（Edge, Level, Tile, Blur, Feedback, HSV Adjust, Glitchなど）。直列接続: エフェクトは直列に接続することで重ねがけが可能。接続順序によって結果が変わる。パラメータ調整: 各エフェクトTOPのパラメータを調整することで、効果の強さや種類を細かくコントロールできる。実験的に触ってみることが重要。
サンプル 5: 動画のタイリング (Transform TOP)
サンプル4で紹介した Tile TOP とは別に、Transform TOP を使ってもタイリング（繰り返し敷き詰める）表現が可能です。Transform TOP は本来、映像の移動、回転、拡大縮小を行うオペレーターですが、Tile パラメータを使ってタイリング効果を得ることもできます。
手順と考え方:
元の映像: Movie File In TOP などで動画を用意します。Transform TOPの適用: TOP ファミリーから Transform TOP を配置し、元の映像のTOPから接続します。タイリング設定: Transform TOP を選択し、パラメータウィンドウの Tile タブを開きます。
Extend: タイリングの方法を指定します。Repeat を選択すると、画像を単純に繰り返して敷き詰めます。Mirror を選択すると、反転させながら繰り返します。
拡大縮小と組み合わせる: タイリングは、元の画像サイズより表示領域が大きい場合や、画像を縮小した場合に効果を発揮します。
Transform タブの Scale パラメータの X と Y の値を小さく（例: 0.5）してみましょう。画像が縮小され、空いたスペースが Extend の設定（Repeat や Mirror）に従って埋められます。これにより、縮小された動画がタイル状に並びます。
回転や移動との組み合わせ: さらに、Rotate パラメータで回転させたり、Translate パラメータで位置をずらしたりすることも可能です。これらとタイリングを組み合わせることで、より複雑でダイナミックな映像表現が生まれます。出力: Transform TOP の出力に Null TOP や Out TOP を接続して結果を確認します。
(サンプル5のネットワーク: Movie File InにTransform TOPを接続し、ScaleとExtendでタイリング)
サンプルファイル: 03-05_playMovieFxTile.toe をダウンロードして試してみてください。Transform TOP の Scale, Rotate, Translate, そして Extend パラメータをいろいろ組み合わせて、どのような表現が可能か探ってみましょう。Tile TOP と Transform TOP のタイリング表現の違いも比較してみると面白いでしょう。
ポイントのまとめ:
Transform TOP: 本来は移動・回転・拡縮を行うが、Tile タブの Extend 設定 (Repeat, Mirror) と Scale を組み合わせることでタイリング表現が可能。多様な組み合わせ: 移動、回転、拡大縮小とタイリングを組み合わせることで、万華鏡のような効果や複雑なパターン生成ができる。Tile TOPとの違い: Tile TOPは画像を分割・再配置するのに対し、Transform TOPは元の画像を縮小・変形し、空いた領域を繰り返しパターンで埋める、という違いがある。
実習: やってみよう!
さて、ここまでの内容（動画の再生、切り替え、合成、エフェクト、タイリング）を組み合わせて、さらに発展させたオリジナルの簡易VJシステムを作成してみましょう！ 正解はありませんので、自由に発想を広げて試してみてください。
以下にアイデアの例をいくつか挙げますが、これらにとらわれず、自分で「面白そう」と思ったことをどんどん試してみましょう。
エフェクトの追加とパラメータ制御:
サンプル4で試した以外にも、様々なエフェクトTOP（例: Blur TOP, Feedback TOP, HSV Adjust TOP, Pixelate TOP, Cache TOP など）を追加してみましょう。
LFO CHOP や Noise CHOP を使って、エフェクトのパラメータ（例: Level TOPのBrightness、Transform TOPのRotateなど）を時間とともに自動的に変化させてみましょう。CHOPからTOPへのパラメータ参照（エクスポート）を活用します。
タイリング + 回転 + 拡大縮小の組み合わせ:
Transform TOP を使って、動画を細かくタイリングし、同時にゆっくり回転させたり、ズームイン/アウトさせたりしてみましょう。Mirror モードを使うと面白い効果が得られるかもしれません。
文字の合成:
Text TOP を使って好きな文字やメッセージを生成し、Composite TOP を使って再生中の動画の上に重ねてみましょう。Text TOP のフォント、サイズ、色なども調整できます。Level TOP で文字の色を調整するのも良いでしょう。
静止画の合成:
動画だけでなく、Movie File In TOP で読み込んだ静止画や、Constant TOP で生成した単色、Ramp TOP で生成したグラデーションなどを、動画と Composite TOP で合成してみましょう。ロゴや背景パターンとして使えます。
複数の合成・エフェクト系統:
サンプル2のように動画を切り替える系統と、サンプル3のように動画を合成する系統を並行して作り、それらをさらに Switch TOP や Cross TOP で切り替えたり混ぜたりする、より複雑な構成に挑戦してみましょう。
インタラクションの追加:
Mouse In CHOP を使って、マウスの位置やクリックでエフェクトのパラメータや動画の切り替えをコントロールしてみましょう。
（もしあれば）Leap MotionやKinectなどのセンサーデバイスからの入力を CHOP で受け取り、映像制御に利用してみましょう。
進め方のヒント:
まずは、これまでのサンプルをベースに、少しずつ要素を追加・変更していくのが良いでしょう。
Null TOP をネットワークの途中途中に配置して、各段階での映像を確認しながら進めると、問題が発生したときに原因を特定しやすくなります。
パラメータをいろいろ試すことを恐れないでください。予期せぬ組み合わせから面白い表現が生まれることがよくあります。
困ったら、オペレーターの名前で右クリックして Operator Snippets を見てみましょう。公式のサンプルがたくさんあり、参考になります。
作成したシステムは、ぜひ保存しておきましょう。次回の講義や、今後のプロジェクトでさらに発展させることができるかもしれません。楽しんで取り組んでください！
アンケート
本日の講義に参加した方は、以下のアンケートに回答してください。
この講義では、p5.jsを使用してコードによるデザインを行います。その最初の一歩として、コードによって「かたち」を描くにはどうすれば良いのか考えていきます。
まず始めに、1950年代〜70年代の、コンピューター黎明期から発展期におけるコード（プログラム）による様々な視覚表現について紹介します。過去の作家がどのようなアイデアで、何を表現しようとしてきたのか、その歴史を辿ります。
後半は、そうした歴史を踏まえた上で、 p5.js 実際に図形を描いていきます。まずp5.js の操作基本を解説し、簡単な図形を描きながらp5.jsでのプログラミングの基本を学びます。
スライド資料
アンケート
本日の講義に参加した方は下記のアンケートに回答してください。
スライド
自己紹介 – 簡単なこれまでの経歴
田所がこれまでどのような経緯で現在に至っているのか簡単に紹介します。
これまで何をしてきたのか。だいたい10年ごとに変遷。
1990s : Computer Music
2000s : Creative Coding
2010s : Audio Visual
現在 : Live Coding, Media Art (Installation)
Computer Music
1990年代、コンピュータ音楽の研究と創作
プログラミングで波形単位で音響生成
当時はリアルタイムに合成するのはマシンパワー的に無理
ノンリアルタイムにレンダリングしてミックスしてテープ(DAT)に録音
Transition (for tape) 1996https://soundcloud.com/tadokoro/transition
CLM (Common Lisp Music)
当時使用していたコンピュータ音楽のためのプログラミング環境
Lispを使用して楽器を定義して演奏
(definstrument simp (start-time duration frequency amplitude)
(let* ((beg (floor (* start-time *srate*)))
(end (+ beg (floor (* duration *srate*))))
(j 0))
(run
(loop for i from beg below end do
(outa i (* amplitude (sin (* j 2.0 pi (/ frequency *srate*)))))
(incf j)))))
(with-sound () (simp 0 0.25 440.0 0.2))当時使用していたハードウェア: NeXT Computer
Creative Coding
2000年代くらいからは「クリエイティブ・コーディング」の世界へ
Processingクリエイティブ・コーディング入門 : コードが生み出す創造表現
Beyond Interaction[改訂第3版] クリエイティブ・コーディングのためのopenFrameworks実践ガイド
Audio Visual
ここまでの経験
音と映像を融合した表現へ
音響 → 映像
映像 → 音楽
相互に関連していく表現
Atsushi Tadokoro ( 田所 淳 ) Live at “On Site”, Taipei (2012)
Live Coding
Live Codingとは?
最近のライブの様子
NxPC.Live vol.68 @Circus Tokyo
演奏するプログラミング、ライブコーディングの思想と実践 ―Show Us Your Screens
Installation
Disenchantment Space (2017) @ Ars Electronica
オーストリアリンツのArs Electronica Center Deep Space 8Kで展示
Photo
個展 : 100 fragments, 2018. 3.23 – 4.21, ART & SCIENCE Lab. AXIOM
Video
Photo
2019.2.23 – 3.3 Media Ambition Tokyo
photo
松戸科学と芸術の丘
Video
TAxT Taoyuan Art and Technology Festival 2022
まとめ
興味のあることをやっていたら、いろいろ機会に恵まれた
他人の評価はあまり気にしない
続けることが大事!
billboardExample 今回からいよいよopenFrameworksを使用してクリエイティブコーディングを始めていきます。
まず前半は、実際にコーディングを始める前に、openFrameworksとは何なのか、その開発の歴史と開発環境の特徴などを簡単に解説していきます。後半は、開発環境のセットアップが正しく完了しているか確認するために、付属するサンプルファイルをビルド (コンパイル) して、openFrameworksで作成したアプリケーションが起動するか確認していきます。
スライド資料
アンケート
本日の講義に参加した方は以下のアンケートに答えてください。
Photo: @hiro_shirato 本日の演習では、音楽とプログラミングが交差する「ライブコーディング」を体験的に学びます。前半は、コードをリアルタイムに書き換えながら音や映像を生成し、その過程を観客と共有する即興表現としてのライブコーディングを取り上げます。Algorave の実例や国内外アーティストの映像・テキストを参照し、歴史的展開、コミュニティ文化、舞台演出の特徴を多角的に解説します。後半はブラウザだけで動作する Strudel を起動し、パターン言語の基本文法、リズム生成、サンプル再生・選択を段階的に体験し、最終的に約 3 分のパフォーマンスを各自で構築して発表します。コードを「演奏可能な思考」として捉え、コードによる構造の構築と音のフィードバックの循環を体感しましょう。
スライド資料
参考映像
VIDEO
Algorave Generation | Resident Advisor
VIDEO
16 Legendary Beats – A short history of the 808 Drum Patterns Explained
VIDEO
A short history of the 909 in 16 songs from TECHNO and HOUSE to POP | Drum Patterns Explained
VIDEO
Jeff Mills Exhibitionist 2 Mix 3 サンプルコード
/* -------------------------------
*
* Strudel (https://strudel.cc/)
* ライブコーディングのサンプルコード
* リズム編
* -------------------------------
*/
// 最初の音
$: s("cp")
// 別の音
$: s("bd")
// リズムの基本
$: s("bd hh sd oh")
// 沢山の音を演奏
$: s("bd bd hh bd rim bd hh bd")
// テンポを変化
$: s("bd bd hh bd rim bd hh bd").cpm(40)
// 休符
$: s("bd hh ~ rim")
// サブシーケンス
$: s("bd [hh hh] sd [hh bd]")
// かけ算 (スピードアップ)
$: s("bd hh*2 rim hh*3")
// サブシーケンスのかけ算
$: s("bd [hh rim]*2")
// 高速かけ算
$: s("bd hh*16 rim hh*8")
// パラレルに演奏
$: s("hh hh hh, bd cp")
// パラレルに演奏2
$: s("hh hh hh, bd bd, ~ cp")
// パラレルに演奏3
$: s("hh hh hh, bd [bd,cp]")
// ドラムセットを切り替える
$: s("bd hh sd oh").bank("tr909")
$: s("bd hh sd oh").bank("tr808")
// ポリリズム
$: s("rim*4, hh*5")
$: s("bd ~ rim ~, bd hh*2 hh ~ hh*2")
$: s("bd*5, rim hh hh ~ rim hh <hh*2 hh> ~")
// ポリミーター
$: s("{bd sd bd hh, bd rim cp hh hh}")
$: s("{lt*5, ht*4}")
// ユークリッドリズム
$: s("bd(3, 8), hh(9, 16)")
$: s("bd(3, 7), hh(9, 14, 5), cp(5, 7, 2)")
// 複数のシーケンスを同時に演奏
$: s("bd cp [~ bd] <hh*4 cp*2 [~ sd]*2>")
$: s("bd(4, 8), hh(5, 8, 1)")
.bank("RolandTR909")
$: s("supersaw(11, 16)")
.note("{c3 f3 g3 c2}%22, <c4 b4>".add("[0, 12]"))アンケート
本日のアンケート
本日の講義では、TouchDesignerの画像処理を担当するオペレーターファミリー「TOP (Texture Operators)」の基本的な使い方を学びます。画像のエフェクト、切り替え、フィードバック、タイリングといった基本的な画像処理テクニックを習得し、表現の幅を広げましょう。
スライド資料
前回の復習
前回は「バナナを回転させる」という簡単なプログラムを作成しました。Movie File In TOP でバナナ画像を読み込み、Transform TOP で回転のアニメーションを設定し、Circle TOP で作成した円と Over TOP で合成しましたね。実際にパッチング（オペレーターを繋いでいく作業）をしながら、基本的な操作方法を復習していきましょう。
VIDEO
完成例
前回の内容を発展させた完成例です。基本的な回転に加えて、背景なども追加されています。
ダウンロード 完成例のファイル（.toe）をダウンロードして、TouchDesignerで開いてみてください。どのように作られているか、中身を確認できます。
ここからさらに発展!
前回の復習で作成した「回転するバナナ」をベースに、さらにTOPを使った画像処理を加えて表現を豊かにしていきます。以下の動画で解説されている内容を参考に、様々なTOPオペレーターを使ってみましょう。
VIDEO
完成イメージ
発展させた最終的な完成イメージです。様々なエフェクトが追加されているのが分かります。
ダウンロード こちらもダウンロードして、どのようなオペレーターがどのように接続されているか確認してみましょう。
TOPによる画像処理
ここからは、今回の講義のメインテーマであるTOPを使った画像処理について詳しく学んでいきます。TOPはTexture Operatorsの略で、TouchDesignerで画像や映像を扱ったり、加工したりするためのオペレーター群です。
画像処理を行うためのTOP
TouchDesignerには、入力された画像に対して様々な効果を加えるためのTOPが豊富に用意されています。いくつか代表的なものを紹介します。
Edge TOP: 画像の輪郭（エッジ）を検出します。イラストのような表現や、特定の形状を抽出したい場合に便利です。
Blur TOP: 画像にぼかし効果を加えます。ぼかしの強さや方向などを調整できます。
Bloom TOP: 画像の明るい部分を滲ませ、光り輝いているような効果（ブルーム効果）を作り出します。幻想的な表現に適しています。
Level TOP: 画像の明るさ、コントラスト、ガンマなどを調整します。色調補正の基本的なオペレーターです。
Emboss TOP: 画像に凹凸があるような、浮き彫り風の効果を加えます。
これらのTOPは、オペレーターパレット（Tabキーで表示）のTOPタブから作成できます。入力（左側の接続点）に画像データを持つTOPを接続し、パラメータウィンドウで効果の具合を調整します。実際にいくつか試して、どのような効果が得られるか確認してみましょう。
TOPを切り替える
複数の画像や、異なる画像処理を施した結果を、状況に応じて切り替えたい場合があります。そのような時に使うのがSwitch TOPです。
Switch TOP: 複数のTOP入力を受け取り、指定した一つの入力だけを出力します。パラメータの「Index」を変化させることで、どの入力を選択するかを切り替えることができます。例えば、異なるエフェクトをかけた結果を比較したり、インタラクションに応じて表示する映像を切り替えたりする際に使用します。
フィードバック効果
映像表現でよく使われる「フィードバック」効果を作成するための専用TOPもあります。
Feedback TOP: 前のフレーム（ほんの少し前の時間）の出力結果を、現在のフレームの処理に利用することで、残像や映像が無限に続くような効果を作り出します。 接続のポイント: Feedback TOPの接続は少し特殊です。通常、処理ループの最後にFeedback TOPを配置し、そのFeedback TOPをループの最初（フィードバックさせたい入力）にドラッグ＆ドロップして参照させます。ループ内にはLevel TOPなどを入れてフィードバックの強さ（透明度など）を調整したり、Add TOPやOver TOPで元の画像と合成したりすることが一般的です。 実際に作成しながら、この少し複雑な接続方法と、それによって生まれるユニークな表現を体験してみましょう。
タイリング
画像をタイル状に並べてパターンを作成したい場合にはTile TOPを使用します。
Tile TOP: 入力された画像をタイル状に敷き詰めます。並べ方（繰り返し、反転、回転など）や、タイルの数などをパラメータで細かく設定できます。万華鏡のような表現や、テクスチャパターンを作成するのに便利です。
TOPの基本を使用したプログラム例
ここまで紹介したTOPオペレーター（Edge, Blur, Level, Switch, Feedback, Tileなど）を組み合わせて作成したサンプルプログラムです。
ダウンロード ダウンロードして、各オペレーターがどのように連携して最終的な映像を作り出しているかを確認してください。
TOPの基本を使用したプログラム例 02
さらにパラメータを調整したり、別のTOPを追加したりして、より複雑でダイナミックな変化を持つようにした例です。
ダウンロード 少しの変更で大きく表現が変わることを体験してみてください。
本日の課題
課題: ノイズで遊ぼう!
今回の課題では、Noise TOP を使って自由に表現を試みます。Noise TOP は、プログラムによって様々な種類のノイズ（ランダムで有機的なパターン）を生成することができる非常に強力なオペレーターです。パラメータを調整するだけで、雲、水面、炎、地形のような多種多様なテクスチャやアニメーションを作り出すことができます。
まずは以下の基本的なサンプルプログラムをダウンロードし、これを改造しながら自分だけの「ノイズ作品」を制作してみてください。
TouchDesignerの操作に慣れるためには、とにかくいろいろ試してみることが重要です。難しく考えず、まずはパラメータを触ってみて、変化を観察することから始めましょう。その上で、以下のような点を意識して試行錯誤してみてください。
参考資料
これらの資料は、ノイズ、特にNoise TOPで使われているパーリンノイズというアルゴリズムについて理解を深めるのに役立ちます。
基本: 使用されているオペレータのパラメーターを変化させてみる
サンプルプログラムで使われている主要なオペレーターのパラメータをいろいろ変更してみましょう。
Noise TOP (noise1): このネットワークの中心となるオペレーターです。
Period（周期）: ノイズの細かさ、スケール感を調整します。値が小さいほど細かいノイズになります。
Harmonics（高調波）: ノイズの複雑さを調整します。値を大きくすると、より詳細で複雑なパターンになります。
Type（種類）: 生成するノイズのアルゴリズムを選択します。Perlin, Simplex, Randomなど、種類によって見た目が大きく変わります。色々試してみましょう。
TransformタブのTranslate/Rotate/Scale: ノイズを時間経過で動かしたり（Translate Zに absTime.seconds などのエクスプレッションを入れる）、回転させたり、拡大縮小したりできます。
…など、他にもたくさんのパラメータがあります。気になるものを触ってみましょう。
LFO CHOP (lfo1): 時間と共に周期的な値（波形）を生成するCHOP (Channel Operator) です。この値を使って他のオペレーターのパラメータを動かします。
Frequency（周波数）: 値が変化する速度を調整します。大きいほど速く変化します。
Type（波形タイプ）: Sine（サイン波）、Triangle（三角波）、Square（矩形波）など、値の変化パターンを選択します。
Amplitude（振幅）: 値が変化する範囲（大きさ）を調整します。
…など。このLFO CHOPの出力をNoise TOPのパラメータ（例えば Amplitude）にエクスポート（ドラッグ＆ドロップ）して、ノイズの明るさを時間で変化させる、といった使い方ができます。
HSV Adjust TOP (hsvadj1): 色相（Hue）、彩度（Saturation）、明度（Value/Brightness）を調整して、画像の色味を変更するTOPです。
Hue Offset: 全体の色相をシフトさせます。値を変化させると色が循環するように変わります。
Saturation Multiplier: 彩度を調整します。0にするとグレースケールになります。
Value Multiplier: 明るさを調整します。
…など。Noise TOPで生成したモノクロのノイズに色を付けたり、色を時間変化させたりするのに使えます。
応用: オペレーターを追加してみる
基本操作に慣れてきたら、新しいオペレーターを追加して、さらに複雑な表現に挑戦してみましょう。
Noise TOPにNoise TOPを接続する: Noise TOPの出力を別のNoise TOPの第二入力 (Noise Coordinate Map) に接続すると、一方のノイズで他方のノイズパターンを歪ませるような、非常に面白い効果が得られます。
HSV Adjust TOPの前後に別のTOPを追加する: 例えば、Noise TOPとHSV Adjust TOPの間にBlur TOPを入れてノイズをぼかしたり、HSV Adjust TOPの後にBloom TOPを追加して光らせたり、Edge TOPで輪郭抽出してから色付けするなど、エフェクトを重ねてみましょう。
LFO CHOPを追加して他のパラメータに参照させてみる: 新しいLFO CHOPを作成し、その値をNoise TOPの回転パラメータやHSV Adjust TOPの色相パラメータなどにエクスポートして、より複雑なアニメーションを作成してみましょう。
…など、自由な発想でオペレーターを繋ぎ変えてみてください。思わぬ発見があるかもしれません。
ノイズを使用した作品例 1
内容: Noise TOPを二つ重ね（一つはパターン生成、もう一つは歪み用）、さらにBloom TOPで発光効果を追加した例です。
ダウンロード
ノイズを使用した作品例 2
内容: Noise TOPにTile TOPを組み合わせて、万華鏡のような繰り返しパターンを生成した例です。色の変化も加えられています。
ダウンロード
実習!
それでは、実際にNoise TOPを使って、自分だけのオリジナル作品を制作してみましょう！ まずは基本サンプルを改造することから始め、慣れてきたら自由にオペレーターを追加・接続してみてください。
目標: Noise TOPを中心に、学んだ各種TOP（Blur, Level, Bloom, Feedback, Tile, HSV Adjustなど）やCHOP（LFOなど）を組み合わせて、面白い、あるいは美しいと感じる映像表現を試みること。
発表: 講義の最後の40分程度で、皆さんが作成した作品を一人ずつ発表してもらいます。完成していなくても構いませんので、どのような試行錯誤をしたか、どこが面白いと思ったかなどを共有しましょう。
分からないことがあれば、遠慮なく質問してください。試行錯誤を楽しんでください！
アンケート
本日の講義に参加した方は以下のアンケートに答えてください。
今回はまずCreative Codingについて解説していきます。Creative Codingとはコンピュータプログラミングの一種で、プログラミングによって機能の実現ではなく何かを表現することを目的とするものです。画像、アニメーション、映像、音響、音楽、3Dグラフィックなど様々な手段を用いて表現します。Creative Codingのための様々な開発環境が存在します。まずそれらの簡単な歴史と関連について説明していきます。
後半は、この授業で主に扱っていくp5.js の開発環境を構築します。Visual Studio Code にp5.jsの開発のための機能拡張をインストールしていきます。環境構築が完了したらVisual Studio Codeを用いたp5.jsの開発のやり方について実際にコーディングしながら解説します。
スライド資料
環境設定
Visual Studio Code + Github Copilotによるp5.jsの最強開発環境を構築します!
1. Visual Sutudio Codeのインストール
Visual Studio Codeのページ からインストーラーをダウンロードしてインストールします。
2. Visual Studio Codeに必要な拡張機能を追加
Visual Studio Codeのインストールが完了したら、以下の拡張機能をどんどん追加していきます!
3. Githubにユーザー登録
Githubにユーザー登録します。下記のページを参考にしてください。
4. Github Copilot Freeプランの導入
下記のページにアクセスします。
画面をスクロールしていって下記の画面の「Open in VS Code 」をクリックします。
アンケート
本日の講義に参加した方は以下のアンケートに答えてください
