今回は、関数 (function) についてとりあげます。といっても、ここまでの講義で関数は頻繁に使用してきました。ここまでで使用してきた関数は主に2つの場合に分けられます。

1つ目は、プログラミングしているp5.jsのスケッチからp5.jsのライブラリー内で定義されているの関数を呼び出しです。例えば

//circle()関数の呼び出し
circle(400, 300, 100);

といったp5.jsで実行していた命令は、p5.jsの関数を呼び出していたのです。

2つ目は、 p5.jsのライブラリーから呼び出されている関数を定義する記述です。これは、setup() や draw() 内で書いていたプログラムに相当します。

//setup関数の定義
function setup() {
  createCanvas(windowWidth, windowHeight);
  frameRate(60);
}

関数はプログラムを処理内容ごとにモジュール化して、プログラムの可読性を高めデバッグを容易にします。

また、関数は引数(arguments)を受け取り、内部の処理のパラメータとして使用することが可能です。このことにより1つの関数で様々なバリエーションを持つことが可能となります。

p5.jsで実際に描画しながら関数について学んでいきましょう。

本日の完成イメージ

スライド資料

• 関数によるモジュール化とバリエーション

本日の課題

関数 (Function) を使用して、大量に形を描くプログラムをp5.jsで作成してOpenProcessingにアップロードしてください。

提出はこちらから

• 提出フォーム