芸大 – メディアアート・プログラミング I 2020
第9回: p5.js オブジェクト指向プログラミング2 - コンストラクターと、オブジェクトのバリエーション
今回も前回に引き続き、p5.jsによるオブジェクト指向プログラミング (OOP) について学んでいきます。
今回は、オブジェクトを生成する際に実行される初期化のための関数であるコンストラクター (constructor) に注目します。ここまでやってきたようにコンストラクターはオブジェクトが初期化 (インスタンス化) される際に自動的に実行されます。つまりクラスの初期化関数として機能しています。インスタンス化は以下のように行ってきました。
let object = new ClassName();
クラス名の後に () があるところに注目してください。クラス側で設定することによってインスタンス化の際にコンストラクターの引数としてパラメータを受け取ることが可能です。つまり以下のようになります。
let object = new ClassName(arg1, arg2, arg3...);
こうすることで、クラスからオブジェクトを生成する際に引数の値によって様々なバリエーションのオブジェクトを生成することが可能となります。1つの工場 (= クラス) から、様々なバリエーションの車 (= オブジェクト) を生成するイメージです。
実際にp5.jsのコードを動かしながら、インスタンス化とコンストラクターについて理解していきましょう。
映像資料
スライド資料
本日の課題
今回作成したクラス「Blob」を改造して新たな作品を制作してください。コンストラクターから引数を受けとって、様々なバリエーションのオブジェクトを大量に生成してみましょう。もちろん、元のサンプルプログラムから全然違う形や動きや色にしてしまって構いません。
OpenProcessingに作成して、URLをオンラインフォームから提出してください。