猿レベルから始めるprocessing 図形を描く

japanese-macaque-hotspring
THE GUILDで先週から始まった深津さんによる「インタラクティブ・プログラミング勉強会」
第1回のテーマは「乱数」
・・・
とはいえ、僕はプログラミング初心者でへこへこついてけるわけもなく、みんながわいわい進めている中、隅で「processingをはじめよう」なんて本を先生にprocessingを0から勉強していきます。(早くみんなに追いつかなければ!)

本家の内容は、以下からお楽しみください。

深津さん
インタラクティブ・プログラミング勉強会 第1回 乱数
cocoponさん
インタラクティブデザイン勉強会 第1回「ランダム」 – フニフニ微生物ができるまで
小玉さん
「インタラクティブ・プログラミング勉強会 第1回 乱数」ー星の瞬きができるまでー

ということで以下の本で勉強したことを復習的な感じでメモ。もし「ちょうど今processingはじめたぜYeah!!」なんて方がいたら是非連絡ください。一緒に頑張りましょう。

processing_book

ウィンドウサイズを指定する
size(幅, 高さ);


point(x, y);


line(x1, y1, x2, y2);
//1と2を結ぶ線ができる

三角形
triangle(x1, y1, x2, y2, x3, y3);

四角形
quad(x1, y1, x2, y2, x3, y3, x4, y4);

正方形・長方形
rect(x, y, width, height);
//rect(出発x位置, 出発y位置, 幅, 高さ);


ellipse(x, y, width, height);
//ellipse(中心x位置, 中心y位置, 幅直径, 高さ直径);

パックマンみたいな形
arc(x, y, width, height, start, stop);
//arc(中心x位置, 中心y位置, 幅直径, 高さ直径, 凹み始め, 凹み終わり);

自由な形
beginShape();
//描き始めるよーっていう合図
vertex(x, y);
//点の位置
endShape();
//描き終わりだよーって合図
//パラメータにCLOSEを入れると最初と最後がつながる

線の太さ
strokeWight(8);
//strokeWight(太さ8px, アルファ値);
noStroke();
//線なし

背景色
background(0);
//background(B or R, G, B);

オブジェクトの塗りつぶし
fill(0);
//fill(R, G, B, アルファ値);
noFill();
//塗りつぶしなし

ざっくり図形が描けるようになったところで、本からの課題「ロボットを描く」
↓こんなやつ
スクリーンショット 2014-11-03 3.05.58

size(500, 400);
background(255);

//Touch
stroke(150);
line(250, 50, 260, 10);
line(300, 100, 330, 110);
line(220, 60, 210, 50);

//Neck
strokeWeight(4);
line(240, 150, 240, 230);
line(250, 150, 250, 230);
line(260, 150, 260, 230);
noStroke();

//Head
fill(0);
ellipse(250, 100, 100, 100);

//Pattern
fill(100);
ellipse(260, 65, 6, 6);
ellipse(280, 95, 4, 4);
ellipse(230, 90, 8, 8);

//eye
fill(255);
ellipse(260, 90, 30, 30);
fill(0);
ellipse(260, 90, 5, 5);

//Foot
fill(100);
ellipse(250, 350, 80, 80);

//Body
fill(0);
rect(200, 200, 100, 150);
fill(100);
rect(200, 210, 100, 5);