この講義では、ここまで主に２次元平面上での描画による表現を扱ってきました。今回は２次元での表現からさらに（文字通り）次元を越えて、３次元空間での表現について考えていきたいと思います。
openFrameworksで3Dグラフィクスを扱う手法はこれまでとさほど変化はありません。なぜなら、openFrameworksの描画の基本はOpenGLで行っています。OpenGLはそもそも３次元のグラフィクスの描画のために開発されたライブラリであり、最初から３次元空間をとり扱うための様々な機能が備わっています。
しかし、3Dの物体を扱うには、これまでとは違った様々な要素が加わります。カメラ（視点）、ライティング、光と影（シェーディング）、奥行の重なりなどといった２次元の平面には無かった様々な技術や概念の理解が必要となります。
今回は、立方体 (ofBoxPrimitive) と球体 (ofSpherePrimitive) という3Dの基本図形の描画を通して、3Dグラフィクスの基本を学んでいきます。
前回の課題とその解答例
前回の課題「2次元のアニメーションを3次元に拡張する」の課題とその解答例です。
スライド資料、サンプルプログラム
本日の課題
本日の課題のテーマ : 3Dオブジェクトをアニメーションさせる。
本日紹介した3Dの基本図形を用いて、アニメーションを作成してください。何を動かすかは自由です。
次回の授業で発表をしてもらいます!
アンケート
本日の授業に出席した方は、以下のアンケートに回答してください。
アンケート
プログラムを構造化していく際に、3つの重要な構成要素があります。それは、「順次 (Sequence)」、「反復 (Iteration)」、「分岐 (Selection)」 です。今回は、この3つの構成要素の中の反復 (Iteration) に注目して、p5.jsで形を描きながら反復について考えます。また、一意的でないランダムな値である「乱数」と反復を組合せて、どのような表現か可能となるか探求していきます。
映像資料
スライド資料
人気作品ランキング
サンプルプログラム
本日の課題!!
乱数 (random) と繰り返し (for) を使用して、表現してみましょう!
- 作品は、OpenProcessingに投稿
- 完成した作品に、タイトルをつける
- 投稿したURLをアンケートから提出
- 投稿の際にsfc241018のタグをつけてください!
- 締切: 2023年11月1日 (水) 23:59 まで!
アンケートフォーム
- 今回のアンケートフォームから、前回の提出作品の人気投票を行います!
- 前回のタグsfc231020でOpenProcessingで検索 (検索方法をSketches that are tagged にする必用あり)
- 一番良いと思った作品に1票投票 (自信があれば自分の作品でも可)
今回はTouchDesignerの入門編として、いよいよ3次元のグラフィクスに挑戦します! SOP (Surface Operator) の使い方から始めて、Render COMPとカメラとライティングを使用したレンダリング、MAT (Material) の基本などを学習していきます。後半は応用編として、Switch SOPによる3D図形の切り替えや、Noise SOPによる図形の変形などを行います。
映像教材
スライド資料
サンプルファイル
本日の課題
今日のプログラムを改造して、以下のプログラムを作成してみましょう!
1. Box以外の図形を追加してキーボードの入力で切り替えられるようにする
- ヒント
- Box以外の図形 – Torus、Tube、Grid、Sphereなど
- SOPの切り替えは、Switch SOPを用いる
- キーボードによるスイッチングは前回の内容を参照
2. 3Dの形状をノイズで変形してみる
- ヒント
- Noise SOPで変形する
- Attribute Create SOPで法線ベクトルを補正
アンケート
本日の授業に参加した方はアンケートに回答してください。
この講義の前半はStrudelを用いてライブコーディングによるサウンドプログラミングの導入を行ってきました。
ここで改めて「ライブ」でコーディングするとはどういうことなのか、ということについて考えていきたいと思います。そもそも何故コード(プログラム)をステージ上で観客に見せるのか? コードを使ってパフォーマンスするという行為は何故意味があるのか。ライブコーディングというコンセプトの基本についてその歴史を紹介しながら学んでいきます。
スライド資料
参考映像
Algorave Generation | Resident Advisor
アンケート
本日の講義に出席した方は以下のアンケートに答えてください。
この講義では、p5.jsを使用してコードによるデザインを行います。その最初の一歩として、コードによって「かたち」を描くにはどうすれば良いのか考えていきます。
まず始めに、1950年代〜70年代の、コンピューター黎明期から発展期におけるコード（プログラム）による様々な視覚表現について紹介します。過去の作家がどのようなアイデアで、何を表現しようとしてきたのか、その歴史を辿ります。
後半は、そうした歴史を踏まえた上で、 p5.jsで実際に図形を描いていきます。まずp5.jsの操作基本を解説し、簡単な図形を描きながらp5.jsでのプログラミングの基本を学びます。
動画資料
人気作品ランキング
スライド資料
本日の課題
テーマ: 「p5.js基本図形と色による画面構成」
ここまで解説したp5.jsの機能を活用して画面構成をしてみましょう! 座標、色、数値による図形の描画に慣れるのが目的です。 次回の授業の冒頭で優秀作品を紹介していきます。
- 完成したら何かタイトルをつける
- 完成した作品はOpenProcessingに投稿してアンケートフォームからURLを提出
- 投稿の際に sfc231020 のタグをつけてください!
- 提出締切は、2023年10月25日 (23:59) までとします
課題提出 + アンケート
課題の提出は以下のアンケートフォームから。
アンケートフォーム (※提出者の確認は学籍番号をキーにしています。間違いが無いかよく確認してください。)
前回は主にドラムサウンドを用いてStrudelのプログラミングの導入を行いました。今回も引き続きStrudelによるサウンドプログラミングを学びます。前回はドラムでしたが、今回はシンセサイザーで旋律を演奏していきます。note() 関数を用いて音程を指定することで様々な方法でメロディーを生成することが可能です。実際に音を聞きながら試していきましょう。
スライド資料
アンケート
本日の講義に参加した方はアンケートに回答してください。
今回も前回に引続き、TouchDesignerの入門的な内容をTDSWの映像を教材にしながら学んでいきます。今回も主にTOPとCHOPを中心にした内容になっています。まず始めに、TOPを用いた画像処理 (輪郭抽出、グレースケール化、ぼかし、発光など) を行います。さらに高度な画像処理としてフィードバックループを用いた残像効果を作成します。後半はこの画像処理を、CHOPを用いてキーボードの入力によって切り替えられるところまでを目指します。
映像教材
【 TouchDesigner初級講座 】簡単な画像処理とFeedback #02
【TouchDesigner初級講座】Switch TOPとキーボード入力 #03
スライド資料
サンプルファイル
本日の課題
今日の最終のプログラムを改造して以下の処理を追加してください。
- 画像処理の種類を4種類からさらに増やしてみる
- キーボードの「3」を押すとさらに別の変化が起こるようにする
アンケート
本日の講義に参加した方は以下のアンケートに答えてください。
前回はopenFrameworksで、位置と速度という2つの変数 (Veriable) を使用して図形1つをアニメーションさせるところまで到達できました。今回はこのプログラムを応用して複数の図形を同時に動かす方法について解説していきます。複数の図形を動かすには位置と速度という2つのベクトルを個別の変数にではなくまとめて取り扱うデータの格納方法が必要となります。こうした場合には配列(Array)を使用すると便利です。それぞれのベクトルを配列にまとめることで、大量の図形のアニメーションをシンプルに記述することが可能です。さらに、あらかじめ物体の最大数が決まっていない際には、可変長配列 (std::vector) を使用するという方法もあります。この方法もあわせて解説していきます。
スライド資料
次回までの課題
本日のサンプルのプログラムをもとに、2次元のアニメーションを3次元に拡張してください!
- ヒント:
- 位置と速度のベクトルをglm::vec2 を glm::vec3 へ
- 座標は、(x, y) から (x, y, z) へと拡張される
- バウンドさせる制限に、z座標の制限もつける
- ベクトルの計算はそのままでOK
- 締切 :
- 次回のこの授業の開始まで。次回に答合わせしていきます!!
アンケート
本日の授業を受講した方は、以下のアンケートに答えてください。
今回からいよいよopenFrameworksによるプログラミングを開始していきます。
openFrameworksではProcessingやp5.jsのように新規ファイルを生成するだけではプログラムは開始できません。様々なファイルや設定を内包したプロジェクトを生成する必要があります。まず初めに新規のプロジェクトの生成の方法について説明します。
次に、openFrameworksでまず差し当って編集していく、main.cpp、ofApp.h、ofApp.cppという3つのファイルについて解説します。また、ofAppの中にある3つの重要な関数、setup()、update()、draw()の役割についても説明していきます。
後半はいよいよプログラミングしていきます。今回は物体が直線運動する簡単なアニメーションを完成させるところまでを目標とします。
スライド資料
課題
スライドの内容に沿って作業をしてください。最終的に簡単なアニメーションが作成されます。来週までにアニメーションのプログラムを作成してください。来週実行結果を確認していきます。
アンケート
本日の授業を受講した方は、以下のアンケートに答えてください。
スライド資料
アンケート
本日の講義を受講した方は以下のアンケートに回答してください
Strudelについて
Strudelとは
Strudel (シュトゥルーデル)
- 語源: 薄い生地で具材を包んだパン
- なぜこの名前にしたのかは不明
Strudelの特徴
Strudelで何ができる?
- ライブコーディング: リアルタイムでコードを使用して音楽を作成
- アルゴリズム作曲: Tidalの強力なパターン操作の機能を活用して、アルゴリズミックに音楽を作曲
- 教育: 誰でもすぐに利用できるので、音楽とプログラムを同時に学べる!
- 他の音楽制作環境と統合: MIDI、OSCなどを使用して外部の環境と連動できる
コード例
stack(
// ドラム
s("bd,[~ <sd!3 sd(3,4,2)>],hh*8")
.speed(perlin.range(.8, .9)), // ランダムなサンプル速度の変化
// ベースライン
"<a1 b1*2 a1(3,8) e2>"
.off(1 / 8, x => x.add(12).degradeBy(.5)) // ランダムなオクターブジャンプ
.add(perlin.range(0, .5)) // ランダムなピッチの変化
.superimpose(add(.05)) // 2つ目の、わずかにデチューンされた音声を追加
.note() // "note"で囲む
.decay(.15).sustain(0) // 各音符を同じ長さにする
.s('sawtooth') // 波形
.gain(.4) // 音量を下げる
.cutoff(sine.slow(7).range(300, 5000)), // カットオフを自動化
// コード
"<Am7!3 <Em7 E7b13 Em7 Ebm7b5>>".voicings('lefthand')
.superimpose(x => x.add(.04)) // 2つ目の、わずかにデチューンされた音声を追加
.add(perlin.range(0, .5)) // ランダムなピッチの変化
.note() // "note"で囲む
.s('sawtooth') // 波形
.gain(.16) // 音量を下げる
.cutoff(500) // 固定カットオフ
.attack(1) // ゆっくりフェードイン
).slow(3 / 2)
サウンド機能入門
はじめの一歩
sound("casio")
- 音の操作
- テキストフィールドをクリック
- ctrl+enterを押して再生
- casioからmetalに変更してみる
- ctrl+enterで更新
- ctrl+.で停止
- 他のサウンドも試してみる!
- 例: insect wind jazz metal east crow casio space numbers
サンプル番号をコロン (:) で指定
sound("casio:1")
- 指定したサウンド(この例だとcasio)の種類を変更
- 何も指定しない場合は :0 と同じ
ドラムサウンド
ドラムサウンド基本
sound("bd hh sd oh")
- 始めから様々なドラムセットの音が入っている
- 2つの文字はドラムセットの様々なパートを省略している
- bd = bass drum (バスドラム)
- sd = snare drum (スネアドラム)
- rim = rimshot (リムショット)
- hh = hihat (ハイハット)
- oh = open hihat (オープンハイハット)
- 文字を書き換えて様々なドラムパターンを作ってみよう!
応用: ドラムセットを切り替える
sound("bd hh sd oh").bank("RolandTR909")
- .bank() を使用してドラムセットごと切り替えられる
- その他にも以下のようなドラムマシンがあるので試してみよう!
- AkaiLinn
- RhythmAce
- RolandTR808
- RolandTR707
- ViscoSpaceDrum
- コピペすると楽!
シーケンス
- シーケンス: 反復進行 (はんぷくしんこう sequence)
- 同じ音のまとまりを何度も繰り返すこと
- Strudelでは様々な方法でシーケンスを組み立てられる
シーケンス基本
sound("bd hh sd hh")
- これまでやってきた基本
- スペースで区切ることでシーケンス内で複数のサウンドを再生できる
沢山の音を鳴らす
sound("bd bd hh bd rim bd hh bd")
- シーケンスが長い(たくさんの音がある)ほど速くなる
- シーケンスの中身が1サイクルに押し込められるため
テンポを変更する
sound("bd bd hh bd rim bd hh bd").cpm(40)
- 1つの方法は cpm() を使用する方法
- cpm
- cycle per minutes
- 1分あたり何サイクルするか、という単位
- その他にも方法があるがまた後述
休符
sound("bd hh ~ rim")
サブシーケンス
sound("bd [hh hh] sd [hh bd]")
- [] で囲うとサブシーケンスが作成される
- シーケンスの1要素の中をさらに分割するイメージ
かけ算 – スピードアップ
sound("bd hh*2 rim hh*3")
- 「* (かけ算)」記号はそのシーケンス内で分割してくりかえす
- スピードアップ(カットアップ?)
シーケンスのスピードアップ
sound("bd [hh rim]*2")
高速かけ算
sound("bd hh*16 rim hh*8")
- かけ算の数を大きくすると分割が細かくなる
- 徐々に一定の音程に聞こえてくる
サブ・サブシーケンス
sound("bd [[rim rim] hh]")
- [] を入れ子構造にすることで、サブシーケスのサブシーケンスをつくる
パラレルに演奏
sound("hh hh hh, bd casio")
- コンマ(,)で区切って2つのシーケンスを記述する
- パラレルに2つのシーケンスが演奏される
sound("hh hh hh, bd bd, ~ casio")
sound("hh hh hh, bd [bd,casio]")
サンプル番号でシーケンス
n("0 1 [4 2] 3*2").sound("jazz")
sound("jazz:0 jazz:1 [jazz:4 jazz:2] jazz:3*2")
