为什么 JavaScript 将 vector 同时定义为 vector 和 undefined ？

Question

所以，我试图定义一个 class 鸟的形状会出现的地方，然后移动并留下踪迹。这只鸟是在 curveVertex 的帮助下制作的，它根据 Perlin 噪声移动，它应该将之前位置的数据保存到 'history' 数组中。但是当我尝试引用数组中的对象时，出现错误：“未捕获的类型错误：无法读取未定义的属性（读取 'x'）”。但是当我在 console.log 的帮助下检查这个对象时，控制台同时显示它的数值和 'undefined'...

class Bird {
  constructor(x0, y0, x1, y1, x2, y2, x3, y3, x4, y4, x5, y5, xend, yend) {
    this.x0 = x0;
    this.y0 = y0;
    this.x1 = x1;
    this.y1 = y1;
    this.x2 = x2;
    this.y2 = y2;
    this.x3 = x3;
    this.y3 = y3;
    this.x4 = x4;
    this.y4 = y4;
    this.x5 = x5;
    this.y5 = y5;
    this.xend = xend;
    this.yend = yend;

    this.history = [];

    this.t = 0;
  }

  update() {

    let r = noise(this.t + 5.2);
    let r2 = noise(this.t + 5.19);
    let r3 = noise(5 + this.t);
    let r5 = noise(5 + this.t);

    this.x0 = this.x0 + r;
    this.y0 = this.y0 + r;
    this.x1 = this.x1 + r2;
    this.y1 = this.y1 + r2;
    this.x2 = this.x2 + r3;
    this.y2 = this.y2 + r3;
    this.x3 = this.x3 + r;
    this.y3 = this.y3 + r;
    this.x4 = this.x4 + r5;
    this.y4 = this.y4 + r5;
    this.x5 = this.x5 + r;
    this.y5 = this.y5 + r;
    this.xend = this.xend + r;
    this.yend = this.yend + r;


    this.t += 0.005;

    let v0 = createVector(this.x0, this.y0);
    let v1 = createVector(this.x1, this.y1);
    let v2 = createVector(this.x2, this.y2);
    let v3 = createVector(this.x3, this.y3);
    let v4 = createVector(this.x4, this.y4);
    let v5 = createVector(this.x5, this.y5);
    let vend = createVector(this.xend, this.yend);

    this.history.push(v0, v1, v2, v3, v4, v5, vend);


    if (this.history.length > 700) {
      this.history.splice(0, 1);
    }


  }

  show() {
    strokeWeight(1);
    stroke(255);
    beginShape();
    for (let i = 0; i < this.history.length; i++) {
      let pos0 = this.history[i];
      let pos1 = this.history[i + 1];
      let pos2 = this.history[i + 2];
      let pos3 = this.history[i + 3];
      let pos4 = this.history[i + 4];
      let pos5 = this.history[i + 5];
      let posend = this.history[i + 6];

      console.log(posend); //                   **LINE 88**

      noFill();

      curveVertex(pos0.x, pos0.y);
      curveVertex(pos1.x, pos1.y);
      curveVertex(pos2.x, pos2.y);
      curveVertex(pos3.x, pos3.y);
      curveVertex(pos4.x, pos4.y);
      curveVertex(pos5.x, pos5.y);
      curveVertex(posend.x, posend.y);
      endShape();

    }


    beginShape();
    curveVertex(this.x0, this.y0);
    curveVertex(this.x1, this.y1);
    curveVertex(this.x2, this.y2);
    curveVertex(this.x3, this.y3);
    curveVertex(this.x4, this.y4);
    curveVertex(this.x5, this.y5);
    curveVertex(this.xend, this.yend);
    endShape();


  }
}

let bird;

function setup() {
  createCanvas(displayWidth, displayHeight);

  bird = new Bird(800, 560, 700, 350, 600, 250, 700, 300, 790, 240, 700, 350, 450, 500);

}

function draw() {
  background(70);
  bird.show();
  bird.update();
}

Answer 1

我认为问题出在您的显示功能上。

您正在尝试访问数组中不存在的位置。

for (let i = 0; i < this.history.length; i++) {
                let pos0 = this.history[i];
// The below positions are out of bounds once i reaches this.history.length-1
                let pos1 = this.history[i+1]; 
                let pos2 = this.history[i+2];
                let pos3 = this.history[i+3];
                let pos4 = this.history[i+4];
                let pos5 = this.history[i+5];
                let posend = this.history[i+6];

您可以更改循环条件，确保您不会访问不存在的值。

for (let i = 0; i < this.history.length - 6; i++) {

为什么 JavaScript 将 vector 同时定义为 vector 和 undefined ？

Why does JavaScript defines the vector as vector and as undefined at the same time?

javascript

curve

trail

undefined

p5.js