如何在 p5.js 中使用向量生成點網格

Question

我試圖在向量描述的 canvas 上生成一個點網格，以形成一個流場。 我在嵌套循環中生成向量，然后將它們推送到列表中，最后嘗試繪制它們。 但是，當我嘗試繪制它們時，無法識別 .x 和 .y 屬性。 我認為這是因為向量列表是空的/只有一個條目，我不知道為什么。 抱歉，如果這是一個簡單的問題 - 這是我第一次使用 javascript 和 p5.js。 我的代碼如下所示，它應該生成一個統一的點網格。

let width = 600;
let height = 600;
let points = [];


function setup() {
  createCanvas(width, height);
  background(30);
  
  let density = 50;
  let spacing = width / density;

  for (var x = 0; x < width; x += spacing); {
    for (var y = 0; y < height; y += spacing); {
      var p = createVector(x, y)
      points.push(p)
      
    }
  }
}


function draw() {
  noStroke();
  fill(255);

  for (var i = 0; i < points.length; i++); {
    circle(points[i].x, points[i].y, 1);
  }
}

編輯：我的代碼肯定會生成一個向量，但出於某種原因只生成一個。 所以我認為問題在於 for 循環沒有正確執行。

Answer 1

您的 for 循環語法不正確。 右括號和左大括號后不應有分號：

  //                                    !
  for (var i = 0; i < points.length; i++); {
    circle(points[i].x, points[i].y, 1);
  }

您將需要修復每個 for 循環。