yoppa.org


p5.jsで画像データを扱う – 画像の分析・再合成

p5.jsのp5.Imageクラスは、外部のビットマップ画像(Jpeg, GIF、PNGなど)をデータとしてプログラムに読み込むことができます。読み込んだ画像は単に画面に表示するだけでなく、色や明度やサイズを変更して表示することができます。さらには、画像に含まれる全てのピクセルの色情報を読み取り配列に格納することが可能です。そのデータをもとに別の画像を再生成することが可能となり、読み込んだ画像データの色情報をもとにした多彩な表現が可能となります。

今回はp5.jsに画像を読み込んで、分析再合成することで、様々な表現の可能性について探っていきます。

映像資料

スライド資料

投稿作品とランキング

投稿作品 (Shetches that are tagged にする)

人気ランキングTOP5

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

本日の課題!

課題: p5.jsに読み込んだ画像ファイルのデータで表現する!

  • p5.jsに読み込んだ画像ファイルの情報から、新たなイメージを生成する
  • 読み込む画像は自由です
  • 作品は、OpenProcessingに投稿
  • 完成した作品に、タイトルをつける
  • 投稿したURLをアンケートから提出
  • 投稿の際に sfc211029 のタグをつけてください!
  • 締切: 2021年11月3日(水)まで!

アンケートフォーム

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

openFrameworks – 3Dグラフィクスの基礎

この講義では、ここまで主に2次元平面上での描画による表現を扱ってきました。今回は2次元での表現からさらに(文字通り)次元を越えて、3次元空間での表現について考えていきたいと思います。

openFrameworksで3Dグラフィクスを扱う手法はこれまでとさほど変化はありません。なぜなら、openFrameworksの描画の基本はOpenGLで行っています。OpenGLはそもそも3次元のグラフィクスの描画のために開発されたライブラリであり、最初から3次元空間をとり扱うための様々な機能が備わっています。

しかし、3Dの物体を扱うには、これまでとは違った様々な要素が加わります。カメラ(視点)、ライティング、光と影(シェーディング)、奥行の重なりなどといった2次元の平面には無かった様々な技術や概念の理解が必要となります。

スライド資料

映像資料

アンケート

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


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

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

映像資料

スライド資料

サンプルファイル

本日の課題

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

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

ヒント

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

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

ヒント

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

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

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

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

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

スライド資料

参考資料:

サンプルコード

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 – 3Dグラフィクスの基礎

この講義では、ここまで主に2次元平面上での描画による表現を扱ってきました。今回は2次元での表現からさらに(文字通り)次元を越えて、3次元空間での表現について考えていきたいと思います。

openFrameworksで3Dグラフィクスを扱う手法はこれまでとさほど変化はありません。なぜなら、openFrameworksの描画の基本はOpenGLで行っています。OpenGLはそもそも3次元のグラフィクスの描画のために開発されたライブラリであり、最初から3次元空間をとり扱うための様々な機能が備わっています。

しかし、3Dの物体を扱うには、これまでとは違った様々な要素が加わります。カメラ(視点)、ライティング、光と影(シェーディング)、奥行の重なりなどといった2次元の平面には無かった様々な技術や概念の理解が必要となります。

スライド資料

アンケート

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


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

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

映像資料

スライド資料

投稿作品とランキング

投稿作品 (Shetches that are tagged にする)

人気ランキングTOP5

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

本日の課題

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

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

アンケートフォーム

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


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

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

講義動画 (Zoom録画)

スライド資料

今日のスタートポイント

本日は、下記のコードから開始します (コピペして活用してください) 。

ofApp.h

#pragma once
#include "ofMain.h"

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

    float locationX;
    float locationY;
};

ofApp.cpp

#include "ofApp.h"

void ofApp::setup() {
    ofSetFrameRate(60);
    ofSetBackgroundColor(0);

    locationX = 0;
    locationY = 0;
}

void ofApp::update() {
    locationX = locationX + 3;
    locationY = locationY + 2;
}

void ofApp::draw() {
    ofSetColor(31, 127, 255);
    ofDrawCircle(locationX, locationY, 20);
}

アンケート

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


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

アンケート

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


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

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

スライド資料

今日のスタートポイント

本日は、下記のコードから開始します (コピペして活用してください) 。

ofApp.h

#pragma once
#include "ofMain.h"

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

    float locationX;
    float locationY;
};

ofApp.cpp

#include "ofApp.h"

void ofApp::setup() {
    ofSetFrameRate(60);
    ofSetBackgroundColor(0);

    locationX = 0;
    locationY = 0;
}

void ofApp::update() {
    locationX = locationX + 3;
    locationY = locationY + 2;
}

void ofApp::draw() {
    ofSetColor(31, 127, 255);
    ofDrawCircle(locationX, locationY, 20);
}

アンケート

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


「家具の映像」制作チュートリアル (2)

Generative Gestaltung

今回は、第1課題「家具の映像」制作のためのチュートリアルの2回目です。今回は、まず課題制作の参考になりそうな様々なWebサイトを紹介します。後半はその中の1つGenerative Gestaltungをとりあげ、インタラクティブなサンプルを自動的に動くようにする変更方法について解説します。

課題制作のヒント

  • どのように制作を進めていくか?
  • まっさらな状態で頭を悩ませていても、あまり進まないことが多い
  • 参考になりそうな他人のコードを実行してソースを読んでみるのが効果的

参考サイト

家具としての映像を体験 Neort Digital Frame

NEORTでは、選んだお気に入りのデジタルアートを表示する専用アプリケーションが用意されています。Windows版、Mac版があるので、自分のノートPCにインストールして鑑賞してみましょう。(外部モニターだとなお良い)

Generative Gestaltangのサンプルを利用する

  • Generative Gestaltungと今回の課題の相違点
    • マウスなどのインタラクションは無し (自動的に変化させる)
    • フルスクリーンで
    • 派手な変化ではなく徐々にじんわりとした変化させる (場合による)
    • 大きさに関するパラメータはwidthとheightを基準にした相対的なものに
  • どうやってマウスインタラクションを自動的な変化にするか?
    • 例えば、マウスの座標を三角関数を利用した円運動に置き換える
    • x軸とy軸の周波数を変えることで、リサジュー図形の運動にもなる

Generative Gestaltungを元にしたサンプル

  • P_2_1_5_01 を元に自動的に変化するように変更したサンプル

https://openprocessing.org/sketch/1308292