Processing开发自定义渐隐效果绘图工具的技术问题咨询

核心疑问解答 #

• 必须使用ArrayList存储画笔对象：你当前效果不符合预期的核心原因，就是只用了单个画笔对象+全局渐变计数器，新生成的画笔会直接继承已经累加的渐变进度，无法从纯黑开始独立过渡。ArrayList可以保存所有历史点位的画笔实例，让每个点位独立控制自己的渐改进度。
• PVector不是必需依赖：它只是用来存储坐标的工具类，能简化坐标相关计算，单独定义x、y浮点数存储位置完全可以实现相同效果，按需选择即可。

现有代码问题 #

1. 全局共用单个counter变量，所有新画笔直接使用已累加的渐变值，新画的点位无法保持纯黑
2. 没有存储历史画笔实例，旧点位无法持续更新自己的渐隐状态
3. 没有每帧重置白色背景，渐隐到白色的画笔无法和背景融合出消失效果
4. 没有回收完全变白的无用画笔对象，长时间运行会占用多余内存

可运行修正代码 #

ArrayList<Brush> brushList = new ArrayList<Brush>();
int brushDiameter = 50;
float fadeSpeed = 0.01; // 数值越大拖尾越短、渐隐越快

void setup() {
  size(600, 600);
  noStroke();
}

void draw() {
  background(255); // 每帧铺白色底色，实现渐隐融合效果

  // 鼠标移动/按下时，在当前鼠标位置新增初始为纯黑的画笔
  if (mousePressed || pmouseX != mouseX || pmouseY != mouseY) {
    brushList.add(new Brush(mouseX, mouseY));
  }

  // 倒序遍历画笔列表，更新状态、绘制、回收失效对象
  for (int i = brushList.size() - 1; i >= 0; i--) {
    Brush currentBrush = brushList.get(i);
    currentBrush.update();
    currentBrush.display();
    // 画笔完全变白后从列表移除
    if (currentBrush.lifeProgress >= 1.0) {
      brushList.remove(i);
    }
  }
}

class Brush {
  float x, y;
  float lifeProgress; // 单个画笔独立的渐隐进度，0为纯黑，1为纯白
  color fillColor;

  Brush(float xPos, float yPos) {
    x = xPos;
    y = yPos;
    lifeProgress = 0; // 新生成的画笔进度为0，保持纯黑
  }

  void update() {
    lifeProgress += fadeSpeed;
    lifeProgress = constrain(lifeProgress, 0, 1);
    fillColor = lerpColor(color(0), color(255), lifeProgress);
  }

  void display() {
    fill(fillColor);
    ellipse(x, y, brushDiameter, brushDiameter);
  }
}

参数调整说明 #

• 修改fadeSpeed可以调整拖尾长度：数值越大，画笔渐隐速度越快，拖尾越短
• 修改brushDiameter可以调整绘制线条的粗细
• 如果需要实现仅鼠标按下时才绘制，把draw()方法里判断条件的|| pmouseX != mouseX || pmouseY != mouseY删除即可

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