yoppa org – 2020

力と運動 : openFrameworksで物理的な運動を表現する

これまでやってきたように、openFrameworksで位置と運動のベクトル（glm::vec2）を操作することで、アニメーションを作成することができました。単純な動きの場合はこうした座標の足し算引き算で対応可能です。しかし、ここからさらに発展させて、よりリアルな動きを実現しようとすると、限界があります。今回は、単なる座標操作ではなく、運動の背後にある物理的な原理を理解して、その本質に迫ります。

アイザック・ニュートンは、運動の法則を基礎として構築した、力学体系を構築しました（ニュートン力学）。物体の運動や力、質量といったものは、ニュートンの運動の法則によって説明できます。

第1法則（慣性の法則）: 質点は、力が作用しない限り、静止または等速直線運動する
第2法則（ニュートンの運動方程式）: 質点の加速度は、そのとき質点に作用する力に比例し、質点の質量に反比例する
第3法則（作用・反作用の法則）: 二つの質点の間に相互に力が働くとき、質点 2 から質点 1 に作用する力と、質点 1 から質点 2 に作用する力は、大きさが等しく、逆向きである

今回は、このニュートンの運動の法則を援用しながら、様々な動きや力についてopenFrameworksで実装しながら、動きに関する理解を深めていきます。

映像資料

本日のスタート地点のプログラム (Zipを展開して、appsフォルダ内のmyAppsフォルダに入れてください)

スライド資料

力と運動 : openFrameworksで物理的な運動を表現する

サンプルファイル

サンプルファイル

アンケート

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

アンケート

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

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

映像資料

スライド資料

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

本日の課題

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

例:
- 円の色をランダムな色に
- 円の大きさをランダムに
- (応用) 円の動きをランダムに

OpenProcessingにタイトルをつけてアンケートから投稿してください。

今回から投稿する際にタグをつけて投稿します。今回のタグは「sfc_desipro201030」にしてください!

アンケートフォーム

提出課題

TouchDesigner入門(4) – 音楽に連動させよう!

今回は、TouchDesignerの初級編の4回目として、音楽に反応する3Dオブジェクトを作成します。前回の回転する立方体のプログラムを改造して、音楽ファイルのデータをCHOPに読み込んでその音量の最大値を入力にして3Dオブジェクトの大きさや色、背景のグラデーションなど様々な属性を変化させて、音楽に反応して動いているように感じられる3D表現に挑戦します。

映像資料

スライド資料

TouchDesigner入門(4) – 音楽に連動させよう!

サンプルファイル

本日の課題

今日のプログラムを改造して、以下のプログラムを作成してみましょう!

1. 音量によってSOPの形状が変化するようにしてみる!

ヒント

SOPの切り替えは、Switch SOPを用いる
SOPの数に応じて、Triggerの出力のスケールを変更する → Math SOP

2. 音量によって3Dの形状をノイズで変形してみる

ヒント

前回のノイズのプログラムをヒントにする
Noise SOPのパラメータを音量で変化させる
Attribute Create SOPで法線マップの補正を忘れずに!

openFrameworks + OOP – オブジェクト指向プログラミング入門

これまでのopenFrameworksのプロジェクトは、ofApp.h と ofApp.cpp という2つのファイルに全てのプログラムを記述してきました。しかし、この方法では徐々にプロジェクトが複雑になり巨大化するうちに、扱いが困難になってきます。プログラミングをわかりやすく保つには、役割ごとに内容を分割して記述すべきです。openFrameworksの元となるプログラミング言語であるC++では「オブジェクト」という単位でプログラムを構造化していきます。このオブジェクトを基本単位にしたプログラミング手法のことを「オブジェクト指向プログラミング (Object Oriented Programing = OOP)」と呼びます。OOPはC++だけでなく、Java、Python、Ruby、C#、Objective-C、Swiftなどでも利用されていて、現在のプログラミング言語の主流となっているパラダイムです。

今回は、このOOPをopenFrameworksで実現する方法をこれまで扱ってきた位置を速度を2次元のベクトル (glm::vec2) で記述したアニメーションを基本単位にしてオブジェクト指向プログラミングを行います。今回の内容が今後のより本格的な作品制作のための重要なテクニックとなっていきます。しっかり理解していきましょう。

プログラムサンプル

今日の動画は以下のプログラムを元に発展させていきます。新規にプロジェクトを作成して、下記のofApp.hとofApp.cppをコピー&ペーストして作業を開始してください。

ofApp.h

#pragma once
#include "ofMain.h"

class ofApp : public ofBaseApp {
public:
    void setup();
    void update();
    void draw();

    glm::vec2 location;
    glm::vec2 velocity;
};

ofApp.cpp

#include "ofApp.h"

void ofApp::setup() {
    ofSetCircleResolution(16);
    ofSetFrameRate(60);
    location = glm::vec2(ofGetWidth() / 2, ofGetHeight() / 2);
    velocity = glm::vec2(ofRandom(-2, 2), ofRandom(-2, 2));
}

void ofApp::update() {
    location = location + velocity;
    if (location.x > ofGetWidth() || location.x < 0) {
        velocity.x = velocity.x * -1;
    }
    if (location.y > ofGetHeight() || location.y < 0) {
        velocity.y = velocity.y * -1;
    }
}

void ofApp::draw() {
    ofSetColor(0, 127, 255, 200);
    ofDrawCircle(location, 10);
}

映像内で作成したプログラムは以下からダウンロードしてください。

サンプルプログラム

スライド資料

openFrameworks + OOP – オブジェクト指向プログラミング入門

本日の課題

動画資料で紹介したParticleVec2クラスを使用した2次元のアニメーションを改造して、3次元空間で直線運動するParticleVec3クラスを作成し動かしてください。

ヒント
- glm::vec2 を glm::vec3に変更する
- (x, y) の位置と速度から、 (x, y, z) の位置と速度へ
- 初期位置、初期速度、バウンドする処理にz座標の要素を加える

次週までに考えてきてもらい、次回授業の冒頭で発表していただきます!

openFrameworks + OOP – オブジェクト指向プログラミング入門

映像資料

プログラムサンプル

ofApp.h

#pragma once
#include "ofMain.h"

class ofApp : public ofBaseApp {
public:
    void setup();
    void update();
    void draw();

    glm::vec2 location;
    glm::vec2 velocity;
};

ofApp.cpp

#include "ofApp.h"

void ofApp::setup() {
    ofSetCircleResolution(16);
    ofSetFrameRate(60);
    location = glm::vec2(ofGetWidth() / 2, ofGetHeight() / 2);
    velocity = glm::vec2(ofRandom(-2, 2), ofRandom(-2, 2));
}

void ofApp::update() {
    location = location + velocity;
    if (location.x > ofGetWidth() || location.x < 0) {
        velocity.x = velocity.x * -1;
    }
    if (location.y > ofGetHeight() || location.y < 0) {
        velocity.y = velocity.y * -1;
    }
}

void ofApp::draw() {
    ofSetColor(0, 127, 255, 200);
    ofDrawCircle(location, 10);
}

映像内で作成したプログラムは以下からダウンロードしてください。

サンプルプログラム

スライド資料

openFrameworks + OOP – オブジェクト指向プログラミング入門

本日の課題

ヒント
- glm::vec2 を glm::vec3に変更する
- (x, y) の位置と速度から、 (x, y, z) の位置と速度へ
- 初期位置、初期速度、バウンドする処理にz座標の要素を加える

今回はアンケートで提出ではなく、次週までに考えてきてもらい、次回授業の冒頭で発表していただきます!

本日参加した方は以下のアンケートに回答してください!

アンケートフォーム

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

今回はTouchDesignerの入門編として、いよいよ3次元のグラフィクスに挑戦します! SOP (Surface Operator) の使い方から始めて、Render COMPとカメラとライティングを使用したレンダリング、MAT (Material) の基本などを学習していきます。後半は応用編として、Switch SOPによる3D図形の切り替えや、Noise SOPによる図形の変形などを行います。

映像教材

スライド資料

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

サンプルファイル

本日の課題

今日のプログラムを改造して、以下のプログラムを作成してみましょう!

1. Box以外の図形を追加してキーボードの入力で切り替えられるようにする

ヒント
- Box以外の図形 – Torus、Tube、Grid、Sphereなど
- SOPの切り替えは、Switch SOPを用いる
- キーボードによるスイッチングは前回の内容を参照

2. 3Dの形状をノイズで変形してみる

ヒント
- Noise SOPで変形する
- Attribute Create SOPで法線ベクトルを補正

反復と乱数

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

映像資料

スライド資料

反復と乱数

本日の課題!!

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

作品は、OpenProcessingに投稿
完成した作品に、タイトルをつける
投稿したURLをアンケートから提出
締切: 2020年10月29日まで!

アンケートフォーム

提出作品

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で再現してみます。

スライド資料

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

サンプルプログラム

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

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

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

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

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

スライド資料

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

サンプルコード

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

# コードいろいろ
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

# 王道進行
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進行
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

# いろいろなスケール (旋法)
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

# モード
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

# スケールによる即興 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(:C3, :ionian, num_octaves: 4).shuffle.take(3),
    cutoff: rrand(60, 100)
  sleep 0.25
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

openFrameworksで複数の図形を動かす – 配列 (Array) と可変長配列 ( std::vector)

前回はopenFrameworksで、位置と速度という2つ変数を使用して図形1つをアニメーションさせるところまで到達できました。今回はこのプログラムを応用して複数の図形を同時に動かす方法について解説していきます。複数の図形を動かすには位置と速度という2つのベクトルを個別の変数にではなくまとめて取り扱うデータの格納方法が必要となります。こうした場合には配列(Array)を使用すると便利です。それぞれのベクトルを配列にまとめることで、大量の図形のアニメーションをシンプルに記述することが可能です。さらに、あらかじめ物体の最大数が決まっていない際には、可変長配列 (std::vector) を使用するという方法もあります。この方法もあわせて解説していきます。

スライド資料

openFrameworksで複数の図形を動かす – 配列 (Array) と可変長配列 ( std::vector)

サンプルファイル

サンプルファイル

本日の課題

本日の動画で作成した最後のプログラムを元にして、何か1箇所以上を変更したプログラムを作成してください。

基本編
- 円の色
- 円の大きさ
- 図形の形 (円から別のかたちに)
応用編
- 動きの変化 (加速・減速、直線以外の動きなど)
- 円の色を別々の色に塗り分ける
- インタラクション (マウスドラッグで円が増えるなど)

映像資料

スライド資料

サンプルファイル

アンケート

映像資料

スライド資料

本日の課題

提出課題

人気TOP5

映像資料

スライド資料

サンプルファイル

本日の課題

1. 音量によってSOPの形状が変化するようにしてみる!

2. 音量によって3Dの形状をノイズで変形してみる

プログラムサンプル

スライド資料

本日の課題

映像資料

プログラムサンプル

スライド資料

本日の課題

映像教材

スライド資料

サンプルファイル

本日の課題

映像資料

スライド資料

本日の課題!!

提出作品

人気TOP5!!

スライド資料

サンプルプログラム

スライド資料

サンプルコード

スライド資料

サンプルファイル

本日の課題