如何在 Processing 中实现点击动态生成的圆形改变背景色

在Processing中实现点击动态生成的圆形改变背景色，需要结合动态图形生成、鼠标事件监听和碰撞检测三个核心逻辑，下面逐步讲解实现方法。

核心实现思路

首先要明确整个功能的执行流程：先动态生成一定数量的圆形并存储它们的位置、半径等属性，然后监听鼠标点击动作，判断点击位置是否落在任意动态生成的圆形范围内，如果命中则切换背景色，否则不做处理。

1. 动态圆形的数据结构设计

动态生成的圆形需要被持续记录，因此我们可以定义一个Circle类来存储每个圆形的属性，包括x坐标、y坐标、半径、填充颜色，方便后续统一管理和判断点击范围。

// 定义圆形类，存储动态圆形的属性
class Circle {
  float x;  // 圆心x坐标
  float y;  // 圆心y坐标
  float r;  // 圆形半径
  color c;  // 圆形填充颜色
  
  // 构造方法，初始化圆形属性
  Circle(float x, float y, float r, color c) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.c = c;
  }
  
  // 绘制圆形的方法
  void display() {
    fill(c);
    noStroke();
    ellipse(x, y, r*2, r*2);
  }
  
  // 判断点击位置是否在圆形范围内
  boolean isHit(float mx, float my) {
    // 计算点击位置到圆心的距离
    float distance = dist(mx, my, x, y);
    // 距离小于等于半径则判定为点击命中
    return distance <= r;
  }
}

2. 全局变量与初始化逻辑

我们需要一个列表来存储所有动态生成的圆形，同时在初始化阶段生成指定数量的随机圆形，避免每次刷新都重新生成。

ArrayList<Circle> circles;  // 存储所有动态圆形的列表
color[] bgColors = {color(255, 255, 255), color(220, 240, 255), color(255, 230, 230), color(230, 255, 230)};  // 预设的背景色数组
int currentBgIndex = 0;  // 当前背景色索引

void setup() {
  size(800, 600);
  circles = new ArrayList<Circle>();
  // 生成10个随机位置的动态圆形
  for (int i = 0; i < 10; i++) {
    float x = random(50, width-50);  // 随机x坐标，避免超出画布
    float y = random(50, height-50); // 随机y坐标，避免超出画布
    float r = random(20, 50);        // 随机半径
    color c = color(random(255), random(255), random(255));  // 随机填充色
    circles.add(new Circle(x, y, r, c));
  }
}

3. 绘制与交互逻辑

在draw()函数中持续绘制背景和所有动态圆形，同时监听鼠标点击事件，判断点击位置是否命中任意圆形，命中则切换背景色。

void draw() {
  background(bgColors[currentBgIndex]);  // 设置当前背景色
  // 遍历所有圆形并绘制
  for (Circle circle : circles) {
    circle.display();
  }
}

void mousePressed() {
  // 遍历所有圆形，判断点击是否命中
  for (Circle circle : circles) {
    if (circle.isHit(mouseX, mouseY)) {
      // 命中则切换到下一个背景色，索引循环
      currentBgIndex = (currentBgIndex + 1) % bgColors.length;
      break;  // 命中一个后停止遍历，避免多次切换
    }
  }
}

完整可运行代码

将上面的代码片段整合后，就可以得到完整的可运行程序，直接复制到Processing编辑器中即可运行测试。

ArrayList<Circle> circles;
color[] bgColors = {color(255, 255, 255), color(220, 240, 255), color(255, 230, 230), color(230, 255, 230)};
int currentBgIndex = 0;

class Circle {
  float x;
  float y;
  float r;
  color c;
  
  Circle(float x, float y, float r, color c) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.c = c;
  }
  
  void display() {
    fill(c);
    noStroke();
    ellipse(x, y, r*2, r*2);
  }
  
  boolean isHit(float mx, float my) {
    float distance = dist(mx, my, x, y);
    return distance <= r;
  }
}

void setup() {
  size(800, 600);
  circles = new ArrayList<Circle>();
  for (int i = 0; i < 10; i++) {
    float x = random(50, width-50);
    float y = random(50, height-50);
    float r = random(20, 50);
    color c = color(random(255), random(255), random(255));
    circles.add(new Circle(x, y, r, c));
  }
}

void draw() {
  background(bgColors[currentBgIndex]);
  for (Circle circle : circles) {
    circle.display();
  }
}

void mousePressed() {
  for (Circle circle : circles) {
    if (circle.isHit(mouseX, mouseY)) {
      currentBgIndex = (currentBgIndex + 1) % bgColors.length;
      break;
    }
  }
}

效果说明

运行程序后，画布会显示10个随机位置、随机颜色的圆形，点击任意一个圆形，画布背景色会切换到预设的下一个颜色，再次点击其他圆形会继续切换，点击空白区域不会触发背景色变化。

如果需要调整动态圆形的数量、大小范围或者背景色选项，只需要修改对应初始化的参数即可，整体逻辑不需要改动。

Processing动态生成圆形点击交互背景色修改鼠标事件修改时间：2026-07-18 14:36:26