如何实现圆形正方形网格图案的四倍平滑缩放循环动画

你编写的代码存在以下核心问题：

• 缺少setup()函数声明，初始画布配置代码没有正确挂载到初始化生命周期
• 控制缩放的状态变量isShrinking、缩放值a定义在pattern()函数内部，每次draw()调用都会重置状态，无法实现连续动画
• 缩放值修改逻辑错误写在了网格遍历的循环内部，每绘制一个元素就修改一次缩放值，导致网格大小、间距完全混乱，应该每帧统一修改一次缩放值，所有元素用同一个当前缩放值绘制
• draw()函数中没有每帧重绘背景，会导致之前的绘制帧残留，画面重叠错乱
• 绿色小圆的偏移量固定为25，和缩放值没有关联，放大后会出现位置偏移

// 全局状态变量，不会每帧重置
int currentSize = 50;
int step = 1;
boolean isShrinking = false;

void setup() {
  size(500,500); 
  noFill();
  rectMode(CENTER);
  ellipseMode(CENTER);
}

void pattern(int a) {
  // 遍历网格，所有元素用当前统一的缩放值绘制
  for(int x = 0; x <= width; x += a){
    for(int y = 0; y <= height; y += a){
      stroke(#1B08FF);
      ellipse(x,y,a,a);
      
      stroke(#FF0000);
      rect(x,y,a,a);
      
      stroke(#0BFF00);
      // 偏移量和缩放值挂钩，避免错位
      ellipse(x + a/2, y + a/2, a/2, a/2);
    }
  }
}

void draw() {
  // 每帧重绘背景，清除上一帧内容
  background(#A5A3A3);
  pattern(currentSize);
  
  // 每帧统一更新缩放状态
  if (isShrinking){
    currentSize -= step;
  } else {
    currentSize += step;
  }
  // 到达边界时切换缩放方向，50为原始尺寸，200为4倍尺寸
  if (currentSize == 50 || currentSize == 200){
    isShrinking = !isShrinking;
  }
}

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