如何在p5.js中实现圆形网格对象在画布内往复移动

• 现有代码的多个独立if判断会并行执行，当圆形移动到边界阈值附近时，会同时满足「正向位移」和「反向位移」的触发条件，每帧位移量正负抵消，最终出现原地抖动的混乱效果
• 重复的边界判断逻辑进一步打乱了位移规则，没有统一的方向控制变量，无法维持稳定的往返运动状态
• 边界阈值设置错误，你需要的终点是width-50=450，现有代码写的430和需求不匹配

var circles = [];

function setup() {
  createCanvas(500, 500);
  for (var a = 50; a < width - 300; a += 20) {
    for (var b = 50; b < height - 300; b += 20) {
      circles.push(new Circle(a, b));
    }
  }
}

function draw() {
  background(50);
  for (var b = 0; b < circles.length; b++) {
    circles[b].show();
  }
}

function Circle(x, y) {
  this.x = x;
  this.y = y;
  // 新增速度变量控制移动方向
  this.speed = 1;

  this.show = function() {
    fill(255);
    noStroke();
    ellipse(this.x, this.y, 10, 10);
    
    // 到达右边界/下边界，速度翻转为负
    if (this.x >= 450) {
      this.speed = -1;
    }
    // 到达左边界/上边界，速度翻转为正
    if (this.x <= 50) {
      this.speed = 1;
    }
    
    // 统一更新坐标
    this.x += this.speed;
    this.y += this.speed;
  }
}

• 新增speed属性统一控制移动方向，到达边界时只需翻转速度正负，不需要重复编写位移逻辑，避免判断冲突
• 调整边界阈值为需求指定的50和450，和你要的往返起止点对齐
• 先判断边界调整速度，再统一更新坐标，逻辑顺序更合理，不会出现多条件同时触发的问题

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