在我無法弄清楚的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 Uncaught TypeError: Cannot read property 'home' of undefined 

sketch.js:31是在「如果」語句下draw()結束行。我的問題是'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(); 
    } 
    } 
} 

此擺脫你的錯誤，但你隨機邏輯仍然關閉。你只是給你的信件添加隨機值，所以它們飛離屏幕，你看不到它們。

取而代之，將較小的值添加到其位置，並確保在用戶單擊時重置其位置。