Получение «Ошибка отображения нечистоты» в эскизе 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 цикла. Что вы ожидаете от значения i, когда вы попадаете в оператор if? Поскольку он находится вне цикла, i выходит за пределы области действия, поэтому его значение не определено! Вот почему вы получаете эту ошибку.

Чтобы исправить это, вам нужно изменить ваш если заявления так, что они происходят внутри цикла:

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

Это избавляется от ваших ошибок, но ваша случайная логика по-прежнему выключен. Вы просто добавляете случайные значения в свои письма, поэтому они улетают с экрана, и вы не можете их видеть.

Вместо этого добавьте меньшие значения в свои позиции и убедитесь, что вы сбросили свои позиции, когда пользователь нажимает.