P5.js Study 033

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

新しく覚えたコマンドなど

lerp(start, stop, amt)
// Calculates a number between two numbers at a specific increment.
// The amt parameter is the amount to interpolate between the two values.

ロジックのポイント

前回のスケッチでは初期の形状が円だったが、直線から開始するモードが追加されている。
4キーでモードを切り替えてからクリックすると直線から開始する。

直線長さと角度はランダムに決定し、両端の間に解像度に応じてアンカーポイントを打っている。

  case 2: // line
    var radius = initRadius * random(0.5, 5);
    var angle = random(PI);

    var x1 = cos(angle) * radius;
    var y1 = sin(angle) * radius;
    var x2 = cos(angle - PI) * radius;
    var y2 = sin(angle - PI) * radius;
    for (var i = 0; i < formResolution; i++) {
      x[i] = lerp(x1, x2, i / formResolution);
      y[i] = lerp(y1, y2, i / formResolution);
    }
    break;

アンカーポイントごとに移動先をランダムに決める方法は前回と同じ。

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

アレンジ

色を付け、色相が時間とともに変化するようにした。