【山崎研Tips】Processing チュートリアル

はじめに

このページは，コミュニケーションロボティクス研究室でのチュートリアルのためのページです。神奈川工科大学ホームエレクトロニクス開発学科，電気電子工学専攻におけるゼミ，講義でも使用します。

Processing とは

電子アートとビジュアルデザインのためのプログラミング言語。

参考サイト

Processing 入門

①ライブラリのインポート

②変数の宣言

⑤その他のブロック（関数）

例）RoombaSerial_Controller.pde

https://gyazo.com/922f44bd0ce23f5236cafad07f39f702

Exercises 1: キャンパスの作成と描画

https://gyazo.com/dd2b40fdaa2ec6bc5c0bbc24264275f9

code: ex01.pde

//Exercises 1: キャンパスの作成と描画

// ③setup関数: プログラム開始時に一度だけ実行される処理

void setup() {

size(640, 480); // 画面サイズを設定

background(255); // 背景色を設定（黒:0-白:255）

}

// ④draw関数:setup関数実行後に繰り返し実行される処理

void draw() {

rect(320, 240, 100, 200); //(320, 240)の位置から幅100，高さ200の四角形を描画

ellipse( 320, 240, 100, 100 ); //(320, 240)を中心に幅100，高さ100の円を描画

}

Exercises 2: マウス動作の取得と描画① マウスの座標の取得

code: ex02.pde

// Exercises 2: マウス動作の取得と描画① マウスの座標の取得

// ポイント(1)：変数mouseX, mouseYでマウスの座標を取得する

// ポイント(2)：変数width, heightで画面サイズを取得する

// setup関数: プログラム開始時に一度だけ実行される処理

void setup() {

size(640, 480); // 画面サイズを設定

}

// draw関数:setup関数実行後に繰り返し実行される処理

void draw() {

background(mouseX, mouseY, 100 ); // マウスポインタの位置から背景色を設定（RGB:0,0,0-255,255,255）

ellipse( width/2, height/2, mouseX, mouseY); //(画面幅の1/2, 画面高さの1/2)を中心に幅：マウスのX座標，高さ：マウスのX座標の円を描画

}

table: 背景色の指定方法

表記の種類 表記のしかた 表記例 範囲

グレースケール background( Gray ); background( 255 ); Gray: 0 - 255

RGB（デフォルト） background( R, G, B ); background( 0, 0, 100); R, G, B: 0 - 255

※HSB background( H, S, B ); background( 0, 0, 100); H, S, B: 0 - 255 ? ※要確認

HSB表記を使うときはcolorMode( )関数でモードを変更する必要がある（デフォルトはRGB）

参考：背景以外の色指定

Exercises 3: マウス動作の取得と描画② クリックイベントの取得

code: ex03-1.pde

// Exercises 3-1: マウス動作の取得と描画

// ポイント(1)：変数mouseX, mouseYでマウスの座標を取得しdrawで動的に描画

// setup関数: プログラム開始時に一度だけ実行される処理

void setup() {

size(640, 480); // 画面サイズを設定

background(255); // 背景色を設定（黒:0-白:255）

}

// draw関数:setup関数実行後に繰り返し実行される処理

void draw() {

ellipse( mouseX, mouseY, random(50), random(50)); // マウスポインタの位置に幅・高さ（0-50）の円を描画

}

code: ex03-2.pde

// Exercises 3-2: クリック時のマウス動作の取得と描画

// ポイント(1)：マウスクリック時のみ変数mouseX, mouseYでマウスの座標を取得し描画

// setup関数: プログラム開始時に一度だけ実行される処理

void setup() {

size(640, 480); // 画面サイズを設定

background(255); // 背景色を設定（黒:0-白:255）

}

// draw関数:setup関数実行後に繰り返し実行される処理

void draw() {

}

// mousePressed関数:マウスボタンが押されると実行される処理

void mousePressed(){

ellipse( mouseX, mouseY, random(50), random(50)); // マウスポインタの位置に幅・高さ（0-50）の円を描画

}

code: ex04.pde

// Exercises 4: コッホ曲線

int l = 300; //size of Koch curve

void setup() {

size(640, 480);

}

void draw(){

background(0, 0, 0);

l = mouseY*2;

stroke(255);

// draw from center of screen

translate(mouseX, mouseY);

// center curve from lower-left corner of base equilateral triangle

translate(-l/2.0, l*sqrt(3)/6.0);

for (int i = 1; i <= 3; i++) {

kcurve(0, l);

rotate(radians(120));

translate(-l, 0);

}

}

void kcurve(float x1, float x2) {

float s = (x2-x1)/3;

if (s < 3) {

pushMatrix();

translate(x1, 0);

line(0, 0, s, 0);

line(2*s, 0, 3*s, 0);

translate(s, 0);

rotate(radians(60));

line(0, 0, s, 0);

translate(s, 0);

rotate(radians(-120));

line(0, 0, s, 0);

popMatrix();

return;

}

pushMatrix();

translate(x1, 0);

kcurve(0, s);

kcurve(2*s, 3*s);

translate(s, 0);

rotate(radians(60));

kcurve(0, s);

translate(s, 0);

rotate(radians(-120));

kcurve(0, s);

popMatrix();

}

参考：

star

particle

Drawing