Processing入門｜関数の定義、使い方について解説

「自分で関数を定義するにはどうしたらいいの？」

「関数を呼び出すのはどう書けばいいの？」

この記事は、そんな疑問を持つ方に向けて関数とは何か、その必要性と作り方について解説していきます！

私が大学や本で学んだことをわかりやすくまとめてみました！

一つ一つ手順を見ていきながら、作れるようになりましょう♪

関数とは？
自分で関数を定義する必要性
関数の作り方
まとめ

関数とは？

そもそも関数とは何でしょうか？

関数は、

「与えられた値(引数)に応じて何かしらの処理を行うプログラム」

のことを指します。

これまで解説してきたものから例を出すと、

円を描くための「ellipse()」や、

直線を描くための「line()」などがあります。

これらはすでに用意された関数であり、

Processingの公式にあるReference(https://processing.org/reference/)に、全ての用意された関数について、どのような処理を行うのかが説明されてあります。

自分で関数を定義する必要性

たくさん用意された関数があるなら、わざわざ関数を自分で定義する必要があるのか疑問を持つ方が多いと思います。

例えば、「家をたくさん描画したい」と思ったときに一つずつ書いていけばいいのでしょうか？

答えは、NOです。

こちらが一つずつコピペして書いた場合になります。

  noStroke();
  fill(40,255,255);
  rect(200,150,50,50);
  triangle(225,125,190,160,260,160);

  noStroke();
  fill(40,255,255);
  rect(250,150,50,50);
  triangle(275,125,240,160,310,160);

下のコードが自分で「house」という関数を作った場合になります。

 house(200,200,40,255,255);
 house(250,200,40,255,255);

どちらがバグの発生しやすく、エラーに対応しやすいでしょうか。

上の一つずつコピペをしていく場合だと、コードの数が多くなり見にくくなります。

まとめると、

・コードを短く書ける。

・バグが起きにくく、エラーが起きても原因を発見しやすい。

という利点があります。

関数の作り方

それでは、関数の必要性がわかったので、実際に関数を作っていきましょう。

例を出しながら説明していきます。

ステップ１：何の関数を作るのか考える。(返り値の型を決める。)

何の関数を作りたいのかを決めます。

もしかするとすでに作られているかもしれないので、「processing 作りたい関数名」と検索をしてみて、用意されたものがあるのか確認するのも良いでしょう。

作る関数を決めたら、関数の名前も決めましょう。

(後から見てわかるものにしましょう。)

今回は、「家を描画する」関数を作ると考えます。

そして、関数名は「house」とします。

次にその返り値を決めます。

「数字の値を返すものなのか」などを考えます。

今回は家を描画するだけで、その後のコードに使う数字などを出力する必要はないので、

返り値はなしとします。

ステップ２：何の値を入れるかを決める(引数を決める)

ここがかなり重要なので、慎重に決めましょう。

自分の作る関数に、どのような値を与えることで処理が実行されるのかを考えます。

それとも、そもそも値を与えない関数(引数なし)なのかも考えます。

今回は、家を作る時に、どこに描かれるのかを自分で決めたいとします。

また、色も変えられるようにしたいです。

これらを踏まえると、

・座標(x,y)を入力することで描かれる位置を指定

・色のRGB(r,g,b)を入力することで色を指定

をしたいことがわかります。

つまり引数は、

「整数型の値(x,y,r,g,b)の5つ」

にします。

「x」や「y」などの変数の名前も自分で決めます。

(これもわかりやすく、短いものにしましょう。)

今回は引数が整数型で5つでしたが、引数がない場合ももちろんあります。

例えば、「実行されてから何秒経ったのか数える」関数であれば、

実行してから計測を始めればいいので、こちらから時間を入力などする必要がなく勝手に計測してくれます。

ステップ３：実際にコードを書く

・返り値の型

・関数の名前

・引数の型

・引数の名前

この4つを決めましたので、次は実際にコードを書いていきます。

こちらの形に沿って書いていきます。

今回の「家を描画する」場合だと、

void house(float x,float y,float r,float g,float b){
  noStroke();
  fill(r,g,b);
  rect(x,y-50,50,50);
  triangle(x+25,y-75,x-10,y-40,x+60,y-40);
}

このようになりました。

返り値がない場合は、「void」と書き、引数が整数であれば、「int」と書きます。

座標や色の指定をするために浮動小数点型の「float」型にしました。

あとは四角形と三角形を組み合わせることにより家を描画させました。

実際に使ったものは以下になります。

void setup(){
  size(400,400);
}
void house(float x,float y,float r,float g,float b){
  noStroke();
  fill(r,g,b);
  rect(x,y-50,50,50);
  triangle(x+25,y-75,x-10,y-40,x+60,y-40);
}
void draw(){
  background(255,255,255);
  house(200,200,40,255,255);
  house(300,300,40,255,0);
  house(100,300,255,0,0);
}