在p5.js草图中获取“未明类型错误”，我无法弄清楚

Question

我正在使用一个非常简单的p5.js示例，它是用于学习处理的补充材料的一部分。他们提供了书中所有示例的.js版本，我的数据项目将在网上进行。我想要做的是使用这个简单的例子作为我创建实际数据时的模板，即。在添加其他代码之前，我想先让基本的动画工作起来。

下面是我正在使用的代码：

var message = "random characters flying home!";
// An array of Letter objects
var letters;

function setup() {
  createCanvas(400, 200);
  // Load the font
  textFont("Georgia", 20);

  // Create the array the same size as the String
  letters = [];
  // Initialize Letters at the correct x location
  var x = 50;
  var y = height/2;
  for (var i = 0; i < message.length; i++) {
    letters[i] = new Letter(x, y, message.charAt(i));
    x += textWidth(message.charAt(i));
  }
}

function draw() {
  background(255);
  for (var i = 0; i < letters.length; i++) {
    // Display all letters randomly
    letters[i].random();
}
    // If the mouse is pressed the letters return to their original location
    if (mouseIsPressed) {
          letters[i].display();
    }
  }

function Letter(x, y, letter) {
  // The object knows its original " home " location
  // As well as its current location
  this.homex = this.x = x;
  this.homey = this.y = y;
  this.letter = letter;
  this.theta = 0;

  // Bring the letters back to their original position
  this.display = function() {
    fill(0);
    textAlign(LEFT);
    this.x = this.homex;
    this.y = this.homey;
    text(this.letter, this.x, this.y);
  }

  // Position the letters randomly
  this.random = function() {
    this.x += random(width);
    this.y += random(height);
    this.theta += random(-0.1, 0.1);
  }

   // no longer using this function, but it was part of the original 'if' statement
  // At any point, the current location can be set back to the home location     by calling the home() function.
  //this.home = function() {
    //this.x += lerp(this.x, this.homex, 0.05);
    //this.y += lerp(this.y, this.homey, 0.05);
    //this.theta += lerp(this.theta, 0, 0.05);
    //text(this.letter);
      }
};  

问题1:应该做的是首先在画布上显示单个字母。它就是这么做的。但是，我的控制台中也出现了以下错误：

sketch.js:31未定义的TypeError:无法读取未定义的属性“home”

sketch.js:31是draw()下“if”语句末尾的一行。我的问题是，'home'指的是什么，以及如何修复它。

第2期：当mouseIsPressed是字母移动到正确的配置时应该发生什么，即“随机字符飞回家！”但当我按下鼠标时什么都不会发生。

Answer 1

您的代码不会产生您提到的错误。

相反，运行您的代码会产生一个unexpected token: }错误，因为您的代码末尾有一个额外的}。把它处理掉。

此时，您有一个不同的错误：sketch.js:29 Uncaught TypeError: Cannot read property 'display' of undefined。查看您的draw()函数，包括第29行，我们看到如下内容：

function draw() {
  background(255);
  for (var i = 0; i < letters.length; i++) {
    // Display all letters randomly
    letters[i].random();
  }
  // If the mouse is pressed the letters return to their original location
  if (mouseIsPressed) {
    letters[i].display();
  }
}

注意，您的if(mousePressed)语句在 for循环之后是。当您到达if语句时，您期望i的值是什么？因为它在循环之外，i超出了作用域，所以它的值是未定义的！所以你才会犯这个错误。

要修复它，需要重新排列if语句，以便它们在循环中发生：

function draw() {
  background(255);

  for (var i = 0; i < letters.length; i++) {

    if (mouseIsPressed) {
      // If the mouse is pressed the letters return to their original location
      letters[i].display();
    } else {
      // Display all letters randomly
      letters[i].random();
    }
  }
}

这可以消除您的错误，但是您的随机逻辑仍然是错误的。你只是在你的信件中添加随机值，这样它们就从屏幕上飞出，你就看不到它们了。

相反，向他们的位置添加较小的值，并确保在用户单击时重置他们的位置。