如何在Processing中实现按时间间隔触发的随机位移功能

问题根源 #

• 你全局仅定义了rX、rY一组随机坐标，给3个Circle实例传参时用的都是同一组值，自然所有圆形都会堆叠在同一个位置
• 你在draw()的每帧都重新实例化所有Circle对象，属于冗余操作，完全不需要每次新建对象，只需要在坐标更新时修改实例的坐标属性即可
• 坐标更新逻辑放在绘制逻辑之后，会导致新生成的坐标要延迟一帧才生效，逻辑顺序不合理

修正代码 #

主程序代码 #

Circle[] circles = new Circle[3];

void setup () {
  size(540, 960);
  // 初始化时给每个圆生成独立的随机坐标
  for (int i = 0; i < circles.length; i++) {
    circles[i] = new Circle(random(width), random(height));
  }
}

// 给每个圆单独生成新的随机坐标
void randomizePositions() {
  for (int i = 0; i < circles.length; i++) {
    circles[i].updatePos(random(width), random(height));
  }
}

void draw() {
  background(#c1c1c1);
  
  // 每30帧更新一次坐标，放在绘制前避免延迟
  if (frameCount % 30 == 0) {
    randomizePositions();
  }

  // 直接调用现有实例的绘制方法即可，不需要每帧新建对象
  for (int i = 0; i < circles.length; i++) {
    circles[i].display();
  }
}

Circle类代码（新增updatePos方法） #

class Circle {

  int size;
  float x;
  float y;

  Circle(float tempX, float tempY) {
    size = width/10;
    x = tempX;
    y = tempY;
  }

  // 新增坐标更新方法
  void updatePos(float newX, float newY) {
    x = newX;
    y = newY;
  }

  void display() {
    float wave = sin(radians(frameCount*10));
    for (int i = 0; i < 10 * wave; i++) {
      noFill();
      stroke(0);
      strokeWeight(20);
      ellipse(x, y, i * size, i * size);
    }
  }
}

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