├── w07_01 ├── data │ └── photo.jpg └── w07_01.pde ├── w07_02 ├── data │ └── photo.jpg └── w07_02.pde ├── w07_03 ├── data │ └── photo.jpg └── w07_03.pde ├── w07_04 ├── data │ └── photo.jpg └── w07_04.pde ├── w07_05 ├── data │ └── photo.jpg └── w07_05.pde ├── w07_06 ├── data │ └── photo.jpg └── w07_06.pde ├── w07_07 ├── data │ └── photo.jpg └── w07_07.pde ├── w07_08 ├── data │ └── photo.jpg └── w07_08.pde ├── w07_09 ├── data │ └── photo.jpg └── w07_09.pde ├── w07_10 ├── data │ └── photo.jpg └── w07_10.pde ├── w07_11 ├── data │ └── photo.jpg └── w07_11.pde ├── w10_01 ├── data │ └── sound.aiff └── w10_01.pde ├── w10_02 ├── data │ └── sound.aiff └── w10_02.pde ├── w10_03 ├── data │ └── sound.aiff └── w10_03.pde ├── w10_04 ├── data │ └── sound.aiff └── w10_04.pde ├── w03_01 └── w03_01.pde ├── w02_06 └── w02_06.pde ├── w02_01 └── w02_01.pde ├── w02_05 └── w02_05.pde ├── w02_03 └── w02_03.pde ├── w03_07 └── w03_07.pde ├── w03_10 └── w03_10.pde ├── w02_02 └── w02_02.pde ├── w02_04 └── w02_04.pde ├── w03_08 └── w03_08.pde ├── w03_09 └── w03_09.pde ├── w03_04 └── w03_04.pde ├── w04_01 └── w04_01.pde ├── w03_03 └── w03_03.pde ├── w08_02 └── w08_02.pde ├── w03_05 └── w03_05.pde ├── w03_12 └── w03_12.pde ├── w08_01 └── w08_01.pde ├── w09_01 └── w09_01.pde ├── w03_06 └── w03_06.pde ├── w03_11 └── w03_11.pde ├── w05_01 └── w05_01.pde ├── w08_03 └── w08_03.pde ├── w12_01 └── w12_01.pde ├── w03_02 └── w03_02.pde ├── w05_02 └── w05_02.pde ├── w11_04 └── w11_04.pde ├── w05_03 └── w05_03.pde ├── w10_05 └── w10_05.pde ├── w04_02 └── w04_02.pde ├── w11_05 └── w11_05.pde ├── w11_07 └── w11_07.pde ├── w08_04 └── w08_04.pde ├── w04_04 └── w04_04.pde ├── w05_04 └── w05_04.pde ├── w12_05 └── w12_05.pde ├── w08_07 └── w08_07.pde ├── w05_05 └── w05_05.pde ├── w10_06 └── w10_06.pde ├── w05_06 └── w05_06.pde ├── w10_07 └── w10_07.pde ├── w04_03 └── w04_03.pde ├── w08_05 └── w08_05.pde ├── w11_06 └── w11_06.pde ├── w08_06 └── w08_06.pde ├── w05_07 └── w05_07.pde ├── w12_02 └── w12_02.pde ├── w12_03 └── w12_03.pde ├── w06_01 └── w06_01.pde ├── w09_03 └── w09_03.pde ├── w10_08 └── w10_08.pde ├── w04_05 └── w04_05.pde ├── w11_02 └── w11_02.pde ├── w12_04 └── w12_04.pde ├── w06_02 └── w06_02.pde ├── w09_02 └── w09_02.pde ├── w10_09 └── w10_09.pde ├── w11_01 └── w11_01.pde ├── w04_06 └── w04_06.pde ├── w06_03 └── w06_03.pde ├── w09_04 └── w09_04.pde ├── w06_04 └── w06_04.pde ├── w11_08 └── w11_08.pde ├── w12_06 ├── w12_06.pde └── ParticleVec3.pde ├── w11_03 └── w11_03.pde ├── w06_05 └── w06_05.pde ├── w06_06 └── w06_06.pde ├── w06_07 └── w06_07.pde └── readme.md /w07_01/data/photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tado/sfc_design16_examples/HEAD/w07_01/data/photo.jpg -------------------------------------------------------------------------------- /w07_02/data/photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tado/sfc_design16_examples/HEAD/w07_02/data/photo.jpg -------------------------------------------------------------------------------- /w07_03/data/photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tado/sfc_design16_examples/HEAD/w07_03/data/photo.jpg -------------------------------------------------------------------------------- /w07_04/data/photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tado/sfc_design16_examples/HEAD/w07_04/data/photo.jpg -------------------------------------------------------------------------------- /w07_05/data/photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tado/sfc_design16_examples/HEAD/w07_05/data/photo.jpg -------------------------------------------------------------------------------- /w07_06/data/photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tado/sfc_design16_examples/HEAD/w07_06/data/photo.jpg -------------------------------------------------------------------------------- /w07_07/data/photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tado/sfc_design16_examples/HEAD/w07_07/data/photo.jpg -------------------------------------------------------------------------------- /w07_08/data/photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tado/sfc_design16_examples/HEAD/w07_08/data/photo.jpg -------------------------------------------------------------------------------- /w07_09/data/photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tado/sfc_design16_examples/HEAD/w07_09/data/photo.jpg -------------------------------------------------------------------------------- /w07_10/data/photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tado/sfc_design16_examples/HEAD/w07_10/data/photo.jpg -------------------------------------------------------------------------------- /w07_11/data/photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tado/sfc_design16_examples/HEAD/w07_11/data/photo.jpg -------------------------------------------------------------------------------- /w10_01/data/sound.aiff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tado/sfc_design16_examples/HEAD/w10_01/data/sound.aiff -------------------------------------------------------------------------------- /w10_02/data/sound.aiff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tado/sfc_design16_examples/HEAD/w10_02/data/sound.aiff -------------------------------------------------------------------------------- /w10_03/data/sound.aiff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tado/sfc_design16_examples/HEAD/w10_03/data/sound.aiff -------------------------------------------------------------------------------- /w10_04/data/sound.aiff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tado/sfc_design16_examples/HEAD/w10_04/data/sound.aiff -------------------------------------------------------------------------------- /w03_01/w03_01.pde: -------------------------------------------------------------------------------- 1 | size(400, 400); 2 | 3 | rect(100, 100, 200, 200); 4 | rect(100, 100, 100, 100); 5 | rect(100, 100, 50, 50); -------------------------------------------------------------------------------- /w02_06/w02_06.pde: -------------------------------------------------------------------------------- 1 | size(400, 400); 2 | 3 | fill(0); 4 | rect(40, 40, 160, 160); 5 | rect(200, 200, 160, 160); 6 | 7 | fill(255); 8 | rect(40, 200, 160, 160); 9 | rect(200, 40, 160, 160); -------------------------------------------------------------------------------- /w02_01/w02_01.pde: -------------------------------------------------------------------------------- 1 | size(800, 600); // 画面のサイズを指定 2 | 3 | point(100, 200); // 点を描画 4 | line(80, 40, 700, 500); // 線を描画 5 | rect(200, 300, 400, 200); // 四角形を描画 6 | ellipse(500, 300, 300, 200); // 楕円を描画 -------------------------------------------------------------------------------- /w02_05/w02_05.pde: -------------------------------------------------------------------------------- 1 | size(400, 400); 2 | 3 | noFill(); 4 | 5 | ellipse(200, 200, 400, 400); 6 | ellipse(100, 200, 200, 200); 7 | ellipse(300, 200, 200, 200); 8 | ellipse(200, 100, 200, 200); 9 | ellipse(200, 300, 200, 200); -------------------------------------------------------------------------------- /w07_01/w07_01.pde: -------------------------------------------------------------------------------- 1 | PImage img; //画像データ 2 | 3 | void setup() { 4 | size(800, 600); 5 | //画像を読み込み 6 | img = loadImage("photo.jpg"); 7 | } 8 | 9 | void draw() { 10 | //画面に画像データを表示 11 | image(img, 0, 0); 12 | } -------------------------------------------------------------------------------- /w02_03/w02_03.pde: -------------------------------------------------------------------------------- 1 | size(640, 480); 2 | 3 | background(31); 4 | stroke(255, 255, 31); 5 | fill(31, 127, 255, 127); // 塗りを50%の半透明に 6 | 7 | point(200, 200); 8 | line(80, 40, 600, 400); 9 | rect(300, 200, 200, 180); 10 | ellipse(450, 200, 200, 100); -------------------------------------------------------------------------------- /w03_07/w03_07.pde: -------------------------------------------------------------------------------- 1 | //変数の宣言 2 | int i; 3 | 4 | //初期設定 5 | size(800, 600); 6 | colorMode(HSB, 360, 100, 100); 7 | noStroke(); 8 | 9 | //色相を変化させながら四角を描いていく 10 | for (i=0; i width) { //もし画面の左端、または右端に到達したら 18 | velocity.x = velocity.x * -1; //X方向のスピードを反転 19 | } 20 | if (location.y < 0 || location.y > height) { //もし画面の下端、または上端に到達したら 21 | velocity.y = velocity.y * -1; //Y方向のスピードを反転 22 | } 23 | } -------------------------------------------------------------------------------- /w05_04/w05_04.pde: -------------------------------------------------------------------------------- 1 | //Walkerクラスのオブジェクトの宣言 2 | Walker walker; 3 | 4 | void setup() { 5 | size(800, 600); 6 | frameRate(60); 7 | 8 | //クラスをインスタンス化 9 | walker = new Walker(); 10 | 11 | background(0); 12 | } 13 | 14 | void draw() { 15 | //Walkerクラスのdraw()メソッドを実行 16 | walker.draw(); 17 | } 18 | 19 | class Walker { 20 | PVector location; 21 | PVector velocity; 22 | 23 | Walker() { 24 | location = new PVector(width/2, height/2); 25 | velocity = new PVector(); 26 | } 27 | 28 | //ランダムウォークを描画 29 | void draw() { 30 | for (int i = 0; i < 10; i++) { 31 | velocity.x = random(-1, 1); 32 | velocity.y = random(-1, 1); 33 | location.add(velocity); 34 | noStroke(); 35 | fill(0, 127, 255, 31); 36 | ellipse(location.x, location.y, 2, 2); 37 | } 38 | } 39 | } -------------------------------------------------------------------------------- /w12_05/w12_05.pde: -------------------------------------------------------------------------------- 1 | // Optical Flowの描画 2 | 3 | import gab.opencv.*; 4 | import processing.video.*; 5 | 6 | Capture video; // ライブカメラ 7 | OpenCV opencv; // OpenCV 8 | 9 | void setup() { 10 | //初期設定 11 | size(640, 480); //画面サイズ 12 | //キャプチャーするカメラのサイズ 13 | video = new Capture(this, 640/2, 480/2); 14 | //OpenCVの画面サイズ 15 | opencv = new OpenCV(this, 640/2, 480/2); 16 | //キャプチャー開始 17 | video.start(); 18 | } 19 | 20 | void draw() { 21 | //描画スケール設定 22 | scale(2.0); 23 | //カメラの画像をOpenCVに読み込み 24 | opencv.loadImage(video); 25 | //カメラ画像を表示 26 | image(video, 0, 0 ); 27 | //OpticalFlowを計算 28 | opencv.calculateOpticalFlow(); 29 | //描画設定 30 | stroke(255,0,0); 31 | //OpticalFlowを描画 32 | opencv.drawOpticalFlow(); 33 | } 34 | 35 | //キャプチャーイベント 36 | void captureEvent(Capture c) { 37 | c.read(); 38 | } -------------------------------------------------------------------------------- /w08_07/w08_07.pde: -------------------------------------------------------------------------------- 1 | float angle = 0; 2 | int NUM = 100; 3 | float offset; 4 | color[] colors = new color[NUM]; 5 | 6 | void setup() { 7 | size(600, 600, P3D); 8 | noStroke(); 9 | colorMode(HSB, 360, 100, 100, 100); 10 | frameRate(60); 11 | offset = 360.0/float(NUM); 12 | for (int i=0; i width) { //もし画面の左端、または右端に到達したら 22 | velocityX = velocityX * -1; //X方向のスピードを反転 23 | } 24 | if (locationY < 0 || locationY > height) { //もし画面の下端、または上端に到達したら 25 | velocityY = velocityY * -1; //Y方向のスピードを反転 26 | } 27 | } -------------------------------------------------------------------------------- /w08_05/w08_05.pde: -------------------------------------------------------------------------------- 1 | int NUM = 1000; 2 | PVector[] start = new PVector[NUM]; 3 | PVector[] end = new PVector[NUM]; 4 | 5 | void setup() { 6 | //レンダラーを3Dに 7 | size(600, 600, P3D); 8 | frameRate(60); 9 | //開始位置と終了位置を3Dのランダムな座標に 10 | for (int i=0; i contours; //輪郭の配列 8 | 9 | void setup() { 10 | //初期設定 11 | size(640, 480); //画面サイズ 12 | //キャプチャーするカメラのサイズ 13 | video = new Capture(this, 640, 480); 14 | //OpenCVの画面サイズ 15 | opencv = new OpenCV(this, 640, 480); 16 | //キャプチャー開始 17 | video.start(); 18 | } 19 | 20 | void draw() { 21 | //カメラの画像をOpenCVに読み込み 22 | opencv.loadImage(video); 23 | //カメラ画像を表示 24 | image(video, 0, 0 ); 25 | //閾値の設定(マウスのX座標で変化) 26 | int threshold = int(map(mouseX, 0, width, 0, 100)); 27 | opencv.threshold(threshold); 28 | //輪郭抽出 29 | contours = opencv.findContours(); 30 | //描画設定 31 | noFill(); 32 | strokeWeight(1); 33 | //検出された輪郭の数だけ、輪郭線を描く 34 | for (Contour contour : contours) { 35 | stroke(0, 255, 0); 36 | contour.draw(); 37 | } 38 | } 39 | 40 | //キャプチャーイベント 41 | void captureEvent(Capture c) { 42 | c.read(); 43 | } 44 | -------------------------------------------------------------------------------- /w12_03/w12_03.pde: -------------------------------------------------------------------------------- 1 | //OpenCVによる顔検出 2 | import gab.opencv.*; 3 | import processing.video.*; 4 | import java.awt.*; 5 | 6 | Capture video; //ビデオキャプチャー 7 | OpenCV opencv; //OpenCV 8 | 9 | void setup() { 10 | size(640, 480); 11 | //ビデオキャプチャー初期化 12 | video = new Capture(this, 640/2, 480/2); 13 | //OpenCV初期化(ビデオキャプチャーの半分のサイズ) 14 | opencv = new OpenCV(this, 640/2, 480/2); 15 | //顔の学習データを読み込み 16 | opencv.loadCascade(OpenCV.CASCADE_FRONTALFACE); 17 | //ビデオキャプチャー開始 18 | video.start(); 19 | } 20 | 21 | void draw() { 22 | //二倍サイズで表示 23 | scale(2); 24 | //画像を読み込み 25 | opencv.loadImage(video); 26 | //カメラ画像を描画 27 | image(video, 0, 0 ); 28 | 29 | //顔を検出 30 | Rectangle[] faces = opencv.detect(); 31 | //検出した顔の周囲を四角形で描画 32 | noFill(); 33 | stroke(0, 255, 0); 34 | strokeWeight(3); 35 | for (int i = 0; i < faces.length; i++) { 36 | rect(faces[i].x, faces[i].y, faces[i].width, faces[i].height); 37 | } 38 | } 39 | 40 | //キャプチャーイベント 41 | void captureEvent(Capture c) { 42 | c.read(); 43 | } 44 | -------------------------------------------------------------------------------- /w06_01/w06_01.pde: -------------------------------------------------------------------------------- 1 | ParticleVec2 particle; 2 | 3 | void setup() { 4 | //初期設定 5 | size(800, 600); 6 | frameRate(60); 7 | noStroke(); 8 | fill(255); 9 | //パーティクルをインスタンス化 10 | particle = new ParticleVec2(); 11 | //初期位置を設定 12 | particle.location.set(10, 10); 13 | //速度を設定 14 | particle.velocity.set(3, 2); 15 | } 16 | 17 | void draw() { 18 | background(0); 19 | //パーティクルの位置を更新 20 | particle.update(); 21 | //パーティクルを描画 22 | particle.draw(); 23 | } 24 | 25 | //パーティクルクラス 26 | class ParticleVec2 { 27 | PVector location; //位置 28 | PVector velocity; //速度 29 | float radius; //パーティクルの半径 30 | 31 | //コンストラクター 32 | ParticleVec2() { 33 | //初期パラメーターを設定 34 | radius = 4.0; 35 | location = new PVector(width/2.0, height/2.0); 36 | velocity = new PVector(0, 0); 37 | } 38 | 39 | //座標の更新 40 | void update() { 41 | location.add(velocity); //速度から位置を算出 42 | } 43 | 44 | //パーティクルを描画 45 | void draw() { 46 | ellipse(location.x, location.y, radius * 2, radius * 2); 47 | } 48 | } -------------------------------------------------------------------------------- /w09_03/w09_03.pde: -------------------------------------------------------------------------------- 1 | //controlP5ライブラリーの読み込み 2 | import controlP5.*; 3 | //ControlP5をcp5として宣言 4 | ControlP5 cp5; 5 | 6 | Slider boxSize; //スライダー : 立方体のサイズ 7 | Slider2D rotate; //スライダー2D : 回転スピード(x, y) 8 | 9 | void setup() { 10 | //画面を設定 11 | size(800, 600, P3D); 12 | //controlP5を初期化 13 | cp5 = new ControlP5(this); 14 | //スライダーを追加 15 | //スライダー1 : ボックスのサイズ 16 | boxSize = cp5.addSlider("BOX SIZE") 17 | .setPosition(20, 20) 18 | .setRange(0, 400) 19 | .setValue(200); 20 | //スライダー2D : 回転スピードXY 21 | rotate = cp5.addSlider2D("ROTATION") 22 | .setPosition(20, 40) 23 | .setSize(100,100) 24 | .setMinMax(1.0,1.0,10.0,10.0) 25 | .setValue(2.0,2.0); 26 | } 27 | 28 | void draw() { 29 | background(0); 30 | pushMatrix(); 31 | //ライティングをONに 32 | lights(); 33 | //画面の中心を原点に 34 | translate(width/2, height/2, 0); 35 | //X軸を中心に回転 36 | rotateX(millis()/1000.0 * rotate.getArrayValue()[0]); 37 | //Y軸を中心に回転 38 | rotateY(millis()/1000.0 * rotate.getArrayValue()[1]); 39 | //白い立方体を描画 40 | fill(255); 41 | noStroke(); 42 | box(boxSize.getValue()); 43 | popMatrix(); 44 | } -------------------------------------------------------------------------------- /w10_08/w10_08.pde: -------------------------------------------------------------------------------- 1 | //Soundライブラリーの読み込み 2 | import processing.sound.*; 3 | //サウンド入力 4 | AudioIn in; 5 | //FFT(高速フーリエ変換) 6 | FFT fft; 7 | //FFTサイズ 8 | int bands = 128; 9 | //グラフの高さのスケールを設定 10 | float scale = 40000.0; 11 | 12 | void setup() { 13 | size(800, 600, P2D); 14 | noStroke(); 15 | blendMode(ADD); 16 | //HSB(色相、彩度、明度)モードで色を表現 17 | colorMode(HSB, 360, 100, 100, 100); 18 | //サウンド入力を初期化 19 | in = new AudioIn(this, 0); 20 | //入力したサウンドを再生 21 | in.start(); 22 | //FFTの初期化 23 | fft = new FFT(this, bands); 24 | fft.input(in); 25 | } 26 | 27 | void draw() { 28 | background(0); 29 | //FFT解析実行 30 | fft.analyze(); 31 | //グラフの横幅を算出 32 | float w = width/float(bands)/2.0; 33 | //FFTのバンドの数だけくりかえし 34 | for (int i = 0; i < bands; i++) { 35 | //色相を計算 36 | float hue = 360/float(bands) * i; 37 | //HSBで色を指定 38 | fill(hue, 100, 6); 39 | //円の直径をFFT解析結果から算出 40 | float diameter = fft.spectrum[i] * scale; 41 | //左右に円を描く 42 | ellipse(width/2.0 + i * w, height/2.0, diameter, diameter); 43 | ellipse(width/2.0 - i * w, height/2.0, diameter, diameter); 44 | } 45 | } -------------------------------------------------------------------------------- /w04_05/w04_05.pde: -------------------------------------------------------------------------------- 1 | int NUM = 100; //配列の数 2 | //位置のベクトルの配列 3 | PVector[] location = new PVector[NUM]; 4 | //速度のベクトルの配列 5 | PVector[] velocity = new PVector[NUM]; 6 | 7 | void setup() { 8 | size(800, 600); //800x600pixelの画面を生成 9 | frameRate(60); //フレームレート 10 | noStroke(); //枠線なし 11 | fill(0, 127, 255); //塗りの色 12 | for (int i = 0; i < NUM; i++) { //配列の数だけ繰り返し 13 | //位置のベクトルの初期設定 14 | location[i] = new PVector(random(width), random(height)); 15 | //速度のベクトルの初期設定 16 | velocity[i] = new PVector(random(-4, 4), random(-4, 4)); 17 | } 18 | } 19 | 20 | void draw() { 21 | background(15); //背景を描画 22 | for (int i = 0; i < NUM; i++) { //配列の数だけ繰り返し 23 | //指定した位置に円を描画 24 | ellipse(location[i].x, location[i].y, 20, 20); 25 | //位置のベクトルに速度のベクトルを加算、次の位置になる 26 | location[i].add(velocity[i]); 27 | //もし画面の左端、または右端に到達したら 28 | if ((location[i].x > width) || (location[i].x < 0)) { 29 | velocity[i].x *= -1; //X方向のスピードを反転 30 | } 31 | //もし画面の下端、または上端に到達したら 32 | if ((location[i].y > height) || (location[i].y < 0)) { 33 | velocity[i].y *= -1; //Y方向のスピードを反転 34 | } 35 | } 36 | } -------------------------------------------------------------------------------- /w11_02/w11_02.pde: -------------------------------------------------------------------------------- 1 | import oscP5.*; 2 | import netP5.*; 3 | 4 | //OSCP5クラスのインスタンス 5 | OscP5 oscP5; 6 | //マウスの位置ベクトル 7 | PVector mouseLoc; 8 | //マウスのクリック検知 9 | int clicked; 10 | 11 | void setup() { 12 | size(800,600); 13 | frameRate(60); 14 | 15 | //ポートを12000に設定して新規にOSCP5のインスタンスを生成 16 | oscP5 = new OscP5(this,12000); 17 | //マウスの位置ベクトルを初期化 18 | mouseLoc = new PVector(width/2, height/2); 19 | //マウスのクリック状態を初期化 20 | clicked = 0; 21 | } 22 | 23 | void draw() { 24 | if(clicked == 1){ 25 | background(255, 0, 0); 26 | } else { 27 | background(0); 28 | } 29 | //OSCで指定された座標に円を描く 30 | noFill(); 31 | stroke(255); 32 | ellipse(mouseLoc.x, mouseLoc.y, 10, 10); 33 | } 34 | 35 | //OSCメッセージを受信した際に実行するイベント 36 | void oscEvent(OscMessage msg) { 37 | //もしOSCメッセージが /mouse/position だったら 38 | if(msg.checkAddrPattern("/mouse/position")==true) { 39 | //最初の値をint方としてX座標に 40 | mouseLoc.x = msg.get(0).intValue(); 41 | //次の値をint方としてY座標に 42 | mouseLoc.y = msg.get(1).intValue(); 43 | } 44 | if(msg.checkAddrPattern("/mouse/cliked")==true) { 45 | //Bool値を読み込み 46 | clicked = msg.get(0).intValue(); 47 | println("msg = " + clicked); 48 | print("*"); 49 | } 50 | } -------------------------------------------------------------------------------- /w12_04/w12_04.pde: -------------------------------------------------------------------------------- 1 | //OpenCVによる顔検出 2 | //目線を入れてみる 3 | import gab.opencv.*; 4 | import processing.video.*; 5 | import java.awt.*; 6 | 7 | Capture video; //ビデオキャプチャー 8 | OpenCV opencv; //OpenCV 9 | 10 | void setup() { 11 | size(640, 480); 12 | //ビデオキャプチャー初期化 13 | video = new Capture(this, 640/2, 480/2); 14 | //OpenCV初期化(ビデオキャプチャーの半分のサイズ) 15 | opencv = new OpenCV(this, 640/2, 480/2); 16 | //顔の学習データを読み込み 17 | opencv.loadCascade(OpenCV.CASCADE_FRONTALFACE); 18 | //ビデオキャプチャー開始 19 | video.start(); 20 | } 21 | 22 | void draw() { 23 | //二倍サイズで表示 24 | scale(2); 25 | //画像を読み込み 26 | opencv.loadImage(video); 27 | //カメラ画像を描画 28 | image(video, 0, 0 ); 29 | 30 | //顔を検出 31 | Rectangle[] faces = opencv.detect(); 32 | //検出した顔の周囲を四角形で描画 33 | fill(0); 34 | for (int i = 0; i < faces.length; i++) { 35 | //ちょうど目の場所にくるよう、場所とサイズを調整 36 | float x = faces[i].x + faces[i].width * 0.15; 37 | float y = faces[i].y + faces[i].height * 0.3; 38 | float width = faces[i].width * 0.7; 39 | float height = faces[i].height * 0.15; 40 | //目線を描画 41 | rect(x, y, width, height); 42 | } 43 | } 44 | 45 | //キャプチャーイベント 46 | void captureEvent(Capture c) { 47 | c.read(); 48 | } 49 | -------------------------------------------------------------------------------- /w06_02/w06_02.pde: -------------------------------------------------------------------------------- 1 | ParticleVec2 particle; 2 | 3 | void setup() { 4 | //初期設定 5 | size(800, 600); 6 | frameRate(60); 7 | noStroke(); 8 | fill(255); 9 | //パーティクルをインスタンス化 10 | particle = new ParticleVec2(); 11 | //初期位置を設定 12 | particle.location.set(10, 10); 13 | //力を加える 14 | particle.acceleration.set(3, 2); 15 | } 16 | 17 | void draw() { 18 | background(0); 19 | //パーティクルの位置を更新 20 | particle.update(); 21 | //パーティクルを描画 22 | particle.draw(); 23 | } 24 | 25 | //パーティクルクラス 26 | class ParticleVec2 { 27 | PVector location; //位置 28 | PVector velocity; //速度 29 | PVector acceleration; //加速度 30 | float radius; //パーティクルの半径 31 | 32 | //コンストラクター 33 | ParticleVec2() { 34 | //初期パラメーターを設定 35 | radius = 4.0; 36 | location = new PVector(width/2.0, height/2.0); 37 | velocity = new PVector(0, 0); 38 | acceleration = new PVector(0, 0); 39 | } 40 | 41 | //座標の更新 42 | void update() { 43 | velocity.add(acceleration); //速度に加速度を加算 44 | location.add(velocity); //速度から位置を算出 45 | acceleration.set(0, 0); //加速度をリセット 46 | } 47 | 48 | //パーティクルを描画 49 | void draw() { 50 | ellipse(location.x, location.y, radius * 2, radius * 2); 51 | } 52 | } -------------------------------------------------------------------------------- /w09_02/w09_02.pde: -------------------------------------------------------------------------------- 1 | //controlP5ライブラリーの読み込み 2 | import controlP5.*; 3 | //ControlP5をcp5として宣言 4 | ControlP5 cp5; 5 | 6 | //スライダーを3つ宣言 7 | Slider boxSize; //立方体のサイズ 8 | Slider rotateX; //回転スピードX 9 | Slider rotateY; //回転スピードY 10 | 11 | void setup() { 12 | //画面を設定 13 | size(800, 600, P3D); 14 | //controlP5を初期化 15 | cp5 = new ControlP5(this); 16 | //スライダーを追加 17 | //スライダー1 : ボックスのサイズ 18 | boxSize = cp5.addSlider("BOX SIZE") 19 | .setPosition(20, 20) 20 | .setRange(0, 400) 21 | .setValue(200); 22 | //スライダー2 : 回転スピードX 23 | rotateX = cp5.addSlider("ROTATE X") 24 | .setPosition(20, 30) 25 | .setRange(1.0, 10.0) 26 | .setValue(2.0); 27 | //スライダー3 : 回転スピードY 28 | rotateY = cp5.addSlider("ROTATE Y") 29 | .setPosition(20, 40) 30 | .setRange(1.0, 10.0) 31 | .setValue(2.0); 32 | } 33 | 34 | void draw() { 35 | background(0); 36 | pushMatrix(); 37 | //ライティングをONに 38 | lights(); 39 | //画面の中心を原点に 40 | translate(width/2, height/2, 0); 41 | //X軸を中心に回転 42 | rotateX(millis()/1000.0 * rotateX.getValue()); 43 | //Y軸を中心に回転 44 | rotateY(millis()/1000.0 * rotateY.getValue()); 45 | //白い立方体を描画 46 | fill(255); 47 | noStroke(); 48 | box(boxSize.getValue()); 49 | popMatrix(); 50 | } -------------------------------------------------------------------------------- /w10_09/w10_09.pde: -------------------------------------------------------------------------------- 1 | //Soundライブラリーの読み込み 2 | import processing.sound.*; 3 | //サウンド入力 4 | AudioIn in; 5 | //FFT(高速フーリエ変換) 6 | FFT fft; 7 | //FFTサイズ 8 | int bands = 128; 9 | //グラフの高さのスケールを設定 10 | float scale = 4000.0; 11 | 12 | void setup() { 13 | //3Dで描画 14 | size(800, 600, P3D); 15 | noStroke(); 16 | //HSB(色相、彩度、明度)モードで色を表現 17 | colorMode(HSB, 360, 100, 100, 100); 18 | //サウンド入力を初期化 19 | in = new AudioIn(this, 0); 20 | //入力したサウンドを再生 21 | in.start(); 22 | //FFTの初期化 23 | fft = new FFT(this, bands); 24 | fft.input(in); 25 | } 26 | 27 | void draw() { 28 | blendMode(ADD); 29 | background(0); 30 | //FFT解析実行 31 | fft.analyze(); 32 | //FFTのバンドの数だけくりかえし 33 | for (int i = 0; i < bands; i++) { 34 | //色相を計算 35 | float hue = map(i, 0, bands/4.0, 0, 360); 36 | //HSBで色を指定 37 | fill(hue, 100, 100, 30); 38 | //BoxのサイズをFFT解析結果から算出 39 | float boxSize = map(fft.spectrum[i], 0, 1, 0, scale); 40 | //回転角度を設定 41 | float rot = map(i, 0, bands, 0, PI*8); 42 | //指定した色とサイズと角度で画面の中心にBoxを描画 43 | pushMatrix(); 44 | translate(width/2, height/2); 45 | rotateX(rot+frameCount/frameRate); 46 | rotateY((rot+frameCount/frameRate)*1.2); 47 | box(boxSize); 48 | popMatrix(); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /w11_01/w11_01.pde: -------------------------------------------------------------------------------- 1 | //OSC関連のライブラリーをインポート 2 | import oscP5.*; 3 | import netP5.*; 4 | 5 | //OSCP5クラスのインスタンス 6 | OscP5 oscP5; 7 | //OSC送出先のネットアドレス 8 | NetAddress myRemoteLocation; 9 | 10 | void setup() { 11 | size(800,600); 12 | frameRate(60); 13 | //ポートを12001に設定して新規にOSCP5のインスタンスを生成 14 | oscP5 = new OscP5(this,12001); 15 | //OSC送信先のIPアドレスとポートを指定 16 | myRemoteLocation = new NetAddress("127.0.0.1",12000); 17 | } 18 | 19 | void draw() { 20 | //マウスボタンをクリックすると背景を赤に 21 | if(mousePressed){ 22 | background(255, 0, 0); 23 | } else { 24 | background(0); 25 | } 26 | 27 | //マウスの場所に円を描く 28 | noFill(); 29 | stroke(255); 30 | ellipse(mouseX, mouseY, 10, 10); 31 | 32 | //現在のマウスの位置をOSCで送出 33 | //新規にメッセージ作成 34 | OscMessage msg = new OscMessage("/mouse/position"); 35 | msg.add(mouseX); //X座標の位置を追加 36 | msg.add(mouseY); //Y座標の位置を追加 37 | //OSCメッセージ送信 38 | oscP5.send(msg, myRemoteLocation); 39 | } 40 | 41 | //マウスボタンを押した時にメッセージを送信 42 | void mousePressed(){ 43 | OscMessage msg = new OscMessage("/mouse/cliked"); 44 | msg.add(1); //1を送信 45 | //OSCメッセージ送信 46 | oscP5.send(msg, myRemoteLocation); 47 | } 48 | 49 | //マウスボタンを離した時にメッセージを送信 50 | void mouseReleased(){ 51 | OscMessage msg = new OscMessage("/mouse/cliked"); 52 | msg.add(0); //0を送信 53 | //OSCメッセージ送信 54 | oscP5.send(msg, myRemoteLocation); 55 | } 56 | -------------------------------------------------------------------------------- /w04_06/w04_06.pde: -------------------------------------------------------------------------------- 1 | int NUM = 500; //配列の数 2 | //位置のベクトルの配列 3 | PVector[] location = new PVector[NUM]; 4 | //速度のベクトルの配列 5 | PVector[] velocity = new PVector[NUM]; 6 | //塗りの色の配列 7 | color[] col = new color[NUM]; 8 | //円の大きさ(直径)の配列 9 | float[] diameter = new float[NUM]; 10 | 11 | void setup() { 12 | size(800, 600); //800x600pixelの画面を生成 13 | frameRate(60); //フレームレート 14 | noStroke(); 15 | for (int i = 0; i < NUM; i++) { //配列の数だけ繰り返し 16 | //位置のベクトルの初期設定 17 | location[i] = new PVector(random(width), random(height)); 18 | //速度のベクトルの初期設定 19 | velocity[i] = new PVector(random(-4, 4), random(-4, 4)); 20 | //色の初期設定 21 | col[i] = color(random(255), random(255), random(255), 192); 22 | //大きさの初期設定 23 | diameter[i] = random(3, 40); 24 | } 25 | } 26 | 27 | void draw() { 28 | background(15); //背景を描画 29 | //配列の数だけ繰り返し 30 | for (int i = 0; i < NUM; i++) { 31 | fill(col[i]); //色を指定 32 | //指定した位置に円を描画 33 | ellipse(location[i].x, location[i].y, diameter[i], diameter[i]); 34 | //位置のベクトルに速度のベクトルを加算、次の位置になる 35 | location[i].add(velocity[i]); 36 | //もし画面の左端、または右端に到達したら 37 | if ((location[i].x > width) || (location[i].x < 0)) { 38 | velocity[i].x *= -1; //X方向のスピードを反転 39 | } 40 | //もし画面の下端、または上端に到達したら 41 | if ((location[i].y > height) || (location[i].y < 0)) { 42 | velocity[i].y *= -1; //Y方向のスピードを反転 43 | } 44 | } 45 | } -------------------------------------------------------------------------------- /w06_03/w06_03.pde: -------------------------------------------------------------------------------- 1 | ParticleVec2 particle; 2 | 3 | void setup() { 4 | //初期設定 5 | size(800, 600); 6 | frameRate(60); 7 | noStroke(); 8 | fill(255); 9 | //パーティクルをインスタンス化 10 | particle = new ParticleVec2(); 11 | //初期位置を設定 12 | particle.location.set(10, 10); 13 | //摩擦力を設定 14 | particle.friction = 0.01; 15 | //力を加える 16 | particle.acceleration.set(3, 2); 17 | } 18 | 19 | void draw() { 20 | background(0); 21 | //パーティクルの位置を更新 22 | particle.update(); 23 | //パーティクルを描画 24 | particle.draw(); 25 | } 26 | 27 | //パーティクルクラス 28 | class ParticleVec2 { 29 | PVector location; //位置 30 | PVector velocity; //速度 31 | PVector acceleration; //加速度 32 | float radius; //パーティクルの半径 33 | float friction; //摩擦 34 | 35 | //コンストラクター 36 | ParticleVec2() { 37 | //初期パラメーターを設定 38 | radius = 4.0; 39 | location = new PVector(width/2.0, height/2.0); 40 | velocity = new PVector(0, 0); 41 | acceleration = new PVector(0, 0); 42 | friction = 0.0; 43 | } 44 | 45 | //座標の更新 46 | void update() { 47 | velocity.add(acceleration); //速度に加速度を加算 48 | velocity.mult(1.0 - friction); //摩擦力を加味した速度を計算 49 | location.add(velocity); //速度から位置を算出 50 | acceleration.set(0, 0); //加速度をリセット 51 | } 52 | 53 | //パーティクルを描画 54 | void draw() { 55 | ellipse(location.x, location.y, radius * 2, radius * 2); 56 | } 57 | } -------------------------------------------------------------------------------- /w09_04/w09_04.pde: -------------------------------------------------------------------------------- 1 | //controlP5ライブラリーの読み込み 2 | import controlP5.*; 3 | //ControlP5をcp5として宣言 4 | ControlP5 cp5; 5 | 6 | Slider boxSize; //スライダー : 立方体のサイズ 7 | Slider2D rotate; //スライダー2D : 回転スピード(x, y) 8 | ColorWheel col; //カラー : 立方体の色 9 | Toggle start; //トグルボタン : スタート/ストップ 10 | 11 | void setup() { 12 | //画面を設定 13 | size(800, 600, P3D); 14 | //controlP5を初期化 15 | cp5 = new ControlP5(this); 16 | //スライダーを追加 17 | //スライダー1 : ボックスのサイズ 18 | boxSize = cp5.addSlider("BOX SIZE") 19 | .setPosition(20, 20) 20 | .setRange(0, 400) 21 | .setValue(200); 22 | //スライダー2D : 回転スピードXY 23 | rotate = cp5.addSlider2D("ROTATION") 24 | .setPosition(20, 40) 25 | .setSize(100, 100) 26 | .setMinMax(1.0, 1.0, 10.0, 10.0) 27 | .setValue(2.0, 2.0); 28 | // トグルスイッチ 29 | start = cp5.addToggle("START/STOP") 30 | .setPosition(20, 160) 31 | .setSize(20, 20); 32 | //カラーの選択 33 | col = cp5.addColorWheel("COLOR") 34 | .setPosition(20, 220) 35 | .setRGB(color(31, 128, 255)); 36 | } 37 | 38 | void draw() { 39 | background(0); 40 | pushMatrix(); 41 | //ライティングをONに 42 | lights(); 43 | //画面の中心を原点に 44 | translate(width/2, height/2, 0); 45 | //もしトグルスイッチがONになっていたら、回転 46 | if (start.getState()) { 47 | //X軸を中心に回転 48 | rotateX(millis()/1000.0 * rotate.getArrayValue()[0]); 49 | //Y軸を中心に回転 50 | rotateY(millis()/1000.0 * rotate.getArrayValue()[0]); 51 | } 52 | //カラーパレットで選択した色で塗る 53 | fill(col.getRGB()); 54 | noStroke(); 55 | //立方体の描画 56 | box(boxSize.getValue()); 57 | popMatrix(); 58 | } -------------------------------------------------------------------------------- /w06_04/w06_04.pde: -------------------------------------------------------------------------------- 1 | ParticleVec2 particle; 2 | 3 | void setup() { 4 | //初期設定 5 | size(800, 600); 6 | frameRate(60); 7 | noStroke(); 8 | fill(255); 9 | //パーティクルをインスタンス化 10 | particle = new ParticleVec2(); 11 | particle.location.set(10, height/2); //初期位置を設定 12 | particle.gravity.set(0, 1); //重力を設定 13 | particle.friction = 0.01; //摩擦力を設定 14 | particle.mass = 1.0; //質量を設定 15 | //力を加える 16 | particle.addForce(new PVector(20, -20)); 17 | } 18 | 19 | void draw() { 20 | background(0); 21 | particle.update(); //パーティクルの位置を更新 22 | particle.draw(); //パーティクルを描画 23 | } 24 | 25 | //パーティクルクラス 26 | class ParticleVec2 { 27 | PVector location; //位置 28 | PVector velocity; //速度 29 | PVector acceleration; //加速度 30 | PVector gravity; //重力 31 | float radius; //パーティクルの半径 32 | float friction; //摩擦 33 | float mass; //質量 34 | 35 | //コンストラクター 36 | ParticleVec2() { 37 | //初期パラメーターを設定 38 | radius = 4.0; 39 | location = new PVector(width/2.0, height/2.0); 40 | velocity = new PVector(0, 0); 41 | acceleration = new PVector(0, 0); 42 | gravity = new PVector(0, 0); 43 | friction = 0.0; 44 | mass = 1.0; 45 | } 46 | 47 | //座標の更新 48 | void update() { 49 | velocity.add(acceleration); //速度に加速度を加算 50 | velocity.add(gravity); //重力を加える 51 | velocity.mult(1.0 - friction); //摩擦力を加味した速度を計算 52 | location.add(velocity); //速度から位置を算出 53 | acceleration.set(0, 0); //加速度をリセット 54 | } 55 | 56 | //力を加える関数 57 | void addForce(PVector force) { 58 | //質量から加速度を計算 (a = f/m); 59 | force.div(mass); 60 | acceleration.add(force); 61 | } 62 | 63 | //パーティクルを描画 64 | void draw() { 65 | ellipse(location.x, location.y, radius * 2, radius * 2); 66 | } 67 | } -------------------------------------------------------------------------------- /w11_08/w11_08.pde: -------------------------------------------------------------------------------- 1 | import oscP5.*; 2 | import netP5.*; 3 | 4 | OscP5 oscP5; 5 | NetAddress location; 6 | 7 | float note; 8 | float pan; 9 | 10 | ArrayList rings; 11 | int MAX = 16; 12 | 13 | void setup() { 14 | size(800, 600); 15 | frameRate(60); 16 | oscP5 = new OscP5(this, 12000); 17 | location = new NetAddress("127.0.0.1", 4557); 18 | rings = new ArrayList(); 19 | } 20 | 21 | void draw() { 22 | background(0); 23 | int speed = 8; 24 | if (frameCount % speed == 0) { 25 | note = int(random(50, 80)); 26 | pan = random(-1, 1); 27 | OscMessage msg 28 | = new OscMessage("/run-code"); 29 | msg.add("fromP5"+frameCount); 30 | msg.add("play "+ note + ", pan: "+ pan); 31 | oscP5.send(msg, location); 32 | println(msg); 33 | 34 | float x = map(pan, -1, 1, 35 | width/4, width/4*3); 36 | float y = map(note, 40, 90, height, 0); 37 | PVector location = new PVector(x, y); 38 | Ring r = new Ring(location); 39 | r.release = 3.0; 40 | rings.add(r); 41 | } 42 | 43 | for (int i = 0; i < rings.size(); i++) { 44 | rings.get(i).draw(); 45 | } 46 | if (rings.size() > MAX) { 47 | rings.remove(0); 48 | } 49 | } 50 | 51 | class Ring { 52 | PVector location; 53 | float radius; 54 | float speed; 55 | float alpha; 56 | float alphaSpeed; 57 | float release; 58 | 59 | Ring(PVector _location) { 60 | location = new PVector(); 61 | location = _location; 62 | radius = 20; 63 | speed = 1.0; 64 | alpha = 255; 65 | alphaSpeed = 1.0; 66 | } 67 | 68 | void draw() { 69 | alphaSpeed = 255.0/(release*frameRate); 70 | fill(63, 127, 255, alpha); 71 | noStroke(); 72 | pushMatrix(); 73 | translate(location.x, location.y); 74 | ellipse(0, 0, radius, radius); 75 | popMatrix(); 76 | radius += speed; 77 | alpha -= alphaSpeed; 78 | strokeWeight(1.0); 79 | } 80 | } -------------------------------------------------------------------------------- /w12_06/w12_06.pde: -------------------------------------------------------------------------------- 1 | //OpticalFlow + Particle 2 | 3 | import gab.opencv.*; 4 | import processing.video.*; 5 | 6 | Capture video; // ライブカメラ 7 | OpenCV opencv; // OpenCV 8 | 9 | int NUM = 500; 10 | ParticleVec3[] particles = new ParticleVec3[NUM]; 11 | 12 | void setup() { 13 | //初期設定 14 | size(640, 480, P3D); //画面サイズ 15 | //キャプチャーするカメラのサイズ 16 | video = new Capture(this, 640/2, 480/2); 17 | //OpenCVの画面サイズ 18 | opencv = new OpenCV(this, 640/2, 480/2); 19 | //キャプチャー開始 20 | video.start(); 21 | 22 | for (int i = 0; i < NUM; i++) { 23 | particles[i] = new ParticleVec3(); 24 | particles[i].radius = 4.0; 25 | particles[i].position.set(random(width/2), random(height/2), 0); 26 | particles[i].minx = 0; 27 | particles[i].miny = 0; 28 | particles[i].maxx = width/2; 29 | particles[i].maxy = height/2; 30 | } 31 | } 32 | 33 | void draw() { 34 | background(0); 35 | blendMode(ADD); 36 | //描画スケール設定 37 | scale(2.0); 38 | //カメラの画像をOpenCVに読み込み 39 | opencv.loadImage(video); 40 | //カメラ画像を表示 41 | //image(video, 0, 0 ); 42 | //OpticalFlowを計算 43 | opencv.calculateOpticalFlow(); 44 | //描画設定 45 | stroke(255, 0, 0); 46 | //OpticalFlowを描画 47 | opencv.drawOpticalFlow(); 48 | 49 | noStroke(); 50 | fill(0, 127, 255); 51 | for (int i = 0; i < NUM; i++) { 52 | //パーティクルの位置を更新 53 | particles[i].update(); 54 | //パーティクルを描画 55 | particles[i].draw(); 56 | //画面の端で反対側から出現するように 57 | particles[i].throughOffWalls(); 58 | //OpticalFlowから力を算出してパーティクルに反映する 59 | if (particles[i].position.x > 0 60 | && particles[i].position.x < width/2 61 | && particles[i].position.y > 0 62 | && particles[i].position.y < height/2 ) { 63 | PVector vec = opencv.getFlowAt(int(particles[i].position.x), 64 | int(particles[i].position.y)); 65 | particles[i].addForce(vec.mult(0.1)); 66 | } 67 | } 68 | } 69 | 70 | //キャプチャーイベント 71 | void captureEvent(Capture c) { 72 | c.read(); 73 | } -------------------------------------------------------------------------------- /w11_03/w11_03.pde: -------------------------------------------------------------------------------- 1 | import oscP5.*; 2 | import netP5.*; 3 | 4 | //OSCP5クラスのインスタンス 5 | OscP5 oscP5; 6 | //マウスの位置ベクトル 7 | PVector mouseLoc; 8 | //Ringクラスのリスト 9 | ArrayList ringList = new ArrayList(); 10 | 11 | void setup() { 12 | size(800, 600); 13 | frameRate(60); 14 | 15 | //ポートを12000に設定して新規にOSCP5のインスタンスを生成 16 | oscP5 = new OscP5(this,12000); 17 | //マウスの位置ベクトルを初期化 18 | mouseLoc = new PVector(width/2, height/2); 19 | } 20 | 21 | void draw() { 22 | background(0); 23 | noFill(); 24 | stroke(255); 25 | strokeWeight(1); 26 | ellipse(mouseLoc.x, mouseLoc.y, 10, 10); 27 | //リストに格納されたマウスの位置を全て描画する 28 | strokeWeight(2); 29 | for (int i = 0; i < ringList.size(); i++) { 30 | ringList.get(i).draw(); 31 | } 32 | } 33 | 34 | //OSCメッセージを受信した際に実行するイベント 35 | void oscEvent(OscMessage msg) { 36 | //もしOSCメッセージが /mouse/position だったら 37 | if (msg.checkAddrPattern("/mouse/position")==true) { 38 | //最初の値をint方としてX座標に 39 | mouseLoc.x = msg.get(0).intValue(); 40 | //次の値をint方としてY座標に 41 | mouseLoc.y = msg.get(1).intValue(); 42 | } 43 | if (msg.checkAddrPattern("/mouse/cliked")==true) { 44 | //もしマウスがクリックされたメッセージを受けとったら 45 | if (msg.get(0).intValue() == 1) { 46 | //マウスの位置のリストに新規に現在の位置を追加する 47 | ringList.add(new Ring(mouseLoc.x, mouseLoc.y)); 48 | } 49 | } 50 | } 51 | 52 | class Ring { 53 | PVector location; 54 | float radius; 55 | float speed; 56 | float alpha; 57 | float alphaSpeed; 58 | float release; 59 | 60 | Ring(float _x, float _y) { 61 | location = new PVector(_x, _y); 62 | radius = 20; 63 | speed = 1.0; 64 | alpha = 255; 65 | alphaSpeed = 1.0; 66 | release = 5.0; 67 | } 68 | 69 | void draw() { 70 | alphaSpeed = 255.0/(release*frameRate); 71 | fill(63, 127, 255, alpha); 72 | noStroke(); 73 | pushMatrix(); 74 | translate(location.x, location.y); 75 | ellipse(0, 0, radius, radius); 76 | popMatrix(); 77 | radius += speed; 78 | alpha -= alphaSpeed; 79 | strokeWeight(1.0); 80 | } 81 | } -------------------------------------------------------------------------------- /w06_05/w06_05.pde: -------------------------------------------------------------------------------- 1 | ParticleVec2 particle; 2 | 3 | void setup() { 4 | //初期設定 5 | size(800, 600); 6 | frameRate(60); 7 | noStroke(); 8 | fill(255); 9 | //パーティクルをインスタンス化 10 | particle = new ParticleVec2(); 11 | particle.location.set(10, height/2); //初期位置を設定 12 | particle.gravity.set(0, 1); //重力を設定 13 | particle.friction = 0.01; //摩擦力を設定 14 | particle.mass = 1.0; //質量を設定 15 | //力を加える 16 | particle.addForce(new PVector(20, -20)); 17 | } 18 | 19 | void draw() { 20 | background(0); 21 | //パーティクルの位置を更新 22 | particle.update(); 23 | //壁でバウンドさせる 24 | particle.bounceOffWalls(); 25 | //パーティクルを描画 26 | particle.draw(); 27 | } 28 | 29 | //パーティクルクラス 30 | class ParticleVec2 { 31 | PVector location; //位置 32 | PVector velocity; //速度 33 | PVector acceleration; //加速度 34 | PVector gravity; //重力 35 | float radius; //パーティクルの半径 36 | float friction; //摩擦 37 | float mass; //質量 38 | 39 | //コンストラクター 40 | ParticleVec2() { 41 | //初期パラメーターを設定 42 | radius = 4.0; 43 | location = new PVector(width/2.0, height/2.0); 44 | velocity = new PVector(0, 0); 45 | acceleration = new PVector(0, 0); 46 | gravity = new PVector(0, 0); 47 | friction = 0.0; 48 | mass = 1.0; 49 | } 50 | 51 | //座標の更新 52 | void update() { 53 | velocity.add(acceleration); //速度に加速度を加算 54 | velocity.add(gravity); //重力を加える 55 | velocity.mult(1.0 - friction); //摩擦力を加味した速度を計算 56 | location.add(velocity); //速度から位置を算出 57 | acceleration.set(0, 0); //加速度をリセット 58 | } 59 | 60 | //力を加える関数 61 | void addForce(PVector force) { 62 | //質量から加速度を計算 (a = f/m); 63 | force.div(mass); 64 | acceleration.add(force); 65 | } 66 | 67 | //壁でバウンドさせる 68 | void bounceOffWalls() { 69 | if (location.x < 0 || location.x > width) { 70 | velocity.x *= -1; 71 | } 72 | if (location.y < 0 || location.y > height) { 73 | velocity.y *= -1; 74 | } 75 | //画面からはみ出さないように画面内に限定 76 | location.x = constrain(location.x, 0, width); 77 | location.y = constrain(location.y, 0, height); 78 | } 79 | 80 | //パーティクルを描画 81 | void draw() { 82 | ellipse(location.x, location.y, radius * 2, radius * 2); 83 | } 84 | } -------------------------------------------------------------------------------- /w06_06/w06_06.pde: -------------------------------------------------------------------------------- 1 | int NUM = 1000; 2 | ParticleVec2[] particles = new ParticleVec2[NUM]; 3 | 4 | void setup() { 5 | //初期設定 6 | size(800, 600, P3D); 7 | frameRate(60); 8 | noStroke(); 9 | fill(255); 10 | for (int i = 0; i < NUM; i++) { 11 | //パーティクルをインスタンス化 12 | particles[i] = new ParticleVec2(); 13 | //初期位置を設定 14 | particles[i].position.set(width/2, height/4); 15 | particles[i].gravity.set(0, 0.2); 16 | //摩擦力を設定 17 | particles[i].friction = 0.005; 18 | //力を加える 19 | particles[i].mass = 1.0; 20 | particles[i].addForce(new PVector(random(-10, 10), random(-10, 10))); 21 | } 22 | } 23 | 24 | void draw() { 25 | background(0); 26 | for (int i = 0; i < NUM; i++) { 27 | //パーティクルの位置を更新 28 | particles[i].update(); 29 | //壁でバウンドさせる 30 | particles[i].bounceOffWalls(); 31 | //パーティクルを描画 32 | particles[i].draw(); 33 | } 34 | } 35 | 36 | //パーティクルクラス 37 | class ParticleVec2 { 38 | PVector position; //位置 39 | PVector velocity; //速度 40 | PVector acceleration; //加速度 41 | PVector gravity; //重力 42 | float radius; //パーティクルの半径 43 | float friction; //摩擦 44 | float mass; //質量 45 | 46 | //コンストラクター 47 | ParticleVec2() { 48 | //初期パラメーターを設定 49 | radius = 4.0; 50 | position = new PVector(width/2.0, height/2.0); 51 | velocity = new PVector(0, 0); 52 | acceleration = new PVector(0, 0); 53 | gravity = new PVector(0, 0); 54 | friction = 0.0; 55 | mass = 1.0; 56 | } 57 | 58 | //座標の更新 59 | void update() { 60 | velocity.add(acceleration); //速度に加速度を加算 61 | velocity.add(gravity); //重力を加える 62 | velocity.mult(1.0 - friction); //摩擦力を加味した速度を計算 63 | position.add(velocity); //速度から位置を算出 64 | acceleration.set(0, 0); //加速度をリセット 65 | } 66 | 67 | //力を加える関数 68 | void addForce(PVector force) { 69 | //質量から加速度を計算 (a = f/m); 70 | force.div(mass); 71 | acceleration.add(force); 72 | } 73 | 74 | //壁でバウンドさせる 75 | void bounceOffWalls() { 76 | if (position.x < 0 || position.x > width) { 77 | velocity.x *= -1; 78 | } 79 | if (position.y < 0 || position.y > height) { 80 | velocity.y *= -1; 81 | } 82 | //画面からはみ出さないように画面内に限定 83 | position.x = constrain(position.x, 0, width); 84 | position.y = constrain(position.y, 0, height); 85 | } 86 | 87 | //パーティクルを描画 88 | void draw() { 89 | ellipse(position.x, position.y, radius * 2, radius * 2); 90 | } 91 | } -------------------------------------------------------------------------------- /w12_06/ParticleVec3.pde: -------------------------------------------------------------------------------- 1 | class ParticleVec3 { 2 | PVector position; 3 | PVector velocity; 4 | PVector acceleration; 5 | float friction; 6 | float radius; 7 | float mass; 8 | float minx, miny, minz; 9 | float maxx, maxy, maxz; 10 | 11 | ParticleVec3() { 12 | radius = 4.0; 13 | friction = 0.01; 14 | mass = 1.0; 15 | position = new PVector(width/2.0, height/2.0, 0); 16 | velocity = new PVector(0, 0, 0); 17 | acceleration = new PVector(0, 0, 0); 18 | minx = 0; 19 | miny = 0; 20 | minz = -height; 21 | maxx = width; 22 | maxy = height; 23 | maxz = height; 24 | } 25 | 26 | void update() { 27 | velocity.add(acceleration); 28 | velocity.mult(1.0 - friction); 29 | position.add(velocity); 30 | acceleration.set(0, 0, 0); 31 | } 32 | 33 | void draw() { 34 | pushMatrix(); 35 | translate(position.x, position.y, position.z); 36 | ellipse(0, 0, radius * 2, radius * 2); 37 | popMatrix(); 38 | } 39 | 40 | void addForce(PVector force) { 41 | force.div(mass); 42 | acceleration.add(force); 43 | } 44 | 45 | void bounceOffWalls() { 46 | if (position.x > maxx) { 47 | position.x = maxx; 48 | velocity.x *= -1; 49 | } 50 | if (position.x < minx) { 51 | position.x = minx; 52 | velocity.x *= -1; 53 | } 54 | if (position.y > maxy) { 55 | position.y = maxy; 56 | velocity.y *= -1; 57 | } 58 | if (position.y < miny) { 59 | position.y = miny; 60 | velocity.y *= -1; 61 | } 62 | if (position.z > maxz) { 63 | position.z = maxz; 64 | velocity.z *= -1; 65 | } 66 | if (position.z < minz) { 67 | position.z = minz; 68 | velocity.z *= -1; 69 | } 70 | } 71 | 72 | void throughOffWalls() { 73 | if (position.x < minx) { 74 | position.x = maxx; 75 | } 76 | if (position.y < miny) { 77 | position.y = maxy; 78 | } 79 | if (position.z < minz) { 80 | position.z = maxz; 81 | } 82 | if (position.x > maxx) { 83 | position.x = minx; 84 | } 85 | if (position.y > maxy) { 86 | position.y = miny; 87 | } 88 | if (position.z > maxz) { 89 | position.z = minz; 90 | } 91 | } 92 | 93 | void addAttractionForce(PVector force, float radius, float scale) { 94 | float length = PVector.dist(position, force); 95 | PVector diff = new PVector(); 96 | diff = position.get(); 97 | diff.sub(force); 98 | boolean bAmCloseEnough = true; 99 | if (radius > 0) { 100 | if (length > radius) { 101 | bAmCloseEnough = false; 102 | } 103 | } 104 | if (bAmCloseEnough == true) { 105 | float pct = 1 - (length / radius); 106 | diff.normalize(); 107 | diff.mult(scale); 108 | diff.mult(pct); 109 | acceleration.sub(diff); 110 | } 111 | } 112 | } -------------------------------------------------------------------------------- /w07_11/w07_11.pde: -------------------------------------------------------------------------------- 1 | ArrayList bubbles; //Bubbleクラスを格納するArrayList 2 | PImage img; //色をピックアップするイメージ 3 | int maxSize = 60; //円の最大サイズ(直径) 4 | 5 | void setup() { 6 | //画面初期設定 7 | size(800, 600); 8 | frameRate(60); 9 | noStroke(); 10 | //ArrayListの初期化 11 | bubbles = new ArrayList(); 12 | //画像を読み込んで、画面の大きさにリサイズ 13 | //画像の名前は読み込んだ画像に変更する 14 | img = loadImage("photo.jpg"); 15 | img.resize(width, height); 16 | //最初のきっかけの円を描画 17 | for (int i = 0; i < 10; i++) { 18 | PVector loc = new PVector(random(width), random(height)); 19 | bubbles.add(new Bubble(loc)); 20 | } 21 | } 22 | 23 | void draw() { 24 | background(0); 25 | //ArrayListに格納された数だけ、Bubbleを描画 26 | for (int i = 0; i < bubbles.size(); i++) { 27 | bubbles.get(i).draw(); 28 | } 29 | //Bubbleの状態を更新 30 | for (int i = 0; i < bubbles.size(); i++) { 31 | //もしアクティブな状態だったら 32 | if (bubbles.get(i).isDead == false) { 33 | //円の周囲のピクセルの色を確認 34 | boolean expand = bubbles.get(i).checkPixel(); 35 | //もしこれ以上膨張できない場合 36 | if (expand == false) { 37 | //新規にBubbleを生成 38 | PVector loc; 39 | //余白がみつかるまで繰り返し 40 | while (true) { 41 | loc = new PVector(random(width), random(height)); 42 | color c = get(int(loc.x), int(loc.y)); 43 | if ((red(c) + blue(c) + green(c)) == 0) break; 44 | } 45 | //余白に新規Bubbleを生成 46 | bubbles.add(new Bubble(loc)); 47 | bubbles.get(i).isDead = true; 48 | } 49 | } 50 | } 51 | } 52 | 53 | //マウスクリックで初期化 54 | void mouseClicked() { 55 | //ArrayListをクリア 56 | bubbles.clear(); 57 | //きっかけの円を描画 58 | for (int i = 0; i < 100; i++) { 59 | PVector loc = new PVector(random(width), random(height)); 60 | bubbles.add(new Bubble(loc)); 61 | } 62 | } 63 | 64 | //Bubbleクラス 65 | //円が膨張しながら空間を充填していく 66 | class Bubble { 67 | float size; //円のサイズ(直径) 68 | float expandSpeed; //膨張スピード 69 | color circleColor; //円の色 70 | PVector location; //中心の位置 71 | boolean expand; //膨張中か否か 72 | boolean isDead; //活動している状態か否か 73 | 74 | //コンスタラクター 75 | Bubble(PVector _location) { 76 | location = _location; //位置を引数から取得 77 | //パラメータの初期値設定 78 | size = 0; 79 | expandSpeed = 4.0; 80 | expand = true; 81 | isDead = false; 82 | //読み込んだ画像から中心位置と同じピクセルの色を取得 83 | circleColor = img.get(int(location.x), int(location.y)); 84 | } 85 | 86 | //円の描画 87 | void draw() { 88 | //もし膨張中なら 89 | if (expand == true) { 90 | //指定した速度で膨張 91 | size += expandSpeed; 92 | } 93 | //円を描画 94 | fill(circleColor); 95 | ellipse(location.x, location.y, size, size); 96 | } 97 | 98 | //円の周囲のピクセルの色を取得して、まだ膨張する余地があるかを判断する 99 | boolean checkPixel() { 100 | //次のフレームでのサイズを計算 101 | float nextSize = size + expandSpeed; 102 | for (float i = 0; i < TWO_PI; i += 0.01) { 103 | //円の周囲の座標を取得 104 | int x = int(cos(i) * nextSize / 2.0 + location.x); 105 | int y = int(sin(i) * nextSize / 2.0 + location.y); 106 | //取得した座標の直下のピクセルの色を取得 107 | color c = get(x, y); 108 | //色が黒意外、もしくは最大サイズを超えていたら、膨張を中止 109 | if ((red(c) + blue(c) + green(c)) > 0 || size > maxSize) { 110 | expand = false; 111 | } 112 | } 113 | //現在の膨張の状態を返す 114 | return expand; 115 | } 116 | } -------------------------------------------------------------------------------- /w06_07/w06_07.pde: -------------------------------------------------------------------------------- 1 | int NUM = 5000; 2 | ParticleVec2[] particles = new ParticleVec2[NUM]; 3 | 4 | void setup() { 5 | //初期設定 6 | size(800, 600, P3D); 7 | frameRate(60); 8 | noStroke(); 9 | fill(255); 10 | for (int i = 0; i < NUM; i++) { 11 | //パーティクルをインスタンス化 12 | particles[i] = new ParticleVec2(); 13 | //初期位置を設定 14 | particles[i].position.set(width/2, height/4); 15 | //重力を設定 16 | particles[i].gravity.set(0, 0.1); 17 | //摩擦力を設定 18 | particles[i].friction = 0.002; 19 | //質量を設定 20 | particles[i].mass = 1.0; 21 | //半径を設定 22 | particles[i].radius = 1.5; 23 | //円形にランダムになるよう力を加える 24 | float length = random(10); 25 | float angle = random(2*PI); 26 | particles[i].addForce(new PVector(length*cos(angle), length*sin(angle))); 27 | } 28 | background(0); 29 | } 30 | 31 | void draw() { 32 | //背景をフェード 33 | fill(0, 31); 34 | rect(0, 0, width, height); 35 | 36 | //パーティクルを描画 37 | fill(255); 38 | for (int i = 0; i < NUM; i++) { 39 | //パーティクルの位置を更新 40 | particles[i].update(); 41 | //壁でバウンドさせる 42 | particles[i].bounceOffWalls(); 43 | //パーティクルを描画 44 | particles[i].draw(); 45 | } 46 | } 47 | 48 | void mouseReleased() { 49 | for (int i = 0; i < NUM; i++) { 50 | //パーティクルをインスタンス化 51 | particles[i] = new ParticleVec2(); 52 | //初期位置を設定 53 | particles[i].position.set(mouseX, mouseY); 54 | //重力を設定 55 | particles[i].gravity.set(0, 0.1); 56 | //摩擦力を設定 57 | particles[i].friction = 0.002; 58 | //質量を設定 59 | particles[i].mass = 1.0; 60 | //半径を設定 61 | particles[i].radius = 1.5; 62 | //円形にランダムになるよう力を加える 63 | float length = random(10); 64 | float angle = random(2*PI); 65 | particles[i].addForce(new PVector(length*cos(angle), length*sin(angle))); 66 | } 67 | } 68 | 69 | //パーティクルクラス 70 | class ParticleVec2 { 71 | PVector position; //位置 72 | PVector velocity; //速度 73 | PVector acceleration; //加速度 74 | PVector gravity; //重力 75 | float radius; //パーティクルの半径 76 | float friction; //摩擦 77 | float mass; //質量 78 | 79 | //コンストラクター 80 | ParticleVec2() { 81 | //初期パラメーターを設定 82 | radius = 2.0; 83 | position = new PVector(width/2.0, height/2.0); 84 | velocity = new PVector(0, 0); 85 | acceleration = new PVector(0, 0); 86 | gravity = new PVector(0, 0); 87 | friction = 0.0; 88 | mass = 1.0; 89 | } 90 | 91 | //座標の更新 92 | void update() { 93 | velocity.add(acceleration); //速度に加速度を加算 94 | velocity.add(gravity); //重力を加える 95 | velocity.mult(1.0 - friction); //摩擦力を加味した速度を計算 96 | position.add(velocity); //速度から位置を算出 97 | acceleration.set(0, 0); //加速度をリセット 98 | } 99 | 100 | //力を加える関数 101 | void addForce(PVector force) { 102 | //質量から加速度を計算 (a = f/m); 103 | force.div(mass); 104 | acceleration.add(force); 105 | } 106 | 107 | //壁でバウンドさせる 108 | void bounceOffWalls() { 109 | if (position.x < 0 || position.x > width) { 110 | velocity.x *= -1; 111 | } 112 | if (position.y < 0 || position.y > height) { 113 | velocity.y *= -1; 114 | } 115 | //画面からはみ出さないように画面内に限定 116 | position.x = constrain(position.x, 0, width); 117 | position.y = constrain(position.y, 0, height); 118 | } 119 | 120 | //パーティクルを描画 121 | void draw() { 122 | rectMode(CENTER); 123 | rect(position.x, position.y, radius*2, radius*2); 124 | rectMode(CORNER); 125 | } 126 | } -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # SFC「デザインとプログラミング2016」コードサンプル 2 | 3 | SFCで開講された、[2016年度「デザインとプログラミング」の講義](http://yoppa.org/sfc_design16)で使用したProcessingのコードサンプルです。 4 | 5 | [イントロダクション – Creative Codingとは? Processsing について](http://yoppa.org/sfc_design16/7139.html) 6 | 7 | - サンプルなし 8 | 9 | [かたちとコード – Processingで図形を描くには?](http://yoppa.org/sfc_design16/7168.html) 10 | 11 | - [01.基本図形を描く](./w02_01/) 12 | - [02.色の設定](./w02_02/) 13 | - [03.透明度を設定](./w02_03/) 14 | - [04.色の塗り分け](./w02_04/) 15 | - [05.クイズ1](./w02_05/) 16 | - [06.クイズ2](./w02_06/) 17 | 18 | [反復と乱数](http://yoppa.org/sfc_design16/7180.html) 19 | 20 | - [01.四角形](./w03_01/) 21 | - [02.変数の使用](./w03_02/) 22 | - [03.for文によるくりかえし](./w03_03/) 23 | - [04.反復による入れ子構造1](./w03_04/) 24 | - [05.反復による入れ子構造2](./w03_05/) 25 | - [06.回転による繰り返し](./w03_06/) 26 | - [07.虹のグラデーション](./w03_07/) 27 | - [08.ランダムな色](./w03_08/) 28 | - [09.同じ色相でランダム](./w03_09/) 29 | - [10.色相のランダム](./w03_10/) 30 | - [11.円によるコンポジション](./w03_11/) 31 | - [12.矩形によるコンポジション](./w03_12/) 32 | 33 | [動きを生みだす – アニメーションとベクトル](http://yoppa.org/sfc_design16/7187.html) 34 | 35 | - [01.増殖する円](./w04_01/) 36 | - [02.直線運動](./w04_02/) 37 | - [03.壁でバウンド](./w04_03/) 38 | - [04.ベクトルによる運動の表現](./w04_04/) 39 | - [05.大量の物体を動かす](./w04_05/) 40 | - [06.色と大きさをランダムに](./w04_06/) 41 | 42 | [生成的な形をつくる – Processing オブジェクト指向プログラミング入門](http://yoppa.org/sfc_design16/7210.html) 43 | 44 | - [01.ランダムウォーク基本](./w05_01/) 45 | - [02.ランダムウォークによる軌跡](./w05_02/) 46 | - [03.ランダムウォークによる軌跡 (10倍速)](./w05_03/) 47 | - [04.ランダムウォーク・オブジェクト](./w05_04/) 48 | - [05.ランダムウォーク・オブジェクトの配列 (10個)](./w05_05/) 49 | - [06.ランダムウォーク・オブジェクトの配列 (100個)](./w05_06/) 50 | - [07.ランダムウォーク・オブジェクトの配列 (2000個 + 画面効果)](./w05_07/) 51 | 52 | [ニュートン力学による動き – Processingで動きを極める!](http://yoppa.org/sfc_design16/7231.html) 53 | 54 | - [01.位置と速度による運動 – 基本](./w06_01/) 55 | - [02.速度と加速度](./w06_02/) 56 | - [03.摩擦力を加える](./w06_03/) 57 | - [04.重力を加える](./w06_04/) 58 | - [05.壁でバウンドさせる](./w06_05/) 59 | - [06.大量の物体を動かす](./w06_06/) 60 | - [07.円形にランダムに拡がるように / マウスクリックでリセット](./w06_07/) 61 | 62 | [Processingで画像データを扱う – 画像の分析・再合成](http://yoppa.org/sfc_design16/7253.html) 63 | 64 | - [01.画像の表示](./w07_01/) 65 | - [02.画像の大きさと位置](./w07_02/) 66 | - [03.画像の明度を変化](./w07_03/) 67 | - [04.画像の色を変化](./w07_04/) 68 | - [05.モザイク](./w07_05/) 69 | - [06.カラースキャン](./w07_06/) 70 | - [07.モザイクinモザイク](./w07_07/) 71 | - [08.点描による画像再合成](./w07_08/) 72 | - [09.点描の大きさを変化させる](./w07_09/) 73 | - [10.線による画像再合成](./w07_10/) 74 | - [11.膨張する円による再合成](./w07_11/) 75 | 76 | [3Dプログラミング](http://yoppa.org/sfc_design16/7284.html) 77 | 78 | - [01.2Dの回転](./w08_01/) 79 | - [02.3Dの回転1](./w08_02/) 80 | - [03.3Dの回転2](./w08_03/) 81 | - [04.2Dランダムな直線](./w08_04/) 82 | - [05.3Dランダムな直線](./w08_05/) 83 | - [06.直線による球体](./w08_06/) 84 | - [07.立方体の回転](./w08_07/) 85 | 86 | [Processing Libraries 1 : ControlP5 – GUIを作成する](http://yoppa.org/sfc_design16/7310.html) 87 | 88 | - [01.立方体GUIなし](./w09_01/) 89 | - [02.GUI:スライダー](./w09_02/) 90 | - [03.GUI:2Dスライダー](./w09_03/) 91 | - [04.GUI:カラーサークル、トグルボタン](./w09_04/) 92 | 93 | [Processing Libraries 2 : Sound – 音の再生と視覚化](http://yoppa.org/sfc_design16/7353.html) 94 | 95 | - [01.サウンド再生](./w10_01/) 96 | - [02.サウンドの再生スピードと音量を変化](./w10_02/) 97 | - [03.ディレイエフェクト](./w10_03/) 98 | - [04.音量を可視化](./w10_04/) 99 | - [05.サウンド入力](./w10_05/) 100 | - [06.FFT グラフで表示](./w10_06/) 101 | - [07.FFT 色の濃度で表現](./w10_07/) 102 | - [08.FFT 円の大きさで表現](./w10_08/) 103 | - [09.FFT 3Dでビジュアライズ](./w10_09/) 104 | 105 | [Processing Libraries 3 : oscP5 – OSCによるアプリケーション間通信](http://yoppa.org/sfc_design16/7927.html) 106 | 107 | - [01.OSC送信基本](./w11_01/) 108 | - [02.OSC受信基本](./w11_02/) 109 | - [03.OSC受信 波紋による表現](./w11_03/) 110 | - [04.SonicPiとの連携 音を鳴らす](./w11_04/) 111 | - [05.SonicPiとの連携 マウスの位置で音程とパン](./w11_05/) 112 | - [06.SonicPiとの連携 表示の工夫](./w11_06/) 113 | - [07.SonicPiとの連携 ランダムな演奏](./w11_07/) 114 | - [08.SonicPiとの連携 ランダムな演奏の可視化](./w11_08/) 115 | 116 | [Processing Libraries 4 : OpenCV for Processing – コンピュータ・ビジョン、映像を使ったインタラクション](http://yoppa.org/sfc_design16/7958.html) 117 | 118 | - [01.カメラキャプチャー基本](./w12_01/) 119 | - [02.OpenCV輪郭抽出](./w12_02/) 120 | - [03.OpenCVによる顔検出](./w12_03/) 121 | - [04.OpenCVによる顔検出 – 目線を入れてみる](./w12_04/) 122 | - [05.Optical Flowの描画](./w12_05/) 123 | - [06.OpticalFlow + Particle](./w12_06/) 124 | --------------------------------------------------------------------------------