p5.js 中的向量数组出现问题

Question

我正在尝试使用 p5.js 创建一个二维向量数组 我使用嵌套 For 循环在 setup() 中生成 2D 向量数组，并在同一嵌套循环内将向量值打印到控制台。 从 2x2 元素的 2D 数组开始，我希望向量从数组索引中获取它们的值（因此，例如：向量 [0] [0] 具有值 (0,0) 和向量 [1] [1] 具有值 (1,1)。

这一切在 setup() 中都可以正常工作，控制台上的第一行是：

0 0 _class {x：0，y：0，z：0，构造函数：对象}

但是当我在draw()函数中访问这个二维数组并将向量打印到控制台时，第一行是：

0 0 _class {x: 1, y: 0, z: 0, 构造函数: 对象}

let xV = 2
let yV = 2
let vectorP = [2,2]

function setup() {
  for (var i = 0; i < xV; i++) {
   for (var j = 0; j < yV; j++) {
    vectorP[i,j] = new p5.Vector(i,j);
    console.log(i,j,vectorP[i,j]);
   }
  }
 }

function draw() {
 console.log ("draw")
  for (var i = 0; i < xV; i++) {
   for (var j = 0; j < yV; j++) {
    console.log(i,j,vectorP[i,j]) 
   }
  }
 }

我认为这是由于 JavaScript 通过引用而不是通过值处理对象的方式造成的，但我找不到让它工作的方法。我尝试了 createVector、push 等的变体，但结果相同。我想到的另一种可能性是下一个向量从前一个向量结束的地方开始。我也不确定我的初始数组声明是否正确。 *编辑：我已经尝试过声明 让向量P =新数组(2,2) 这没有什么区别。

Answer 1

以下语法是问题所在：

vectorP[i,j] = new p5.Vector(i,j);

特别是，

i,j

不会做你认为它会做的事情（索引到二维数组）。表达式

i, j

仅计算为

j

并且

i

被忽略：

const a = [0, 1, 2, 3];
const i = 2;
const j = 1;
console.log(a[i, j]); // => 1

类似地，

let vectorP = [2,2]

也不会声明空的 2x2 数组。它声明了一个具有 2 个值的一维数组：

vectorP[0] = 2; vectorP[1] = 2

:

const vectorP = [2, 2];
console.log(vectorP); // => [2, 2]
console.log(vectorP[0]); // => 2
vectorP[1] = 42;
console.log(vectorP[1]); // => 42

如果你想要一个真正的二维数组，请尝试：

const xV = 2;
const yV = 2;
const vectorP = [];

function setup() {
  noLoop();

  for (let i = 0; i < xV; i++) {
    vectorP.push([]);
  
    for (let j = 0; j < yV; j++) {
      vectorP[i][j] = new p5.Vector(i, j);
    }
  }
}

function draw() {
  for (let i = 0; i < xV; i++) {
    for (let j = 0; j < yV; j++) {
      console.log(i, j, vectorP[i][j]);
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>

或者，更惯用的是，使用

map

和

Array

构造函数构建数组，并使用

for ... of

进行迭代：

const xV = 2;
const yV = 2;
let vectorP = [];

function setup() {
  noLoop();
  vectorP = [...Array(xV)].map((_, i) => 
    [...Array(yV)].map((_, j) => new p5.Vector(i, j))
  );
}

function draw() {
  for (const row of vectorP) {
    for (const cell of row) {
      console.log(i, j, cell);
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>