如何控制 p5.js Javascript 草图中文本的每个字符？

Question

总体目标：在仅由文本（以及很多文本！）组成的 p5.js 草图中，我想让每个字符成为“字母”类的实例，其中包括字体、样式、大小等内容画布上的位置，以及一堆方法。

整个问题源于 p5 “text” 函数的工作原理。我可以将整个段落包含在一个文本函数中，其中 x = 50 和 y = 50，是的，太棒了，有这个段落 - 但我当时无法访问和修改段落中的单个字符 。我只能访问/修改整个段落。

如有任何建议，我们将不胜感激！

链接查看草图

我尝试使用数组、对象、地图、地图、SVG、html、CSS 等来为每个角色提供唯一的 id，假设这肯定是我正在做的事情的先决条件。我最终通过创建一个新的 Map 实现了这一点，并且我可以通过索引值访问每个字符。

我尝试为每个角色创建一个新的 p5“文本”函数，我希望它能够工作，而且确实如此。

我没有尝试过找到一种方法来以某种方式迭代每个独特的角色，并自动神奇地将每个角色变成一个类的实例。我希望这将有助于避免创建大约 50,000 个单独的文本函数，这是整个草图将有多少个字符（包括空格）。这是我到目前为止所拥有的：

let myString = "I'm a letter control freak!";
let letters;

function setup() {
  let charMap = new Map();

  for (let i = 0; i < myString.length; i++) {
    charMap.set([i], myString[i])
  }

  letters = Object.fromEntries(charMap);

  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(0);
  textSize(22);
  fill(255);
  text(letters[0], 50, 50);
  text(letters[1], 57, 50);
  text(letters[2], 62, 50);
  text(letters[3], 82, 50);
  text(letters[4], 88, 50);
  text(letters[5], 102, 50);
  text(letters[6], 109, 50);
  text(letters[7], 115, 50);
  text(letters[8], 128, 50);
  text(letters[9], 135, 50);
  text(letters[10], 142, 50);
  text(letters[11], 155, 50);
  text(letters[12], 162, 50);
  text(letters[13], 170, 50);
  text(letters[14], 182, 50);
  text(letters[15], 195, 50);
  text(letters[16], 208, 50);
  text(letters[17], 215, 50);
  text(letters[18], 223, 50);
  text(letters[19], 236, 50);
  text(letters[20], 243, 50);
  text(letters[21], 250 + random(-3, 3), 50 + random(-3, 3));
  text(letters[22], 257 + random(-3, 3), 50 + random(-3, 3));
  text(letters[23], 264 + random(-3, 3), 50 + random(-3, 3));
  text(letters[24], 276 + random(-3, 3), 50 + random(-3, 3));
  text(letters[25], 288 + random(-3, 3), 50 + random(-3, 3));
  text(letters[26], 300 + random(-3, 3), 50 + random(-3, 3));
}

Answer 1

为了实现将每个字符转变为 p5.js 草图中“字母”类的实例的目标，您可以创建一个自定义类来表示每个字母。这将允许您封装与每个角色相关的属性和方法，从而更容易单独处理和修改它们。

您更新的代码：

// Define the Letter class
class Letter {
  constructor(character, x, y) {
    this.character = character;
    this.x = x;
    this.y = y;
    this.size = 22;
    this.fillColor = 255;
  }

  // Display the letter on the canvas
  display() {
    textSize(this.size);
    fill(this.fillColor);
    text(this.character, this.x, this.y);
  }

  // Add more methods as needed
}

let myString = "I'm a letter control freak!";
let letters = [];

function setup() {
  createCanvas(windowWidth, windowHeight);
  let x = 50;
  let y = 50;

  for (let i = 0; i < myString.length; i++) {
    let letter = new Letter(myString[i], x, y);
    letters.push(letter);
    x += textWidth(myString[i]); // Move the x position based on the width of the character
  }
}

function draw() {
  background(0);

  // Display each letter using the Letter class
  for (let letter of letters) {
    letter.display();
  }
}