如何在 p5.js 中使用向量生成点网格

Question

我正在尝试在矢量描述的 canvas 上生成一个点网格，以形成一个流场。我在嵌套循环中生成向量，然后将它们推送到列表中，最后尝试绘制它们。但是，当我尝试绘制它们时，无法识别 .x 和 .y 属性。我认为这是因为向量列表 empty/only 中有一个条目，我不知道为什么。抱歉，如果这是一个简单的问题 - 这是我第一次使用 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 循环。

如何在 p5.js 中使用向量生成点网格

How to Generate a Grid of Points Using Vectors in p5.js

javascript

generative-art

p5.js