Making a Transparent Background and Exporting to PNG

Processing Beginners
1

Hi there -
I have made a simple design that has a 17x11 grid of circle shapes.

I would like to modify this code to save this image as a PNG with a transparent background.

Can anyone help me? Thanks!


int horiz = 17;
int vert = 11;
void setup(){
  size(720, 480, P2D);
  background(99, 10, 200, 255);
  
  translate(30, 30);
  for (int x=0; x<horiz; x++){
    pushMatrix();
    translate(x*40, 0);
    for (int y=0; y<vert; y++){
          pushMatrix();
          translate(0, y*40);
          circle(0, 0, 20);  
          popMatrix();
          };  
          popMatrix();
        }; 
}
2

Hi

3

Create a PGraphics image to draw it all to then save that,
took off the P2D because it flickers like crazy on my screen for some reason

int horiz = 17;
int vert = 11;
PGraphics img;

void setup() {
  size(720, 480);
  img = createGraphics(width,height);
  background(99, 10, 200,0);

  img.beginDraw();
  img.clear();
  img.translate(30, 30);
  for (int x=0; x<horiz; x++) {
    img.pushMatrix();
    img.translate(x*40, 0);
    for (int y=0; y<vert; y++) {
      img.pushMatrix();
      img.translate(0, y*40);
      img.circle(0, 0, 20);  
      img.popMatrix();
    }
    img.popMatrix();
  }
  img.endDraw();
  image(img,0,0);
  
  img.save("test.png");
}
4

Hello @panko ,

I encourage you to use the resources available here to better understand elements of Processing code:
https://processingfoundation.org/

You will glean insight and a deeper understanding of the code by exploring the resources and references.

Follow the trail of breadcrumbs:

Hint:
https://processing.org/reference/circle_.html

Consider using x and y directly in your circle.

circle(x*2 + 5, y*2 + 10, 20); //modify as required

And you can then remove the push(), pop() and translate().

Have fun exploring!

And checkout setup() and draw() as well.

:)