Getting 'Uncaught type error' in einer Skizze p5.js, die ich nicht herausfinden kann

Question

Ich arbeite mit einem sehr einfachen Beispiel für eine p5.js, die Teil des zusätzlichen Materials für Learning Processing war. Sie stellen .js Versionen aller Beispiele aus dem Buch bereit, und mein Datenvisualisierungsprojekt wird im Internet laufen. Was ich tun möchte, ist dieses einfache Beispiel, um als eine Vorlage zu fungieren, wenn ich meine tatsächlichen Daten viz erstelle. Ich möchte die grundlegende Animation zuerst bearbeiten, bevor ich eine Menge anderen Code hinzufüge. Hier

ist der Code, den ich mit gerade arbeitete:

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); 
     } 
}; 

AUSGABE 1: Was es angenommen hat, zunächst zu tun ist, auf der Leinwand einzelne Buchstaben angezeigt werden soll. Und das tut es. Aber ich habe auch die folgenden Fehler in meiner Konsole:

sketch.js:31 Uncaught TypeError: Cannot read property 'home' of undefined 

sketch.js:31 ist die Linie am Ende des ‚if‘ Anweisung unter draw(). Meine Frage ist, was ist 'home' Bezug auf und wie kann ich es beheben.

AUSGABE 2: Was soll geschehen, wenn mouseIsPressed die Buchstaben bewegen sich in ihre korrekte Konfiguration ist, das heißt „! Zufällige Zeichen nach Hause fliegen“ Aber nichts passiert, wenn ich auf die Maus drücke.

Vielen Dank im Voraus!

Answer 1

Ihr Code erzeugt nicht die Fehler, die Sie erwähnten.

Stattdessen führt die Ausführung des Codes zu einem unexpected token: } Fehler, weil Sie am Ende des Codes eine zusätzliche } haben. Werde es los.

An diesem Punkt haben Sie einen anderen Fehler: sketch.js:29 Uncaught TypeError: Cannot read property 'display' of undefined. Ein Blick auf Ihre draw() Funktion, die Linie 29 enthält, sehen wir folgendes:

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(); 
    } 
} 

Beachten Sie, dass Ihre if(mousePressed) Aussage ist nach die for Schleife. Was erwarten Sie den Wert von i, wenn Sie zu der if-Anweisung gelangen? Da es sich außerhalb der Schleife befindet, ist i außerhalb des Gültigkeitsbereichs, daher ist sein Wert undefiniert! Deshalb erhalten Sie diesen Fehler.

es zu beheben, müssen Sie Ihre if-Anweisungen neu zu ordnen, so dass sie innerhalb der Schleife passieren:

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(); 
    } 
    } 
} 

Dies wird von Ihren Fehlern zu befreien, aber Ihre Zufallslogik ausgeschaltet ist nach wie vor. Du fügst deinen Buchstaben nur zufällige Werte hinzu, so dass sie vom Bildschirm fliegen und du sie nicht sehen kannst.

Fügen Sie stattdessen kleinere Werte zu ihren Positionen hinzu und stellen Sie sicher, dass Sie ihre Positionen zurücksetzen, wenn der Benutzer klickt.