2017.5.2 Processing入門

自己紹介 ੴڷ༞հ ISHIGO Yusuke 情報科学芸術大学院大学[IAMAS] Institute of Advanced Media Arts and Sciences 2012.4- 日本総合ビジネス専門学校 NIHON-CHUO Institution 2017.4- 合同会社4D Pocket 4D Pocket LLC. 2017.4-

修士研究 オープンソース環境におけるコーディングプロセスの可視化・共有の可能性 コーディングプロセスの可視化 派生作品を生み出す手がかりを見つける （どのコードがいつ確定・削除されたのかを、差分表示により可視化）

修士研究 re:coder ―「失われたコード」を再生するシステム http://recoder.yusk1450.com/

プログラミング コンピュータに対する指示をまとめたものを「プログラム」と呼び、それを記述 するルールのことを「プログラミング言語」と言う。

Processing プログラミング言語「Java」をベースにMITメディアラボにて開発されたアートと ビジュアルデザインのためのプログラミング環境（オープンソース・ソフトウェア） https://processing.org/download/

プログラミングの構造 プログラムとは と データ （0,1,2…、”hoge”） データ操作 （1+2、print(“hoge”)） ……の集まり

プログラムの流れ 順次 プログラムは、基本的に上から下へ1行ずつ順番に実行される size(640, 480); frameRate(60); background(120); //println(Serial.list()); String portID = Serial.list()[1]; mono = new MonoStick(new Serial(this, portID, 115200)); mono.debugMode = true; 実行順序

四角を書いてみる size(640, 480); rect(50, 50, 200, 200); ウィンドウのサイズを幅640、高さ480にする 左上座標(50, 50)に幅200px、高さ200pxで四角を書く (0, 0) 480 640 50, 50

変数を使ってみる 変数 データを入れるための箱 100 a = 100; a 変数の型 静的型付け言語の変数には型があり、変数を作る際には、入れるデータの種類によって 型を決める必要がある。以下、基本的な型を挙げる。 int String double 整数型 実数型（倍精度浮動小数点数型） 文字列型 boolean 論理型（trueもしくはfalse） abc b = “abc”; b 文字列の場合は、ダブルクォーテーション 「”」で囲う

変数を使って四角を書いてみる int x = 50; int y = 50; int w = 200; int h = 200; size(640, 480); rect(x, y, w, h); 変数「y」に50を入れる 変数「x」に50を入れる 変数「h」に200を入れる 左上座標([x], [y])に幅[w]px、高さ[h]pxで四角を書く 変数「w」に200を入れる x、y、w、hをひとつずつ変更して、実行してみる

変数を使った計算方法 int w = 200; int h = 200; int x = 0; int y = 0; x = 640/2 - w/2; y = 480/2 - h/2; size(640, 480); rect(x, y, w, h); 変数「y」に0を入れる 480を2で割ったものを、hを2で割ったもので引く 変数「x」に0を入れる 変数の中身は、変更することもできる また、変更する際には、型を書く必要はない 640を2で割ったものを、wを2で割ったもので引く

関数を使ってみる 関数 一連のデータ処理をまとめたもの。 入力（パラメタ）に応じて出力を返す。入力や出力が不必要（void）なものもある。 Processing側で用意されているものを使用したり、自分で作成したりできる。 関数 入力 出力 Processing関数一覧 https://www.processing.org/reference/ （引数） （戻り値）

random関数を使って四角のサイズを変えてみる int w = (int)random(20, 200); int h = (int)random(20, 200); int x = 0; int y = 0; x = 640/2 - w/2; y = 480/2 - h/2; size(640, 480); rect(x, y, w, h); 変数「y」に0を入れる 480を2で割ったものを、hを2で割ったもので引く 変数「x」に0を入れる 640を2で割ったものを、wを2で割ったもので引く 引数に指定した範囲の数をランダムに返す float random(low, high) 戻り値 第1引数 第2引数 20〜200の間の数をランダムに生成して変数「h」に入れる 20〜200の間の数をランダムに生成して変数「w」に入れる float random(high) 戻り値 第1引数 関数の定義によっては、変数を変えて呼び出すこともできる （関数のオーバロード） ramdonの戻り値の型は、float（実数型）だが、今回は整数値がほしいので、floatをintに変換 している（これを「キャスト」と言う）

setup関数とdraw関数 void setup() { } 特定のイベント発生時に呼び出される関数がある （「1フレームに1回呼び出される」「マウスクリックで呼び出される」等） それぞれのイベントに合わせてプログラムを書いていく手法を「イベントドリブン」という void draw() { } setupは、起動時に1度だけ呼び出される （初期化処理） drawは、毎フレームごとに呼び出される デフォルトでは、FPS（Frame Per Second）は 60なので、1/60秒ごとに呼び出される （更新処理）

毎フレームごとに四角を書いてみる① void setup() { size(640, 480); } void draw() { int w = (int)random(20, 200); int h = (int)random(20, 200); int x = 0; int y = 0; x = 640/2 - w/2; y = 480/2 - h/2; rect(x, y, w, h); } ウィンドウサイズは、1度指定すれば良いので、setup関数内に書く

毎フレームごとに四角を書いてみる② void setup() { size(640, 480); } void draw() { background(204); int w = (int)random(20, 200); int h = (int)random(20, 200); int x = 0; int y = 0; x = 640/2 - w/2; y = 480/2 - h/2; rect(x, y, w, h); } backgroundを使って、塗りつぶし処理を入れる

条件式 分岐 条件によって、プログラムを分岐させる if (条件式) { } else { } 条件に当てはまるときに、{}内が実行される >　<　<=　>= && ==　!= 値の大きさを比較 等しいか否か かつ || もしくは 条件式で使用する演算子 条件に当てはまらないときに{}内が実行される else{}は書かなくても良い

一定の大きさを超えた場合、色を変える void setup() { size(640, 480); frameRate(10); } void draw() { background(204); int w = (int)random(20, 200); int h = (int)random(20, 200); int x = 640/2 - w/2; int y = 480/2 - h/2; color c; if (w > 150 && h > 150) { c = color(255, 205, 213); } else { c = color(255, 255, 255); } fill(c); rect(x, y, w, h); }

繰り返し 反復 同じ処理をn回繰り返す for (初期化; 条件式; 更新) { } 条件式に当てはまる間、繰り返す void draw() { background(204); int w = 50; int h = 50; int y = 480/2 - h/2; for (int i = 0; i < 10; i++) { int x = i * w; rect(x, y, w, h); } }

プログラミングの構造 プログラムとは と データ 変数 データ操作 順次、分岐、反復 ……の集まり （構造化定理）

配列 変数に番号を付けてまとめたもの a[0] a a[3] a[2] a[1] a[4] 0 1 2 3 4 int[] a = new int[5]; a[0] = 12; a[1] = 34; a[2] = 56; a[3] = 78; a[4] = 90; 12 34 56 78 90 for (int i = 0; i < 5; i++) { println(a[i]); }

バウンディングボックス int w = 50; int h = 50; int x = 0, y = 0; int vx = 0, vy = 0; void setup() { size(640, 480); } void draw() { background(204); x += vx; y += vy; if (x <= 0 || x >= width) { vx *= -1; } if (y <= 0 || y >= height) { vy *= -1; } rect(x, y, w, h); }

課題