How can I make a transparent background in Processing?

Question

So I am currently doing a generative GIF from Processing and currently saving these frames out. I am wondering how can I make the background transparent? For now, it is currently black but I want to make it transparent. Thanks !!

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);
}

void draw(){
background(0);
//stroke(100);
//line (400,100,400,700);
//line (100,400,700,400);
translate(width/2, height/2);

//stroke(255);
beginShape();
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(100,55), random(0,10));
rect(X[i],Y[i], random(1,15), random(1,15));

endShape();
}}

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

apodidae · Answer 1 · 2022-10-04T04:29:01.200

Reference: Making a transparent background (application) in Processing language

Thanks to Kevin Workman for showing us how to do this with a Processing window. However, once the image is saved to a .png file it is on a solid black background. There are ways of getting it on a lighter background, but that is another topic. If you want to see the butterfly pattern more distinctly, try moving 'background(0,128)' from draw() to setup(). Not sure what you are trying to achieve.

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

javax.swing.JFrame frame;

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);
  background(0,128);
  frame = (javax.swing.JFrame) ((processing.awt.PSurfaceAWT.SmoothCanvas) surface.getNative()).getFrame();
  frame.dispose();
  frame.setUndecorated(true);
  frame.setOpacity(.5f);
  frame.setVisible(true);
  initCoordinates(true);
}

void draw() {
  translate(width/2, height/2);
  beginShape();
  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(100, 55), random(0, 10));
    rect(X[i], Y[i], random(1, 15), random(1, 15));
    endShape();
  }
}

void mousePressed(){
  println("frame saved.");
  saveFrame("frame1/frame-#####.png");
}

I couldn't get keyPressed() to work on the transparent window so I switched to mousePressed() to save the image. Operating system was MacOS.

How can I make a transparent background in Processing?

1 Answers1