この講義では、ここまで主に２次元平面上での描画による表現を扱ってきました。今回は２次元での表現からさらに（文字通り）次元を越えて、３次元空間での表現について考えていきたいと思います。
openFrameworksで3Dグラフィクスを扱う手法はこれまでとさほど変化はありません。なぜなら、openFrameworksの描画の基本はOpenGLで行っています。OpenGLはそもそも３次元のグラフィクスの描画のために開発されたライブラリであり、最初から３次元空間をとり扱うための様々な機能が備わっています。
しかし、3Dの物体を扱うには、これまでとは違った様々な要素が加わります。カメラ（視点）、ライティング、光と影（シェーディング）、奥行の重なりなどといった２次元の平面には無かった様々な技術や概念の理解が必要となります。
今回は、立方体 (ofBoxPrimitive) と球体 (ofSpherePrimitive) という3Dの基本図形の描画を通して、3Dグラフィクスの基本を学んでいきます。
スライド資料、サンプルプログラム
課題提出 + アンケート
課題提出+アンケートに回答してください。
課題提出+アンケート
本日の内容
今回の「人工知能と創作」は、まず始めに課題「AI生成自画像」講評を行います。オンラインフォームから自画像をアップロードして作成した「生成自画像について」講評を行います。後半は生成AIによる画像生成を理解するためのヒントとして、生成AIが生まれる以前から現代までの生成芸術(Generative Art)の歴史を振り返り、未来に向けての展望を考えていきます。
スライド資料
「AI生成自画像」講評
本日は、前回の課題「AI生成自画像」の (簡単な) 講評から始めます!
本日のテーマ: 生成芸術の歴史と未来
本日は「生成芸術の歴史と未来」というテーマで、今後の生成AIによる作品制作のヒントになりそうなトピックスをどんどん紹介していきます!
“Amid the A.I. Deluge, What Counts as Art? Ask the Curators.”
AIの氾濫の中で、何がアートにあたるのか？ キュレーターに聞く – The New York Times. “Amid the A.I. Deluge, What Counts as Art? Ask the Curators.,” October 18, 2025.
人工知能（AI）が生成するアートが、ニューヨーク近代美術館（MoMA）などで展示され始めています。これにより「人間の手が直接介在しない作品はアートなのか」という問いが生じています。この記事では、主要な美術館やキュレーターが、この新しい表現形式とどう向き合っているかを紹介しています。
要約
キュレーターの視点 多くのキュレーターは、AIアートの価値を技術的な目新しさや見た目の美しさではなく、その背後にあるアーティストの「意図」や「プロセス」にあると考えている。MoMAのキュレーターは「テクノロジーがアートなのではなく、最終的には個人の創造性とビジョンが重要だ」と述べている。特に、アーティスト自身がAIモデルの構築やデータの選別に深く関わる作品が評価されている。
美術館の対応 美術館の対応は二分している。MoMAのように積極的にAIアートを受け入れる機関や、アーティストのレフィーク・アナドル氏がロサンゼルスにAIアート専門の美術館「Dataland」を設立する計画もある。一方で、過去のNFTブームの沈静化を踏まえ、慎重に動向を見守る美術館も存在する。
今後の展望 AIアートに対する現在の戸惑いは、かつてキュビズムが登場した際に人々が抱いたものと似ている。新しい技術が登場した当初の熱狂が落ち着けば、やがて評価の基準が定まり、観客も自らの批評眼を持つようになるだろうと記事は結論付けている。
生成AI (Generative AI) と生成芸術 (Generative Art)
VIDEO
ここ10年ほどの生成AI（Generative AI）の発展は目覚ましいものがあります。しかし、現在の生成AIに至るまでには「生成芸術 (Generative Art)」の長い歴史があります。生成芸術とは、アルゴリズムやシステムを用いて、自律的に作品を生成する芸術の総称です。アーティストは作品そのものを直接制作するのではなく、作品が生成される「ルール」や「プロセス」を設定します。生成AIは、こうした生成芸術の最新の形態ととらえられます。生成芸術の歴史を理解することで、生成AIの可能性や限界、そして未来の展望について深く考える手がかりとなります。
生成芸術の歴史
生成芸術の歴史について網羅したすばらしい資料があるので紹介します。
Pre-1850: Pre-Modern Era (近代以前)1850-1949: Modern Era (近代)1950s: Analog Era (アナログ時代)1960s: Digital Era (デジタル時代)1970s: Artist-Programmer Era (アーティスト・プログラマー時代)1980s: Personal Computer Era (パーソナルコンピュータ時代)1990s: Net Era (ネット時代)2000s: Tooling Era (ツール時代)2010s: AI Era (AI時代)2020s: On-Chain Era (オンチェーン時代)
Pre-1850: Pre-Modern Era
70,000 BCE, Blombos Cave DrawingURLBlombos Cave Drawing
1866, John Venn’s “graphical indication of randomness”
1917, Composition with Lines by Piet Mondrian
1936, Alan Turing Describes the Turing Machine
1945 ENIAC Developed
1950s: Analog Era
1950 Alan Turing Proposes the “Turing Test”
1952, Electronic Abstractions by Ben Laposky
1956, Herbert W. Franke Begins Creating Art with an Oscillograph
1957, Max Mathews Develops MUSIC I
1960s: Digital Era
1962, Ivan Sutherland Invents “Sketchpad”
1963, Gaussian Quadratic by A. Michael Noll
1964, Hiroshi Kawano Publishes His First Algorithmic Images
1965, Computer Composition with Lines by A. Michael Noll
1965, The World’s First Computer Art Exhibit: Computergrafik by Georg Nees
1965, 13/9/65 Nr. 2 (“Hommage à Paul Klee”) by Frieder Nake
1966, CTG Pioneers Digital Generative SystemsURL copied
1966, Joseph Weizenbaum publishes ELIZA
1968, Cybernetic Serendipity Defines a Movement
1968, Vera Molnár Begins her Computer Art Phase with the “Interruptions” Series
1969, Sol LeWitt Brings His Wall Drawings
1970s: Artist-Programmer Era
1970, John Conway Publishes Landmark The Game of Life
1972, Noland Bushnell Invents First Video Game, Pong
1973, Harold Cohen Pioneers AI Art with AARON
1979, The First ARS ELECTRONICA Festival Takes Place in Linz, Austria
1980s: Personal Computer Era
1980, Digital Harmony: On the Complementarity of Music and Visual Art by John Whitney
1982, V-yramid by Nam June Paik
1986, Langton’s Ant Developed by Christopher Langton
1987, Photoshop Developed
1987, Adope Illustrator Developed
1988, Geometric Love by Masaki Fujihata
1989, Tim Berners-Lee Invents the World Wide Web
1989, The Legible City by Jeffrey Shaw
1990s Net Era
1990, Panspermia by Karl Sims
1990, The Evolution of Forms by William Latham
1991, World Wide Web goes public
1995, jodi.org by JODI
1996, Macromedia Flash 1.0 Released
1999, John Maeda publishes Design By Numbers
2001, Casey Reas and Ben Fry Initiate Processing Project
2001, Inaugural Exhibition at bitforms: Casey Reas’s first public exhibition
2002, Super Mario Clouds by Cory Arcangel
2004, {Software} Structures by Casey Reas, Jared Tarbell, Robert Hodgin and William Ngan
2004, Reas Begins Process Compendium Series (2004-2014)
2005, Zach Lieberman releases OpenFrameworks v0.01
2010s: AI Era
2015, Google’s Alexander Mordvintsev Launches DeepDream
2018, Christie’s First Sale of an AI artwork
2019, MACHINE HALLUCINATION by Refik Anadol
2019, OpenAI Releases ChatGPT2
2020s: On-Chain Era
2021, DALL-E Launched
2021, Everydays — The First 5000 Days by Beeple
2021, Latent Diffusion Models Introduced
2021, The Shell Record by Anna Ridler
2023, OpenAI Releases ChatGPT 4
アンケート
本日の講義に参加した方は以下のアンケートに回答してください。
アンケート
今回からいよいよ動きのある表現（= アニメーション）について扱っていきます。アニメーションを実現するには、まず時間を扱う基本構造を知る必要があります。p5.jsでは、setup(), draw() という2つのブロックにわけて、初期化と更新を行うことでアニメーションを実現しています。まず始めはこの基本構造について理解します。次に、これから動きを扱う際に、向きと大きさをもった「ベクトル」という概念を理解します。ベクトルを理解することで、位置や運動を整理して記述することが可能となります。最後に、この基本構造をベクトルを活用して簡単なアニメーションを作成します。
スライド資料
ランキング (2024)
サンプルコード (課題のヒント)
本日の課題!!
本日の最終のコード を改造してランダムな要素を追加してください。
例:
円の色をランダムな色に
円の大きさをランダムに
(応用)円の動きをランダムに
…etc.
作品は、OpenProcessingに投稿した上でアンケートフォームから提出してください。
完成した作品に、タイトルをつける
投稿したURLをアンケートから提出
投稿の際にsfc251024 のタグをつけてください!
締切: 来週木曜日23:59まで!
アンケートフォーム
Strudelでは、音楽のライブコーディングにビジュアルエフェクトを追加できます。今回は、Strudelを用いてライブコーディングの演奏にビジュアルエフェクトを追加する方法を学びます。
いろいろなビジュアルエフェクト
ミニ・ノーテーションの強調表示
「二重引用符 “”」または「バッククォート “」を使用して記述すると、アクティブな部分が強調表示されます。
n("<0 2 1 3 2>*8")
.scale("<A1 D2>/4:minor:pentatonic")
.s("supersaw").lpf(300).lpenv("<4 3 2>*4")色を変更したり、パターンを変更したりすることもできます。
n("<0 2 1 3 2>*8")
.scale("<A1 D2>/4:minor:pentatonic")
.s("supersaw").lpf(300).lpenv("<4 3 2>*4")
.color("cyan magenta")グローバルビジュアルとインラインビジュアル
これ以降で紹介するビジュアルエフェクトは、すべて2つのバリエーションで提供されます。
グローバルビジュアル (プレフィックスなし): は、ビジュアルをページの背景にレンダリングします。インラインビジュアル (接頭辞「_」を付ける): コード内でビジュアルがレンダリングされます。複数のビジュアルを使用できます。
グローバルビジュアル:
note("c a f e").color("gray").punchcard()インラインビジュアル:
note("c a f e").color("gray")._punchcard()punchcardとpianoroll
これら2つの関数はピアノロール形式のビジュアルをレンダリングします。2つの関数の唯一の違いは、 はpianorollパターンを直接レンダリングするのに対し、 はpunchcardその後に発生する変換も考慮に入れるという点です。
punchcard: 色が適用される
note("c a f e").color("white")
._punchcard()
.color("cyan")pianoroll: 色が適用されない
note("c a f e").color("white")
._punchcard()
.color("cyan")spiral (スパイラル)
スパイラルビジュアルを表示します。
note("c2 a2 eb2")
.euclid(5,8)
.s('sawtooth')
.lpenv(4).lpf(300)
._spiral({ steady: .96 })Scope
同義語: tscope
オーディオ信号の時間領域のオシロスコープをレンダリングします。
s("sawtooth")._scope()Pitchwheel
1オクターブ内の周波数を視覚化するためにピッチサークルをレンダリングします
n("0 .. 12").scale("C:chromatic")
.s("sawtooth")
.lpf(500)
._pitchwheel()Spectrum
入力オーディオ信号のスペクトル アナライザーをレンダリングします。
n("<0 4 <2 3> 1>*3")
.off(1/8, add(n(5)))
.off(1/5, add(n(7)))
.scale("d3:minor:pentatonic")
.s('sine')
.dec(.3).room(.5)
._spectrum()markcss
ハイライト表示されたイベントのCSSを上書きします。必ずシングルクォーテーションを使用してください。
note("c a f e")
.markcss('text-decoration:underline')Hydra
Hydraは、ライブコーディングのためのビジュアルプログラミング環境です。Strudelでは、Hydraを使用して高度なビジュアルエフェクトを作成できます。
await initHydra()
osc(10, 0.9, 300)
.color(0.9, 0.7, 0.8)
.diff(
osc(45, 0.3, 100)
.color(0.9, 0.9, 0.9)
.rotate(0.18)
.pixelate(12)
.kaleid()
)
.scrollX(10)
.colorama()
.luma()
.repeatX(4)
.repeatY(4)
.modulate(
osc(1, -0.9, 300)
)
.scale(2)
.out()
note("[a,c,e,<a4 ab4 g4 gb4>,b4]/2")
.s("sawtooth").vib(2)
.lpf(600).lpa(2).lpenv(6)H patterns
Hパターンを hydra への入力として使用できる特別な関数があります。
await initHydra()
let pattern = "3 4 5 [6 7]*2"
shape(H(pattern)).out(o0)
n(pattern).scale("A:minor").piano().room(1)オーディオ検出
hydra オーディオ キャプチャを使用するには、構成パラメータinitHydraを指定して呼び出します。{detectAudio:true}
await initHydra({detectAudio:true})
let pattern = "<3 4 5 [6 7]*2>"
shape(H(pattern)).repeat()
.scrollY(
()=> a.fft[0]*.25
)
.add(src(o0).color(.71 ).scrollX(.005),.95)
.out(o0)
n(pattern).scale("A:minor").piano().room(1)feedStrudel
このfeedStrudelオプションを使用すると、Strudelの視覚化をhydraで変換できます
await initHydra({feedStrudel:1})
//
src(s0).kaleid(H("<4 5 6>"))
.diff(osc(1,0.5,5))
.modulateScale(osc(2,-0.25,1))
.out()
//
$: s("bd*4,[hh:0:<.5 1>]*8,~ rim").bank("RolandTR909").speed(.9)
$: note("[<g1!3 <bb1 <f1 d1>>>]*3").s("sawtooth")
.room(.75).sometimes(add(note(12))).clip(.3)
.lpa(.05).lpenv(-4).lpf(2000).lpq(8).ftype('24db')
all(x=>x.fft(4).scope({pos:0,smear:.95}))次週までの課題
1分パフォーマンスに挑戦!
ここまでの講義でStrudelの基本は一通り終えました。ただコードを手元で実行しているだけではつまらないので、まずは一人1分でミニパフォーマンスに挑戦してみたいと思います! 3分程度のStrudelのパフォーマンスを披露できるよう準備してきてください。
アンケート
アンケート
スライド資料
本日の内容
本日の講義では、TouchDesignerにおける3Dジオメトリ操作の中心となるSOP（Surface Operators）の基本的な使い方を学びます。SOPは、点、線、ポリゴン、NURBSなど様々な3Dデータを生成・編集するためのオペレーターファミリーです。まず、Sphere（球）やBox（立方体）といったプリミティブ図形の作成方法から始め、Transform SOPなどを用いた形状の変形方法を見ていきます。次に、作成した3Dジオメトリを画像として表示するためのレンダリングについて学びます。これには、Geometry COMP、Camera COMP、Light COMP、Render TOP、そしてマテリアルの設定が必要になります。さらに応用として、SOPを組み合わせて数式やアルゴリズムに基づき形状を自動生成するプロシージャルモデリングの基礎を学び、Merge SOPやCopy SOPを使った具体的な手法を見ていきます。最後に、簡単な実習を通して、学んだ知識を実践に繋げます。
SOPの基本
プリミティブ図形の作成
レンダリングの基本
カメラとライトの設定
プロシージャルモデリングの基本
SOPの基本
SOP = Surface Operators
3Dジオメトリを生成、編集、操作するためのオペレーターファミリー
ジオメトリ: 3D空間における形状や構造を表すデータ
点、線、ポリゴンメッシュ、NURBSカーブ/サーフェス、メタボールなど、さまざまなタイプの3Dデータを扱うことができる
SOPの主な機能と役割:
ジオメトリの生成 (Generators):
基本的な3D形状（プリミティブ）を作成
例: Sphere SOP (球)、Box SOP (立方体)、Grid SOP (格子状平面)、Tube SOP (管)、Line SOP (線)、Circle SOP (円)
ジオメトリの変形・加工 (Modifiers):
既存のジオメトリに対して移動、回転、スケール、変形などの操作を加る
例: Transform SOP (移動、回転、スケール)、Twist SOP (ねじり)、Noise SOP (ノイズによる頂点移動)、Subdivide SOP (細分化)、Extrude SOP (押し出し)
ジオメトリの結合・選択・分割 (Combiners/Selectors):
複数のジオメトリを結合したり、特定の条件でジオメトリの一部を選択・削除
例: Merge SOP (複数のジオメトリを統合)、Join SOP (ポリゴンやカーブを接続)、Group SOP (点やプリミティブをグループ化)、Delete SOP (指定した点やプリミティブを削除)
データの変換とユーティリティ (Conversion/Utility):
ジオメトリの種類を変換したり、ジオメトリに関する情報を取得・操作
例: Convert SOP (ポリゴン、NURBSなどの形式変換)、Attribute Create SOP (新しいアトリビュートを作成)、Point SOP (点の位置やアトリビュートを個別に操作)、Sort SOP (点やプリミティブの順序を変更)
他のオペレーターファミリーとの連携:
SOP -> CHOP/DAT: SOP to CHOPやSOP to DATを使い、ジオメトリの頂点座標、法線、色などのアトリビュート情報をCHOP（チャンネルデータ）やDAT（テーブルデータ）に変換して、他の計算や制御に利用CHOP/DAT -> SOP: CHOPやDATのデータをCHOP to SOPやスクリプト経由でSOPのパラメータやアトリビュートに適用し、ジオメトリを動的に変化させる（例：オーディオデータで頂点を動かす）。レンダリング: SOPで作成・加工されたジオメトリは、Geometry COMPに格納され、Material (MAT) によって見た目が定義され、Render TOPによって最終的に画像としてレンダリングされる
プリミティブ図形の作成
SOPの基本的な使い方を学ぶために、まずはプリミティブ図形を作成してみましょう
ダウンロード
2D
Line SOP: 直線を作成
Circle SOP: 円を作成
Rectangle SOP: 長方形を作成
Grid SOP: 格子状の平面を作成
3D
Box SOP: 立方体を作成
Sphere SOP: 球を作成
Tube SOP: 円筒を作成
Torus SOP: トーラスを作成
SOPの操作
SOPのオペレータ上で様々な操作を行うことができます
ダウンロード
SOPを選択して、パラメータウィンドウで設定を変更
ビューワーアクティブにして、マウスで操作
表示の切り替え
ワイヤーフレーム表示
頂点の表示
法線の表示 など
SOPのレンダリング
SOPを配置は3Dジオメトリの形状を作成しただけ
最終的に画像として表示するためには、Render TOPを使用してレンダリングを行う必要がある
Render TOPは、3Dシーンを2D画像としてレンダリングするためのコンポーネント
3Dを2D画像としてレンダリングするために必要な3つの要素
カメラ: 3Dシーンを撮影するための視点
ライト: 3Dシーンを照らすための光源
マテリアル: 3Dジオメトリの見た目を定義するための素材
実際にオペレーターを接続しながら解説していきます!
SOPのレンダリング基本
ダウンロード
SOPでプリミティブ図形を作成
Geometry COMPを作成し、SOPを接続
Camera COMPとLight COMPを配置
Render TOPを作成し、Camera COMPとLight COMPが自動的に接続される
SOPにマテリアルの適用 + 回転
ダウンロード
Phone MATを作成し、Geometry COMPに接続
Render TOPに接続されたGeometry COMPのマテリアルを変更することで、ジオメトリの見た目を変更できる
SOPのレンダリング – 様々なパラメータを調整
ダウンロード
様々なパラメータを調整して、3Dジオメトリの見た目を変更してみよう!
カメラの画角や位置
マテリアルの色や質感
ライトの位置や強度
SOPの形状やサイズ など
応用: プロシージャルモデリング
SOPを使って、プロシージャルに3Dジオメトリを生成することができる
プロシージャルモデリングとは、数式やアルゴリズムを使って自動的に3D形状を生成する手法
SOPのパラメータを数式やCHOPのデータにリンクさせることで、動的に変化するジオメトリを作成できる
SOPのMergeとCopyとTransformでモデリング
ダウンロード
Merge SOPを使って、複数のジオメトリを結合
Copy SOPを使って、ジオメトリを複製
複製の際に位置や回転やスケールを指定することができる
Copy SOPのTransformタブで設定
Transform SOPを使って、複製したジオメトリの位置や回転を変更
いろいろ試してみましょう!
応用: より複雑なプロシージャルモデリング
ダウンロード
様々なSOPを組み合わせて、より複雑なプロシージャルモデリングに挑戦!
Line SOPとSweep SOPを組み合わせて、複雑な形状を作成
Line SOPをPattern SOPで変形させて波打つような形状へ
Coyp SOPを使って複製していく
実習: プロシージャルモデリングに挑戦
ここまでの内容を踏まえて、Copy SOPやTransform SOPを使って、プロシージャルモデリングに挑戦してみましょう!
例えば、以下のような形状に挑戦してみてください
複数の円柱を並べた形状
波打つような形状
複雑な幾何学模様
制作サンプル
アンケート
本日の講義に参加した方は以下のアンケートに回答してください。
前回はopenFrameworksで、位置と速度という2つの変数 (Veriable) を使用して図形1つをアニメーションさせるところまで到達できました。今回はこのプログラムを応用して複数の図形を同時に動かす方法について解説していきます。複数の図形を動かすには位置と速度という2つのベクトルを個別の変数にではなくまとめて取り扱うデータの格納方法が必要となります。こうした場合には配列(Array)を使用すると便利です。それぞれのベクトルを配列にまとめることで、大量の図形のアニメーションをシンプルに記述することが可能です。さらに、あらかじめ物体の最大数が決まっていない際には、可変長配列 (std::vector) を使用するという方法もあります。この方法もあわせて解説していきます。
スライド資料
サンプルプログラム
スライドとあわせて、以下のプログラムのサンプルを参考にしてください。
課題提出 + アンケート
本日の授業を受講した方は、以下のフォームに回答してください。
課題提出+アンケート
プログラムを構造化していく際に、3つの重要な構成要素があります。それは、「順次 (Sequence)」、「反復 (Iteration)」、「分岐 (Selection)」 です。今回は、この3つの構成要素の中の反復 (Iteration) に注目して、p5.jsで形を描きながら反復について考えます。また、一意的でないランダムな値である「乱数」と反復を組合せて、どのような表現か可能となるか探求していきます。
スライド資料
ランキング (2024)
おめでとうございます!
サンプルプログラム
本日の課題!!
乱数 (random) と繰り返し (for) を使用して、表現してみましょう!
作品は、OpenProcessingに投稿
完成した作品に、タイトルをつける
投稿したURLをアンケートから提出
投稿の際にsfc251017 のタグをつけてください!
締切: 次週木曜23:59まで
アンケートフォーム
今回のアンケートフォームから、前回の提出作品の人気投票を行います!
前回のタグsfc251010 でOpenProcessingで検索 (検索方法をSketches that are tagged にする必用あり)
一番良いと思った作品に1票投票 (自信があれば自分の作品でも可)
スライド資料
本日の内容
ChatGPTなどの生成AIに至るまでには、約30年にわたるニューラルコンピューティングの歴史があります。今回は、その歴史を振り返る映像を視聴し、生成AIの基盤技術であるTransformerについて理解を深めます。さらに、Transformerの仕組みをより詳しく知りたい人のための参考資料も紹介します。後半では、様々な画像生成AIサービスを実際に試し、その特徴や使い方を学びます。最後に、次回までの課題として、画像生成AIを使って自画像を作成することに挑戦します。
ChatGPTに至る30年の歴史
VIDEO
ChatGPT: 30 Year History | How AI Learned to Talk
動画の要旨
チャットGPTの登場: チャットGPTは一般人が会話できる最初のプログラムで、チューリングテストを打ち破った。
言語の複雑さ: 以前、多くの言語学者はコンピューターが人間の言語を理解することは不可能だと考えていたが、今はその多くが考えを改めている。
教師あり学習の説明: 過去のニューラルネットワーク研究は、固定された目標に対して一つのタスクを学習するものであったが、汎用的なシステムへの道筋は見えていなかった。
順序学習の初期研究: 1986年、ジョーダンは再帰型ニューラルネットワーク（RNN）を使ってシンボルの順序を予測させる実験を行い、ネットワークに記憶の概念を導入した。
エルマンの研究: ジェフリー・エルマンは、言語における単語の境界をニューラルネットワークが自動的に学習することを発見した。
Transformerの導入: 2017年、言語翻訳の問題に対応するためにTransformerアーキテクチャが開発され、これが現在の大規模言語モデル（LLM）の基盤となった。
GPTシリーズの進化:
GPT-1: Transformerアーキテクチャを使用し、次の単語予測問題に適用。
GPT-2: ウェブから収集したデータを使用し、さらに大規模なネットワークで優れた言語生成を実現。
GPT-3: 1750億のパラメーターを持つネットワークで、ゼロショット学習などの新しい機能を発揮。
哲学的な議論: AIが本当に「思考」しているのか、それとも思考をシミュレートしているだけなのかについて、研究者間で議論が続いている。
LLM (大規模言語モデル) とTransformerのしくみ
LLMの仕組み（簡単バージョン）
VIDEO
とても分かりやすくLLMやTransformerの仕組みを解説した動画
動画の要旨
大規模言語モデル（LLM）の本質
LLMは次に来る単語を予測する数学的関数。
一つの単語を断定せず、確率を割り当てて予測する。
応答生成のしくみ
ユーザー入力を基に、AIが応答として言いそうな単語を順に生成。
確率の低い単語も選ぶことで、自然な文が生成されやすくなる。
訓練データとスケール
GPT-3の訓練データを人間が読むには2600年以上かかる。
現在のモデルはさらに多くのデータで訓練されている。
パラメーターの調整
数千億個のパラメーターがモデルの振る舞いを決定。
最初はランダム、訓練により精度が向上。
学習プロセス（事前訓練）
入力と正解を比較し、誤差に基づきパラメーターを更新（バックプロパゲーション）。
繰り返し訓練することで未知の入力にも対応可能になる。
圧倒的な計算量
1秒に10億回計算しても、全体には1億年以上かかる規模。
強化学習（RLHF）
事前訓練後、ユーザーの好みに合わせて人間のフィードバックで再訓練。
有用な応答を優先するようモデルを微調整。
トランスフォーマーの登場
かつてのモデルは1単語ずつ処理、トランスフォーマーは全体を並列処理。
テキストを数値に変換し、文脈を考慮して意味を更新。
アテンション機構
各単語が他の単語と情報をやり取りし、文脈に合った意味へ変化。
例えば「バンク」が「川岸」になるなど。
フィードフォワード構造
より多くの言語パターンを学習する補助機構。
複雑な演算を通じて、文の意味を豊かに符号化。
予測とその不確実性
モデルの予測は確率分布として表現される。
設計された枠組みはあるが、具体的な振る舞いは訓練による。
さらにTransformerの構造を深く知りたい人のために…
TRANSFORMER EXPLAINER
Transformerをインタラクティブに視覚化!
The Illustrated Transformer
TransformerのアーキテクチャやAttention機構について図解で解説
GPTとは何か Transformerの視覚化 | Chapter 5, Deep Learning
VIDEO
動画による詳細な解説
参考: ChatGPTを活用してWebページやYouTube動画の内容を要約
ChatGPT Summarize
画像生成AIを試してみる!
現在、様々な画像生成AIが公開されている。今回は以下の画像生成AIサービスを試してみましょう。
Nano Banana (Gemini 2.5 Flash Image)
URL: gemini.google.com , aistudio.google.com 特徴: Google検索やレンズ等の既存エコシステムに深く統合。複数画像の融合、自然言語による対話的な編集、基盤LLM「Gemini」による「視覚的推論」など高度な機能長所: Googleエコシステムに統合されており、多くのユーザーが普段のツール内で手軽に利用可能。専門知識なしで自然な言葉で直感的に画像を編集・生成できる短所: デフォルトの出力解像度が低く、プロ品質にはアップスケーリングが必要な場合がある。生成画像にはウォーターマークが付与され、商用利用に制約あり料金体系:
制限付きの無料アクセス
Google AI Pro（月額2,900円または$19.99）
開発者向けAPI（画像1枚あたり約0.039ドル）
Google ImageFX
URL: https://labs.google/fx/tools/image-fx 特徴: Googleの最新画像生成AIモデル「Imagen 3」を搭載し、高品質な画像を生成。プロンプトの候補を提示する「表現力チップ」や、画像の一部分を修正する機能で直感的な操作が可能。長所: Googleアカウントがあれば誰でも完全に無料で利用可能。特に写真のようにリアルで高品質な画像の生成が得意で、初心者でも簡単に使える短所: コンテンツに対する規約が厳しく、プロンプトによっては生成が拒否されることがある。サービスが新しいため、機能制限や軽微な不具合が見られる場合がある料金体系: 無料（Googleアカウントが必要）
DALL-E 3
URL: chatgpt.com 特徴: ChatGPTに統合されており、自然な会話を通じて画像を生成・編集。曖昧な指示でもChatGPTが意図を汲み取り、効果的なプロンプトを自動生成。長所: ChatGPTとの対話形式で初心者でも非常に直感的。指示への忠実度が高く、特に画像内にテキストをきれいに描画する能力に優れる 。短所: 芸術的で独特な雰囲気の画像の生成は比較的苦手。生成される画像のスタイルがCG風のタッチに偏ることがある 。料金体系:
ChatGPT無料プランで利用可能（制限あり）
ChatGPT Plus（月額$20）でより多く生成可能
開発者向けAPI（1枚あたり$0.04〜$0.12）
Midjourney
URL: www.midjourney.com 特徴: 芸術性が高く、極めてフォトリアルな画像生成能力。主なインターフェースはDiscordで、活発なコミュニティが特徴。--crefや--srefといった、キャラクターやスタイルの一貫性を保つための高度なパラメータが充実長所: 業界最高水準の芸術的な品質とフォトリアリズム。キャラクターやスタイルの一貫性を保つ機能が強力 。短所: Discordでの操作に慣れが必要で、初心者にはハードルが高い場合がある。無料プランがない 。料金体系:
Basicプラン（月額$10）
Standardプラン（月額$30）
Proプラン（月額$60）
Megaプラン（月額$120）
Stable Diffusion
URL: stability.ai/stable-image 特徴: 長所: ローカル環境では完全に無料で、生成枚数も無制限。カスタマイズの自由度が非常に高い。オフライン実行によりプライバシーも確保 。短所: ローカルでの利用には高性能なPC（特にGPU）が必要。環境構築には専門知識が求められ、初心者にはハードルが高い 。料金体系:
自身のPC（ローカル環境）での利用は完全に無料
WebサービスやAPIは提供者により無料クレジット制、サブスクリプション制など多様
Adobe Firefly
URL: firefly.adobe.com 特徴: Adobe Stockなど商業的に安全なデータで学習しており、著作権侵害のリスクが低い。Photoshopの「生成塗りつぶし」など、Adobe Creative Cloud製品に深く統合。長所: 商用利用時の法的リスクが極めて低い。Photoshopなどプロが使い慣れたツールに統合されており、制作ワークフローの生産性を向上させる 。短所: フォトリアルな画像の生成は他のトップモデルに比べて苦手な場合がある。ネガティブプロンプト機能がない 。料金体系:
無料プラン（月25クレジット）
Standardプラン（月額1,580円で2,000クレジット）
Proプラン（月額3,180円で4,000クレジット）
Creative Cloudの各プランにもクレジットが含まれる
まずはいろいろ試してみる!
実習、次回までの課題
課題: 「画像生成AIで自画像を作成」
いくつかの画像生成AIを試してみる
様々な手法を試す (テキストから生成、イラストをアップロードなど)
気にいったサービスを1つ選択
自分自身の自画像を生成してみる
写実的、イラスト調、油彩調などスタイルは自由
自分に似せるにはどのようなプロンンプト(指示)が良いか?
次回、一番似ている人は誰かコンテスト
Strudelの基本としてサウンド(sound)とノート(note)を修得しました。次は様々なエフェクトを試していきましょう。
いくつかの基本的な効果
ローパスフィルタ
note("<[c2 c3]*4 [bb1 bb2]*4 [f2 f3]*4 [eb2 eb3]*4>")
.sound("sawtooth").lpf(800)lpf =ローパスフィルター
lpfを200に変更してください。音がこもっているのが分かります。クラブのドアを閉めて目の前に立っているような感じを想像してみてください
さあ、ドアを開けてみましょう… 5000 に変更します。明るくなるのに注目してください!
フィルターのパターン
note("<[c2 c3]*4 [bb1 bb2]*4 [f2 f3]*4 [eb2 eb3]*4>")
.sound("sawtooth").lpf("200 1000 200 1000")
さらに値を追加してみましょう
lpfのパターンが全体のリズムを変えないことに注目してください
Waves で自動化する方法については後ほど学習します
vowel (母音)
note("<[c3,g3,e4] [bb2,f3,d4] [a2,f3,c4] [bb2,g3,eb4]>")
.sound("sawtooth").vowel("<a e i o>")ゲイン (音量)
$: sound("hh*16").gain("[.25 1]*4")
$: sound("bd*4,[~ sd:1]*2")
リズムはダイナミクスが重要です!
取り外して.gain(…)、音がいかにフラットであるかに注意してください
上記のすべてを組み合わせて、小さな曲を作ってみましょう。
$: sound("hh*8").gain("[.25 1]*4")
$: sound("bd*4,[~ sd:1]*2")
$: note("<[c2 c3]*4 [bb1 bb2]*4 [f2 f3]*4 [eb2 eb3]*4>")
.sound("sawtooth").lpf("200 1000 200 1000")
$: note("<[c3,g3,e4] [bb2,f3,d4] [a2,f3,c4] [bb2,g3,eb4]>")
.sound("sawtooth").vowel("<a e i o>")ADSRエンベロープでサウンドを形作る
note("c3 bb2 f3 eb3")
.sound("sawtooth").lpf(600)
.attack(.1)
.decay(.1)
.sustain(.25)
.release(.2)数字が何を表しているか調べてみましょう。次の数字を比較してみましょう。
attack: .5 vs 0
decay: .5 vs 0
sustain: 1 vs .25 vs 0
release: 0 vs .5 vs 1
attack：フェードインにかかる時間
decay：減衰して持続するまでにかかる時間
sustain：減衰後のレベル
release: 音符が終わってからフェードアウトするまでの時間
adsr 短縮表記
note("c3 bb2 f3 eb3")
.sound("sawtooth").lpf(600)
.adsr(".1:.1:.5:.2")ディレイ (delay)
$: note("[~ [<[d3,a3,f4]!2 [d3,bb3,g4]!2> ~]]*2")
.sound("gm_electric_guitar_muted").delay(.5)
$: sound("bd rim").bank("RolandTR707").delay(".5")
delay0から1の間の値を試してください。ちなみに、.5は0.5
.delay(“.8:.125”) を使用するとどうなりますか?
.delay(“.8:.06:.8”) を使用するとどうなりますか?
delay("a:b:c")
a: ディレイボリューム
b: 遅延時間
c: フィードバック（数字が小さいほどフェードが早くなります）
room、別名リバーブ
n("<4 [3@3 4] [<2 0> ~@16] ~>")
.scale("D4:minor").sound("gm_accordion:2")
.room(2)
さまざまな値を試してください。
ディレイも追加してください!
ちょっとしたダブチューン
$: note("[~ [<[d3,a3,f4]!2 [d3,bb3,g4]!2> ~]]*2")
.sound("gm_electric_guitar_muted").delay(.5)
$: sound("bd rim").bank("RolandTR707").delay(.5)
$: n("<4 [3@3 4] [<2 0> ~@16] ~>")
.scale("D4:minor").sound("gm_accordion:2")
.room(2).gain(.5)ベースを追加して完成させましょう。
$: note("[~ [<[d3,a3,f4]!2 [d3,bb3,g4]!2> ~]]*2")
.sound("gm_electric_guitar_muted").delay(.5)
$: sound("bd rim").bank("RolandTR707").delay(.5)
$: n("<4 [3@3 4] [<2 0> ~@16] ~>")
.scale("D4:minor").sound("gm_accordion:2")
.room(2).gain(.4)
$: n("[0 [~ 0] 4 [3 2] [0 ~] [0 ~] <0 2> ~]/2")
.scale("D2:minor")
.sound("sawtooth,triangle").lpf(800).hush()スタック内のパターンの 1 つの最後に追加してみてください…
pan (定位)
sound("numbers:1 numbers:2 numbers:3 numbers:4")
.pan("0 0.3 .6 1")スピード
sound("bd rim [~ bd] rim").speed("<1 2 -1 -2>").room(.2)slowとfast
sound("bd*4,~ rim ~ cp").slow(2)
値を変更してください。 slowをfastに置き換えてみてください。
次のようなパターンを使用するとどうなりますか.fast(“<1 [2 4]>”)?
ちなみに、ミニ表記では、fastは*であり、slowは です/。
sound("[bd*4,~ rim ~ cp]*<1 [2 4]>")信号による変調
値を段階的に変更する代わりに、信号で制御することもできます。
sound("hh*16").gain(sine)
信号の基本波形は sine, saw, square, tri です
ランダム信号も試してみてください。 rand, perlin
ゲインはピアノロールの透明度として視覚化されます。
範囲を設定する
デフォルトでは、波は0から1の間で振動します。これを次のようにrangeで変更できます。
sound("hh*16").lpf(saw.range(500, 2000))変調速度を低速/高速で変更できます。
note("<[c2 c3]*4 [bb1 bb2]*4 [f2 f3]*4 [eb2 eb3]*4>")
.sound("sawtooth")
.lpf(sine.range(100, 2000).slow(4))全体の変調が繰り返されるには 8 サイクルかかります。
パターン効果
これまで見てきた機能のほとんどは、サウンドのシーケンス、音符の演奏、エフェクトのコントロールなど、他の音楽プログラムが通常実行できる機能です。
この章では、tidal に特有の機能について説明します。
revでパターンを反転
n("0 1 [4 3] 2 0 2 [~ 3] 4").sound("jazz").rev()パターンを左に再生し、juxで右に変更
n("0 1 [4 3] 2 0 2 [~ 3] 4").sound("jazz").jux(rev)これは次と同じです:
$: n("0 1 [4 3] 2 0 2 [~ 3] 4").sound("jazz").pan(0)
$: n("0 1 [4 3] 2 0 2 [~ 3] 4").sound("jazz").pan(1).rev()ここで何が起こるかを視覚化してみましょう。
$: n("0 1 [4 3] 2 0 2 [~ 3] 4").sound("jazz").pan(0).color("cyan")
$: n("0 1 [4 3] 2 0 2 [~ 3] 4").sound("jazz").pan(1).color("magenta").rev()
// を行の前に追加して、2つのうち1つをコメントアウトしてみてください。
複数のテンポ
note("c2, eb3 g3 [bb3 c4]").sound("piano").slow("0.5,1,1.5")これは、以下と同じです
$: note("c2, eb3 g3 [bb3 c4]").s("piano").slow(0.5).color('cyan')
$: note("c2, eb3 g3 [bb3 c4]").s("piano").slow(1).color('magenta')
$: note("c2, eb3 g3 [bb3 c4]").s("piano").slow(1.5).color('yellow')
//行の前に追加して1つまたは複数をコメントアウトしてみてください
add (追加)
setcpm(60)
note("c2 [eb3,g3] ".add("<0 <1 -1>>"))
.color("<cyan <magenta yellow>>").adsr("[.1 0]:.2:[1 0]")
.sound("gm_acoustic_bass").room(.5)
音符に数字を追加すると、その音符は数字として扱われます。
好きなだけ追加できます。
setcpm(60)
note("c2 [eb3,g3]".add("<0 <1 -1>>").add("0,7"))
.color("<cyan <magenta yellow>>").adsr("[.1 0]:.2:[1 0]")
.sound("gm_acoustic_bass").room(.5)スケールで追加
n("0 [2 4] <3 5> [~ <4 1>]".add("<0 [0,2,4]>"))
.scale("C5:minor").release(.5)
.sound("gm_xylophone").room(.5)時間を積む
$: n("0 [2 4] <3 5> [~ <4 1>]".add("<0 [0,2,4]>"))
.scale("C5:minor")
.sound("gm_xylophone")
.room(.4).delay(.125)
$: note("c2 [eb3,g3]".add("<0 <1 -1>>"))
.adsr("[.1 0]:.2:[1 0]")
.sound("gm_acoustic_bass")
.room(.5)
$: n("0 1 [2 3] 2").sound("jazz").jux(rev)ply
sound("hh hh, bd rim [~ cp] rim").bank("RolandTR707").ply(2)これは以下と同じです
sound("hh*2 hh*2, bd*2 rim*2 [~ cp*2] rim*2").bank("RolandTR707")
関数をパターン化してみましょうply。例えば、”<1 2 1 3>”
off
n("0 [4 <3 2>] <2 3> [~ 1]"
.off(1/16, x=>x.add(4))
//.off(1/8, x=>x.add(7))
).scale("<C5:minor Db5:mixolydian>/2")
.s("triangle").room(.5).dec(.1).off(1/16, x=>x.add(4))という表記は、次のように表されます。
元のパターン x を取得する
x に .add(4) を適用して変更
元のパターンに対して1/16周期分オフセットして再生する。
off は他のサウンドを変更するのにも便利で、ネストすることもできます。
s("bd sd [rim bd] sd,[~ hh]*4").bank("CasioRZ1")
.off(2/16, x=>x.speed(1.5).gain(.25)
.off(3/16, y=>y.vowel("<a e i o>*8")))アンケート
アンケート
スライド資料
今回の内容
この講義では、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 を見てみましょう。公式のサンプルがたくさんあり、参考になります。
作成したシステムは、ぜひ保存しておきましょう。次回の講義や、今後のプロジェクトでさらに発展させることができるかもしれません。楽しんで取り組んでください！
アンケート
