P5.js Study 038

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

ロジックのポイント

前回のスケッチを発展させて、振り子の先端が文字を描くようになっている。

フレームごとに曲線を繋ぐ代わりに、文字を一文字置いている。

文字列は予め定義されている。

var letters = 'Sie hören nicht die folgenden Gesänge, Die Seelen, denen ich die ersten sang, Zerstoben ist das freundliche Gedränge, Verklungen ach! der erste Wiederklang.'

その中から順番に一文字ずつ取り出し、振り子の軌跡の位置に、軌跡の次の点への勾配を加味して配置している。
テキストサイズは軌跡の次の点までの距離、つまりカーソルの移動速度に比例する。

var newLetter = letters.charAt(this.letterIndex);
var nextPosIndex = this.pendulumPath.findIndex(function(nextPos, nextPosIndex) {
   if (nextPosIndex > posIndex) {
      var d = p5.Vector.dist(nextPos, pos) * 2;
      textSize(max(fontSizeMin, d));
      return d > textWidth(newLetter);
   }
});
var nextPos = this.pendulumPath[nextPosIndex];

if (nextPos) {
   var angle = atan2(nextPos.y - pos.y, nextPos.x - pos.x);
   push();
   translate(pos.x, pos.y);
   rotate(angle);
   text(newLetter, 0, 0);
   pop();
   this.letterIndex++;
   if (this.letterIndex >= letters.length) {
      this.letterIndex = 0;
   }
}

少し分からないところもあった。