第二回初級プログラミング講座

第二回
初級プログラミング講座
v1.0.0 全61枚
情報システム工学科 1年安井慎一郎
Copyright © 2016 Shinichiro Yasui All Rights Reserved

第七講
返り値
前回スライドが完成しなかったので
本講の内容が少し重くなってしまいました。

関数とは
• 前回の続きです。
• 関数というのはプログラムのまとまりだという話をしました。
• 私たちがしている行為はプログラミングです。
• つまり、私たちはプログラミングを会得すれば関数も作ることができ
るはずです。
• 今回は関数を作ってみようと思います。
• その前にProcessingの書き方について説明します。
3

Processingの書き方
• まずこう書いて下さい。
• 実行し、これが動作することを確認してください。
• 動きましたね。
void setup(){
println(“SteamEngine”);
} code7.1
1
2
3
SteamEngine out7.1
4

解説7.1
• 今回setupという関数を作ってみました。
• しかしこれはなかなか説明のしようがありません。
• あえて説明するのであれば、Processingは実行するとまず
初めにsetupという関数を呼び出すことになっています。
• 「void」というのは関数に使う型の一つで、定義しています。
• ところで、今まではなんだったんだという話なのですが、Processingは
この辺が優秀なところで、なにも書かないと
すべてをsetup関数の中に書いたような動きをしてくれるのです。
• つまり、今まで書いたことをこの中括弧の中に書いたとしても同じ挙動
をします。
• よって今後はsetup部分を省略します。
5

今後の注釈
• 関数を扱う上で、サンプルプログラムの紹介をしようとすると、行数
が膨らんでしまいます。
• そこで、関数の定義部分が必要が無いと判断した場合、内容のみを
紹介し、どの関数の内容であるかというのを注釈で明示します。
• なのでサンプルプログラムを写すというよりは指示したとおりのコー
ドを書いて下さい。
• また、左側の行数は目安です。
• 皆さんの書いたコードが必ず同じ行数かはわかりませんが、位置な
どは参考にして下さい。
6

関数を作る
• まず、setup関数の中にこう書いて下さい。
• 次にone関数というのをこのように書きます。
• 実行します。
void setup(){
one();
} code7.2-1
1
2
3
void one(){
} code7.2-2
5
6
7
7

関数を作る出力解説
• このように出力されます。
• まず、5行目の「void one()」というように記述し、
「one」という名前の関数を定義しましたよね。
• 「void」はさっき言ったように関数を定義する句です。
• それをsetup、つまりプログラムが始まった時にその中にある
「one();」を通過することによってこの関数が実行されます。
• さて、このプログラムをいじって関数の性質を知りましょう。
SteamEngine out7.2
8

関数の性質
• まず、先ほどのプログラムのsetup関数内にこのような記述を追加し
て下さい。
• 「one関数」はそのままで結構です。
void setup(){
one();
println(“DieselEngine”);
} code7.3
1
2
3
4
9

関数の性質出力解説
• これは関数の性質の一つである。
「関数の終了地点にたどり着くと呼びだされたところに戻る」
という性質によるものです。
• 今、「one関数」の中には「SteamEngine」と表示するプログラムが入ってい、
これを実行すると、one関数の最後にたどり着きます。
• そうすると「one関数」は実行地点を自分を呼んだ場所に戻します。
SteamEngine
DieselEngine out7.3
10

返り値
• 「one関数」をこのように書き換えてください。
• 次に「setup関数」も書き換えます。
int one(){
return 1;
} code7.4-1
6
7
8
9
void setup(){
println(one());
} code7.4-2
1
2
3
4
11

返り値出力解説1
• 新たに「1」と出力されましたがこれは「one関数」が「return文」
を使って「1」を計算結果として返したからです。今回、「one関数」の定義にて
「void」を「int」に書き換えましたが、この「int」というのは返り値の型を示して
います。
• 「void」というのは「虚無」という意味で、これは計算結果を与えない関数であ
ることを示していました。
SteamEngine
1
DieselEngine out7.4
12

返り値解説2
• 今回「int」を使って返り値の型を示しましたが、このように返り値の
型を書くとプログラムが実行されたとき必ずその型の値を返す
「return」を通るように作らなくてはなりません。
• 関数は「return」を通るとプログラムが呼び出された場所に戻ります。
• 実は「void」型の関数でも「return」を書くことによって呼び出し元に戻
りますが、「void」型は値を返さないため書かなくても動作します。
• このプログラムでは「one関数」は「int」型で定義されているので「int」
の値を返すことが保証されているので「println」にそのまま値を渡し
て表示させてみました。
13

返り値解説3
• ようやく必要なことを説明し終わりました。
それでは今回のプログラムの動作の流れを出力結果を見ながら解
説していきます。
• まず、プログラムは「setup()」内から始まります。
• ここからが少し難しくて、まず「println(one());」を通るわけですが、
「println();」でなにかを表示させるためにはまず「one()」を呼び出して
値を教えてもらわないといけないのです。
• ということで「one()」に飛びます。
• 「one()関数」では「SteamEngine」と表示したあとに「1」を返します。
14

返り値解説4
• 「one()関数」を呼び出した「setup()」内の「println()」では「1」という値
を受け取ったのでこれを表示します。
• そしてこの後の「println();」で「DieselEngine」と表示しました。
• 以上がこのプログラムの流れです。
• 演習が終わったあとも関数の内容を行います。
• このプログラムを使うのでなくさないでください。
15

おわり
• 演習時間には以下のプログラムを改造して関数を使うように書き換
えて下さい。
• 次回の演習でも使うのでなくさないでください。
void setup(){
println(15);
}
1
2
3
16

• 「void」を使っても可とします。
解答例
void setup(){
println(out());
}
int out(){
return 15;
}
1
2
3
4
5
6
7 code7.5
17

第八講
引数
パラメーター

引数とは
• 関数というものはすべて一つの構造に収束します。
「値を与えるとなんらかの計算してその値を返す」
• 今、皆さんには値を返す部分を「返り値」として実装してもらいました。
• 今回は値を与える部分について扱います。
• ちなみに皆さんは本講のタイトルである「引数」をどう読みました
か？
• これは数学の言葉の「因数」と差別化するために「ひきすう」と読む
ことがほとんどです。
• 学校法人が私立であるとき「わたくしりつ」と読むのと同じようなもの
です。
19

引数1
• 前回の(code7.4)をこう書き換えて下さい。
void setup(){
println(one(4));
}
int one(int x){
return x + 1;
}
1
2
3
4
5
6
7
8
9 code8.1
20

引数1 出力解説1
• まず、こう出力されたと思います。
• 引数は関数を定義するときに名前のあとの「()」の中に
型と引数の名前を書きます。ちょうど変数の宣言みたいですね。
• この「()」の中で宣言した引数は関数の中だけで使う事ができます。
• また、関数を呼び出すときはこの定義にしたがって値を与えなくては
なりません。
SteamEngine
5
DieselEngine out8.1
21

引数1 解説2
• それでは書いたコードのほうを出力を見ながら解説します。
• 「one」という関数をxというint型の値を取る関数として定義しました。
• 「one関数」を呼び出す「setup」側ではそれに併せて「(4)」というよう
に記述し4という値を渡しました。
• 「one関数」では「SteamEngine」と出力したあと
「xに1を足した数」を返します。
• よって返ってきた値を表示させている「println(one(4));」
では「5」と表示されました。
22

引数2
• 実は引数は2つ以上受け取ることができます。
• こう書き換えて下さい。
• 蒸気機関とディーゼルエンジン部分は残しておいてもいいです
void setup(){
println(sum(4, 3));
}
int sum(int x, int y){
return x + y;
}
1
2
3
4
5
6
7 code8.2
23

引数2 出力解説
• 出力はこうなります。
• 動作結果は想像に難しくなかったかもしれません。
• 新たに名前を変えて定義したsum関数はxとyを足しあわせてその結
果を返してくれます。
• このsum関数は正しい形で呼び出せばint型なのでint型として作用し
ます。
7 out8.2
24

おまけ変数の寿命
• おまけですが、結構重要な要素です。
• 実は変数には寿命があります。
• 実は中括弧の中で定義した変数はその中括弧の中でしか使えない
のです。
• 一番外で定義した変数はずっと使えます。
• 中括弧の中にある中括弧を入れ子、もしくはネストなどといいますが、
外のネストで定義された変数は内のネストで定義することはできま
せん。
25

例
• 移さなくていいよ
void setup(){
int y = 5;
a();
}
void a(){
println(y); // エラー
}
1
2
3
4
5
6
78
code8.3
26

おわり
• 演習時間には第七講の演習時間に作ったプログラムを改造して引
数を取ってその結果を表示させるプログラムを作って下さい。
• ただし、プログラムに使う数字は素数以外使ってはいけません。
27

解答例
void setup(){
println(out(3, 5));
}
int out(int x, int y){
return x * y;
}
1
2
3
4
5
6
7 code8.4
28

ゲームプログラミング編
第一講
図形の描画

ウィンドウの生成
• こうすると窓の大きさが変わります。
• パラメーターはsize(横方向, 縦方向)です。
void setup(){
size(640, 480);
}
1
2
3 code1.1
30

直線を描く
• こう書き加えて下さい。
• パラメータは「line(x1, y1, x2, y2)」とすると
x1 始まりの位置のX座標
y1 始まりの位置のY座標
x2 終わりの位置のX座標
y2 終わりの位置のY座標です。
void setup(){
size(640, 480);
line(10, 10, 50, 50);
}
1
2
3
4 code1.2
31

注釈
• 今回はじめて図形を書いてもらいました。
• 少し注釈を入れます。
• 実はコンピュータの中での座標は基本的に画面の左上が原点で
水平右向きがX軸の正
鉛直下向きがY軸の正なのです。
• 数学とは上下逆なので気をつけて
ください。
X
Y
32

四角を描く
• こう書き換えて下さい。
• 「rect」とは英語で四角を意味する「rectangle」の略です。
• パラメータは「rect(a, b, c, d)」とすると
a 右上の位置のX座標
b 右上の位置のY座標
c 横幅
d 高さです。
void setup(){
size(640, 480);
rect(10, 10, 50, 50);
}
1
2
3
4 code1.3
33

丸を描く
• こう書き換えます。
• 「ellipse」とは楕円という意味ですが比率が1:1の楕円を描こうとする
と円がかけます。ちなみにパラメータは
• 「ellipse(a, b, c, d)」とすると
a 中心の座標X
b 中心の座標Y
c 横方向の直径
d 縦方向の直径
void setup(){
size(640, 480);
ellipse(60, 60, 50, 50);
}
1
2
3
4 code1.4
34

色を変えてみる 1
• こうすると塗りつぶした部分の色が変わります。
• 「fill」というのは「満たす」という意味です。
• またパラメータは「fill(R, G, B)」です。
• R 赤要素(0-255)
• G 緑要素(0-255)
• B 青要素(0-255)
• この三色は光の三原色でコンピュータ上で表現される1677万余りの
色をすべて表現できます。
void setup(){
size(640, 480);
fill(255, 0, 0);
ellipse(60, 60, 50, 50);
}
1
2
3
4
5 code1.5
35

色を変えてみる 2
• こうすると枠線部分の色が変わります。
• 「stroke」というのは「一筆」という意味です。
• パラメータは「fill()」と同じです。
• また、「nofill()」を呼び出すと塗りつぶしがなくなり。
• 「nostroke()」を呼び出すと枠線がなくなります。
• これらは次以降上書きされるまで保持されます。
void setup(){
size(640, 480);
stroke(255, 0, 0);
ellipse(60, 60, 50, 50);
}
1
2
3
4
5 code1.5
36

おわり
• 描画機能の紹介だけでしたが、これくらいにしておきましょう。
• 演習時間には800x600(横x縦)のウィンドウを作ってその上に黄色で
塗りつぶした楕円を描画させてください。
• 条件下であればなにを書いても構いません。
37

解答例
void setup(){
size(800, 600);
stroke(255, 255, 0);
ellipse(400,300,120,120);
}
1
2
3
4
5 code1.6
38

第二講
描画関数の使い方

描画関数とは
• ここからがいよいよProcessingの本領発揮といったところです。
• Processingでは描画を行うときに「draw関数」を定義してその中に処理
内容を描くだけで勝手にどんどん再描画してくれるのです！
• ちょっとなにいってるかわからないですよね。
• とりあえず、このコードを実行してみてください。
40

描画関数1
• こう書いてみてください
• ようやく映像を作り出せました。円が左から右へ動きます。
int x = 30;
void setup(){
size(800,600);
}
void draw(){
ellipse(x, 50, 30, 30);
x+=3;
}
1
2
3
4
5
6
7
8
9 code2.1
41

描画関数2
• こうすると画面を真っ白にしてくれます。
• 「background関数」は色を指定できます。
int x = 30;
void setup(){
size(800,600);
}
void draw(){
clear();
background(255,255,255);
ellipse(x, 50, 30, 30);
x+=3;
}
1
2
3
4
5
6
7
8
9
10 code2.2
42

描画関数解説
• まず、「draw関数」の仕組みについてです。
• これは定期的に呼び出されるということを利用するとすごくうまく
ゲームが作れます。
• このプログラムでは「x += 3」という式を使って呼び出される度に3を
加算してみました。
• 「draw関数」は一定時間に一度呼び出されるのでこれによってxの値
は一定の変位で増加します。
• 丸の描画関数にこれを渡しているので画面上の円が一定速度で右
方向に移動しました。
43

反射するボール
• さっきのプログラムの8行目からをこう書き換えて下さい
• x = 50 y = 50 vx = 3 vy = 3 r =15
• widthとheightはProcessingの機能で窓の大きさが分かります。
ellipse(x, y, r*2, r*2);
if(x <= r || x >= width-r)
vx *= -1;
if(y <= r || y >=height-r)
vy *= -1;
x += vx;
y += vy;
8
9
10
11
12
13
14 code2.3

反射するボール解説
• このような単純なコードでも結構面白い動きが見れたと思います。
• 今回新しい論理式の記号が出てきました。「||」です。
• これは「バーティカルライン」といい、縦棒です。
• 論理式でいうところの「or」を示します。
• この条件式はなにを示しているかというと、上下と左右の画面の枠
を壁としてそこにぶつかったら「vx」「vy」つまり速度を「−1」して移動
方向を逆にします。これによって物体が反射しているように見えます。
• 描画関数「ellipse」にxやyなどの変数を与えることによって値が変位
しても動作するということが今回のポイントです。

世界初のビデオゲーム
• 世界で初めて市販化されたビデオゲームはポンというテニスゲーム
だと言われています。
• 今回はこれを作ってみようと思います。
• こんな感じの見た目です。
0 1

バーを描く
• 「setup関数」の楕円を描画してる「ellipse」の下にこう書いて下さい。
• 入らないので改行しましたが一行にまとめても構いません。
• barX = 30 barY = 240 barLength = 100
line(
barX,
barY – barLength / 2,
barX,
barY + barLength / 2);
18
19
20
21
22 code2.4

バーを動かしてみる
• 線の描画部分の下にこれを追加して下さい。
• barSpeed = 8
• 解説していきます。
if(keyPressed){
if(key == 'w'){
barY -= barSpeed;
}
else if(key == 's'){
barY += barSpeed;
}
}
19
20
21
22
23
24
25
26 code2.4
↓しんぐるこーてーしょん

バーを動かしてみる解説
• 「keyPressed」という変数はこれまたProcessingの機能で
なにかのキーが押されると真を返す。「boolean」型といいます。これ
は「論理型」といい、中には「true(真)」か「false(偽)」が入っています。
• 「key」という変数もProcessingの機能で押されたキーのコードが入っ
ています。
• 新しいものが多いですが、このシングルコーテーションは
文字は文字でも文字のコードを表します。
• この2つを比較すれば押されたキーがわかるのです。
• それを利用して「w」を押すと上「s」を押すと下に移動します。

バーに当たったら反射させる
• Xの方向転換をする条件にこう追加します。
• これでボールがバーに当たると反射するようになりました。
if(y+r > barY - barLength / 2 &&
y-r < barY + barLength / 2 &&
x-r <= barX &&
x+r >= barX ||
x <= r || x >= width-r)
vx *= -1;
27
28
29
30
31
32
code2.5

バーに当たったら反射させる
• 「&＆」は「かつ」を示します。
• 描画の時に使った座標を用いて、上から
棒の上端
棒の下端
棒の右側
棒の左側の判定をしています。

おわり
• とはいっても全体的に内容が重たいのでインターバルを挟みます。
• 演習は設けませんのでこの講でやった内容をまとめてみてください。

第三講
テニスゲームを作る

初期化をしてくれる関数を作る
• 結構扱う値が多くなってきました。
• なので呼び出すだけで値を初期化してくれる関数を作って
「setup」で呼びましょう。
void reset(){
x = width / 2;
y = height / 2;
:
:
barLength = 100;
}
12
13
14
15
16
17
18
code3.1

setupで初期化関数を呼び出す
• 「setup」内で「reset()」を呼び出すように書き加えて下さい。
• 宣言時に初期化もしていた場合は消しても構いません。
• これで「reset()」を呼び出せばいつでも初期状態に戻るようになりま
した。
• また、今までコードで使っていたbarXとbarYは相手と自分で2つ必要
なので数字をつけて「barX1」などとしておいてください。
• barX → barX1 barY → barY1
• あと点を数える変数も作っておきましょう。
「point1」など自分で意味がわかる名前をつけてみてください。

バーを扱う関数を作る1
• バーを追加するわけなのですが、位置が反対になるだけで同じコー
ドになるので関数にしてみましょう。
• まず、「controll」という関数を「int」型でこのような引数を取るように
定義してください。
• 「controll(char up, char down, int barY)」
• charというのはさっき使ったキーの入力に使ういわゆる
「文字コード型」です。

バーを扱う関数を作る2
• さて、それでは「draw関数」の中にあるbarを操作する部分をこの関
数に移しましょう。
• 省略しましたが、キー判定部分を移動させます。
• 改変の必要があるのは「if(keyPressed)」の中の
「if(key == up)」と「if(key == down)」だけです。
if(keyPressed){
if(key == up){...}
else if(key == down){...}
}
return barY;
444
5
46
47
48
code3.2

バーを扱う関数を使う
• これをbarX1などに代入すれば移動ができるはずです。
• 「setup関数」内にこの一文を追加してください。
barX1 = controll(‘w’,‘s’,barX1);32
code3.3

棒に当たったか判定してくれる関数
• 棒が2本に増えるので論理式も書き換えてみましょう。
• booleanはさっきいったように論理型です。
• なのでこの関数は真か偽を返してくれます。
boolean hit(int barX, int barY){
return
y+r > barY - barLength / 2 &&
y-r < barY + barLength / 2 &&
x-r <= barX &&
x+r >= barX;
}
59
60
61
62
63
64
65
code3.4

判定してくれる関数を使う
• こう書きます。
• これで動くはずです。
if(hit(barX1, barY1) ||
x <= r ||
x >= width-r)
vx *= -1;
38
39
40
41
code3.5

わたしはちからつきました。
• すいません、今週もまたスライドが完成しませんでした。
• ここからは演習でやってみてもらいます。
• ここからやることは以下のとおりです。
• 相手のバーを作る
• 画面外に出たら点数を加算して初期化する
• ↑さっき「reset関数」を作ったので難しくないと思います。

第二回初級プログラミング講座

Recomendados

Recomendados

Mais conteúdo relacionado

Último

Último (9)

Destaque

Destaque (20)

第二回初級プログラミング講座