Click here to load reader
Upload
ryuyu-ishihara
View
237
Download
0
Embed Size (px)
DESCRIPTION
processing course day2
Citation preview
Processing Workshop 3/17-19 @ 東大
Processing WS, by R.ISHIHARA / Kuma Lab.
Day 2 - You Code and Your Computer Compute
本日の内容
1 数--名前とタイプ2 print(), println()3 if文4 for文
Processing WS, by R.ISHIHARA / Kuma Lab.
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.
1. 数--名前とタイプ
たとえば、ウィンドウの大きさが変わった時とか…計算するのがめんどくさい
Processing WS, by R.ISHIHARA / Kuma Lab.
1. 数--名前とタイプ
式を書いてパソコンに計算してもらう.
processingでの数の使い方
名前はだいたい自由に付けられる小文字始まりで意図が分かる名前がいい→ xではなくpositionXの方がわかりやすい円周率PIなどはじめから使われている名前は避ける
1 float xPosition = 100;2 //"type" 名前 = 値;
Processing WS, by R.ISHIHARA / Kuma Lab.
1. 数--名前とタイプ
タイプを意識しないと計算してくれません
ざっくり以下のように理解
1. int 整数2. float 小数3. String 文字列4. boolean はい/いいえの二択
Processing WS, by R.ISHIHARA / Kuma Lab.
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.
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.
モンドリアンをパソコンに計算させる
Processing WS, by R.ISHIHARA / Kuma Lab.
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);
3. if文
何かの条件で色が変わったりすると面白い
たとえばfillの色をrectの大きさで決めるとか
Processing WS, by R.ISHIHARA / Kuma Lab.
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.
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.
4. for文
例題グリッド上に正方形を並べよ
Processing WS, by R.ISHIHARA / Kuma Lab.
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.
今日のお題
ファサード・デザインの課題
幅30m,高さ100mのファサードをデザイン。 以下の方針が設計チームで固まっている。
1. 基本的に1層分(4mとする)の縦ルーバーを使う2. 上から下にグラデーションにしたい(太さとか密度とか)(下は日陰になっている)3. できれば、ホールのある24階と12階はルーバーを付けないようにしたい
Processing WS, by R.ISHIHARA / Kuma Lab.