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

2. Procssing 言語仕様はJavaとほぼ同一 Javaを単純化 グラフィック機能を強化 画像、アニメーション、インタラクションを扱うのに向いている

3. 今日の内容 Processingをインストールしよう Processingの基本を理解しよう 変数 条件分岐 繰り返し

4. www.processing.org

5. ダウンロードページへ ココをクリック

6. 最新のMac OSX版をダウンロードしよう ココをクリック

7. アプリケーションで開こう

8. しばし待つ

9. クリック

10. フォルダへコピー コレをコピー

11. インストール終了

12. 起動

13. キニシナイ！

14. 起動画面

15. プログラムを書こう ここにプログラムを書きます

16. プログラム size(400, 400); stroke(192, 0, 0) line(100, 100, 200, 200);

17. 書けたら実行 ココを押す

18. エラーに負けない

19. だいたいのエラー箇所

20. 直したら再度実行 ココを押す

21. 実行できた

22. こまめに保存しよう ココを押す

23. プログラムを動かすまで プログラムを書く 文法エラーを直す 以上を繰り返す

24. さっき書いたプログラム size(400, 400); stroke(192, 0, 0); line(100, 100, 200, 200);

25. 一つ一つの命令をメソッドと呼びます size(400, 400); stroke(192, 0, 0); line(100, 100, 200, 200); メソッド

26. メソッドは ; で終ります size(400, 400); stroke(192, 0, 0); line(100, 100, 200, 200); 最後は必ず;

27. スペースや改行に意味はありません size(400, 400); stroke(192, 0, 0); line(100, 100, 200, 200); size(400, 400); stroke(192, 0, 0); line(100, 100, 200, 200); ココを押す 同じプログラム

28. 上から順に実行されます size(400, 400); stroke(192, 0, 0); line(100, 100, 200, 200);

29. さっき書いたプログラムの解説 size(400, 400); stroke(192, 0, 0); line(100, 100, 200, 200); 画面のサイズを400x400に変更

30. さっき書いたプログラムの解説 size(400, 400); stroke(192, 0, 0); line(100, 100, 200, 200); 線の色を変更

31. さっき書いたプログラムの解説 size(400, 400); stroke(192, 0, 0); line(100, 100, 200, 200); (100, 100)から(200, 200)に 線を描く

32. Processing の座標系 X Y

33. 色の指定方法 stroke(192, 0, 0, 255); R G B 不透明度

34. 不透明度を5%ずつあげてみた 不透明度

35. ランダムに線をひいてみよう 始点と終点の座標をランダムに作りたい ランダムに作る->乱数が必要 random(上限, 下限); で乱数を作れる E.g. random(400, 100); 100から400の間 E.g. random(200); 0から200の間 下限を省略した場合は自動的に下限が0になる

36. ランダムに線を引いてよう size(400, 400); stroke(192, 0, 0); line(random(400), random(400), random(400), random(400));

37. 図形も描いてみよう

38. 新規作成 ココを押す

39. 使用例

40. 使用例

41. 塗りにも色を！ fill(192, 0, 0, 255); R G B 不透明度

42. 使用例

43. 練習 今まで知ったメソッドを組み合わせて スケッチを3枚作ろう SA、もしくは私に見せてください 終った人から休憩

44. 休憩

45. 変数を作ろう コレ

46. 変数を宣言する 宣言する：変数を作ること 宣言するために決める必要があること 変数の名前 変数の型

47. 変数の型 データの種類 E.g. 整数、実数、文字列、座標、ファイル 可能な操作がことなる 「文字列同士を結合」はできる 「整数同士を結合」はできない

48. 宣言方法 型 名前

49. Javaの基本的な型

50. 変数の利用例

51. ここで使った変数の役割 役割がわかりやすい名前をつけると良い。

52. 乱数を使おう 下限 上限 float型の値が返ってくる

53. 引数：メソッドに与えるパラメータ 引数

54. 乱数、変数を使ってたくさんの図形を描こう 同種の図形を10個かいてみよう

55. 例

56. このプログラム

57. コピペうざい＞＜ それ繰り返しでできるよ！

58. 繰り返し

59. 条件が成立している限り処理をする while( 条件 ){ 処理 } この条件が真かどうかを調べる

60. さっきの解説 int型の変数iを宣言。ついでに0を代入。

61. さっきの解説 iが0より小さいか調べる。もちろん小さいので、i < 100は真

62. さっきの解説 ココを実行する

63. さっきの解説 ランダムな場所に、ランダムな大きさで、円を描く

64. さっきの解説 iの値を1増やす

65. さっきの解説 ココに戻ってくる

66. さっきの解説 iの値は1

67. さっきの解説 iが0より小さいか調べる。もちろん小さいので、i < 100は真

68. さっきの解説 ココを実行する

69. 99回同じことを繰り返します

70. さっきの解説 iの値は100

71. さっきの解説 iが0より小さいか調べる。が、大きいので、i < 100は偽

72. さっきの解説 条件が成立しないので、ココは実行されない

73. 若干修正

74. 実行結果

75. 次のような絵を描いてみよう

76. 次のような絵を描いてみよう それぞれ色が違う

77. どうやって作るか考えよう 背景は黒 円がたくさん描かれている X座標、Y座標はランダムに決まっている 上下左右で色が異なる

78. 案1：4回色を変えて描く

79. 案2：円の位置に応じて色を変える

80. 条件分岐 if (条件){ 処理A }else{ 処理B } 条件が成立する->処理Aを実行 成立しない->処理Bを実行 elseの部分は省略できる

81. プログラム全体

82. 赤成分を決めているところ

83. 緑成分を決めているところ

84. noFill(); コレを書くと、塗りつぶしされない！

85. 今日のまとめ Processing をインストールした Processingでプログラムを書いてみた 変数の作り方と使い方を知った 繰り返しの書き方を知った 条件分岐の書き方を知った