論理思考とプログラミング#08
N.Shimizu
chiko at sfc.keio.ac.jp
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
1
レポートを提出してください
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
2
最終成果物について
• ひとりプロジェクト
– ひとりでプログラムを作り上げる
– 発注、設計、実装、テスト
• Processingをつかったプログラム
– インタラクティブ
– グラフィカル
2010.11.25論理試行とプログラミング N...
最終発表
• 第12回と第13回
– 第12回にやったひとにはボーナスあり
– だいたい1割から2割増
• 発表+質疑応答
– 持ち時間は8分くらい
– 発表5分、質疑応答3分
2010.11.25論理試行とプログラミング N.Shimizu ...
最終レポート
• 作成したプログラムの報告
• 書いて欲しいこと
– プログラムの解説 / マニュアル
– 仕様と設計
– 実装上の工夫
– 自分の評価と今後の改善点
2010.11.25論理試行とプログラミング N.Shimizu <chik...
前回の内容
http://chikoski.info/tagg
ed/ronpro2010f/
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
6
変数の宣言
int opacity;
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
7
変数の名前
変数の型
Javaの基本的な型
名前 扱えるデータ 例
int 整数 -1, 0, 1, 100, 10000
float 実数 1.0, -0.91, 3.141567474
char 文字 A, b, c, d
String 文字列 Abcdefg,...
命令の書式
line(100, 100, 200, 200);
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
9
命令
引数
;
メソッド
line(100, 100, 200, 200);
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
10
命令
引数
;
返り値
• メソッドが仕事をした結果
• 意味はさまざま
– 作成物
– 計算した結果
– 成功 / 失敗 / ステータスコード
– などなど
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.kei...
レファレンス
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
12
引数の型
引数の意味
問題その1
• ウィンドウサイズ
は400x400
• 背景は黒
• 2000本の線がラン
ダムに引かれてい
る
• 線の色はランダム
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac...
問題その2
• ウィンドウサイズは
400x400
• 背景は黒
• 200個の正方形と200
個の長方形がランダム
な場所に描かれている
• 塗りの色はランダム
• 各辺の長さはランダム
2010.11.25論理試行とプログラミング N.Sh...
問題その3
• ウィンドウサイズは
400x400
• 背景は黒
• 100個の円
• 塗りの色はランダム
• 各辺の長さはランダ
ム
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac...
その1の回答例
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
16
width, height
• width : 画面の幅
• height : 画面の高さ
• 最初から宣言されている変数
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
17
問題その4
• ウィンドウサイズは
400x400
• 背景は黒
• 20x20の正方形を
びっちり敷き詰める
• 一つ一つの色はラン
ダム
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio...
考え方
• まず横1列を描く
– 正方形を一つ描く
– 正方形の1辺の長さ
に1を足した分だけ
右に移動したとこ
ろで正方形を描く
– これを繰り返す
• それを繰り返す
2010.11.25論理試行とプログラミング N.Shimizu <ch...
こういう絵を描いてみよう
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
20
if文:条件分岐
if(条件式){
条件が成り立っている場合の処理
}
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
21
条件式
• 評価が true もしくは falseになる式
• 当てはまるもの
– true / false
– boolean型の変数
– 比較演算
– 論理演算
– 返り値がboolean型のもの
2010.11.25論理試行とプログラミン...
比較
演算子 例 例の意味
< a < 5 aは5より小さいか?
> a > 5 aは5より大きいか?
<= a <= 5 aは5以下か?
>= a >= 5 aは5以上か?
== a == 5 aは5と等しいか?
!= a != 5 aは5と...
AならばB、それ以外はC
if(A){
B
}else{
C
}
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
24
Aが成り立つ場合
それ以外の場合
else if
if(A){
B
}else if(D){
E
}else {
C
}
• AならばB
• それ以外のとき
– DならばE
– それ以外ならばC
2010.11.25論理試行とプログラミング N.Shimizu <chiko a...
論理演算子
演算子 例 意味
&& a < 5 && a > 0 aは5より小さく、かつ0より大き
い
|| a > 5 || a < 0 aは5より大きい、またはaは0よ
り小さい
2010.11.25論理試行とプログラミング N.Shimi...
問題その5
• 400個の正方形をランダム
な場所に描くこと
• 一辺の長さは20から40の間
でランダムに決めること
• 左上の点が画面の半分より
左にある場合は赤く塗り、
右にある時は青く塗ること
2010.11.25論理試行とプログラミン...
問題その6
• 黒地に円を書く
• 塗りはなし
• 上3分の1は赤の円
• 次の3分の1は青の円
• 最後の3分の1は緑の円
• 円の大きさ、位置はランダム
2010.11.25論理試行とプログラミング N.Shimizu <chiko at ...
問題その7
• 黒地に円を書く
• 塗りはなし
• 円の大きさ、位置
はランダム
• 画面を9分割し、
その位置に応じて
色を違えること
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.a...
インタラクションを
加えてみよう
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
30
インタラクション
• 二つのものがお互いに影響しあうこと
– 相互作用
– interaction
• 人間とコンピュータプログラム
– 人間の操作がプログラムの動きを変える
– プログラムが人間の操作を変える
2010.11.25論理試行とプ...
プログラミングのモデルが変わります
• 今まで:
– 上から順番に実行される
– フロー駆動型 (flow driven)
• これから
– イベントに対応した部分のみ実行される
– イベント駆動型 (event driven)
2010.11...
イベント
• マウスのボタンが押される
• マウスのボタンが離される
• キーボードのキーが押される
• キーボードのキーが離される
• 一定期間が過ぎる
2010.11.25論理試行とプログラミング N.Shimizu <chiko at s...
Processingのテンプレート
void setup(){
}
void draw(){
}
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
34
Processingのテンプレート
void setup(){
}
void draw(){
}
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
35
プログラム起動時に実行...
Processingのテンプレート
void setup(){
}
void draw(){
}
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
36
一定間隔で実行して欲し...
プログラムの例
float x, y;
void setup(){
size(400, 400);
background(0, 0, 0);
noStroke();
x = 0;
y = 0;
}
void draw(){
x = x + 0....
メソッド
• プログラムの一部分につけられた名前
– メソッドの宣言:名前をつけること
– 部分の指定:{}で囲む
• 引数と返り値を持つ
– 引数:パラメーター
– 返り値:仕事をした結果
2010.11.25論理試行とプログラミング N.S...
メソッドに対してできること
• 宣言する
– プログラムの一部分に名前をつけること
– 名前をつけるだけで、実行されない
– 引数や返り値の型を決める
• 呼び出す
– 名前をつけた部分を実行する
– 引数を指定してパラメータを変えられる
20...
さっきのプログラムでは
void setup(){
size(400, 400);
background(0, 0, 0, 100);
noStroke();
x = 0;
y = 0;
}
2010.11.25論理試行とプログラミング N.S...
void setup()
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
41
名前
返り値の型
void setup()
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
42
このメソッドは返り値を返さない
draw: 一定間隔で実行される部分
void draw(){
x = x + 0.5;
y = y + 0.5;
fill(100, 0, 0, 100);
ellipse(x, y, 20, 20);
}
2010.11.25論理試行とプロ...
どうなるかやってみよう
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);
...
フレームレート
• drawメソッドを呼び出す間隔
– 正確には画面の描画回数
– FPS (Frame Per Second)
• frameRate(<フレームレート>)
– <フレームレート>には正の実数を書く
– E.g. frameR...
問題その8
• ウィンドウサイズは
400x400
• 背景は黒
• 2000本の線がランダ
ムに引かれている
• 線の色はランダム
• drawが呼び出される
度に描き直すようにし
てください
2010.11.25論理試行とプログラミング N...
自作メソッドを宣言しよう
• まとめる仕事を決める
• 名前
• 引数
• 返り値
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
47
どこをまとめられるか
• 線の色を決める
• ランダムな線を引
く
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
48
名前を決めよう
• やる仕事が想像できる名前が良い
• 動詞+目的語
– 例:drawLineRandomly
– 単語の区切りは大文字に
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio....
引数を決めよう
• 変えたいパラメータがあるか?
• ある→引数にする
• ない→引数無し
• 今回はなし
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
50
返り値を決めよう
• 結果がそれ以降の処理に必要か?
– 何か値を作るような仕事
– 成否で条件分岐したいとき
– などなど
• 必要なら返り値をきめる
• 必要ないなら返り値無し
2010.11.25論理試行とプログラミング N.Shimiz...
メソッドにまとめる部分をコピー
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
52
コピー
コピーした部分をdrawの外へ貼付け
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
53
貼付けた部分を{と}で囲む
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
54
名前をつける
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
55
名前の後に()をつけよう
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
56
引数のリストを()の中に書こう
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
57
返り値の型を名前の前に書こう
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
58
宣言したメソッドを呼び出そう
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
59
なぜメソッドにするのか
• プログラムの見通しが良くなる
– 理解がしやすくなる
– 修正がしやすくなる
• 同じプログラムをコピペしなくても
済む
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc....
問題その9:
• 問題その5をメソッドを
使って書き直してみよう
• drawメソッドとsetupメ
ソッドも追加しよう
• 自分で作ったメソッドを
drawメソッド内で呼び出
そう
2010.11.25論理試行とプログラミング N.Shimi...
クラスでまとめよう
• クラス:型
• クラスを定義する:新しい型を定義
する
• 構成要素
– メンバ変数
– メソッド
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
62
クラスの定義
class クラス名{
メンバ変数の宣言
メソッドの定義
}
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
63
動く円のクラスを作ろう
class MovingBall{
float x;
float y;
}
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
64
クラスを使って変数を宣言しよう
class MovingBall{
float x;
float y;
}
MovingBall a, b;
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio...
代入しよう
class MovingBall{
float x;
float y;
}
MovingBall a, b;
void setup(){
a = new Ball();
b = new Ball();
}
2010.11.25論理試...
メンバ変数に代入しよう
class MovingBall{
float x;
float y;
}
MovingBall a, b;
void setup(){
a = new Ball();
b = new Ball();
a.x = 0;
...
メンバ変数に代入しよう
class MovingBall{
float x;
float y;
}
MovingBall a, b;
void setup(){
a = new Ball();
b = new Ball();
a.x = 0;
...
問題その10:drawをつくって動かそ
う
class MovingBall{
float x;
float y;
}
MovingBall a, b;
void setup(){
size(400, 400);
a = new Ball();...
問題その11:メンバ変数を増やそう
• メンバ変数を増やそう
• 増やす変数:移動スピード
– 縦方向
– 横方向
• 増やした変数を使って書きなおそう
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sf...
Upcoming SlideShare
Loading in …5
×

2010年度秋学期論理思考とプログラミング第8回

662
-1

Published on

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

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

No notes for slide

2010年度秋学期論理思考とプログラミング第8回

  1. 1. 論理思考とプログラミング#08 N.Shimizu chiko at sfc.keio.ac.jp 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 1
  2. 2. レポートを提出してください 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 2
  3. 3. 最終成果物について • ひとりプロジェクト – ひとりでプログラムを作り上げる – 発注、設計、実装、テスト • Processingをつかったプログラム – インタラクティブ – グラフィカル 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 3
  4. 4. 最終発表 • 第12回と第13回 – 第12回にやったひとにはボーナスあり – だいたい1割から2割増 • 発表+質疑応答 – 持ち時間は8分くらい – 発表5分、質疑応答3分 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 4
  5. 5. 最終レポート • 作成したプログラムの報告 • 書いて欲しいこと – プログラムの解説 / マニュアル – 仕様と設計 – 実装上の工夫 – 自分の評価と今後の改善点 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 5
  6. 6. 前回の内容 http://chikoski.info/tagg ed/ronpro2010f/ 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 6
  7. 7. 変数の宣言 int opacity; 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 7 変数の名前 変数の型
  8. 8. Javaの基本的な型 名前 扱えるデータ 例 int 整数 -1, 0, 1, 100, 10000 float 実数 1.0, -0.91, 3.141567474 char 文字 A, b, c, d String 文字列 Abcdefg, あいうえお boolean 真理値 true, false 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 8
  9. 9. 命令の書式 line(100, 100, 200, 200); 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 9 命令 引数 ;
  10. 10. メソッド line(100, 100, 200, 200); 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 10 命令 引数 ;
  11. 11. 返り値 • メソッドが仕事をした結果 • 意味はさまざま – 作成物 – 計算した結果 – 成功 / 失敗 / ステータスコード – などなど 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 11
  12. 12. レファレンス 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 12 引数の型 引数の意味
  13. 13. 問題その1 • ウィンドウサイズ は400x400 • 背景は黒 • 2000本の線がラン ダムに引かれてい る • 線の色はランダム 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 13
  14. 14. 問題その2 • ウィンドウサイズは 400x400 • 背景は黒 • 200個の正方形と200 個の長方形がランダム な場所に描かれている • 塗りの色はランダム • 各辺の長さはランダム 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 14
  15. 15. 問題その3 • ウィンドウサイズは 400x400 • 背景は黒 • 100個の円 • 塗りの色はランダム • 各辺の長さはランダ ム 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 15
  16. 16. その1の回答例 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 16
  17. 17. width, height • width : 画面の幅 • height : 画面の高さ • 最初から宣言されている変数 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 17
  18. 18. 問題その4 • ウィンドウサイズは 400x400 • 背景は黒 • 20x20の正方形を びっちり敷き詰める • 一つ一つの色はラン ダム 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 18
  19. 19. 考え方 • まず横1列を描く – 正方形を一つ描く – 正方形の1辺の長さ に1を足した分だけ 右に移動したとこ ろで正方形を描く – これを繰り返す • それを繰り返す 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 19
  20. 20. こういう絵を描いてみよう 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 20
  21. 21. if文:条件分岐 if(条件式){ 条件が成り立っている場合の処理 } 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 21
  22. 22. 条件式 • 評価が true もしくは falseになる式 • 当てはまるもの – true / false – boolean型の変数 – 比較演算 – 論理演算 – 返り値がboolean型のもの 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 22
  23. 23. 比較 演算子 例 例の意味 < a < 5 aは5より小さいか? > a > 5 aは5より大きいか? <= a <= 5 aは5以下か? >= a >= 5 aは5以上か? == a == 5 aは5と等しいか? != a != 5 aは5と等しくない か? 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 23
  24. 24. AならばB、それ以外はC if(A){ B }else{ C } 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 24 Aが成り立つ場合 それ以外の場合
  25. 25. else if if(A){ B }else if(D){ E }else { C } • AならばB • それ以外のとき – DならばE – それ以外ならばC 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 25
  26. 26. 論理演算子 演算子 例 意味 && a < 5 && a > 0 aは5より小さく、かつ0より大き い || a > 5 || a < 0 aは5より大きい、またはaは0よ り小さい 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 26 A B A&&B A||B(青い部分)
  27. 27. 問題その5 • 400個の正方形をランダム な場所に描くこと • 一辺の長さは20から40の間 でランダムに決めること • 左上の点が画面の半分より 左にある場合は赤く塗り、 右にある時は青く塗ること 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 27
  28. 28. 問題その6 • 黒地に円を書く • 塗りはなし • 上3分の1は赤の円 • 次の3分の1は青の円 • 最後の3分の1は緑の円 • 円の大きさ、位置はランダム 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 28
  29. 29. 問題その7 • 黒地に円を書く • 塗りはなし • 円の大きさ、位置 はランダム • 画面を9分割し、 その位置に応じて 色を違えること 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 29
  30. 30. インタラクションを 加えてみよう 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 30
  31. 31. インタラクション • 二つのものがお互いに影響しあうこと – 相互作用 – interaction • 人間とコンピュータプログラム – 人間の操作がプログラムの動きを変える – プログラムが人間の操作を変える 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 31
  32. 32. プログラミングのモデルが変わります • 今まで: – 上から順番に実行される – フロー駆動型 (flow driven) • これから – イベントに対応した部分のみ実行される – イベント駆動型 (event driven) 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 32
  33. 33. イベント • マウスのボタンが押される • マウスのボタンが離される • キーボードのキーが押される • キーボードのキーが離される • 一定期間が過ぎる 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 33
  34. 34. Processingのテンプレート void setup(){ } void draw(){ } 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 34
  35. 35. Processingのテンプレート void setup(){ } void draw(){ } 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 35 プログラム起動時に実行してほしいことを書く
  36. 36. Processingのテンプレート void setup(){ } void draw(){ } 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 36 一定間隔で実行して欲しいことを書く
  37. 37. プログラムの例 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> 37
  38. 38. メソッド • プログラムの一部分につけられた名前 – メソッドの宣言:名前をつけること – 部分の指定:{}で囲む • 引数と返り値を持つ – 引数:パラメーター – 返り値:仕事をした結果 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 38
  39. 39. メソッドに対してできること • 宣言する – プログラムの一部分に名前をつけること – 名前をつけるだけで、実行されない – 引数や返り値の型を決める • 呼び出す – 名前をつけた部分を実行する – 引数を指定してパラメータを変えられる 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 39
  40. 40. さっきのプログラムでは 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> 40 この範囲に対してsetupという名前をつけた
  41. 41. void setup() 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 41 名前 返り値の型
  42. 42. void setup() 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 42 このメソッドは返り値を返さない
  43. 43. 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> 43
  44. 44. どうなるかやってみよう 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> 44 backgroundを足す
  45. 45. フレームレート • drawメソッドを呼び出す間隔 – 正確には画面の描画回数 – FPS (Frame Per Second) • frameRate(<フレームレート>) – <フレームレート>には正の実数を書く – E.g. frameRate(30); と書くと秒間30回 実行する 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 45
  46. 46. 問題その8 • ウィンドウサイズは 400x400 • 背景は黒 • 2000本の線がランダ ムに引かれている • 線の色はランダム • drawが呼び出される 度に描き直すようにし てください 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 46
  47. 47. 自作メソッドを宣言しよう • まとめる仕事を決める • 名前 • 引数 • 返り値 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 47
  48. 48. どこをまとめられるか • 線の色を決める • ランダムな線を引 く 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 48
  49. 49. 名前を決めよう • やる仕事が想像できる名前が良い • 動詞+目的語 – 例:drawLineRandomly – 単語の区切りは大文字に 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 49
  50. 50. 引数を決めよう • 変えたいパラメータがあるか? • ある→引数にする • ない→引数無し • 今回はなし 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 50
  51. 51. 返り値を決めよう • 結果がそれ以降の処理に必要か? – 何か値を作るような仕事 – 成否で条件分岐したいとき – などなど • 必要なら返り値をきめる • 必要ないなら返り値無し 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 51
  52. 52. メソッドにまとめる部分をコピー 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 52 コピー
  53. 53. コピーした部分をdrawの外へ貼付け 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 53
  54. 54. 貼付けた部分を{と}で囲む 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 54
  55. 55. 名前をつける 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 55
  56. 56. 名前の後に()をつけよう 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 56
  57. 57. 引数のリストを()の中に書こう 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 57
  58. 58. 返り値の型を名前の前に書こう 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 58
  59. 59. 宣言したメソッドを呼び出そう 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 59
  60. 60. なぜメソッドにするのか • プログラムの見通しが良くなる – 理解がしやすくなる – 修正がしやすくなる • 同じプログラムをコピペしなくても 済む 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 60
  61. 61. 問題その9: • 問題その5をメソッドを 使って書き直してみよう • drawメソッドとsetupメ ソッドも追加しよう • 自分で作ったメソッドを drawメソッド内で呼び出 そう 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 61
  62. 62. クラスでまとめよう • クラス:型 • クラスを定義する:新しい型を定義 する • 構成要素 – メンバ変数 – メソッド 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 62
  63. 63. クラスの定義 class クラス名{ メンバ変数の宣言 メソッドの定義 } 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 63
  64. 64. 動く円のクラスを作ろう class MovingBall{ float x; float y; } 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 64
  65. 65. クラスを使って変数を宣言しよう class MovingBall{ float x; float y; } MovingBall a, b; 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 65
  66. 66. 代入しよう class MovingBall{ float x; float y; } MovingBall a, b; void setup(){ a = new Ball(); b = new Ball(); } 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 66
  67. 67. メンバ変数に代入しよう class MovingBall{ float x; float y; } MovingBall a, b; void setup(){ a = new Ball(); b = new Ball(); a.x = 0; a.y = 0; b.x = 100; b.y = 200; } 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 67
  68. 68. メンバ変数に代入しよう class MovingBall{ float x; float y; } MovingBall a, b; void setup(){ a = new Ball(); b = new Ball(); a.x = 0; a.y = 0; b.x = 100; b.y = 200; } 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 68
  69. 69. 問題その10:drawをつくって動かそ う class MovingBall{ float x; float y; } MovingBall a, b; void setup(){ size(400, 400); a = new Ball(); b = new Ball(); a.x = 0; a.y = 0; b.x = 100; b.y = 200; } 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 69
  70. 70. 問題その11:メンバ変数を増やそう • メンバ変数を増やそう • 増やす変数:移動スピード – 縦方向 – 横方向 • 増やした変数を使って書きなおそう 2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp> 70

×