如何在Processing中为生成式GIF帧设置透明背景？

要将生成式GIF的黑色背景改为透明，同时导出正确带Alpha通道的帧，需要调整以下几个关键部分：

1. 启用画布Alpha通道 #

在setup()函数中初始化画布时，直接设置初始背景为全透明（Alpha值设为0）：

void setup (){
  size (800, 800, P2D);
  //colorMode(HSB);
  initCoordinates(true);
  background(0, 0); // 初始化全透明背景，第二个参数为Alpha值
}

2. 替换黑色背景绘制 #

把draw()函数里的background(0);替换为background(0, 0);，确保每帧绘制前都用透明背景覆盖，而非黑色：

void draw(){
  background(0, 0); // 用全透明背景替代原黑色背景
  translate(width/2, height/2);
  // ... 其余绘制逻辑
}

3. 修复代码中的绘制错误 #

原代码中beginShape()和endShape()的位置错误（endShape()放在了for循环内部），且你绘制的是独立矩形，不需要这两个函数，直接删除即可避免图形渲染异常。

另外注意原代码中fill(random(155,255),random(100,55), random(0,10))的第二个参数random(100,55)会返回0（因为random(a,b)要求a < b），需调整为random(55,100)。

修改后的完整代码 #

static final int NUM = 150;
static final float X[] = new float[NUM];
static final float Y[] = new float[NUM];
static final float T[] = new float[NUM];


void initCoordinates(boolean setup) {
  for(int i = 0 ; i < NUM; i++) {
    if (setup) {
      T[i] = random(0, 180); // [0, PI]
    }
    // the magic curve
    X[i] = 50 * sin(T[i]) * (exp(cos(T[i])) - 3*cos(4*T[i]) - pow(sin(T[i]/10), 5));
    Y[i] = 50 * cos(T[i]) * (exp(cos(T[i])) - 3*cos(4*T[i]) - pow(sin(T[i]/10), 5));
  }
}

void setup (){
  size (800, 800, P2D);
  //colorMode(HSB);
  initCoordinates(true);
  background(0, 0); // 初始化全透明背景
}

void draw(){
  background(0, 0); // 替换原黑色背景为全透明
  translate(width/2, height/2);

  for (int i = 0; i<NUM; i++){
    T[i] +=.004;
    if (T[i] > 180) {
      T[i] = 0;
    }
    initCoordinates(false);
    stroke(random(200, 255), random(200, 255), random(200, 255));
    fill(random(155,255), random(55,100), random(0,10)); // 修正random参数范围
    rect(X[i],Y[i], random(1,15), random(1,15));
  }
}

void keyPressed(){
  if(key == ' ') saveFrame("frame1/frame-#####.png");
}

额外说明 #

Processing的saveFrame()默认导出的PNG支持Alpha通道，只要画布背景设置为透明，导出的帧就会保留透明效果。

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