SFC – デザインとプログラミング 2024
関数によるモジュール化とバリエーション
今回は、関数 (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で実際に描画しながら関数について学んでいきましょう。
スライド資料
映像資料
サンプルコード
- ランダムウォーク (関数なし) https://openprocessing.org/sketch/726079
- ランダムウォーク (関数あり) https://openprocessing.org/sketch/726403
- ぐるぐる (関数なし) https://openprocessing.org/sketch/2110194
- ぐるぐる (関数あり) https://openprocessing.org/sketch/2110205
- 増殖する花 (関数あり) https://www.openprocessing.org/sketch/726406
本日の課題
関数を用いて作品を制作してください!
課題: 関数 (function) をつかって大量に形を増殖させる
引数によってバリエーションをつけながら何か形を描く関数を作成してください。作成した関数をdraw()関数から呼び出して大量に形を描いてください。
- 投稿したURLをアンケートから提出
- 投稿の際に sfc241129 のタグをつけてください!
- 締切: 2023年12月6日(水)まで!
- 今回も、前回の提出作品の人気投票を行います!
- 前回のタグsfc241115でOpenProcessingで検索 (検索方法をSketches that are tagged にする必用あり)
- 一番良いと思った作品に1票投票 (自信があれば自分の作品でも可)