SFC – デザインとプログラミング 2023
p5.js オブジェクト指向プログラミング2 – コンストラクタと、オブジェクトのバリエーション
今回も前回に引き続き、p5.jsによるオブジェクト指向プログラミング (OOP) について学んでいきます。
今回は、オブジェクトを生成する際に実行される初期化のための関数であるコンストラクター (constructor) に注目します。ここまでやってきたようにコンストラクターはオブジェクトが初期化 (インスタンス化) される際に自動的に実行されます。つまりクラスの初期化関数として機能しています。インスタンス化は以下のように行ってきました。
let object = new ClassName();
クラス名の後に () があるところに注目してください。クラス側で設定することによってインスタンス化の際にコンストラクターの引数としてパラメータを受け取ることが可能です。つまり以下のようになります。
let object = new ClassName(arg1, arg2, arg3...);
こうすることで、クラスからオブジェクトを生成する際に引数の値によって様々なバリエーションのオブジェクトを生成することが可能となります。1つの工場 (= クラス) から、様々なバリエーションの車 (= オブジェクト) を生成するイメージです。
実際にp5.jsのコードを動かしながら、インスタンス化とコンストラクターについて理解していきましょう。
映像資料
スライド資料
本日のスタートポイント
- Blob基本: https://editor.p5js.org/tadokoro/sketches/XNJayEfYu
- Blob関数版: https://editor.p5js.org/tadokoro/sketches/SEe6AR3Ur
本日の課題
1つのクラスから複数のオブジェクトを生成して表現してください。
- クラスのコンストラクタの引数からパラメータを読み込み
- 様々なバリエーションのオブジェクトが生成されるように
- 本日作成した「Blob」クラスの例を参考にしてみてください!
- 投稿したURLをアンケートから提出
- 投稿の際に sfc231215 のタグをつけてください!
- 締切: 2022年12月14日(水)まで!
- 今回も、前回の提出作品の人気投票を行います!
- 前回のタグ sfc231208 でOpenProcessingで検索 (検索方法をSketches that are tagged にする必用あり)
- 一番良いと思った作品に1票投票 (自信があれば自分の作品でも可)