How to export frames from processing

Processing Coding Questions
1

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(xfontSize+fontSize/2, yfontSize+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.>

2

Hello,

Put it at the end of draw() :

void draw() {

// Code removed

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

typography_0010

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

:slight_smile:

1 Like
3

thanks a lot!

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