P5.js Study 027 – NNWGTMLOG

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

ロジックのポイント

マウスをドラッグするとドラッグした長さの長方形が描画される。長方形とは言ってもrect()ではなく、line()の集合で構成されている。

描画済みの長方形は配列shapesに格納されて、常時描画され続ける。

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

ドラッグ中の長方形は、配列ではなく、Shapeインスタンスとして描画されており、マウスをリリースした時点で配列に格納される。
pmouseXとpmouseYはインスタンスが最初に生成された時点の値が保持され、mouseXとmouseYは最新の情報に更新され続けるので、ドラッグして引っ張った分だけ長方形ができるような描画が実現できている。

function draw() {
  // snip

  if (newShape) {
    newShape.x2 = mouseX;
    newShape.y2 = mouseY;
    newShape.h = shapeHeight;
    newShape.c = shapeColor;
    newShape.draw();
  }

  // snip
  }
}

function mousePressed() {
  newShape = new Shape(pmouseX, pmouseY, mouseX, mouseY, shapeHeight, shapeColor); 

}

function mouseReleased() {
  shapes.push(newShape);
  newShape = undefined;
}

1〜4キーで色を変更できる
上下矢印キーで長方形の幅を変更できる。