Processing によるプログラミング入門の第 2 回目。研究室の勉強会で発表しました。 PowerPoint のファイルが欲しい場合は連絡をください。 [←前回] 第 1 回 http://www.slideshare.net/Reputeless/processing-21734209 [次回→] 第 3 回 http://www.slideshare.net/Reputeless/processing-3-23489861

1. 早稲田大学 基幹理工学部 表現工学科
長研究室 B4 鈴木 遼
4 June 2013

2. 今日やること
 Processing とプログラミングの基礎
 簡単なことを 11 項目だけ覚えます

3. 1. 文字列リテラル [1/3]
 ダブルクオーテーション “ ” で囲まれた文
章は文字列リテラルという文字列データ
println("Waseda");
println("Media Design");
Waseda
Media Design

4. 1. 文字列リテラル [2/3]
 数値データは計算されるが、文字列データ
はそのまま
println(1+1);
println(”1+1”);
2
1+1

5. 1. 文字列リテラル [3/3]
 数値データと文字列データは + 演算子で
連結できる
println(101+” Dalmatians");
println("("+5+","+10+")");
101 Dalmatians
(5,10)

6. 2. if 文 [1/6]
 条件式が true のとき {} の中身を実行
int age = 9;
if(age<=12)
{
println(“child fare");
}
if(条件式)
{
trueのときの処理;
}

7. 2. if 文 [2/6]
int age = 19;
if(age<=12)
{
println(“child fare");
}

8. 2. if 文 [3/6]
 条件式が false のときは else 節を実行
int age = 30;
if(age<=18)
{
println(“child fare");
}
else
{
println(“adult fare");
}

9. 2. if 文 [4/6]
 [問題] 100 から 0 までカウントダウン
 ただし 3 の倍数の時は末尾に ! をつける
100
99!
98
97
96!
…
0!

10. 2. if 文 [5/6]
 解答例
for(int i=100; i>=0; --i)
{
if(i%3==0)
{
println(i+"!");
}
else
{
println(i);
}
}

11. 2. if 文 [6/6]
 注意) 比較演算は連続できない
▼ 間違ったプログラム
 この次の論理演算子を使う
int age = 15;
if(18<age<65)
{
println(“adult fare");
}

12. 3. 論理演算 [1/3]
 && 論理 AND 演算子 （かつ）
 || 論理 OR 演算子 (または)
x は 100 未満 かつ 4 の倍数
x<100 && x%4==0
x は 3 の倍数 または 4 の倍数
x%3==0 || x%4==0

13. 3. 論理演算 [2/3]
int age = 15;
if(18<age && age<65)
{
println(“adult fare");
}
else
{
println(“discount fare");
}

14. 3. 論理演算 [3/3]
int age = 15;
if(age<=18 || 65<=age)
{
println(“discount fare");
}
else
{
println(“adult fare");
}

15. 4. 浮動小数点数 [1/4]
 小数点を含む数を書くと、それは浮動小数
点数リテラルと呼ばれる数値データになる
2.5
-1.2

16. 4. 浮動小数点数 [2/4]
 浮動小数点数リテラルは float 型
float x = 2.5;
float y = -1.2;
println(x);
println(y);

17. 4. 浮動小数点数 [3/4]
 float 型
 扱える値はおよそ –(1038) ～ 1038 の実数
 できる計算は + - * / % など
 注意）近似なのでぴったり正確にはならない
ことがある
 == や != の演算は避ける

18. 4. 浮動小数点数 [4/4]
float x = 2.5;
float y = -1.2;
println(x+3.5);
println(y*2.0);
println(x*y);

19. 5. 数学関数 [1/5]
 sqrt(x) 関数は x の平方根を返す
float x = sqrt(81);
float y = sqrt(2.2);
println(x);
println(y);

20. 5. 数学関数 [2/5]
 abs(x) 関数は x の絶対値を返す
float x = abs(2.0);
float y = abs(-3.5);
println(x);
println(y);

21. 5. 数学関数 [3/5]
 radians(x) 関数は x を度数法から弧度法
（ラジアン）に変換した値を返す
float x = radians(90);
float y = radians(180);
println(x);
println(y);

22. 5. 数学関数 [4/5]
 関数から返ってきた値を直接使っても OK
println(sqrt(2.0));
println(abs(-2.5));
println(radians(45));

23. 5. 数学関数 [5/5]
 sin(x), cos(x) 関数はラジアン角 x のサイ
ン・コサインを返す
float x = sin(1.2);
float y = cos(radians(180));
println(x);
println(y);

24. 復習
50%
文字列リテラル
if
else
&&
||
float 型
sqrt
abs
radians
sin
cos

25. 6. 点を描く [1/2]
 点を描く
 x : X 座標
 y : Y 座標
point(x,y);

26. 6. 点を描く [2/2]
size(600,400);
point(5,5);

27. 7. 三角形を描く [1/2]
 三角形を描く
 x1 …y3 : 各頂点の座標（時計回り）
triangle(x1, y1, x2, y2, x3, y3);

28. 7. 三角形を描く [2/2]
size(600,400);
triangle(5,5, 400,50, 500,300);

29. 8. 四角形を描く [1/2]
 四角形を描く
 x1 …y4 : 各頂点の座標（時計回り）
quad(x1, y1, x2, y2, x3, y3, x4, y4);

30. 8. 四角形を描く [2/2]
size(600,400);
quad(5,5, 400,50, 500,300, 50,200);

31. 9. 円の一部を描く [1/5]
 円の一部を描く
 x, y : 円の中心座標
 w, h : 円の幅と高さ
 start : 開始角度（ラジアン）
 stop : 終了角度（ラジアン）
arc(x, y, w, h, start, stop);

32. 9. 円の一部を描く [2/5]
0
90
270
180

33. 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));

34. 9. 円の一部を描く [4/5]
 [問題] 丸を食べるキャラクターを描こう

35. 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);

36. 10. HSV 表色系 [1/6]
 RGB 表色系
 赤
 緑
 青
 の 3 成分で色を表現

37. 10. HSV 表色系 [2/6]
 HSV 表色系
 色相 (Hue)
 彩度 (Saturation)
 明度 (Value)
 の 3 成分で色を表現
 Processing では HSB (B=Brightness) と呼ぶ

38. 10. HSV 表色系 [3/6]
 色相 Hue ・・・ 「色合い」
 赤っぽい、青っぽいといった色合い
 色相を環状に並べたものを色相環と言い、
赤は 0°, 黄色は 60° といったように、円上
の角度で色合いを表現

39. 10. HSV 表色系 [4/6]
 彩度 Saturation ・・・ 「鮮やかさ」
 色相が同じでも、彩度が高ければ鮮やかに
見え、低ければグレーに見える。彩度が 0
の場合は無彩色（黒、グレー、白）になる

40. 10. HSV 表色系 [5/6]
 明度 Value ・・・ 「明るさ」
 明度が高ければ明るい色に、低ければ暗い
色になる

41. 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

42. 11. カラーモード [1/7]
 background(), fill(), stroke() などで使う
表色系と成分の最大値を変更
 mode : 表色系。RGB または HSB
 range1… : 各成分の最大値
colorMode(mode,range1);
colorMode(mode,range1,range2,range3);

43. 11. カラーモード [2/7]
 初期状態では最大値 255 の RGB 表色系
 R : [0, 255]
 G : [0, 255]
 B : [0, 255]
colorMode(RGB,255);
background(255,255,0);
size(600,400);

44. 11. カラーモード [3/7]
 最大値が 100 のRGB 表色系
 R : [0, 100]
 G : [0, 100]
 B : [0, 100]
colorMode(RGB,100);
background(100,100,0);
size(600,400);

45. 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);

46. 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);

47. 11. カラーモード [6/7]
 [問題] 虹のグラデーションの丸を描こう
 ヒント: 色相

48. 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);
}

49. Complete!
100%
point
triangle
quad
arc
RGB 表色系
HSV 表色系
色相
彩度
明度
colorMode

50. 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);
}
}
}

51. 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);
}

52. 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);
}

53. Challenge
 自分のイニシャルをアートっぽく表現する
例）I.D

54.  続きは再来週の第 3 回で！
 いよいよ動きのあるプログラムに！

55. Questions?
@Reputeless