Ssaw08 0916

1,404 views

Published on

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

No Downloads
Views
Total views
1,404
On SlideShare
0
From Embeds
0
Number of Embeds
357
Actions
Shares
0
Downloads
38
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Ssaw08 0916

  1. 1. SSAW08 後期第2回Programmingwith proce55ing2008年9月16日
  2. 2. 本日授業の内容• Processingを題材に、プログラムの基本、約束事を確認 • コード構造 • 変数 • データ型 • 演算 • 判定 • 条件分岐 • 論理式 • 反復 • 関数 • クラス • オブジェクト
  3. 3. Processingの文法の基本• Processingの文法は、とてもシンプル! // 320x240のウィンドウを生成 size(320, 240); background(0);
  4. 4. Processingの文法の基本• Processingの文法は、とてもシンプル! // 320x240のウィンドウを生成 →コメント size(320, 240); background(0);
  5. 5. Processingの文法の基本• Processingの文法は、とてもシンプル! // 320x240のウィンドウを生成 →コメント↓関数(Function) size(320, 240); background(0);
  6. 6. Processingの文法の基本• Processingの文法は、とてもシンプル! // 320x240のウィンドウを生成 →コメント↓関数(Function) size(320, 240); →命令の終端 background(0);
  7. 7. Processingの文法の基本• Processingの文法は、とてもシンプル! // 320x240のウィンドウを生成 →コメント↓関数(Function) size(320, 240); →命令の終端 background(0);↑命令(Statement)
  8. 8. Processingの文法の基本• Processingの文法は、とてもシンプル! // 320x240のウィンドウを生成 →コメント↓関数(Function) size(320, 240); →命令の終端 background(0); →引数(パラメータ)↑命令(Statement)
  9. 9. Processingの文法の基本 /* ちなみに、複数行にわたる 長いコメントを記入したい場合には、 このように記述します。 */
  10. 10. Processingの文法の基本 // size関数は2つのパラメータをもつ// 最初の値は表示されるウィンドウの幅を// 2つめの値は高さをあらわしているsize(200, 200);// (この場合の)background関数は、1つのパラメータをもつ// その値はグレースケールでの背景色の濃さ(0 ∼ 255)// を意味しているbackground(102);
  11. 11. Processingの文法の基本 //プログラムは(基本的には)上から下に向かって実行されるsize(200, 200); // size()関数を実行int x; // 新規に変数xを宣言x = 102; // 変数xに、値102を代入background(x); // xの値を引数にbackground()関数を実行
  12. 12. Processingの文法の基本 //大文字と小文字は区別されるので注意!size(200, 200); // OKSize(200, 200); // NG → Sが大文字//processingの関数名は全て小文字から始まりますsize(400, 200);background(64);//2つ以上の単語からなる関数名は、//最初の文字が小文字、2つめ以降の単語の先頭が大文字になりますnoFill();ellipseMode();
  13. 13. Processingの文法の基本 //単語の合間に半角スペースを入れてもかまわないsize(200,200); // OKsize(200, 200); // OK size(200, 200); // OKsize( 200, 200); // OK//単語の中にスペースを入れるのは駄目s ize(200, 200); // NG
  14. 14. 簡単な図形を描いてみる• 簡単な図形を描きながら、Processingのコツをつかむ• 単純なサンプルから徐々に構造化されたものへと進化します• キーワード: • 座標系 • 基本図形 • point(), line(), triangle(), rect(), quad(), ellipse(), bezier() • 描画属性 • stroke(), fill(), noFill(), noStroke(), • strokeWeight(), strokeCap(), strokeJoin() • 描画モード • smooth(), noSmooth(), ellipseMode(), rectMode() • 描画順序
  15. 15. Processingの座標系 //size()のパラメータをいろいろ変えてみる//その法則は?size(200, 200);size(640, 480);size(10, 600);size(800, 20);
  16. 16. Processingの座標系• 左上が原点 (0, 0) x• 横にx軸 y 0 50 100 150 200• 縦にy軸 50 100 150 200
  17. 17. 基本図形の描画点 - point() //point() - 点を描くpoint(20, 20);point(30, 30);point(40, 40);point(50, 50);point(60, 60);
  18. 18. 基本図形の描画線 - line() // 線を描くline(40, 10, 40, 90);line(50, 10, 50, 90);line(60, 10, 60, 90);
  19. 19. 基本図形の描画三角形 - triangle() //三角形triangle(60, 10, 25, 60, 75, 65);triangle(65, 60, 10, 25, 60, 75);
  20. 20. 基本図形の描画四角形1 - quad //四角形quad(20, 20, 20, 70, 60, 90, 60, 40);quad(20, 20, 70, -20, 110, 0, 60, 40);
  21. 21. 基本図形の描画四角形2 - rect() //四角形rect(15, 15, 40, 40);rect(55, 55, 25, 25);
  22. 22. 基本図形の描画円 - ellipse() //円ellipse(35, 0, 120, 120);ellipse(38, 62, 6, 6);ellipse(40, 100, 70, 70);
  23. 23. 基本図形の描画ベジェ曲線 - bezier //ベジェ曲線bezier(85, 20, 40, 10, 60, 90, 15, 80);//補助線line(85, 20, 40, 10);ellipse(40, 10, 4, 4);line(60, 90, 15, 80);ellipse(60, 90, 4, 4);
  24. 24. 描画の順序• プログラムの原則:上から下に実行される• Processingの描画も上から下に• 後から実行された図形は上にくる
  25. 25. 描画の順序 rect(15, 15, 50, 50); // 下ellipse(60, 60, 55, 55); // 上
  26. 26. 描画属性背景色 - background() //背景色//グレースケールの値:黒 = 0 ∼ 白 = 255background(124);
  27. 27. 描画属性塗りの色:fill() background(127);fill(255);rect(10, 10, 50, 50);fill(204);rect(20, 20, 50, 50);fill(153);rect(30, 30, 50, 50);fill(102);rect(40, 40, 50, 50);
  28. 28. 描画属性塗り潰しなし - noFill() rect(10, 10, 50, 50);noFill(); // ここから先、塗りなしrect(20, 20, 50, 50);rect(30, 30, 50, 50);
  29. 29. 描画属性線なし - noStroke rect(20, 15, 20, 70);noStroke(); // ここから先、線なしrect(50, 15, 20, 70);rect(80, 15, 20, 70
  30. 30. 描画属性描画のなめらかさ - smooth(), noSmooth() //なめらかにsmooth();ellipse(30, 48, 36, 36);//ギザギザにnoSmooth();ellipse(70, 48, 36, 36);
  31. 31. 描画属性線の太さ - strokeWeight() smooth();line(20, 20, 80, 20);strokeWeight(6);line(20, 40, 80, 40);strokeWeight(18);line(20, 70, 80, 70);
  32. 32. 描画モード円の描画モード:ellipseMode() smooth();noStroke();ellipseMode(RADIUS);fill(126);ellipse(33, 33, 60, 60);ellipseMode(CORNER);fill(255);ellipse(33, 33, 60, 60);ellipseMode(CORNERS);fill(0);ellipse(33, 33, 60, 60);
  33. 33. 描画モード四角形の描画モード:rectMode() noStroke();rectMode(CORNER);fill(126);rect(40, 40, 60, 60);rectMode(CENTER);fill(255);rect(40, 40, 60, 60);rectMode(CORNERS);fill(0);rect(40, 40, 60, 60);
  34. 34. 変数 (Variables) • 変数とは? • データを一時的に記憶しておく領域 • 箱のイメージ • 記憶可能なデータの内容:整数、実数、真偽、色 ...etc.
  35. 35. 変数 (Variables) • データ形式名前 サイズ 値の範囲boolean 1bit true (真) または false (偽)byte 8bit -128 ∼ 127char 16bit 0 ∼ 65535int 32bit -2,147,483,468 ∼ 2,147,483,467float 32bit 3.40282347E+38 ∼ -3.40282347E+38color 32bit 16,177,216色
  36. 36. 変数の宣言 int x;float y;boolean b;x = 50;y = 12.6;b = true;int x = 50;float y = 12.6;boolean b = true;float x, y, z;x = -3.9;y = 10.1;z = 124.23;
  37. 37. くりかえし - for文• プログラムの利点 • 同じ処理を何度でも飽きずにくりかえし実行してくれる• for() • くりかえしの処理の構造を定義する • 長いコードをコンパクトに圧縮してくれる
  38. 38. くりかえし - for文• for文の書式 for(初期化; ループの継続条件; カウンタ変数の更新) { 文 }• 実行の手順 1. 初期化を実行する。 2. 条件を評価する。条件が偽ならば、ループを終了する。 3. 真文を実行する。 4. カウンタ変数の更新を実行する。 5. 条件の評価に戻る。
  39. 39. くりかえし - for文 //手作業による繰り返し - 面倒!size(400, 400);line(20, 20, 80, 380);line(40, 20, 100, 380);line(60, 20, 120, 380);line(80, 20, 140, 380);line(100, 20, 160, 380);line(120, 20, 180, 380);line(140, 20, 200, 380);line(160, 20, 220, 380);line(180, 20, 240, 380);line(200, 20, 260, 380);line(220, 20, 280, 380);line(240, 20, 300, 380);line(260, 20, 320, 380);line(280, 20, 340, 380);line(300, 20, 360, 380);
  40. 40. くりかえし - for文
  41. 41. くりかえし - for文 //for() で書き換えてみる - シンプル!size(400, 400);for(int i = 20; i < 320; i = i + 20){ line(i, 20, 60 + i, 380);}
  42. 42. くりかえし - for文
  43. 43. くりかえし - for文 //for文の入れ子構造size(400, 400);smooth();for (int y = 40; y < 380; y += 40) { for (int x = 40; x < 380; x += 40) { ellipse(x, y, 20, 20); }}
  44. 44. くりかえし - for文
  45. 45. くりかえし - for文 //for文 - カウンタ更新の工夫size(400, 400);noStroke();fill(64);smooth();for (int y = 360; y > 40; y /= 1.1) { for (int x = 360; x > 40; x /= 1.1) { ellipse(x, y, 5, 5); }}
  46. 46. くりかえし - for文
  47. 47. くりかえし - for文 //for文によるグラデーションnoStroke();size(400, 400);for (int y=0; y<400; y+=20) { for (int x=0; x<400; x+=20) { fill((x+y) * 0.3); rect(x, y, 20, 20); }}
  48. 48. くりかえし - for文
  49. 49. プログラムに構造を付加する• プログラムに構造を付加する • setup() • プログラムを起動した際に1回だけ実行される • draw() • プログラムが作動している間、継続して繰り返し実行される
  50. 50. プログラムに構造を付加する グローバル変数void setup(){ 最初に1回だけ実行されるパート}void draw(){ 繰り返し実行されるパート}
  51. 51. 構造化されたプログラムの例 //初期設定void setup() { size(400, 400); smooth(); fill(128); noStroke();}//円を描くvoid draw() { background(204); ellipse(200, 200, 100, 100);}
  52. 52. 構造化されたプログラムの例
  53. 53. 繰り返し、乱数• draw()はプログラムを実行している間はくりかえし実行される• たくさんの図形を描くこともできるはす • 図形を描く • 位置を移動 • また図形を描く • 位置を移動 • …• 乱数 (random) の利用 • 乱数:全く規則性のない値 • 乱数の生成 (processigの場合) • random(min, max); • min∼maxまでの範囲で乱数を生成
  54. 54. 繰り返し、乱数増殖する円 //初期設定void setup() { size(400, 400); smooth(); fill(128); stroke(32);}//繰り返しランダムな場所に円を描くvoid draw() { float posX = random(0, 400); float posY = random(0, 400); float ellipseSize = random(4, 40); ellipse(posX, posY, ellipseSize, ellipseSize);}
  55. 55. 繰り返し、乱数増殖する円
  56. 56. 条件分岐:if文• if文 - 条件分岐• 「もし∼だったら」という条件を示す文 if(条件式) { 真文 } if(条件式) { 真文 } else { 偽文 }
  57. 57. 条件分岐:if文 //初期設定void setup() { size(400, 400); smooth(); fill(128); stroke(32);}//繰り返しランダムな場所に円を描くvoid draw() { float posX = random(0, 400); float posY = random(0, 400); float ellipseSize = random(4, 40); //もし画面の右半分に中心位置があれば円を描く if(posX > 200){ ellipse(posX, posY, ellipseSize, ellipseSize); } }
  58. 58. 条件分岐:if文
  59. 59. 条件分岐:if else 文 //初期設定void setup() { size(400, 400); background(128); smooth(); fill(64); noStroke();}//繰り返しランダムな場所に円を描くvoid draw() { float posX = random(0, 400); float posY = random(0, 400); float ellipseSize = random(4, 10); if(posX > 200){ //もし画面の右半分だったら fill(32); //濃い灰色でぬりつぶす } else { //そうでなければ fill(204); //濃い灰色でぬりつぶす } ellipse(posX, posY, ellipseSize, ellipseSize); }
  60. 60. 条件分岐:if else 文
  61. 61. 条件分岐:論理積(AND)と論理和(OR)• 論理積 (AND) • A かつ B (A B) • processingでは:A && B• 論理和 (OR)ベン図による論理積 (AND) • A かつ B (A B) • processingでは:A ¦¦ B
  62. 62. 条件分岐:論理積(AND)と論理和(OR) void setup() { size(400, 400); background(128); smooth(); fill(64); noStroke();}void draw() { float posX = random(0, 400); float posY = random(0, 400); float ellipseSize = random(4, 10); if(posX > 200 && posY > 200){ //論理積 fill(32); } else if(posX < 200 || posY < 200) { //論理和 fill(204); } ellipse(posX, posY, ellipseSize, ellipseSize);}
  63. 63. 条件分岐:論理積(AND)と論理和(OR)
  64. 64. 条件分岐:モンテカルロ法で円を描く void setup() { size(400, 400); background(128); smooth(); fill(64); noStroke();}void draw() { float posX = random(0, 400); float posY = random(0, 400); float ellipseSize = random(4, 10); //中心からの距離を算出する float distance = dist(200, 200, posX, posY); if(distance < 150){ fill(32); } else { fill(204); } ellipse(posX, posY, ellipseSize, ellipseSize);}
  65. 65. 条件分岐:モンテカルロ法で円を描く
  66. 66. 関数を定義する• 関数とは? • 引数と呼ばれるデータを受け取り、定められた通りの処理を実行して結 果を返す一連の命令群• いままでやってきたprocessingの命令群も実は全て関数 • size(), rect(), background()....• オリジナルの関数を定義することも可能 • モンテカルロ法で円を描くプログラムをmonteEllipse()として定義する • 引数(argument)は、()の中に入れて受け渡しする
  67. 67. 関数を定義する void setup() { size(400, 400); smooth(); noStroke();}void draw() { monteEllipse();}void monteEllipse() { float posX = random(0, 400); float posY = random(0, 400); float ellipseSize = random(4, 10); float distance = dist(200, 200, posX, posY); if(distance < 100){ fill(64); ellipse(posX, posY, ellipseSize, ellipseSize); }}
  68. 68. 関数を定義する - 引数の定義• 引数をわたせるようにしてみる • 引数の数、順番、型、値は自由に定義できる • 下記のように定義してみる • monteEllipse(x中心点, y中心点, 半径, グレースケール);
  69. 69. 関数を定義する - 引数の定義 void setup() { size(400, 400); smooth(); noStroke();}void draw() { monteEllipse(50, 50, 180, 32); monteEllipse(250, 250, 100, 128); monteEllipse(200, 50, 50, 255);}void monteEllipse(float cx, float cy, float radius, float grayscale) { float posX = random(0, 400); float posY = random(0, 400); float ellipseSize = random(4, 10); float distance = dist(cx, cy, posX, posY); if(distance < radius){ fill(grayscale); ellipse(posX, posY, ellipseSize, ellipseSize); }}
  70. 70. 関数を定義する - 引数の定義
  71. 71. クラスを定義する• クラスとは? • オブジェクトの設計図 • オブジェクト指向プログラミングにおいて、データとその操作手順であ るメソッドをまとめたオブジェクトの雛型を定義したもの • 関数によるよりもさらに発展した概念 • カプセル化 • 継承 • ポリモーフィズム (多態性) • monteEllipse関数と同様な機能を、classで書いてみる • MonteEllipseクラスとして設計
  72. 72. クラスを定義する MonteEllipse m1, m2, m3;void setup() { size(400, 400); noStroke(); smooth(); m1 = new MonteEllipse(50, 50, 180, 32); m2 = new MonteEllipse(250, 250, 100, 128); m3 = new MonteEllipse(300, 100, 50, 255);}void draw() { m1.update(); m2.update(); m3.update();}
  73. 73. クラスを定義する class MonteEllipse { float cx, cy, radius, grayscale; MonteEllipse(float _cx, float _cy, float _radius, float _grayscale){ cx = _cx; cy = _cy; radius = _radius; grayscale = _grayscale; } void update(){ float posX = random(0, 400); float posY = random(0, 400); float ellipseSize = random(4, 10); float distance = dist(cx, cy, posX, posY); if(distance < radius){ fill(grayscale, 128); ellipse(posX, posY, ellipseSize, ellipseSize); } }}
  74. 74. クラスを定義する

×