yoppa.org


immediate bitwave

SFC – デザインとプログラミング 2021

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

今回は、関数 (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で実際に描画しながら関数について学んでいきましょう。

スライド資料

映像資料

投稿作品とランキング

投稿作品

人気ランキングTOP5

おめでとうございます!!

サンプルコード

本日の課題

関数を用いて作品を制作してください!

課題: 関数 (function) をつかって大量に形を増殖させる

引数によってバリエーションをつけながら何か形を描く関数を作成してください。作成した関数をdraw()関数から呼び出して大量に形を描いてください。

  • 投稿したURLをアンケートから提出
  • 投稿の際に sfc211112 のタグをつけてください!
  • 締切: 2021年11月24日(水)まで!

アンケート

  • 今回も、前回の提出作品の人気投票を行います!
  • 前回のタグ sfc211105 でOpenProcessingで検索 (検索方法をSketches that are tagged にする必用あり)
  • 一番良いと思った作品に1票投票 (自信があれば自分の作品でも可)