我正在尝试使用 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) 这没有什么区别。
最佳答案
以下语法是问题所在:
vectorP[i,j] = new p5.Vector(i,j);
特别是,i,j
不做你认为它做的事情(索引到二维数组)。表达式i, j
计算结果仅为 j
和i
被忽略:
const a = [10, 11, 12, 13];
const i = 2;
const j = 1;
console.log(a[i, j]); // => 11
同样,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>
或者,更惯用的是,使用 Array
构造函数和 map
构建数组和 for ... of
或.forEach
迭代:
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() {
vectorP.forEach((row, i) =>
row.forEach((cell, j) =>
console.log(i, j, cell)
)
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>
如果您要创建许多数组,您可以使用以下方法抽象出一些困惑的语法:
// ...
const array = (len, fn) => [...Array(len)].map((_, i) => fn(i));
function setup() {
noLoop();
vectorP = array(xV, i => array(yV, j => new p5.Vector(i, j)));
// ...
我更喜欢y
为行(外部垂直轴)和 x
是列(内部水平轴)。但我保留了您对这个答案的约定。
使用二维数组时,最好使用不同的宽度/高度值进行测试,以确保行和列变量不会在任何地方混合。换句话说,尝试 3x2 而不是 2x2。
关于javascript - p5.js 中向量数组的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/77186898/