p5.js中嵌套for循环无法正常工作问题求助

嘿，我瞅见你代码里的嵌套循环为啥不工作了——这是个新手常踩的小坑，内层循环错把外层的i变量拿来用了，直接打乱了整个循环逻辑！

问题根源拆解： #

你看这段内层循环代码：

for(var u = 0; i < 800; i += 25) {

这里有俩致命错误：

1. 循环条件用错变量：你写的是i < 800，但内层循环应该判断自己的变量u是否达标啊！这导致内层循环完全跟着外层的i走，一旦i超过800，内层循环直接躺平不执行；
2. 自增变量搞混：你写的是i +=25，这直接修改了外层循环的i，外层循环还没走完就被内层给改得超标了，自然整个网格都画不出来。

修正后的完整代码： #

我不仅帮你把循环改对，还加了点小优化，让网格能适配窗口大小，缩放也不会乱：

var Background;

function setup() {
  createCanvas(windowWidth, windowHeight);
  Background = color(0);
}

function draw() {
  background(Background); // 每次重绘背景，避免残留
  noFill();
  stroke(255);
  
  // 外层循环控制横向（x轴）的网格
  for(let i = 0; i < width; i += 25) {
    // 内层循环控制纵向（y轴）的网格
    for(let u = 0; u < height; u += 25) {
      rect(i, u, 25, 25);
    }
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

优化点说明： #

• 把循环条件改成了p5.js内置的width和height，这样网格会自动铺满整个画布，不管窗口多大；
• 把绘制逻辑放到draw函数里，配合background每次重绘，窗口缩放后网格会自动适配新尺寸；
• 用let代替var（ES6推荐写法），避免变量作用域的潜在问题。

内容的提问来源于stack exchange，提问作者Phoenix Up