Drip 'n' Snip

ドリップン・スニップ

あなたの生活役立つWEB情報イッパイお届け
p5js

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

2016/09/09



前回は完成目標と配列について書きました。
今回は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を巧みに組み合わせて、自分の望む結果を出力するのです。

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

NEXT
p5.jsでwebページにアニメーションを作ろう - 08 オブジェクト

  関連記事

p5js
p5.jsでwebページにアニメーションを作ろう - 08 オブジェクト

こんにちは、人間の僕です。("株式会社人間"様とは無関係です) 前回に引き続きp ...

p5js
p5.jsでwebページにアニメーションを作ろう - 06 目標と配列

↑こういうのが作れるようになれば、もう後はアイデア次第で大抵のものが作れてしまい ...

p5js
p5.jsでwebページにアニメーションを作ろう - 03 自由に作れるようになろう

さてさて、前回と前々回で、とりあえず何かを作ってweb上に公開する、というところ ...

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

P5.jsでインタラクティブなページを作ろう こんにちは、僕です。 普段はメディ ...

p5js
p5.jsでwebページにアニメーションを作ろう - 05 何度も繰り返そう

かなり間が空いてしまいました、僕です。 前回までの記事を並べておきますので、ざっ ...

-p5.js