P5.js Study 032

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

ロジックのポイント

curveVertex()で描画した図形を変形させながらマウスに追随させるスケッチ。

分割数に応じたアンカーポイントの座標を、X、Yそれぞれの配列に格納している。このときの座標位置は中心を原点とした場合。

  var angle = radians(360 / formResolution);
  for (var i = 0; i < formResolution; i++) {
    x.push(cos(angle * i) * initRadius);
    y.push(sin(angle * i) * initRadius);
  }

各アンカーポイントをランダムに移動させることにより変形させている。

  for (var i = 0; i < formResolution; i++) {
    x[i] += random(-stepSize, stepSize);
    y[i] += random(-stepSize, stepSize);
  }

curveVertex()で曲線を描くが、最初の点と最後の点は、実際に曲線を描く点におけるハンドルの傾きを決定するためだけに用いられる。そのため、最初の一個前の点（=最後の点）→最初の点から最後の点→最後の一個次の点（=最初の点）の順に記述しなければならない。

  beginShape();
  // first controlpoint
  curveVertex(x[formResolution - 1] + centerX, y[formResolution - 1] + centerY);

  // only these points are drawn
  for (var i = 0; i < formResolution; i++) {
    curveVertex(x[i] + centerX, y[i] + centerY);
  }
  curveVertex(x[0] + centerX, y[0] + centerY);

  // end controlpoint
  curveVertex(x[1] + centerX, y[1] + centerY);
  endShape();

図形はマウスカーソルから遠いほど速く移動させている。

  centerX += (mouseX - centerX) * 0.01;
  centerY += (mouseY - centerY) * 0.01;