of 16 /16

Click here to load reader

P5utda day2

Embed Size (px)

DESCRIPTION

processing course day2

Citation preview

Page 1: P5utda day2

Processing Workshop 3/17-19 @ 東大

Processing WS, by R.ISHIHARA / Kuma Lab.

Page 2: P5utda day2

Day 2 - You Code and Your Computer Compute

本日の内容

1 数--名前とタイプ2 print(), println()3 if文4 for文

Processing WS, by R.ISHIHARA / Kuma Lab.

Page 3: P5utda day2

1. 数--名前とタイプ昨日のおだい

01 size(400, 400);02 //black stroke,thick03 stroke(0);04 strokeWeight(3);05 //red06 fill(255, 0, 0);07 rect(0, 0, 300, 300);08 //green09 fill(0, 100, 0);10 rect(0, 300, 100, 100);11 //white12 fill(255);13 rect(100, 300, 200, 50);14 rect(100, 350, 200, 50);15 rect(300, 100, 50, 200);16 rect(350, 100, 50, 200);17 //yellow18 fill(255, 255, 0);19 rect(300, 0, 100, 100);20 //blue21 fill(0,0,255);22 rect(300,300,100,100);

Processing WS, by R.ISHIHARA / Kuma Lab.

Page 4: P5utda day2

1. 数--名前とタイプ

たとえば、ウィンドウの大きさが変わった時とか…計算するのがめんどくさい

Processing WS, by R.ISHIHARA / Kuma Lab.

Page 5: P5utda day2

1. 数--名前とタイプ

式を書いてパソコンに計算してもらう.

processingでの数の使い方

名前はだいたい自由に付けられる小文字始まりで意図が分かる名前がいい→ xではなくpositionXの方がわかりやすい円周率PIなどはじめから使われている名前は避ける

1 float xPosition = 100;2 //"type" 名前  = 値;

Processing WS, by R.ISHIHARA / Kuma Lab.

Page 6: P5utda day2

1. 数--名前とタイプ

タイプを意識しないと計算してくれません

ざっくり以下のように理解

1. int 整数2. float 小数3. String 文字列4. boolean はい/いいえの二択

Processing WS, by R.ISHIHARA / Kuma Lab.

Page 7: P5utda day2

2. print(), println()

パソコンとちゃんとコミュニケーションできているか?

println(確認したいもの)

1 int number=15;2 float decimal=.55;3 println(number);4 println("number="+number);

Processing WS, by R.ISHIHARA / Kuma Lab.

Page 8: P5utda day2

2. print(), println()

足し算・掛け算・三角関数も使えるただし=の使い方注意

01 float angle = 0;02 float theta = QUARTER_PI;03 04 println(sin(angle));05 angle = angle + theta;06 println(sin(angle));07 angle = angle + theta;08 println(sin(angle));09 angle = angle + theta;10 println(sin(angle));

Processing WS, by R.ISHIHARA / Kuma Lab.

Page 9: P5utda day2

モンドリアンをパソコンに計算させる

Processing WS, by R.ISHIHARA / Kuma Lab.

Page 10: P5utda day2

01 size(400, 400);02 03 //black stroke,thick04 stroke(0);05 strokeWeight(5);06 07 float scale1 = 3*width/4;08 float scale2 = width-scale1;09 float scale3 = scale2*.5;10 float scale4 = scale1-scale2;11 12 //red13 fill(255, 0, 0);14 rect(0, 0, scale1, scale1);15 16 //green17 fill(0, 100, 0);18 rect(0, scale1, scale2, scale2);19 20 //white21 fill(255);22 rect(scale2, scale1, scale4, scale3);23 rect(scale2, scale1+scale3, scale4, scale3);24 rect(scale1, scale2, scale3, scale4);25 rect(scale1+scale3, scale2, scale3, scale4);26 27 //yellow28 fill(255, 255, 0);29 rect(scale1, 0, scale2, scale2);30

31 //blue32 fill(0, 0, 255);33 rect(scale1, scale1, scale2, scale2);

Page 11: P5utda day2

3. if文

何かの条件で色が変わったりすると面白い

たとえばfillの色をrectの大きさで決めるとか

Processing WS, by R.ISHIHARA / Kuma Lab.

Page 12: P5utda day2

3. if文

条件を書く方法if(条件){どうなるか}

1 size(400, 400);2 float dimension=100;3 if (dimension > width*.5) {4 fill(255, 0, 0);5 }6 else {7 fill(0, 0, 255);8 }9 rect(width/4, height/4, width/4, height/4);

Processing WS, by R.ISHIHARA / Kuma Lab.

Page 13: P5utda day2

4. for文

条件と計算を組み合わせてつかう方法for(最初の状態;条件;更新の仕組み){条件を満たしている間に起こること}

1 size(400, 400);2 colorMode(RGB, 255, 255, 255, width);3 for (float scale=0;scale<=width;scale=scale+10) {4 fill(0, scale, 0, 100);5 rect(0, 0, scale, scale);6 }

Processing WS, by R.ISHIHARA / Kuma Lab.

Page 14: P5utda day2

4. for文

例題グリッド上に正方形を並べよ

Processing WS, by R.ISHIHARA / Kuma Lab.

Page 15: P5utda day2

4. for文

よくやる使い方

01 size(600, 600);02 colorMode(HSB, width, height, 100);03 background(0,0,100);04 noStroke();05 for (int i=0; i < width ; i+=10) {06 for (int j=0; j < height ; j+=10) {07 fill(i, j, 70);08 rect(i, j, 9, 9);09 }10 }

Processing WS, by R.ISHIHARA / Kuma Lab.

Page 16: P5utda day2

今日のお題

ファサード・デザインの課題

幅30m,高さ100mのファサードをデザイン。 以下の方針が設計チームで固まっている。

1. 基本的に1層分(4mとする)の縦ルーバーを使う2. 上から下にグラデーションにしたい(太さとか密度とか)(下は日陰になっている)3. できれば、ホールのある24階と12階はルーバーを付けないようにしたい

Processing WS, by R.ISHIHARA / Kuma Lab.