1. 論理思考とプログラミング #09 N. Shimizu chiko@sfc.keio.ac.jp 2010.12.2 論理思考とプログラミング N.Shimizu <chiko@sfc.keio.ac.jp> 1

2. 繰り返しの繰り返し まず横1列を描く 正方形を一つ描く 正方形の1辺の長さに1を足した分だけ右に移動したところで正方形を描く これを繰り返す それを繰り返す 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 2

3. if文:条件分岐 if(条件式){ 条件が成り立っている場合の処理 } 2010.12.2 論理思考とプログラミング N.Shimizu <chiko@sfc.keio.ac.jp> 3

4. else if if(A){ B }else if(D){ E }else { C } AならばB それ以外のとき DならばE それ以外ならばC 2010.12.2 論理思考とプログラミング N.Shimizu <chiko@sfc.keio.ac.jp> 4

5. 問題その1 黒地に緑の円を描く 円の直径は30から40の間でランダムに決まる 円の中心とその隣の円の中心は85離れている 透明度は32から256の間でランダムに決まる 2010.12.2 論理思考とプログラミング N.Shimizu <chiko@sfc.keio.ac.jp> 5

6. TIPS: アンチエイリアスをかける background(0); ellipse(30, 48, 36,36); smooth(); ellipse(70, 48, 36, 36); 2010.12.2 論理思考とプログラミング N.Shimizu <chiko@sfc.keio.ac.jp> 6

7. TIPS: 描いた画像を保存しよう save(“ファイル名”); 実行された時点の画面が保存されます プログラムがあるフォルダに保存されます 保存できる形式 tiff, TARGA, jpg, png ファイル名の拡張子で決まる aaa.png / aaa.jpg / aaa.tif 2010.12.2 論理思考とプログラミング N.Shimizu <chiko@sfc.keio.ac.jp> 7

8. 問題その2 黒地に円400個を描く 塗りはなし 上3分の1は赤の円 次の3分の1は緑の円 最後の3分の1は青の円 円の位置はランダム 大きさは20から40の間でランダム 2010.12.2 論理思考とプログラミング N.Shimizu <chiko@sfc.keio.ac.jp> 8

9. 問題その3 黒地に円を書く 塗りはなし 円の大きさ、位置はランダム 画面を9分割し、その位置に応じて色を違えること 2010.12.2 論理思考とプログラミング N.Shimizu <chiko@sfc.keio.ac.jp> 9

10. ある確率でXXをしてほしい 2010.12.2 論理思考とプログラミング N.Shimizu <chiko@sfc.keio.ac.jp> 10 randomが その数を返す確率 randomの返り値

11. ある確率でXXをしてほしい 2010.12.2 論理思考とプログラミング N.Shimizu <chiko@sfc.keio.ac.jp> 11 randomが その数を返す確率 返り値がこの範囲ならXXをする randomの返り値

12. 問題その4 ランダムに図形を描く 正方形もしくは円 50%の確率 大きさ：20×20 ウィンドウサイズは400×400 色はランダムに決まる 2010.12.2 論理思考とプログラミング N.Shimizu <chiko@sfc.keio.ac.jp> 12

13. インタラクションを加えてみよう 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 13

14. インタラクション 二つのものがお互いに影響しあうこと 相互作用 interaction 人間とコンピュータプログラム 人間の操作がプログラムの動きを変える プログラムが人間の操作を変える 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 14

15. プログラミングのモデルが変わります 今まで： 上から順番に実行される フロー駆動型 (flow driven) これから イベントに対応した部分のみ実行される イベント駆動型 (event driven) 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 15

16. イベント マウスのボタンが押される マウスのボタンが離される キーボードのキーが押される キーボードのキーが離される 一定期間が過ぎる 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 16

17. Processingのテンプレート void setup(){ } void draw(){ } 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 17

18. Processingのテンプレート void setup(){ } void draw(){ } 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 18 プログラム起動時に実行してほしいことを書く

19. Processingのテンプレート void setup(){ } void draw(){ } 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 19 一定間隔で実行して欲しいことを書く

20. プログラムの例 float x, y; void setup(){ size(400, 400); background(0, 0, 0); noStroke(); x = 0; y = 0; } void draw(){ x = x + 0.5; y = y + 0.5; fill(255, 0, 0); ellipse(x, y, 20, 20); } 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 20

21. メソッド プログラムの一部分につけられた名前 メソッドの宣言：名前をつけること 部分の指定：{}で囲む 引数と返り値を持つ 引数：パラメーター 返り値：仕事をした結果 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 21

22. メソッドに対してできること 宣言する プログラムの一部分に名前をつけること 名前をつけるだけで、実行されない 引数や返り値の型を決める 呼び出す 名前をつけた部分を実行する 引数を指定してパラメータを変えられる 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 22

23. さっきのプログラムでは void setup(){ size(400, 400); background(0, 0, 0, 100); noStroke(); x = 0; y = 0; } 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 23 この範囲に対してsetupという名前をつけた

24. void setup() 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 24 返り値の型 名前

25. void setup() 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 25 このメソッドは返り値を返さない

26. draw: 一定間隔で実行される部分 void draw(){ x = x + 0.5; y = y + 0.5; fill(100, 0, 0, 100); ellipse(x, y, 20, 20); } 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 26

27. どうなるかやってみよう void draw(){ background(0, 0, 0, 100); x = x + 0.5; y = y + 0.5; fill(100, 0, 0, 100); ellipse(x, y, 20, 20); } 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 27 backgroundを足す

28. フレームレート drawメソッドを呼び出す間隔 正確には画面の描画回数 FPS (Frame Per Second) frameRate(<フレームレート>) ＜フレームレート>には正の実数を書く E.g. frameRate(30); と書くと秒間30回実行する 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 28

29. 問題その5 ウィンドウサイズは400x400 背景は黒 2000本の線がランダムに引かれている 線の色はランダム drawが呼び出される度に描き直すようにしてください 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 29

30. 自作メソッドを宣言しよう まとめる仕事を決める 名前 引数 返り値 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 30

31. どこをまとめられるか 線の色を決める ランダムな線を引く 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 31

32. 名前を決めよう やる仕事が想像できる名前が良い 動詞＋目的語 例：drawLineRandomly 単語の区切りは大文字に 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 32

33. 引数を決めよう 変えたいパラメータがあるか？ ある->引数にする ない->引数無し 今回はなし 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 33

34. 返り値を決めよう 結果がそれ以降の処理に必要か？ 何か値を作るような仕事 成否で条件分岐したいとき などなど 必要なら返り値をきめる 必要ないなら返り値無し 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 34

35. メソッドにまとめる部分をコピー 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 35 コピー

36. コピーした部分をdrawの外へ貼付け 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 36

37. 貼付けた部分を{と}で囲む 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 37

38. 名前をつける 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 38

39. 名前の後に()をつけよう 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 39

40. 引数のリストを()の中に書こう 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 40

41. 返り値の型を名前の前に書こう 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 41

42. 宣言したメソッドを呼び出そう 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 42

43. なぜメソッドにするのか プログラムの見通しが良くなる 理解がしやすくなる 修正がしやすくなる 同じプログラムをコピペしなくても済む 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 43

44. 問題その6 問題その5をメソッドを使って書き直してみよう drawメソッドとsetupメソッドも追加しよう 自分で作ったメソッドをdrawメソッド内で呼び出そう 2010.11.25 論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 44

45. クリックした所に円を描こう 2010.12.2 論理思考とプログラミング N.Shimizu <chiko@sfc.keio.ac.jp> 45 クリック

46. このプログラムで描ける void setup(){ size(400, 400); background(0, 0, 0); smooth(); noStroke(); fill(255, 255, 255); } void draw(){ } void mouseClicked(){ ellipse(mouseX, mouseY, 20, 20); } 2010.12.2 論理思考とプログラミング N.Shimizu <chiko@sfc.keio.ac.jp> 46

47. マウスクリック時に呼ばれるメソッド void mouseClicked(){ ellipse(mouseX, mouseY, 20, 20); } 2010.12.2 論理思考とプログラミング N.Shimizu <chiko@sfc.keio.ac.jp> 47 マウスのX座標 マウスのY座標

48. マウスドラッグ時に呼ばれるメソッド void mouseDragged(){ ellipse(mouseX, mouseY, 20, 20); } 2010.12.2 論理思考とプログラミング N.Shimizu <chiko@sfc.keio.ac.jp> 48

49. 問題その７ マウスがドラッグされたとき、マウスがある場所に白い円を描くプログラムを書いてください 背景は黒 画面のサイズは400x400 2010.12.2 論理思考とプログラミング N.Shimizu <chiko@sfc.keio.ac.jp> 49

50. キーが押された時に呼ばれるメソッド void keyPressed(){ background(0, 0, 0); } 2010.12.2 論理思考とプログラミング N.Shimizu <chiko@sfc.keio.ac.jp> 50

51. 問題その８ 問題その７で作成したプログラムに次の機能を付けてください 作成する機能 キーボードが押されたら、これまで描かれたものを全て消してください 2010.12.2 論理思考とプログラミング N.Shimizu <chiko@sfc.keio.ac.jp> 51

52. 押されたキーによって条件分岐したい void keyPressed(){ if(key == ‘b’){ background(0, 0, 255); }else{ background(0, 0, 0); } } 2010.12.2 論理思考とプログラミング N.Shimizu <chiko@sfc.keio.ac.jp> 52 keyに押されたキーが文字として入っている

53. 文字同士の比較 key == ‘a’ keyの値がaと等しいかどうか 等しいならtrue, そうでないならfalse key != ‘a’ keyの値がaと等しくないかどうか 等しくないならtrue, 等しいならfalse 文字はシングルクオートで囲もう 2010.12.2 論理思考とプログラミング N.Shimizu <chiko@sfc.keio.ac.jp> 53

54. 問題その9 問題その8で作成したプログラムを変更し、次の機能をつけてください 作成する機能 +キーが押されたら、描かれる円の大きさを大きくしてください -キーが押されたら、描かれる円の大きさを小さくしてください 2010.12.2 論理思考とプログラミング N.Shimizu <chiko@sfc.keio.ac.jp> 54