Embed Size (px)
DESCRIPTION
Processing によるプログラミング入門の第 2 回目。研究室の勉強会で発表しました。 PowerPoint のファイルが欲しい場合は連絡をください。 [←前回] 第 1 回 http://www.slideshare.net/Reputeless/processing-21734209 [次回→] 第 3 回 http://www.slideshare.net/Reputeless/processing-3-23489861
Citation preview
早稲田大学 基幹理工学部 表現工学科長研究室 B4 鈴木 遼
4 June 2013
今日やること
Processing とプログラミングの基礎
簡単なことを 11 項目だけ覚えます
1. 文字列リテラル [1/3]
ダブルクオーテーション “ ” で囲まれた文
章は文字列リテラルという文字列データ
println("Waseda"); println("Media Design");
Waseda Media Design
1. 文字列リテラル [2/3]
数値データは計算されるが、文字列データ
はそのまま
println(1+1); println(”1+1”);
2 1+1
1. 文字列リテラル [3/3]
数値データと文字列データは + 演算子で
連結できる
println(101+” Dalmatians"); println("("+5+","+10+")");
101 Dalmatians (5,10)
2. if 文 [1/6]
条件式が true のとき {} の中身を実行
int age = 9; if(age<=12) { println(“child fare"); }
if(条件式) { trueのときの処理; }
2. if 文 [2/6]
int age = 19; if(age<=12) { println(“child fare"); }
2. if 文 [3/6]
条件式が false のときは else 節を実行
int age = 30; if(age<=18) { println(“child fare"); } else { println(“adult fare"); }
2. if 文 [4/6]
[問題] 100 から 0 までカウントダウン
ただし 3 の倍数の時は末尾に ! をつける
100 99! 98 97 96! … 0!
2. if 文 [5/6]
解答例
for(int i=100; i>=0; --i) { if(i%3==0) { println(i+"!"); } else { println(i); } }
2. if 文 [6/6]
注意) 比較演算は連続できない
▼ 間違ったプログラム
この次の論理演算子を使う
int age = 15; if(18<age<65) { println(“adult fare"); }
3. 論理演算 [1/3]
&& 論理 AND 演算子 （かつ）
|| 論理 OR 演算子 (または)
x は 100 未満 かつ 4 の倍数
x<100 && x%4==0
x は 3 の倍数 または 4 の倍数
x%3==0 || x%4==0
3. 論理演算 [2/3]
int age = 15; if(18<age && age<65) { println(“adult fare"); } else { println(“discount fare"); }
3. 論理演算 [3/3]
int age = 15; if(age<=18 || 65<=age) { println(“discount fare"); } else { println(“adult fare"); }
4. 浮動小数点数 [1/4]
小数点を含む数を書くと、それは浮動小数
点数リテラルと呼ばれる数値データになる
2.5 -1.2
4. 浮動小数点数 [2/4]
浮動小数点数リテラルは float 型
float x = 2.5; float y = -1.2; println(x); println(y);
4. 浮動小数点数 [3/4]
float 型
扱える値はおよそ –(1038) ～ 1038 の実数
できる計算は + - * / % など
注意）近似なのでぴったり正確にはならない
ことがある
== や != の演算は避ける
4. 浮動小数点数 [4/4]
float x = 2.5; float y = -1.2; println(x+3.5); println(y*2.0); println(x*y);
5. 数学関数 [1/5]
sqrt(x) 関数は x の平方根を返す
float x = sqrt(81); float y = sqrt(2.2); println(x); println(y);
5. 数学関数 [2/5]
abs(x) 関数は x の絶対値を返す
float x = abs(2.0); float y = abs(-3.5); println(x); println(y);
5. 数学関数 [3/5]
radians(x) 関数は x を度数法から弧度法
（ラジアン）に変換した値を返す
float x = radians(90); float y = radians(180); println(x); println(y);
5. 数学関数 [4/5]
関数から返ってきた値を直接使っても OK
println(sqrt(2.0)); println(abs(-2.5)); println(radians(45));
5. 数学関数 [5/5]
sin(x), cos(x) 関数はラジアン角 x のサイ
ン・コサインを返す
float x = sin(1.2); float y = cos(radians(180)); println(x); println(y);
復習
50%
文字列リテラル if else && || float 型
sqrt abs radians sin cos
6. 点を描く [1/2]
点を描く
x : X 座標
y : Y 座標
point(x,y);
6. 点を描く [2/2]
size(600,400); point(5,5);
7. 三角形を描く [1/2]
三角形を描く
x1 …y3 : 各頂点の座標（時計回り）
triangle(x1, y1, x2, y2, x3, y3);
7. 三角形を描く [2/2]
size(600,400); triangle(5,5, 400,50, 500,300);
8. 四角形を描く [1/2]
四角形を描く
x1 …y4 : 各頂点の座標（時計回り）
quad(x1, y1, x2, y2, x3, y3, x4, y4);
8. 四角形を描く [2/2]
size(600,400); quad(5,5, 400,50, 500,300, 50,200);
9. 円の一部を描く [1/5]
円の一部を描く
x, y : 円の中心座標
w, h : 円の幅と高さ
start : 開始角度（ラジアン）
stop : 終了角度（ラジアン）
arc(x, y, w, h, start, stop);
9. 円の一部を描く [2/5]
0
90
270
180
9. 円の一部を描く [3/5]
size(600,400); arc(100,200,150,150,0,radians(45)); arc(300,200,150,150,0,radians(270)); arc(500,200,150,150,radians(180),radians(270));
9. 円の一部を描く [4/5]
[問題] 丸を食べるキャラクターを描こう
9. 円の一部を描く [5/5]
解答例
size(600,400); background(0,0,0); fill(255,255,0); arc(150,200,200,200,radians(30),radians(330)); ellipse(300,200,50,50); ellipse(400,200,50,50); ellipse(500,200,50,50);
10. HSV 表色系 [1/6]
RGB 表色系
赤
緑
青
の 3 成分で色を表現
10. HSV 表色系 [2/6]
HSV 表色系
色相 (Hue)
彩度 (Saturation)
明度 (Value)
の 3 成分で色を表現
Processing では HSB (B=Brightness) と呼ぶ
10. HSV 表色系 [3/6]
色相 Hue ・・・ 「色合い」
赤っぽい、青っぽいといった色合い
色相を環状に並べたものを色相環と言い、
赤は 0°, 黄色は 60° といったように、円上
の角度で色合いを表現
10. HSV 表色系 [4/6]
彩度 Saturation ・・・ 「鮮やかさ」
色相が同じでも、彩度が高ければ鮮やかに
見え、低ければグレーに見える。彩度が 0
の場合は無彩色（黒、グレー、白）になる
10. HSV 表色系 [5/6]
明度 Value ・・・ 「明るさ」
明度が高ければ明るい色に、低ければ暗い
色になる
10. HSV 表色系 [6/6]
RGB で表現できるすべての色が HSV でも
表現できる
RGB HSV
255, 0, 0 0, 1.0, 1.0
0, 255, 0 120, 1.0, 1.0
0, 0, 255 240, 1.0, 1.0
255, 255, 0 60, 1.0, 1.0
89, 170, 242 208, 0.63, 0.95
112, 48, 160 274, 0.7, 0.63
11. カラーモード [1/7]
background(), fill(), stroke() などで使う
表色系と成分の最大値を変更
mode : 表色系。RGB または HSB
range1… : 各成分の最大値
colorMode(mode,range1); colorMode(mode,range1,range2,range3);
11. カラーモード [2/7]
初期状態では最大値 255 の RGB 表色系
R : [0, 255]
G : [0, 255]
B : [0, 255]
colorMode(RGB,255); background(255,255,0); size(600,400);
11. カラーモード [3/7]
最大値が 100 のRGB 表色系
R : [0, 100]
G : [0, 100]
B : [0, 100]
colorMode(RGB,100); background(100,100,0); size(600,400);
11. カラーモード [4/7]
最大値が 1.0 のRGB 表色系
R : [0, 1.0]
G : [0, 1.0]
B : [0, 1.0]
colorMode(RGB,1.0); background(1.0,1.0,0); size(600,400);
11. カラーモード [5/7]
HSV 表色系
H : [0, 360]
S : [0.0, 1.0]
V : [0.0, 1.0]
colorMode(HSB,360,1.0,1.0); background(60,1.0,1.0); size(600,400);
11. カラーモード [6/7]
[問題] 虹のグラデーションの丸を描こう
ヒント: 色相
11. カラーモード [7/7]
解答例
size(600,400); noStroke(); colorMode(HSB,360,1.0,1.0); for(int x=0; x<7; ++x) { fill(x*30,1.0,1.0); ellipse(x*100,200,100,100); }
Complete!
100%
point triangle quad arc RGB 表色系
HSV 表色系 色相 彩度 明度 colorMode
Practice [1/3]
size(600,400); background(40,40,40); noStroke(); for(int y=0; y<10; ++y) { for(int x=0; x<15; ++x) { if((y+x)%2==0) { rect(x*40,y*40,40,40); } } }
Practice [2/3]
size(600,400); noStroke(); colorMode(HSB,360,1.0,1.0); for(int x=0; x<600; ++x) { fill(x%360,1.0,1.0); rect(x*1,0,1,400); }
Practice [3/3]
size(600,400); noStroke(); colorMode(HSB,360,1.0,1.0); for(int i=0; i<36; ++i) { fill(i*10,1.0,1.0); float rad = radians(i*10); float x = 300 + cos(rad)*180; float y = 200 - sin(rad)*180; ellipse(x,y,30,30); }
Challenge 自分のイニシャルをアートっぽく表現する
例）I.D
続きは再来週の第 3 回で！
いよいよ動きのあるプログラムに！
