# Making a Transparent Background and Exporting to PNG

**URL:** <https://discourse.processing.org/t/making-a-transparent-background-and-exporting-to-png/37073>\
**Category:** Beginners\
**Created:** [May 25, 2022, 2:53am UTC](https://discourse.processing.org/t/making-a-transparent-background-and-exporting-to-png/37073 "2022-05-25T02:53:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![panko](https://avatars.discourse-cdn.com/v4/letter/p/c5a1d2/32.png) [@panko](https://discourse.processing.org/u/panko)\
**Post date:** [May 25, 2022, 2:53am UTC](https://discourse.processing.org/t/making-a-transparent-background-and-exporting-to-png/37073/1 "2022-05-25T02:53:44Z")

</div>

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!

```auto

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

```

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [May 25, 2022, 3:43am UTC](https://discourse.processing.org/t/making-a-transparent-background-and-exporting-to-png/37073/2 "2022-05-25T03:43:20Z")

</div>

Hi

> <https://stackoverflow.com/questions/34475566/how-to-make-completely-transparent-background>

---

<div class="post-metadata">

**Author:** ![Mikey83](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mikey83/32/17956_2.png) [@Mikey83](https://discourse.processing.org/u/Mikey83)\
**Post date:** [May 25, 2022, 8:50am UTC](https://discourse.processing.org/t/making-a-transparent-background-and-exporting-to-png/37073/3 "2022-05-25T08:50:55Z")

</div>

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

```auto
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");
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [May 25, 2022, 12:30pm UTC](https://discourse.processing.org/t/making-a-transparent-background-and-exporting-to-png/37073/4 "2022-05-25T12:30:09Z")

</div>

Hello @panko ,

I encourage you to use the resources available here to better understand elements of Processing code:  
_[https://processingfoundation.org/](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:

- [https://processing.org/reference/background\_.html](https://processing.org/reference/background_.html)  

- [https://processing.org/reference/PGraphics.html](https://processing.org/reference/PGraphics.html)  
See related references.

- [https://processing.org/reference/createGraphics\_.html](https://processing.org/reference/createGraphics_.html)  

- Look up _save()_

Hint:  
[https://processing.org/reference/circle\_.html](https://processing.org/reference/circle_.html)

Consider using x and y directly in your circle.

```auto
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.

`:)`