我多次看到非常酷的动态排版示例。在这些例子中，每个字母都是一个粒子。文本是一个粒子系统，它可能会受到各种力，例如重力甚至离心力。这些系统是在 Processing 和 p5.js 中制作的。
受这些动态排版示例的启发，我正在使用 p5.js 为网络构建一个充满文本的交互式屏幕。当用户在文本上移动光标时，这个开始在屏幕上反弹。
我将草图从 Processing 翻译成 p5.js，我注意到这个问题与 setup() 函数中的文本间距有关。在 Processing 中，代码看起来像这样，并且运行正常。
我想专注于处理代码的这一部分：
void setup() {
size(640, 360);
//load the font
f = createFont("Arial", fontS, true);
textFont(f);
// Create the array the same size as the String
springs = new Spring[message.length()];
// Initialize Letters (Springs) at the correct x location
int locx = 40;
//initialize Letters (Springs) at the correct y location
int locy = 100;
for (int i = 0; i < message.length(); i++) { …