p5.jsでwebページにアニメーションを作ろう - 07 function

前回は完成目標と配列について書きました。
今回はfunctionという仕組みと for loopという仕組みについて書きます。

functionって？

実は、今まで円を書いたり背景を塗りつぶしたりしていた
ellipse()やbackground()なども全てfunctionで、つまり何かしらの処理をさせたり、計算させたりする命令の事をさします。

例えば、中が白で縁が赤で大きさが50の円をランダムな位置に出せ、というellipseRandという名前のfunctionを作りたい場合にはこのようにします。

function ellipseRand(){
　　fill(255);
　　stroke(255,0,0);
　　ellipse(random(width),random(height),50,50);
}

これは、「fillで白に塗りつぶせ、strokeで縁を赤くしろ、ellipseで円を描け、場所はrandom(width)とrandom(height)で大きさは50だ。」
といういくつかの命令をひとまとめにしたものです。
こうしていくつかの処理をまとめておけば、名前を書くだけでまとめて呼び出せるため、とても便利です。

使い方としては、いつも通り円を書くのと同じで

function setup() {
  createCanvas(800, 800);
}

function draw() {
  ellipseRand();
}

function ellipseRand(){
　　fill(255);
　　stroke(255,0,0);
　　ellipse(random(width),random(height),50,50);
}

このようにしてあげればOKです。
実行するとこんな感じになります。↓

引数と返り値

今回の実装に関してはそんなに大切な要素でもないのでさっといきます。

function plus(x,y){
  var a = x + y
  return a;
}

functionを定義する（作る）時に、名前の後ろの()の中にコンマ区切りで変数名を書くと、呼び出す時にそこに値を入れて、functionの処理に使うことが出来るようになります。
また、return というキーワードを使うと、functionの中の変数の値を、呼び出し側に返す事が出来るようになります。
逆に言えば、引数や返り値を使わなければ、基本的にはfunctionの中に数値を入れたり出したりは出来ないという事です。

例の場合ですと、呼び出す時に

var n = plus(5,6);

のようにすれば、plusの中のxとyに5と6が代入されて、それらが足された数がaに入ります。
returnでaが返されるので、呼び出し元であるplusの前の = によって、nの中に11が入ります。

まとめ

p5.jsにかぎらず、プログラミングは基本的にfunction（関数）を作っていく、という作業です。
元々用意されているfucntionを巧みに組み合わせて、自分の望む結果を出力するのです。

では次回はオブジェクトについて扱っていきます。

                           

  関連記事