使用p5.js在Sublime开发时，循环无限批量生成圆点问题求助

我一看你这段代码就明白问题出在哪啦——p5.js里的draw()函数是会持续循环执行的，哪怕你设了frameRate(1)，它也会每秒跑一次，每次跑都会执行一遍for循环生成指定数量的圆点，自然就会无限新增圆点了。

要实现「设置随机背景色+生成指定数量圆点」的需求，我给你两种常见的修改方案，你可以根据实际需求选择：

方案一：页面加载后只生成一次圆点 #

把生成圆点的逻辑移到setup()函数里就行，因为setup()只会在页面初始化时执行一次，不会重复跑：

function setup() { 
  // 生成随机RGB背景色值
  let r = random(0,255); 
  let g = random(0,255); 
  let b = random(0,255); 
  createCanvas(window.innerWidth,window.innerHeight); 
  background(r,g,b); 

  // 在这里生成3个圆点，仅执行一次
  for (let i = 0; i < 3; i++) { 
    fill(0); 
    noStroke(); 
    // 补充完整的随机位置椭圆绘制代码
    ellipse(random(width), random(height), 20, 20);
  }
} 

// 不需要持续执行的话，draw函数可以留空或者删掉
function draw() { 
}

方案二：每秒刷新背景色并生成新圆点（替换旧内容） #

如果你的需求是每秒更换一次背景色，同时生成新的圆点（覆盖之前的内容，不是叠加），那就在draw()里先重新绘制背景，再生成圆点：

function setup() { 
  createCanvas(window.innerWidth,window.innerHeight); 
  frameRate(1); // 控制每秒执行一次draw逻辑
} 

function draw() { 
  // 每次执行draw都重新生成随机背景色，覆盖之前的画面
  let r = random(0,255); 
  let g = random(0,255); 
  let b = random(0,255); 
  background(r,g,b); 

  // 生成3个新的随机位置圆点
  for (let i = 0; i < 3; i++) { 
    fill(0); 
    noStroke(); 
    ellipse(random(width), random(height), 20, 20);
  }
}

另外小提醒：尽量用let代替var声明变量，能避免变量提升带来的意外问题哦～

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