Problem PGraphics and export of images/video

Processing Beginners
1

I’m stuck and now turn to the forum because I can’t seem to find a solution online that works with that specific sketch and I assume as a beginner I’m not seeing something obvious or basic here.

I was playing with a sketch from the kinetic type tutorial by Tim Rodenbröker to learn.

Would love to export some variations as videos to experiment with them in other software.

Found a tutorial on using saveFrame and MovieMaker.

When adding saveFrame (“output/frame####.png”); to my draw and klick play I only get a gray screen, the animation isn’t running anymore. A single black PNG file is created with a tiny part of the animation in the top left.

Tried to use Hamoid’s VideoExport library and installed FFmpeg. Followed the instructions. When I inserted the code for videoExport at the end of draw section again the animation doesn’t run and no export happens. After the line is removed the animation runs again without error.

I hope this isn’t a too dumb question. Simply can’t seem to get to the bottom of it.
Would be super thankful for any input, thanks in advance!

Here is the sketch:

PGraphics pg;
PFont font;

void setup() {
  font = createFont("../ASSETS/RobotoMono-Regular.ttf", 600);
  size(1920, 1080, P2D);
  pg = createGraphics(1920, 1080, P2D);
}

void draw() {
  background(0);
 
  pg.beginDraw();
  pg.background(255);
  pg.fill(255,0,0);
  pg.textFont(font);
  pg.textSize(1500);
  pg.pushMatrix();
  pg.translate(width/4, height/2-300);
  pg.textAlign(CENTER, CENTER);
  pg.text("T", 0, 0);
  pg.popMatrix();
  pg.endDraw();

  int tilesX = 10;
  int tilesY = 76;

  int tileW = int(width/tilesX);
  int tileH = int(height/tilesY);

  for (int y = 0; y < tilesY; y++) {
    for (int x = 0; x < tilesX; x++) {

      // WAVE
      int wave = int(sin((frameCount + ( x*y )) * 0.01) * 300);

      // SOURCE
      int sx = x*tileW + wave;
      int sy = y*tileH;
      int sw = tileW;
      int sh = tileH;


      // DESTINATION
      int dx = x*tileW;
      int dy = y*tileH;
      int dw = tileW;
      int dh = tileH;
     
      copy(pg, sx, sy, sw, sh, dx, dy, dw, dh); 
 
    }
  }
}
2

Hello,

You have to write the code to do what you want. That is the fun part!

Use image() to display the PGgrapic image after you create it.
I used saveFrame() with a counter and was able to save 100 images.

I modified the size() and it is doing what you programmed:

image

References:

There are resources (tutorials, references and examples) here:
https://processing.org/

Also check out the menus with the Processing IDE for resources available locally on PC.

:)