Processing鼠标悬停修改圆形填充色出现坐标偏移问题求助

你的代码存在逻辑执行顺序颠倒的问题，循环内的执行步骤顺序不对：

1. 你先使用上一轮得到的fc颜色值绘制了当前坐标的圆形
2. 之后才判断当前圆形是否被鼠标悬停，修改fc的值

修改后的fc不会作用到已经画完的当前圆形，只会给下一个要绘制的圆形用，自然就会出现悬停位置和变色圆形错位的情况。
另外你没有在每帧开头重绘背景，之前绘制的圆形颜色会残留在画布上，也会影响显示效果。

调整判断逻辑和绘制逻辑的顺序即可，修改后的完整代码如下：

color[] pastel = {#8dd3c7, #ffffb3, #bebada, #fb8072, #80b1d3, #fdb462, #7fc97f};
color[] palette = pastel;

int r = 40;
int s = 50;

void setup() {
  size(500, 500);
  smooth();
  noStroke();
}

void draw() {
  // 每帧重绘背景，清除上一帧的内容
  background(#e8e8e8);
  for(int x = s/2; x < width; x += s){
    for(int y = s/2; y < height; y += s) {
      int currentFill;
      // 先判断当前圆形是否被悬停，确定填充色
      if(dist(x, y, mouseX, mouseY) < r/2) {
        currentFill = palette[3];
      } else {
        currentFill = palette[2];
      }
      // 再用对应颜色绘制当前圆形
      fill(currentFill);
      ellipse(x, y, r, r);
    }
  }
}

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