レッスン 18
便利な関数を使ってみよう
ゲームをつくるために役立ちそうな関数を紹介します
チャプター1このレッスンのゴール
このレッスンで完成させるものを確認しよう
チャプター2円形を表示しよう
2. 1 写してみよう
var x = 200;
var y = 200;
var radius = 12;
//最初に一回だけ呼び出される初期設定
function setup() {
createCanvas(400, 400);
ellipseMode(RADIUS);
}
//繰り返し呼び出される処理
function draw() {
background(220);
fill(255, 0, 0);
ellipse(x, y, radius, radius);
}
円がキャンバスの中心に描かれて入ればOKです。
チャプター3マウスホバーと連動して大きさ・色を変えてみよう
ここまでの見本42
次に、マウスのX座標が円と重なっているときだけ、円が大きくなるようにします。円の中心から、マウスまでの距離は数式で求めることができます。が、面倒です。p5.jsが既に用意してくれている、「関数」を使いましょう。dist関数です。
3. 1 変更してみよう
//繰り返し呼び出される処理
function draw() {
background(220);
- fill(255, 0, 0);
ellipse(x, y, radius, radius);
}
//繰り返し呼び出される処理
function draw() {
background(220);
+ var d = dist(mouseX, mouseY, x, y);
+ if (d < radius) {
+ radius++;
+ fill(0, 0, 255);
+ } else {
+ fill(255, 0, 0);
+ }
ellipse(x, y, radius, radius);
}
円とマウスが重なっているときは青、それ以外のときは赤となっていればOKです。
3. 2 コードの解説
dist関数を使って、マウスの位置と円の中心(200,200)の距離を判定しています。円の中心までの距離が、半径の200以内であればfill(0,255,0)そうでなければ(255,0,0)となるような処理となっています。
関数とは
関数とは、これまで多くの場面で利用してきました。今回使用したdist関数以外にも、background()なども関数と言えます。()の中に入るものを引数と言います。
引数は2つ以上のものもあれば、引数のない関数もあります。このコースだけでは紹介仕切れないため、公式のページで、色々な関数を確認してみましょう。
また、関数を通した結果、計算される値を返り値(かえりち)または、戻り値(もどりち)といいます。
dist関数
上記のリファレンスページにも記載がありますが、説明します。2点の距離を求める関数です。
dist(値1,値2,値3,値4)
(値1,値2)を(x1,y1)、（値3,値4)を(x2,y2)としたときの、(x1,y1)と(x2,y2)の距離を返します。
チャプター4半径の大きさに応じて背景の色を変更しよう
このチャプタでは、円の半径の大きさに応じて、背景の色が変更されるプログラムに修正します。
円の半径は12から200、一方で背景の色を白黒はbackgroudの引数を0から255に変更しなければいけません。便利なmap関数を使います。
4. 1 変更しよう
var x = 200;
var y = 200;
var radius = 12;
+ var col;
//最初に一回だけ呼び出される初期設定
function setup() {
createCanvas(400, 400);
ellipseMode(RADIUS);
}
//繰り返し呼び出される処理
function draw() {
+ col = map(radius,12,200,0,255);
+ background(col);
var d = dist(mouseX, mouseY, x, y);
if (d < radius) {
radius++;
4. 2 コードの解説
map関数を使って、colにradiusの値を変換して代入しています。そのため、colは次のように変化します。
- 円の半径が12のとき、黒である0
- 画面(400×400)にぴったり収まっているとき、白である255
map関数
リファレンスを（英語で）読むのが一番良いですが、説明します。
map(値1,値2,値3,値4,値5)
引数が5個のとき、値1の変化する数字を、値2〜値3の範囲内にあるとき、値4〜値5に変換します。
色の指定をする場合に使い勝手が良いので覚えておきましょう。
チャプター5マウスがクリックされたら初期化されるようにしよう
5. 1 変更しよう
draw関数に、mouseClicked()関数を追加して、処理を書きましょう。
ellipse(x, y, radius, radius);
}
+ function mouseClicked(){
+ radius = 12;
+ }
コードを変更できたら実行してみましょう。
マウスをクリックしたときに、円の大きさが12に戻っていればOKです。
5. 2 コードの解説
mouseClicked()関数は、引数の必要がない関数の1つです。文字通り、マウスがクリックされた時の1回だけ実行されるコードとなっています。ゲームのリスタートのときなどに使えそうですね。
チャプター6チャレンジしよう
このチャプタで出てきたdist関数とmap関数を身に着けるためのコードにチャレンジしよう。
6. 1 完成形
次の見本を元に、自分でコードを完成させてみよう。
ヒント
- 小さい円はマウスを追ってくるようにしています
- 小さい円の緑色はmap関数でマウスのX座標に応じて変化すようにしています
- 小さい円と大きい丸はdist関数で中心と中心の距離を常に更新し、半径の和より小さくなったとき、バツになるようにしています
- 見本は小さい円の半径は50、大きい円の半径は100なので、中心と中心の距離が75より大きいか小さいかで条件分岐させています