p5.js |循环()函数

在p5.js中，循环函数是一种非常有用的结构，可以帮助程序员重复执行一些代码，降低重复性的工作量。

for循环

最常见的循环结构就是for循环，格式如下：

for (let i=0; i<10; i++) {
  //循环执行的代码块
}

其中，let i=0表示循环初始条件，i<10表示循环终止条件，i++表示循环每次执行的步骤。我们可以修改这些参数，来满足不同的需求。

示例

下面是一个简单的例子，使用for循环生成20个随机颜色的圆：

function setup() {
  createCanvas(400, 400);
  noStroke();
}

function draw() {
  for(let i=0; i<20; i++) {
    fill(random(255), random(255), random(255));
    circle(random(width), random(height), 50);
  }
}

while循环

另外一种循环结构是while循环，格式如下：

while (条件) {
  //循环执行的代码块
  //每次循环会检查条件是否为真，只有在为真的情况下才会继续执行代码块
}

示例

下面是一个示例，当鼠标点击鼠标区域时，使用while循环生成随机大小和颜色的矩形：

function setup() {
  createCanvas(400, 400);
  noStroke();
}

function draw() {
  //空函数体
}

function mouseClicked() {
  let i = 0;
  while (i < 10) {
    fill(random(255), random(255), random(255));
    rect(random(width), random(height), random(50, 100), random(50, 100));
    i++;
  }
}

for...in循环

除了常见的for循环和while循环，p5.js还支持ES6中的for...in循环，可以帮助我们遍历数组或对象的属性。

示例

下面是一个示例，使用for...in循环遍历一个数组，并将每个元素的值设置为偶数：

let arr = [1, 3, 5, 7, 9];
for(let i in arr) {
  arr[i] = arr[i] * 2;
}
console.log(arr); // [2, 6, 10, 14, 18]

总结

循环函数是p5.js中非常重要的一个结构体，能帮助我们快速简便地完成大量重复性的工作。常用的循环函数包括for循环和while循环，我们还可以使用for...in循环来遍历数组或对象的属性。