# How to export frames from processing

**URL:** https://discourse.processing.org/t/how-to-export-frames-from-processing/14494
**Category:** Coding Questions
**Created:** [October 7, 2019, 3:46pm UTC](https://discourse.processing.org/t/how-to-export-frames-from-processing/14494 "2019-10-07T15:46:58Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Malvan](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@Malvan](https://discourse.processing.org/u/Malvan)
#### Post date: [October 7, 2019, 3:46pm UTC](https://discourse.processing.org/t/how-to-export-frames-from-processing/14494/1 "2019-10-07T15:46:58Z")

</div>

Hello there!

I got a problem with the following code:

> PGraphics pg;
> 
> float fontSize;  
> int cols = 30;  
> int rows = 30;  
> float zoff = 0;  
> float xoffsp = 0.2;  
> float yoffsp = 0.2;  
> float zoffsp = 0.05;
> 
> float sizes;
> 
> float multiplyerX;  
> float multiplyerY;
> 
> float mapCutter = 0.1;
> 
> float mapCutterSP = 0.025;
> 
> float mapCutterANG = 0;
> 
> void setup() {
> 
> size(1080, 1080, P2D);
> 
> pg = createGraphics(1080, 1080);
> 
> fontSize = pg.width/rows;
> 
> sizes = new float[cols][rows];
> 
> multiplyerX = new float[cols];
> 
> multiplyerY = 0;
> 
> noStroke();
> 
> }
> 
> void draw() {
> 
> mapCutterANG += mapCutterSP;
> 
> mapCutter = sin(mapCutterANG);
> 
> background(0);
> 
> float yoff = 0;
> 
> for (int y = 0; y \< rows; y++) {
> 
> float xoff = 0;
> 
> for (int x = 0; x \< cols; x++) {
> 
> sizes[y] = map(noise(xoff, yoff, zoff), -mapCutter, mapCutter, 0, 1);
> 
> xoff += xoffsp;
> 
> }
> 
> yoff += yoffsp;
> 
> }
> 
> zoff += zoffsp;
> 
> genTextre ();
> 
> updWidths();
> 
> display();
> 
> }
> 
> void updWidths() {
> 
> for (int y = 0; y \< rows; y++) {
> 
> float sum = 0;
> 
> for (int x = 0; x \< cols; x++) {
> 
> sum += sizes[y];
> 
> }
> 
> multiplyerX[y] = width/sum;
> 
> }
> 
> float sum = 0;
> 
> for (int y = 0; y \< rows; y++) {
> 
> sum += sizes[0][y];
> 
> multiplyerY = height/sum;
> 
> }
> 
> }
> 
> void display() {
> 
> float texHCounter = 0;
> 
> float texHCounterStep = pg.width/cols;
> 
> float texWCounterStep = pg.height/rows;
> 
> float hcounter = 0;
> 
> for (int y = 0; y \< rows; y++) {
> 
> float texWCounter = 0;
> 
> float wcounter = 0;
> 
> for (int x = 0; x \< cols; x++) {
> 
> beginShape(QUAD);
> 
> textureMode(IMAGE);
> 
> texture(pg);
> 
> vertex(wcounter, hcounter, texWCounter, texHCounter);
> 
> vertex(wcounter+sizes[y]\*multiplyerX[y], hcounter, texWCounter+texWCounterStep, texHCounter);
> 
> vertex(wcounter+sizes[y]\*multiplyerX[y], hcounter+sizes[0][y]\*multiplyerY, \>texWCounter+texWCounterStep, texHCounterStep+texHCounter);
> 
> vertex(wcounter, hcounter+sizes[0][y]\*multiplyerY, texWCounter, texHCounterStep+texHCounter);
> 
> endShape();
> 
> wcounter += sizes[y]\*multiplyerX[y];
> 
> texWCounter+=texWCounterStep;
> 
> }
> 
> texHCounter+=texHCounterStep;
> 
> hcounter+=sizes[0][y]\*multiplyerY;
> 
> }
> 
> }
> 
> void genTextre () {
> 
> pg.beginDraw();
> 
> pg.background(0);
> 
> pg.textSize(fontSize);
> 
> pg.textAlign(CENTER, BOTTOM);
> 
> for (int y = 0; y \< rows; y++) {
> 
> for (int x = 0; x \< cols; x++) {
> 
> pg.pushMatrix();
> 
> pg.translate(x_fontSize+fontSize/2, y_fontSize+fontSize);
> 
> pg.fill(255);
> 
> pg.text(“p”, 0, 0, 0);
> 
> pg.popMatrix();
> 
> }
> 
> }
> 
> pg.endDraw();
> 
> // saveFrame(“output/typography\_####.svg”);  
> // save(“typography\_####.png”);
> 
> }

As you can see, I’ve tried some methods to save this as a png/svg file, but unfortunatelly, it didn’t work.  
I’ve only got a picture with a black background.\>

---

<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: [October 7, 2019, 8:07pm UTC](https://discourse.processing.org/t/how-to-export-frames-from-processing/14494/2 "2019-10-07T20:07:20Z")

</div>

Hello,

Put it at the end of draw() :

```auto
void draw() {

// Code removed

  display();
  
  saveFrame("output/typography_####.png");
  //save("typography.png");
}

```

![typography_0010](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/03a147320d0eaa346e3c58855001dcfdd77f5606.png)

Your code did not cut and paste well and I had to edit some things manually.  
Please use the \</\> to format code.

🙂

---

<div class="post-metadata">

### Author: ![Malvan](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@Malvan](https://discourse.processing.org/u/Malvan)
#### Post date: [October 8, 2019, 10:51am UTC](https://discourse.processing.org/t/how-to-export-frames-from-processing/14494/3 "2019-10-08T10:51:50Z")

</div>

thanks a lot!

bye the way, is there any way to export these frames within a vector graphic format? I was wondering…