Processingによるプログラミング入門 第2回

3,989 views

Published on

Processing によるプログラミング入門の第 2 回目。研究室の勉強会で発表しました。
PowerPoint のファイルが欲しい場合は連絡をください。

[←前回] 第 1 回 http://www.slideshare.net/Reputeless/processing-21734209
[次回→] 第 3 回 http://www.slideshare.net/Reputeless/processing-3-23489861

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,989
On SlideShare
0
From Embeds
0
Number of Embeds
133
Actions
Shares
0
Downloads
51
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Processingによるプログラミング入門 第2回

  1. 1. 早稲田大学 基幹理工学部 表現工学科長研究室 B4 鈴木 遼4 June 2013
  2. 2. 今日やること Processing とプログラミングの基礎 簡単なことを 11 項目だけ覚えます
  3. 3. 1. 文字列リテラル [1/3] ダブルクオーテーション “ ” で囲まれた文章は文字列リテラルという文字列データprintln("Waseda");println("Media Design");WasedaMedia Design
  4. 4. 1. 文字列リテラル [2/3] 数値データは計算されるが、文字列データはそのままprintln(1+1);println(”1+1”);21+1
  5. 5. 1. 文字列リテラル [3/3] 数値データと文字列データは + 演算子で連結できるprintln(101+” Dalmatians");println("("+5+","+10+")");101 Dalmatians(5,10)
  6. 6. 2. if 文 [1/6] 条件式が true のとき {} の中身を実行int age = 9;if(age<=12){println(“child fare");}if(条件式){trueのときの処理;}
  7. 7. 2. if 文 [2/6]int age = 19;if(age<=12){println(“child fare");}
  8. 8. 2. if 文 [3/6] 条件式が false のときは else 節を実行int age = 30;if(age<=18){println(“child fare");}else{println(“adult fare");}
  9. 9. 2. if 文 [4/6] [問題] 100 から 0 までカウントダウン ただし 3 の倍数の時は末尾に ! をつける10099!989796!…0!
  10. 10. 2. if 文 [5/6] 解答例for(int i=100; i>=0; --i){if(i%3==0){println(i+"!");}else{println(i);}}
  11. 11. 2. if 文 [6/6] 注意) 比較演算は連続できない▼ 間違ったプログラム この次の論理演算子を使うint age = 15;if(18<age<65){println(“adult fare");}
  12. 12. 3. 論理演算 [1/3] && 論理 AND 演算子 (かつ) || 論理 OR 演算子 (または)x は 100 未満 かつ 4 の倍数x<100 && x%4==0x は 3 の倍数 または 4 の倍数x%3==0 || x%4==0
  13. 13. 3. 論理演算 [2/3]int age = 15;if(18<age && age<65){println(“adult fare");}else{println(“discount fare");}
  14. 14. 3. 論理演算 [3/3]int age = 15;if(age<=18 || 65<=age){println(“discount fare");}else{println(“adult fare");}
  15. 15. 4. 浮動小数点数 [1/4] 小数点を含む数を書くと、それは浮動小数点数リテラルと呼ばれる数値データになる2.5-1.2
  16. 16. 4. 浮動小数点数 [2/4] 浮動小数点数リテラルは float 型float x = 2.5;float y = -1.2;println(x);println(y);
  17. 17. 4. 浮動小数点数 [3/4] float 型 扱える値はおよそ –(1038) ~ 1038 の実数 できる計算は + - * / % など 注意)近似なのでぴったり正確にはならないことがある == や != の演算は避ける
  18. 18. 4. 浮動小数点数 [4/4]float x = 2.5;float y = -1.2;println(x+3.5);println(y*2.0);println(x*y);
  19. 19. 5. 数学関数 [1/5] sqrt(x) 関数は x の平方根を返すfloat x = sqrt(81);float y = sqrt(2.2);println(x);println(y);
  20. 20. 5. 数学関数 [2/5] abs(x) 関数は x の絶対値を返すfloat x = abs(2.0);float y = abs(-3.5);println(x);println(y);
  21. 21. 5. 数学関数 [3/5] radians(x) 関数は x を度数法から弧度法(ラジアン)に変換した値を返すfloat x = radians(90);float y = radians(180);println(x);println(y);
  22. 22. 5. 数学関数 [4/5] 関数から返ってきた値を直接使っても OKprintln(sqrt(2.0));println(abs(-2.5));println(radians(45));
  23. 23. 5. 数学関数 [5/5] sin(x), cos(x) 関数はラジアン角 x のサイン・コサインを返すfloat x = sin(1.2);float y = cos(radians(180));println(x);println(y);
  24. 24. 復習50%文字列リテラルifelse&&||float 型sqrtabsradianssincos
  25. 25. 6. 点を描く [1/2] 点を描く x : X 座標 y : Y 座標point(x,y);
  26. 26. 6. 点を描く [2/2]size(600,400);point(5,5);
  27. 27. 7. 三角形を描く [1/2] 三角形を描く x1 …y3 : 各頂点の座標(時計回り)triangle(x1, y1, x2, y2, x3, y3);
  28. 28. 7. 三角形を描く [2/2]size(600,400);triangle(5,5, 400,50, 500,300);
  29. 29. 8. 四角形を描く [1/2] 四角形を描く x1 …y4 : 各頂点の座標(時計回り)quad(x1, y1, x2, y2, x3, y3, x4, y4);
  30. 30. 8. 四角形を描く [2/2]size(600,400);quad(5,5, 400,50, 500,300, 50,200);
  31. 31. 9. 円の一部を描く [1/5] 円の一部を描く x, y : 円の中心座標 w, h : 円の幅と高さ start : 開始角度(ラジアン) stop : 終了角度(ラジアン)arc(x, y, w, h, start, stop);
  32. 32. 9. 円の一部を描く [2/5]090270180
  33. 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. 34. 9. 円の一部を描く [4/5] [問題] 丸を食べるキャラクターを描こう
  35. 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. 36. 10. HSV 表色系 [1/6] RGB 表色系 赤 緑 青 の 3 成分で色を表現
  37. 37. 10. HSV 表色系 [2/6] HSV 表色系 色相 (Hue) 彩度 (Saturation) 明度 (Value) の 3 成分で色を表現 Processing では HSB (B=Brightness) と呼ぶ
  38. 38. 10. HSV 表色系 [3/6] 色相 Hue ・・・ 「色合い」 赤っぽい、青っぽいといった色合い 色相を環状に並べたものを色相環と言い、赤は 0°, 黄色は 60° といったように、円上の角度で色合いを表現
  39. 39. 10. HSV 表色系 [4/6] 彩度 Saturation ・・・ 「鮮やかさ」 色相が同じでも、彩度が高ければ鮮やかに見え、低ければグレーに見える。彩度が 0の場合は無彩色(黒、グレー、白)になる
  40. 40. 10. HSV 表色系 [5/6] 明度 Value ・・・ 「明るさ」 明度が高ければ明るい色に、低ければ暗い色になる
  41. 41. 10. HSV 表色系 [6/6] RGB で表現できるすべての色が HSV でも表現できるRGB HSV255, 0, 0 0, 1.0, 1.00, 255, 0 120, 1.0, 1.00, 0, 255 240, 1.0, 1.0255, 255, 0 60, 1.0, 1.089, 170, 242 208, 0.63, 0.95112, 48, 160 274, 0.7, 0.63
  42. 42. 11. カラーモード [1/7] background(), fill(), stroke() などで使う表色系と成分の最大値を変更 mode : 表色系。RGB または HSB range1… : 各成分の最大値colorMode(mode,range1);colorMode(mode,range1,range2,range3);
  43. 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. 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. 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. 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. 47. 11. カラーモード [6/7] [問題] 虹のグラデーションの丸を描こう ヒント: 色相
  48. 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. 49. Complete!100%pointtrianglequadarcRGB 表色系HSV 表色系色相彩度明度colorMode
  50. 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. 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. 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. 53. Challenge 自分のイニシャルをアートっぽく表現する例)I.D
  54. 54.  続きは再来週の第 3 回で! いよいよ動きのあるプログラムに!
  55. 55. Questions?@Reputeless

×