Processing代码显示静止圆圈的原因及修复方案

嘿，我来帮你拆解这个问题！

问题到底出在哪？ #

你这段代码的核心bug是错用了for-each循环。在Processing（基于Java）里，for(int x : xM)这种写法是遍历数组里的元素值，而不是数组的索引。因为你初始化xM和yM时，数组里所有元素默认都是0，所以每次循环时x（或y）的值都是0——这就导致你一直在给xM[0]重复赋值，其他索引位置的元素始终是默认的0，yM也是同样的情况。

最后你用索引遍历画圆圈时，只有z=0的位置xM[0]和yM[0]是被更新过的数值，而z=1到4时，xM[z]和yM[z]都是0，所以最终只会在(0,0)（左上角）和(xM[0], yM[0])（中心附近）画出两个圆圈，就是你看到的结果。

怎么修复？ #

要实现圆圈沿X、Y轴依次递增排列，你需要改用基于索引的普通for循环来给数组赋值，这样才能逐个给每个索引位置的元素正确赋值。

修复后的代码如下：

void setup(){ 
  size(200,200); 
  background(255); 
} 

void draw(){ 
  ac(); 
} 

void ac(){ 
  int xPos = 10; 
  int yPos = 20; 
  int sizeXY = 40; 
  int xInt = 10; 
  int yInt = 20; 
  int[] xM = new int[5]; 
  int[] yM = new int[5]; 
  
  // 用索引遍历给xM每个位置赋值
  for(int i = 0; i < xM.length; i++){ 
    xM[i] = xPos; 
    xPos += xInt; 
  } 
  
  // 同理处理yM
  for(int i = 0; i < yM.length; i++){ 
    yM[i] = yPos; 
    yPos += yInt; 
  } 
  
  // 遍历索引画出所有圆圈
  for(int z = 0; z < 5; z++){ 
    ellipse(xM[z], yM[z], sizeXY, sizeXY); 
  } 
}

修复逻辑说明： #

• 把原来的for-each循环换成for(int i = 0; i < xM.length; i++)，这里的i就是数组的索引，从0到4逐个遍历，每个索引位置的元素都会被单独赋值。
• xM[i] = xPos会把当前的xPos存入数组第i位，接着xPos += xInt让下一个位置的X坐标递增10；yM的处理逻辑完全一致，Y坐标每次递增20。

运行这段修复后的代码，你就能看到5个圆圈沿X轴从10开始、Y轴从20开始依次排列啦！

内容的提问来源于stack exchange，提问作者A.Lopez