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

論理思考とプログラミング#08
N.Shimizu
chiko at sfc.keio.ac.jp
2010.11.25論理試行とプログラミング N.Shimizu <chiko at sfc.keio.ac.jp>
1

レポートを提出してください
2

最終成果物について
• ひとりプロジェクト
– ひとりでプログラムを作り上げる
– 発注、設計、実装、テスト
• Processingをつかったプログラム
– インタラクティブ
– グラフィカル
3

最終発表
• 第12回と第13回
– 第12回にやったひとにはボーナスあり
– だいたい1割から2割増
• 発表＋質疑応答
– 持ち時間は8分くらい
– 発表5分、質疑応答3分
4

最終レポート
• 作成したプログラムの報告
• 書いて欲しいこと
– プログラムの解説 / マニュアル
– 仕様と設計
– 実装上の工夫
– 自分の評価と今後の改善点
5

前回の内容
http://chikoski.info/tagg
ed/ronpro2010f/
6

変数の宣言
int opacity;
7
変数の名前
変数の型

Javaの基本的な型
名前扱えるデータ例
int 整数 -1, 0, 1, 100, 10000
float 実数 1.0, -0.91, 3.141567474
char 文字 A, b, c, d
String 文字列 Abcdefg, あいうえお
boolean 真理値 true, false
8

命令の書式
line(100, 100, 200, 200);
9
命令
引数
；

メソッド
line(100, 100, 200, 200);
10
命令
引数
；

返り値
• メソッドが仕事をした結果
• 意味はさまざま
– 作成物
– 計算した結果
– 成功 / 失敗 / ステータスコード
– などなど
11

レファレンス
12
引数の型
引数の意味

問題その1
• ウィンドウサイズ
は400x400
• 背景は黒
• 2000本の線がラン
ダムに引かれてい
る
• 線の色はランダム
13

問題その2
• ウィンドウサイズは
400x400
• 背景は黒
• 200個の正方形と200
個の長方形がランダム
な場所に描かれている
• 塗りの色はランダム
• 各辺の長さはランダム
14

問題その3
400x400
• 背景は黒
• 100個の円
• 塗りの色はランダム
• 各辺の長さはランダ
ム
15

その1の回答例
16

width, height
• width : 画面の幅
• height : 画面の高さ
• 最初から宣言されている変数
17

問題その4
400x400
• 背景は黒
• 20x20の正方形を
びっちり敷き詰める
• 一つ一つの色はラン
ダム
18

考え方
• まず横1列を描く
– 正方形を一つ描く
– 正方形の1辺の長さ
に1を足した分だけ
右に移動したとこ
ろで正方形を描く
– これを繰り返す
• それを繰り返す
19

こういう絵を描いてみよう
20

if文:条件分岐
if(条件式){
条件が成り立っている場合の処理
}
21

条件式
• 評価が true もしくは falseになる式
• 当てはまるもの
– true / false
– boolean型の変数
– 比較演算
– 論理演算
– 返り値がboolean型のもの
22

比較
演算子例例の意味
< a < 5 aは５より小さいか？
> a > 5 aは５より大きいか？
<= a <= 5 aは5以下か？
>= a >= 5 aは5以上か？
== a == 5 aは5と等しいか？
!= a != 5 aは5と等しくない
か？
23

AならばB、それ以外はC
if(A){
B
}else{
C
}
24
Aが成り立つ場合
それ以外の場合

else if
if(A){
B
}else if(D){
E
}else {
C
}
• AならばB
• それ以外のとき
– DならばE
– それ以外ならばC
25

論理演算子
演算子例意味
&& a < 5 && a > 0 aは5より小さく、かつ0より大き
い
|| a > 5 || a < 0 aは5より大きい、またはaは0よ
り小さい
26
A B
A&&B
A||B（青い部分）

問題その5
• 400個の正方形をランダム
な場所に描くこと
• 一辺の長さは20から40の間
でランダムに決めること
• 左上の点が画面の半分より
左にある場合は赤く塗り、
右にある時は青く塗ること
27

問題その6
• 黒地に円を書く
• 塗りはなし
• 上3分の1は赤の円
• 次の3分の1は青の円
• 最後の3分の1は緑の円
• 円の大きさ、位置はランダム
28

問題その7
• 黒地に円を書く
• 塗りはなし
• 円の大きさ、位置
はランダム
• 画面を9分割し、
その位置に応じて
色を違えること
29

インタラクションを
加えてみよう
30

インタラクション
• 二つのものがお互いに影響しあうこと
– 相互作用
– interaction
• 人間とコンピュータプログラム
– 人間の操作がプログラムの動きを変える
– プログラムが人間の操作を変える
31

プログラミングのモデルが変わります
• 今まで：
– 上から順番に実行される
– フロー駆動型 (flow driven)
• これから
– イベントに対応した部分のみ実行される
– イベント駆動型 (event driven)
32

イベント
• マウスのボタンが押される
• マウスのボタンが離される
• キーボードのキーが押される
• キーボードのキーが離される
• 一定期間が過ぎる
33

Processingのテンプレート
void setup(){
}
void draw(){
}
34

void setup(){
}
void draw(){
}
35
プログラム起動時に実行してほしいことを書く

void setup(){
}
void draw(){
}
36
一定間隔で実行して欲しいことを書く

プログラムの例
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);
}
37

メソッド
• プログラムの一部分につけられた名前
– メソッドの宣言：名前をつけること
– 部分の指定：{}で囲む
• 引数と返り値を持つ
– 引数：パラメーター
– 返り値：仕事をした結果
38

メソッドに対してできること
• 宣言する
– プログラムの一部分に名前をつけること
– 名前をつけるだけで、実行されない
– 引数や返り値の型を決める
• 呼び出す
– 名前をつけた部分を実行する
– 引数を指定してパラメータを変えられる
39

さっきのプログラムでは
void setup(){
size(400, 400);
background(0, 0, 0, 100);
noStroke();
x = 0;
y = 0;
}
40
この範囲に対してsetupという名前をつけた

void setup()
41
名前
返り値の型

void setup()
42
このメソッドは返り値を返さない

draw: 一定間隔で実行される部分
void draw(){
x = x + 0.5;
y = y + 0.5;
fill(100, 0, 0, 100);
}
43

どうなるかやってみよう
void draw(){
background(0, 0, 0, 100);
x = x + 0.5;
y = y + 0.5;
fill(100, 0, 0, 100);
}
44
backgroundを足す

フレームレート
• drawメソッドを呼び出す間隔
– 正確には画面の描画回数
– FPS (Frame Per Second)
• frameRate(<フレームレート>)
– ＜フレームレート>には正の実数を書く
– E.g. frameRate(30); と書くと秒間30回
実行する
45

問題その8
400x400
• 背景は黒
• 2000本の線がランダ
ムに引かれている
• 線の色はランダム
• drawが呼び出される
度に描き直すようにし
てください
46

自作メソッドを宣言しよう
• まとめる仕事を決める
• 名前
• 引数
• 返り値
47

どこをまとめられるか
• 線の色を決める
• ランダムな線を引
く
48

名前を決めよう
• やる仕事が想像できる名前が良い
• 動詞＋目的語
– 例：drawLineRandomly
– 単語の区切りは大文字に
49

引数を決めよう
• 変えたいパラメータがあるか？
• ある→引数にする
• ない→引数無し
• 今回はなし
50

返り値を決めよう
• 結果がそれ以降の処理に必要か？
– 何か値を作るような仕事
– 成否で条件分岐したいとき
– などなど
• 必要なら返り値をきめる
• 必要ないなら返り値無し
51

メソッドにまとめる部分をコピー
52
コピー

コピーした部分をdrawの外へ貼付け
53

貼付けた部分を{と}で囲む
54

名前をつける
55

名前の後に()をつけよう
56

引数のリストを()の中に書こう
57

返り値の型を名前の前に書こう
58

宣言したメソッドを呼び出そう
59

なぜメソッドにするのか
• プログラムの見通しが良くなる
– 理解がしやすくなる
– 修正がしやすくなる
• 同じプログラムをコピペしなくても
済む
60

問題その９：
• 問題その5をメソッドを
使って書き直してみよう
• drawメソッドとsetupメ
ソッドも追加しよう
• 自分で作ったメソッドを
drawメソッド内で呼び出
そう
61

クラスでまとめよう
• クラス：型
• クラスを定義する：新しい型を定義
する
• 構成要素
– メンバ変数
– メソッド
62

クラスの定義
class クラス名{
メンバ変数の宣言
メソッドの定義
}
63

動く円のクラスを作ろう
class MovingBall{
float x;
float y;
}
64

クラスを使って変数を宣言しよう
class MovingBall{
float x;
float y;
}
MovingBall a, b;
65

代入しよう
class MovingBall{
float x;
float y;
}
MovingBall a, b;
void setup(){
a = new Ball();
b = new Ball();
}
66

メンバ変数に代入しよう
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;
}
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;
}
68

問題その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;
}
69

問題その11：メンバ変数を増やそう
• メンバ変数を増やそう
• 増やす変数：移動スピード
– 縦方向
– 横方向
• 増やした変数を使って書きなおそう
70

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (18)

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

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

Mais de Noritada Shimizu

Mais de Noritada Shimizu (20)

Último

Último (20)

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