P5.js Study 026

Generative Design with p5.js / Sketch P_2_1_5_02 を試しながらアレンジ。
元ネタ：https://editor.p5js.org/generative-design/sketches/P_2_1_5_02

ロジックのポイント

クリックするたびに円が増えていく。この円は配列shapesに格納されていて、クリックされるたびにpushで配列に追加している。

shapes.push(new Shape(mouseX, mouseY, random(minRadius, maxRadius)));

draw()関数では毎ループ、shapes配列の各要素である円をすべて描画している。描画はShapeオブジェクトのdrawメソッドで行っている。

shapes.forEach(function(shape) {
  shape.draw();
});

Shapeオブジェクト内にprototypeでdrawメソッドが定義されているが、prototypeの使い方をすっかり忘れてしまったので、おさらいしなければ。

function Shape(x, y, r) {
  this.x = x;
  this.y = y;
  this.r = r;

  Shape.prototype.draw = function() {
    for (var i = 0; i < this.r; i += density) {
      ellipse(this.x, this.y, i);
    }
  };
}

クリックして描画した円を消去する術がないので、DeleteまたはBackspaceで消す機能を追加した。