Your SlideShare is downloading. ×
Processingによるプログラミング入門 第2回
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,186

Published on

Processing によるプログラミング入門の第 2 回目。研究室の勉強会で発表しました。 …

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
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,186
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
34
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 早稲田大学 基幹理工学部 表現工学科長研究室 B4 鈴木 遼4 June 2013
  • 2. 今日やること Processing とプログラミングの基礎 簡単なことを 11 項目だけ覚えます
  • 3. 1. 文字列リテラル [1/3] ダブルクオーテーション “ ” で囲まれた文章は文字列リテラルという文字列データprintln("Waseda");println("Media Design");WasedaMedia Design
  • 4. 1. 文字列リテラル [2/3] 数値データは計算されるが、文字列データはそのままprintln(1+1);println(”1+1”);21+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 の倍数の時は末尾に ! をつける10099!989796!…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==0x は 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] 関数から返ってきた値を直接使っても OKprintln(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%文字列リテラルifelse&&||float 型sqrtabsradianssincos
  • 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]090270180
  • 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 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. 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%pointtrianglequadarcRGB 表色系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

×