1. 論理思考とプログラミング#08 清水智公 chiko at sfc.keio.ac.jp 2009.12.3 1 論理思考とプログラミング #08 N.Shimizu

2. 先週の論理思考とプログラミング 2009.12.3 2 論理思考とプログラミング #08 N.Shimizu

3. 変数宣言 型 名前 2009.12.3 3 論理思考とプログラミング #08 N.Shimizu

4. 繰り返し while( 条件 ){ 処理 } この条件が真かどうかを調べる 2009.12.3 4 論理思考とプログラミング #08 N.Shimizu

5. 条件分岐 if (条件){ 処理A }else{ 処理B } 条件が成立する->処理Aを実行 成立しない->処理Bを実行 elseの部分は省略できる 2009.12.3 5 論理思考とプログラミング #08 N.Shimizu

6. こういう絵を描いてみよう 2009.12.3 6 論理思考とプログラミング #08 N.Shimizu

7. 仕様 400本線を引く 背景は黒 始点はランダム 終点もランダム 色はランダム 不透明度もランダム 2009.12.3 7 論理思考とプログラミング #08 N.Shimizu

8. 例 2009.12.3 8 論理思考とプログラミング #08 N.Shimizu

9. width, height width : 画面の幅 height : 画面の高さ 最初から宣言されている変数 2009.12.3 9 論理思考とプログラミング #08 N.Shimizu

10. 書き直してみた 2009.12.3 10 論理思考とプログラミング #08 N.Shimizu

11. 400回繰り返す inti = 0; while(i < 400){ 処理 i = i +1; } 繰り返す前に必ずやること 繰り返しの最後に必ずやること 2009.12.3 11 論理思考とプログラミング #08 N.Shimizu

12. for文で簡潔に書けるよ 繰り返す前に必ずやること for(inti = 0; i < 400; i = i + 1){ 処理 } 繰り返しの最後に必ずやること 2009.12.3 12 論理思考とプログラミング #08 N.Shimizu

13. 書き直してみた 2009.12.3 13 論理思考とプログラミング #08 N.Shimizu

14. こういう絵を描いてみよう 黒地に円を書く 塗りはなし 上3分の1は赤の円 次の3分の1は青の円 最後の3分の1は緑の円 円の大きさ、位置はランダム 2009.12.3 14 論理思考とプログラミング #08 N.Shimizu

15. 例 2009.12.3 15 論理思考とプログラミング #08 N.Shimizu

16. 色 color型 colorメソッドで色作成 2009.12.3 16 論理思考とプログラミング #08 N.Shimizu

17. 3つ以上の場合わけ if(場合Aの条件){ 処理A }else if(場合Bの条件){ 処理B }else{ 処理C } A B C 2009.12.3 17 論理思考とプログラミング #08 N.Shimizu

18. こういう絵を描いてみよう 2009.12.3 18 論理思考とプログラミング #08 N.Shimizu

19. 例 前処理 2009.12.3 19 論理思考とプログラミング #08 N.Shimizu

20. 例（つづき） 2009.12.3 20 論理思考とプログラミング #08 N.Shimizu

21. プログラム例の構成 前処理 for(inti = 0; i < 400; i = i + 1){ 円の中心座標と半径の決定 色の決定 描画 } 2009.12.3 21 論理思考とプログラミング #08 N.Shimizu

22. 色の決定方法 2009.12.3 22 論理思考とプログラミング #08 N.Shimizu

23. インタラクションを加えてみよう 2009.12.3 23 論理思考とプログラミング #08 N.Shimizu

24. プログラミングのモデルが変わります 今まで： 上から順番に実行される フロー駆動型 (flow driven) これから イベントに対応した部分のみ実行される イベント駆動型 (event driven) 2009.12.3 24 論理思考とプログラミング #08 N.Shimizu

25. イベント マウスのボタンが押される マウスのボタンが離される キーボードのキーが押される キーボードのキーが離される 一定期間が過ぎる 2009.12.3 25 論理思考とプログラミング #08 N.Shimizu

26. イベントに対応した部分 イベントハンドラ (event handler) 特別な名前をもったメソッド mousePressed() mouseMoved() draw() メソッドを自分で作らなくてはいけない！ 2009.12.3 26 論理思考とプログラミング #08 N.Shimizu

27. これを入力して実行してください 2009.12.3 27 論理思考とプログラミング #08 N.Shimizu

28. 解説 起動時に実行される 2009.12.3 28 論理思考とプログラミング #08 N.Shimizu

29. 解説 ボタンが離されたら実行される 2009.12.3 29 論理思考とプログラミング #08 N.Shimizu

30. 解説 一定期間がすぎたら 実行される 2009.12.3 30 論理思考とプログラミング #08 N.Shimizu

31. マウスカーソルの位置 用意されている変数から読み取る X座標：mouseX（float型） Y座標：mouseY（float型) 2009.12.3 31 論理思考とプログラミング #08 N.Shimizu

32. 利用例 mouseX mouseY 2009.12.3 32 論理思考とプログラミング #08 N.Shimizu

33. 一定期間で消えるようにしよう 一定期間 経つと 2009.12.3 33 論理思考とプログラミング #08 N.Shimizu

34. どれくらいの期間で消すか 3秒後に消えることにしましょう とりあえず円が一つの場合を考えよう 3秒経つ 2009.12.3 34 論理思考とプログラミング #08 N.Shimizu

35. 3秒ってどうやって測るの？ 2009.12.3 35 論理思考とプログラミング #08 N.Shimizu

36. drawメソッドでできるよ！ 2009.12.3 36 論理思考とプログラミング #08 N.Shimizu

37. 解説 一定期間がすぎたら 実行される 2009.12.3 37 論理思考とプログラミング #08 N.Shimizu

38. 解説 一定間隔で実行される 2009.12.3 38 論理思考とプログラミング #08 N.Shimizu

39. フレームレート drawメソッドを呼び出す間隔 正確には画面の描画回数 FPS (Frame Per Second) frameRate(<フレームレート>) ＜フレームレート>には正の実数を書く E.g. frameRate(30); と書くと秒間30回実行する 2009.12.3 39 論理思考とプログラミング #08 N.Shimizu

40. どこで指定すれば良いの？ 1回指定すれば十分 2009.12.3 40 論理思考とプログラミング #08 N.Shimizu

41. 消すにはどうすれば良いの？ 2009.12.3 41 論理思考とプログラミング #08 N.Shimizu

42. 実行してみよう 2009.12.3 42 論理思考とプログラミング #08 N.Shimizu

43. 反応遅くない？ 2009.12.3 43 論理思考とプログラミング #08 N.Shimizu

44. 描画の仕組み プログラム ellipse ellipse ellipse ellipse 画面の状態を 記憶している変数 転送 転送 転送 フレームレート：転送の頻度 実際の画面 2009.12.3 44 論理思考とプログラミング #08 N.Shimizu

45. フレームレートが低い 1秒間に画面に転送する機会が少ない 次に転送するまでの期間が長い 画面への描画命令の反映が遅い 反応が遅い イラッとくる 2009.12.3 45 論理思考とプログラミング #08 N.Shimizu

46. フレームレートは高くでも消えるまでは長くしたい 2009.12.3 46 論理思考とプログラミング #08 N.Shimizu

47. 円の生存期間を記憶しよう ttlという名前の変数を作る int型 初期値は90 ( 30fps * 3 ; 3秒間のフレーム数） 1フレームごとに1減る 0になったときに円を消す 2009.12.3 47 論理思考とプログラミング #08 N.Shimizu

48. ttlを宣言する場所が重要 メソッドの外で 宣言しよう！ 2009.12.3 48 論理思考とプログラミング #08 N.Shimizu

49. フレームごとの処理 2009.12.3 49 論理思考とプログラミング #08 N.Shimizu

50. 「== 」って何？ 2009.12.3 50 論理思考とプログラミング #08 N.Shimizu

51. フレームごとの処理 ttlが0と等しいか？ 2009.12.3 51 論理思考とプログラミング #08 N.Shimizu

52. 実行してみよう 2009.12.3 52 論理思考とプログラミング #08 N.Shimizu

53. 二回目以降すぐ消えちゃう＞＜ 2009.12.3 53 論理思考とプログラミング #08 N.Shimizu

54. クリックごとにttlを初期化しよう 2009.12.3 54 論理思考とプログラミング #08 N.Shimizu

55. 実行してみよう 2009.12.3 55 論理思考とプログラミング #08 N.Shimizu

56. じわじわ消えるように改良しよう 1秒ごとにじわじわ消えるようにしよう じわじわ消える 不透明度の低い背景色で塗る fill(0, 0, 0, 60); rect(0, 0, width, height); 2009.12.3 56 論理思考とプログラミング #08 N.Shimizu

57. 実際に作ってみよう 2009.12.3 57 論理思考とプログラミング #08 N.Shimizu

58. 私の例 2009.12.3 58 論理思考とプログラミング #08 N.Shimizu

59. 円を二つにしてみよう 今のもの 円は二つ以上描ける 消えるタイミングは一緒 改良後 描ける円は二つ 消えるタイミングは別 2009.12.3 59 論理思考とプログラミング #08 N.Shimizu

60. 消し方に工夫がいる 今：全体を黒く塗りつぶしている 改良後：円の部分だけ黒く塗りつぶす 描いた場所を覚えておかなくてはいけない 半径も覚えておかなくちゃいけない ttlも別々に用意しなくてはいけない 2009.12.3 60 論理思考とプログラミング #08 N.Shimizu

61. 変数を宣言しよう 2009.12.3 61 論理思考とプログラミング #08 N.Shimizu

62. 変数の役割 2009.12.3 62 論理思考とプログラミング #08 N.Shimizu

63. 新しい方を残す 2009.12.3 63 論理思考とプログラミング #08 N.Shimizu

64. drawの中での処理 2009.12.3 64 論理思考とプログラミング #08 N.Shimizu

65. 実行してみよう 2009.12.3 65 論理思考とプログラミング #08 N.Shimizu

66. 3つの円を・・・ もう勘弁してください 2009.12.3 66 論理思考とプログラミング #08 N.Shimizu

67. 同じような処理はまとめたい 二つの円を表すのに使った変数 位置（x1, y1とx2, y2) 大きさ (r1とr2) 生存期間(ttl1とttl2) 円を描く処理 徐々に消していく処理 2009.12.3 67 論理思考とプログラミング #08 N.Shimizu

68. クラスにまとめましょう 2009.12.3 68 論理思考とプログラミング #08 N.Shimizu

69. クラス？ 変数の型 構成要素 状態を表すいくつかの変数 状態に基づいて動くいくつかのメソッド 2009.12.3 69 論理思考とプログラミング #08 N.Shimizu

70. クラスの定義 名前 class {と}の間に構成要素書く 2009.12.3 70 論理思考とプログラミング #08 N.Shimizu

71. 変数を追加しよう 2009.12.3 71 論理思考とプログラミング #08 N.Shimizu

72. クラスを使って変数を宣言しよう 2009.12.3 72 論理思考とプログラミング #08 N.Shimizu

73. 値を代入しよう ・・・値？ 2009.12.3 73 論理思考とプログラミング #08 N.Shimizu

74. 円を作ってc1, c2に代入 2009.12.3 74 論理思考とプログラミング #08 N.Shimizu

75. Circleとc1, c2との関係 Circle ：クラス 「円とは何か」 定義 c1, c2 ：オブジェクト 一つ一つの円 クラスによって定義される具体的なもの 2009.12.3 75 論理思考とプログラミング #08 N.Shimizu

76. 値を使ってみよう 2009.12.3 76 論理思考とプログラミング #08 N.Shimizu

77. がんばって置き換えよう 2009.12.3 77 論理思考とプログラミング #08 N.Shimizu

78. がんばって置き換えよう 2009.12.3 78 論理思考とプログラミング #08 N.Shimizu

79. Edit -> Find 2009.12.3 79 論理思考とプログラミング #08 N.Shimizu

80. 動かしてみよう 2009.12.3 80 論理思考とプログラミング #08 N.Shimizu

81. AとBはほとんど一緒の処理 A B 2009.12.3 81 論理思考とプログラミング #08 N.Shimizu

82. クラスの中にまとめよう メソッドとしてまとめる 名前を決める クラス定義の中に書く 2009.12.3 82 論理思考とプログラミング #08 N.Shimizu

83. まとめてみた 2009.12.3 83 論理思考とプログラミング #08 N.Shimizu

84. 書いた場所 2009.12.3 84 論理思考とプログラミング #08 N.Shimizu

85. 使ってみよう 2009.12.3 85 論理思考とプログラミング #08 N.Shimizu

86. drawの中での処理 C D 2009.12.3 86 論理思考とプログラミング #08 N.Shimizu

87. まとめよう！ 2009.12.3 87 論理思考とプログラミング #08 N.Shimizu

88. 書いた場所 2009.12.3 88 論理思考とプログラミング #08 N.Shimizu

89. 実行してみよう 2009.12.3 89 論理思考とプログラミング #08 N.Shimizu

90. 今日のまとめ イベント駆動型プログラム クラスとオブジェクト 2009.12.3 90 論理思考とプログラミング #08 N.Shimizu