yoppa.org


動きを生みだす – アニメーションとベクトル

今回からいよいよ動きのある表現(= アニメーション)について扱っていきます。アニメーションを実現するには、まず時間を扱う基本構造を知る必要があります。p5.jsでは、setup(), draw() という2つのブロックにわけて、初期化と更新を行うことでアニメーションを実現しています。まず始めはこの基本構造について理解します。次に、これから動きを扱う際に、向きと大きさをもった「ベクトル」という概念を理解します。ベクトルを理解することで、位置や運動を整理して記述することが可能となります。最後に、この基本構造をベクトルを活用して簡単なアニメーションを作成します。

映像資料

スライド資料

ランキング

全提出作品

本日の課題

本日の最終のコードを改造してプログラムにランダムな要素を追加してください

  • 例:
    • 円の色をランダムな色に
    • 円の大きさをランダムに
    • (応用) 円の動きをランダムに
  • 作品は、OpenProcessingに投稿
  • 完成した作品に、タイトルをつける
  • 投稿したURLをアンケートから提出
  • 投稿の際に sfc221028 のタグをつけてください!
  • 締切: 2022年11月2日(水) 23:59まで!

アンケートフォーム

  • 今回も、前回の提出作品の人気投票を行います!
  • 前回のタグ sfc221021 でOpenProcessingで検索 (検索方法をSketches that are tagged にする必用あり)
  • 一番良いと思った作品に1票投票 (自信があれば自分の作品でも可)

TouchDesigner入門(3) – 3DCGに挑戦しよう!

今回は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で法線ベクトルを補正

アンケート

本日の授業に参加した方はアンケートに回答してください。


Sonic Pi 基本3 – コード (和音) とスケール (旋法)

前回「データ構造」で解説したリストは、複数の値をひとつにまとめることができる機能でした。リストをplayのnote(音程)に用いることで、複数の異なる音階の音を同時に演奏することができました。つまり和音(chord)を演奏することが可能です。

Sonic Piでは、コードネームからその和音に含まれる音をリストとして生成する「chord」という関数が搭載されています。この機能を用いることで、コードネームを指定するだけで複雑なコード進行をプログラムで指定することが可能となります。

またchord関数とよく似た機能として、scale関数があります。scaleはスケール(旋法)を指定する関数です。スケール名を指定することで複数の音階から構成される音列を生成することが可能です。

スライド資料

参考資料:

サンプルコード

Chooseによるリストから要素の選択

live_loop :list do
  play choose([52, 55, 59])
  sleep 0.25
end

リストの操作

# 一度に演奏
play [52, 55, 59] 
# オプションを指定して一度に演奏
play [52, 55, 59], amp: 0.3 
# 音階で指定
play [:E3, :G3, :B3] 

# リストの要素にアクセス
loop do
  play [52, 55, 59][1]
  sleep 0.25
end

コード (和音, chord)

# コードいろいろ
live_loop :chord do
  play chord(:C4, :major)
  sleep 1.0
  play chord(:C4, :major7)
  sleep 1.0
  play chord(:C4, :minor)
  sleep 1.0
  play chord(:C4, :minor7)
  sleep 1.0
  play chord(:C4, :dim)
  sleep 1.0
  play chord(:C4, :dim7)
  sleep 1.0
  play chord(:C4, :sus2)
  sleep 1.0
  play chord(:C4, :sus4)
  sleep 1.0
  play chord(:C4, :augmented)
  sleep 1.0
end

カノン進行

live_loop :chord do
  use_synth :fm
  play chord(:C5, :M)
  sleep 1.5
  play chord(:G4, :M)
  sleep 1.5
  play chord(:A4, :m)
  sleep 1.5
  play chord(:E4, :m)
  sleep 1.5
  play chord(:F4, :M)
  sleep 1.5
  play chord(:C4, :M)
  sleep 1.5
  play chord(:F4, :M)
  sleep 1.5
  play chord(:G4, :M)
  sleep 1.5
end

王道進行 (IV△7–V7–iii7–vi progression)

live_loop :chord do
  use_synth :fm
  play chord(:F4, :M7)
  sleep 1.5
  play chord(:G4, '7')
  sleep 1.5
  play chord(:E4, :m7)
  sleep 1.5
  play chord(:A4, :m)
  sleep 1.5
end

TK進行

# TK進行
live_loop :chord do
  use_synth :fm
  play chord(:A4, :m)
  sleep 1.5
  play chord(:F4, :M)
  sleep 1.5
  play chord(:G4, :M)
  sleep 1.5
  play chord(:C4, :M)
  sleep 1.5
end

コードの応用いろいろ

# カノンアルペジオ
live_loop :chord do
  play_pattern_timed chord(:C5, :major), 0.25
  sleep 0.5
  play_pattern_timed chord(:G4, :major), 0.25
  sleep 0.5
  play_pattern_timed chord(:A4, :minor), 0.25
  sleep 0.5
  play_pattern_timed chord(:E4, :minor), 0.25
  sleep 0.5
  play_pattern_timed chord(:F4, :major), 0.25
  sleep 0.5
  play_pattern_timed chord(:C4, :major), 0.25
  sleep 0.5
  play_pattern_timed chord(:F4, :major), 0.25
  sleep 0.5
  play_pattern_timed chord(:G4, :major), 0.25
  sleep 0.5
end
# カノンアルペジオ2
live_loop :chord do
  play_pattern_timed chord(:C5, :major), [0.25, 0.5]
  sleep 0.5
  play_pattern_timed chord(:G4, :major), [0.25, 0.5]
  sleep 0.5
  play_pattern_timed chord(:A4, :minor), [0.25, 0.5]
  sleep 0.5
  play_pattern_timed chord(:E4, :minor), [0.25, 0.5]
  sleep 0.5
  play_pattern_timed chord(:F4, :major), [0.25, 0.5]
  sleep 0.5
  play_pattern_timed chord(:C4, :major), [0.25, 0.5]
  sleep 0.5
  play_pattern_timed chord(:F4, :major), [0.25, 0.5]
  sleep 0.5
  play_pattern_timed chord(:G4, :major), [0.25, 0.5]
  sleep 0.5
end

スケール (旋法, scale)

# いろいろなスケール (旋法)
live_loop :scale do
  play_pattern_timed scale(:C5, :major), 0.25
  sleep 0.5
  play_pattern_timed scale(:C5, :minor), 0.25
  sleep 0.5
  play_pattern_timed scale(:C5, :iwato), 0.25
  sleep 0.5
  play_pattern_timed scale(:C5, :ritusen), 0.25
  sleep 0.5
  play_pattern_timed scale(:C5, :diatonic), 0.25
  sleep 0.5
  play_pattern_timed scale(:C5, :augmented), 0.25
  sleep 0.5
  play_pattern_timed scale(:C5, :bartok), 0.25
  sleep 0.5
end

7つのモード (mode)

# モード
live_loop :live do
  play_pattern_timed scale(:C4, :ionian), 0.25
  sleep 0.5
  play_pattern_timed scale(:D4, :dorian), 0.25
  sleep 0.5
  play_pattern_timed scale(:E4, :phrygian), 0.25
  sleep 0.5
  play_pattern_timed scale(:F4, :lydian), 0.25
  sleep 0.5
  play_pattern_timed scale(:G4, :mixolydian), 0.25
  sleep 0.5
  play_pattern_timed scale(:A4, :aeolian), 0.25
  sleep 0.5
  play_pattern_timed scale(:B4, :locrian), 0.25
  sleep 0.5
end

旋法 (scale) を用いた即興

# スケールによる即興 1
live_loop :live do
  use_synth :prophet
  play choose(scale(:c3, :mixolydian, num_octaves: 3)),
    cutoff: rrand(60, 100)
  sleep 0.25
end
# スケールによる即興 2
live_loop :live do
  use_synth :prophet
  play scale(:C2, :ionian, num_octaves: 5).shuffle.take(4),
    cutoff: rrand(60, 100), release: 3.0,
    pan: rrand(-1, 1), amp: rrand(1.0, 2.0)
  sleep 0.5
end
## 複数のパートによる即興
live_loop :live do
  use_synth :prophet
  play scale(:C3, :ionian, num_octaves: 4).shuffle.take(3),
    cutoff: rrand(60, 100)
  sleep 0.25
end

live_loop :live2 do
  use_synth :fm
  play scale(:D5, :dorian, num_octaves: 2).shuffle.take(1),
    release: 0.1, cutoff: rrand(40, 100)
  sleep 0.125
end
# エフェクトをつける + 転調可能に
base = :D3
live_loop :live do
  with_fx :echo , decay: 2.0, phase: 0.75 do
    use_synth :prophet
    play scale(base, :dorian, num_octaves: 4).shuffle.take(2),
      cutoff: rrand(60, 120), release: 0.3
    sleep 0.125
  end
end

live_loop :live2 do
  with_fx :echo , decay: 2.0, phase: 0.25 do
    use_synth :fm
    play scale(base + 24, :dorian, num_octaves: 2).shuffle.take(1),
      release: 0.1, cutoff: rrand(80, 110)
    sleep 0.125
  end
end
## コードパートを付加
base = :E3
live_loop :harmony do
  with_fx :panslicer, phase: 0.25 do
    use_synth :dsaw
    play chord(base, :m7, num_octaves: 4),
      release: 3.0, cutoff: 95, amp: 1.5
    sleep 4
  end
end
live_loop :melo1 do
  with_fx :echo , decay: 1.0, phase: 0.75 do
    use_synth :prophet
    play scale(base, :dorian, num_octaves: 4).shuffle.take(2),
      cutoff: rrand(60, 120), release: 0.5
    sleep 0.125
  end
end
live_loop :melo2 do
  with_fx :echo , decay: 1.0, phase: 0.625 do
    use_synth :fm
    play scale(base + 24, :dorian, num_octaves: 2).shuffle.take(1),
      release: 0.1, cutoff: rrand(60, 90), amp: 0.7
    sleep 0.125
  end
end

アンケート

本日の授業に参加した方は、下記のアンケートに答えてください。


TouchDesigner入門(2) – 簡単な画像処理とFeedback、Switch TOPとキーボード入力

今回も前回に引続き、TouchDesignerの入門的な内容をTDSWの映像を教材にしながら学んでいきます。今回も主にTOPとCHOPを中心にした内容になっています。まず始めに、TOPを用いた画像処理 (輪郭抽出、グレースケール化、ぼかし、発光など) を行います。さらに高度な画像処理としてフィードバックループを用いた残像効果を作成します。後半はこの画像処理を、CHOPを用いてキーボードの入力によって切り替えられるところまでを目指します。

映像教材

【 TouchDesigner初級講座 】簡単な画像処理とFeedback #02
【TouchDesigner初級講座】Switch TOPとキーボード入力 #03

スライド資料

サンプルファイル

本日の課題

今日の最終のプログラムを改造して以下の処理を追加してください。

  • 画像処理の種類を4種類からさらに増やしてみる
  • キーボードの「3」を押すとさらに別の変化が起こるようにする
    • 回転スピードが変更
    • タイルの数の増減
    • …etc.

アンケート

本日の講義に参加した方は以下のアンケートに答えてください。


反復と乱数

プログラムを構造化していく際に、3つの重要な構成要素があります。それは、「順次 (Sequence)」、「反復 (Iteration)」、「分岐 (Selection)」 です。今回は、この3つの構成要素の中の反復 (Iteration) に注目して、p5.jsで形を描きながら反復について考えます。また、一意的でないランダムな値である「乱数」と反復を組合せて、どのような表現か可能となるか探求していきます。

映像資料

スライド資料

投稿作品とランキング

ランキング

おめでとうございます!

本日の課題!!

乱数 (random) と繰り返し (for) を使用して、表現してみましょう!

  • 作品は、OpenProcessingに投稿
  • 完成した作品に、タイトルをつける
  • 投稿したURLをアンケートから提出
  • 投稿の際に sfc221021 のタグをつけてください!
  • 締切: 2022年10月26日(水)まで!

アンケートフォーム

  • 今回のアンケートフォームから、前回の提出作品の人気投票を行います!
  • 前回のタグ sfc221014 でOpenProcessingで検索 (検索方法をSketches that are tagged にする必用あり)
  • 一番良いと思った作品に1票投票 (自信があれば自分の作品でも可)

Sonic Pi 基本2 – プログラムの構造化とデータ構造

引き続きSonic Piの基本について実際に音を出して確認しながら学習していきます。今回はSonic Piの言語の構造に注目して様々な機能を紹介していきます。Sonic PiはRubyというプログラミング言語をベースにしています。ですのでRubyの様々な構造をSonic Piで使用することが可能です。今回は、プログラムを構成する3つの大きな構造、順次処理 (Sequence)、繰り返し(Iteration)、条件分岐(Selection)をSonic Piで応用して演奏してみます。また後半はリストというデータ構造について紹介します。最後はここまでの知識を総動員して、Steve Reichの “Piano Phase” という曲をSonic Piで再現してみます。

スライド資料

サンプルプログラム

回数を指定した反復

3.times do
  play 50
  sleep 0.5
  sample :elec_blup
  sleep 0.5
  play 62
  sleep 0.25
end

反復のネスト + ループ

live_loop :live do
  sample :drum_heavy_kick
  2.times do
    sample :elec_blip2, rate: 2
    sleep 0.25
  end
  
  sample :elec_snare
  4.times do
    sample :drum_tom_mid_soft
    sleep 0.125
  end
end

if文による条件分岐

i = 0
live_loop :live do
  if i % 4 == 0 then
    sample :drum_heavy_kick
  else
    sample :drum_cymbal_closed
  end
  sleep 0.125
  i = i+1
end

if文とone_inによる確率的な条件分岐

live_loop :live do
  if one_in(3)
    sample :drum_heavy_kick
  else
    sample :drum_cymbal_closed
  end
  sleep 0.125
end

if文とone_in その2

live_loop :live do
  if one_in(3)
    sample :drum_heavy_kick
    sleep 0.25
  else
    sample :drum_cymbal_closed
    sleep 0.125
  end
end

複数のリズムの共存

live_loop :live do
  sample :drum_heavy_kick
  4.times do
    sample :elec_blip2, rate: 2
    sleep 1.0/8.0
  end
  sample :elec_snare
  4.times do
    sample :drum_tom_mid_soft
    sleep 0.125
  end
end

live_loop :live2 do
  sample :drum_heavy_kick
  3.times do
    sample :elec_blip2, rate: 2
    sleep 1.0/8.0
  end
  sample :elec_snare
  4.times do
    sample :drum_tom_mid_soft
    sleep 0.125
  end
end

リスト

live_loop :live do
  play choose([ 52, 55, 59 ])
  sleep 0.25
end

# 一度に演奏
play [ 52, 55, 59 ]

# オプションを指定して一度に演奏
play [ 52, 55, 59 ], amp: 0.3

# 音階で指定
play [ :E3, :G3, :B3 ]

# リストの要素にアクセス
loop do
  play [ 52, 55, 59 ][ 1 ]
  sleep 0.25
end
# 55が演奏される

Piano Phase

notes = [:E4, :Fs4, :B4, :Cs5, :D5, :Fs4, :E4, :Cs5, :B4, :Fs4, :D5, :Cs5]
 
use_synth :prophet
with_fx :reverb do
  live_loop :reich1 do
    i = 0
    12.times do
      play (notes[i]), release: 0.4, pan: 0.8, cutoff: 80
      sleep 0.15
      i = i + 1
    end
  end
   
  live_loop :reich2 do
    i = 0
    12.times do
      play (notes[i])+12, release: 0.4, pan: -0.8, cutoff: 80
      sleep 0.1501
      i = i + 1
    end
  end
end

アンケート

本日の授業に参加した方は以下のアンケートに答えてください。


デザイン演習 IVc – 情報メディアデザインテーマ

「自分の興味の枠 (ローカリティ) を越えて – 自分自身のテーマを探求する」

デザイン演習 IV C (情報メディアデザインスタジオ) では、具体的なテーマ (場所、手法、アウプット手段など) はあえて設けません。そうではなく、自分自身のテーマを探求してそれを表現するということ自体を課題にします。

今後 (順調にいけば) 取り組んでいく4年次の卒業研究では、研究テーマ自体を自分自身で探して決定してさらにそれをプレゼンテーションしていく必要があります。そのためには、自分は何に興味があるのか、何がしたいのか探求していく必要があります。

今期のデザイン演習 IV Cはその予行演習として、自分自身でテーマをみつけて、さらにそれを表現することに挑戦します。自分自身で本当に面白いと思うテーマをみつけて探求してください。

野心的なテーマに取り組んでいって、結果として失敗する可能性も大いにあります。しかし、今期の演習では失敗することも歓迎します。ここでいろいろ試して失敗した経験が、最終的な卒業研究の糧となることと思います。

演習の進め方

1. 自分の興味ある対象の事例を集める

  • よほどの天才でない限り、全くゼロの状態から何かを作ることは困難
  • 何らかの先行する作品や研究などの事例をもとに、そこから自分自身の興味を明確にしていく
  • 自分の興味の対象の具体的な事例を集めてその内容をプレゼンテーションする

2. 興味のある対象から自分自身のテーマをみつける

  • 収集した作品などの事例から自分の興味を絞っていく
  • どこに魅力を感じているのか?
  • 共通するテーマは何か?

3. いろいろ試行錯誤しながらプロトタイプを制作する

  • いきなり完璧なものは目指さない
  • まずは、いろいろ手を動かしながら実際に動くものを作る
  • うまくいかない場合は、別の手段を考える

4. 作品として表現する

  • 最終的に自分自身のテーマを作品として表現する
  • 完全なものでなくても、目指している方向性が分かるもの
  • 野心的なテーマにトライした結果失敗した、ということでも良い

デザイン演習 IV Cは今期から初めて開講される演習です。いろいろ試行錯誤しながら一緒に考えていきましょう!


技術的な基礎固め

本日のデザイン演習 IVcの後半は今後の制作やリサーチのための基礎固めとして、1. リサーチ方法について (Google Scholar)、2. ドキュメンテーション (Markdown) 、3. バージョン管理 (git, github) の3つのトピックスについて取り上げてきます。

1. リサーチ方法について

信頼できる情報を検索しよう!

  • Google検索は便利、だが検索結果は玉石混合
  • Wikipediaも便利。しかし一次資料 (※そのテーマに関する大元の情報) ではない。
  • Google論文検索 (Google Scholar) を積極的に活用しよう
    • https://scholar.google.com/
    • その論文の引用数なども参照できる
    • 参考文献リストに載せる際の形式に変換 (MLA、APA、ISO 960)
    • 参考 : 引用文献スタイルの違い(APA、MLA、バンクーバー、シカゴ)
    • 例: MLAの場合
      • 田所淳. “技術・製品スキル Web のポテンシャルを引き出す HTML5 (NEW・第 1 回) HTML5 とは何なのか 文書構造をより厳密に示せる, アプリの基盤機能が拡充.” 日経 systems 216 (2011): 83-87.
      • 田所淳. Processing クリエイティブ・コーディング入門: コードが生み出す創造表現. 技術評論社, 2017.
  • どんどん参考文献を載せるのはとても良いこと! (逆に参考文献が少ないと印象が悪い)

2. ドキュメンテーション

Markdown記法の紹介

Markdown(マークダウン)は、文章の書き方です。デジタル文書を活用する方法として考案されました。特徴は、

  • 手軽に文章構造を明示できること
  • 簡単で、覚えやすいこと
  • 読み書きに特別なアプリを必要としないこと
  • それでいて、対応アプリを使えば快適に読み書きできること

などです。Markdownはジョン・グルーバー(John Gruber)によって2004年に開発され、最初は Daring Fireball: Markdown で公開されました。その後、多くの開発者の手を経ながら発展してきました。

  • 何で書くか?
    • 基本はテキストエディターであれば何でも
    • Visual Studio Codeで記述するといろいろ便利 (プレビュー機能など)
    • その他いろいろ : https://www.markdownguide.org/tools/
  • 基本文法をマスターする
    • https://www.markdown.jp/syntax/
    • とりあえずは、「段落」「箇条書き」「引用」「リンク」「強調」あたりを知っておけば充分!
  • このテキスト自体もMarkdown

3. バージョン管理

GitとGithubの紹介

Git

  • Gitについて
    • https://git-scm.com/
    • プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システム
    • Linuxの開発者であるリーナス・トーバルズによって開発

Gitって何? 2分で解説

1時間で学ぶGitの基本

Github

Githubって何?

4. 実習!

実際にGitとGithubを使用して、Markdownの文章のバージョン管理を試してみます!

  1. Gitのインストール
  2. ローカルリポジトリの作成
  3. Githubにアカウント作成
  4. Markdownで実験用の書類を作成
  5. コミット (Commit)
    • 何度かコミット
    • コミットの取消
  6. 履歴の確認
  7. 以前のコミットからブランチ (branch) を作成
  8. ブランチのマージ (marge)
    • コンフリクトの解消法
  9. リモートリポジトリの活用
    • Githubへ反映 (push)
  10. リポジトリの共有
    • Clone作成
    • ローカルリポジトリで更新
    • Cloneの
    • Pull Requestの作成
    • マージ

次回までの課題!

Githubに制作のためのリサーチノートを作成する!

  • バージョン管理の練習をしながら
  • 参考となるものはどんどんリンク
  • Markdownで作成

TouchDesigner入門(1) – バナナを回す! 基本操作とTOPの基本

今回からいよいよTouchDesignerを使って映像を制作していきます。まず始めにTouchDesignerのインストールと使用のためのキーが正しく登録できているか確認します。その上で、今回はTDSW YouTube Academyの映像を教材にして、基本操作を習得していきます。

スライド資料

本日の映像教材

【Introduction to TouchDesigner】Let’s rotate Banana in 10min ! #00
【 TouchDesigner初級講座 】基本操作と基本のTOP編 #01

本日の課題

チュートリアルを終えたら、以下の課題を行ってください!

  • 1. バナナの画像を別の画像に変更して回転させる!
    • ヒント: movieFilein TOPのパラメーターで変更する
  • 2. 回転する動きを、0°〜360°のくりかえしではなく以下の動きに
    • -180° 〜 180°
    • 180° 〜 -180°
    • 以上をくりかえす (シーソーのような動きに)
    • ヒント: LFO CHOPのパラメータを変更
  • 3. 応用: 自由課題
    • いろいろパラメーターや画像を変更して、面白い動きを作ってみる!

アンケート

本日の講義に参加した方は下記のアンケートに回答してください。


かたちとコード – p5.jsで図形を描くには?

この講義では、p5.jsを使用してコードによるデザインを行います。その最初の一歩として、コードによって「かたち」を描くにはどうすれば良いのか考えていきます。

まず始めに、1950年代〜70年代の、コンピューター黎明期から発展期におけるコード(プログラム)による様々な視覚表現について紹介します。過去の作家がどのようなアイデアで、何を表現しようとしてきたのか、その歴史を辿ります。

後半は、そうした歴史を踏まえた上で、 p5.jsで実際に図形を描いていきます。まずp5.jsの操作基本を解説し、簡単な図形を描きながらp5.jsでのプログラミングの基本を学びます。

動画資料

スライド資料

投稿作品とランキング

ランキング

おめでとうございます!!

本日の課題

テーマ: 「p5.js基本図形と色による画面構成」

ここまで解説したp5.jsの機能を活用して画面構成をしてみましょう! 座標、色、数値による図形の描画に慣れるのが目的です。 次回の授業の冒頭で優秀作品を紹介していきます。

  • 完成したら何かタイトルをつける
  • 完成した作品はOpenProcessingに投稿してアンケートフォームからURLを提出
  • 投稿の際に sfc221014 のタグをつけてください!
  • 提出締切は、2021年10月20日(木) までとします

課題提出 + アンケート

課題の提出は以下のアンケートフォームから。

アンケートフォーム (※提出者の確認は学籍番号をキーにしています。間違いが無いかよく確認してください。)