Exporting still images from animations

BrendanL · August 10, 2021, 6:38pm

I’ve used saveFrame("frames-######.png") to save the frames from my animations.

jafal · August 10, 2021, 6:50pm

hi

you can add boolean or mousePressed()… etc to your sketch

//https://processing.org/reference/saveFrame_.html
int x = 0;
void draw() {
  background(204);
  if (x < 100) {
    line(x, 0, x, 100);
    x = x + 1;
  } else {
    noLoop();
  }
  // Saves each frame as line-000001.png, line-000002.png, etc.
  saveFrame("line-######.png");
}

https://processing.org/reference/saveFrame_.html

https://processing.org/reference/mousePressed_.html

https://processing.org/reference/boolean.html

BrendanL · August 10, 2021, 7:35pm

Now that I have a bit more time, here’s some code I wrote: https://github.com/BrendanLeber/the-magic-machine/blob/master/BouncingSpots/BouncingSpots.pde

I save the frames from the animation and then process them with ffmpeg to create a video. You can see the finished product here: Algorithmic Art: Bouncing Balls - YouTube

humano · August 10, 2021, 9:57pm

Thank you so much! I added this code at the end and it worked:

if (mousePressed ==true) {
saveFrame();
}

Now I have two another questions about printing:

I would like to work with cmyk colors, but I think is not possible with Processing. Should I choose the cmyk colors that I need and then convert them to RGB colors to make sketches ready to be successfully printed?
To get a 300 dpi picture, should I multiply 4.166 times size and points to get a bigger picture or there is a better way?

Thanks a lot again!

jafal · August 10, 2021, 10:20pm

@humano read this

Best way to do this: tint(C, M, Y, K)?

https://funprogramming.org/49-Show-part-of-a-loaded-image-using-copy.html

jafal · August 10, 2021, 10:50pm

jafal · August 11, 2021, 12:02am

i am not sure what you mean

try strokeWeight(40);

float blueX;
float blueY;

float redX;
float redY;

void setup() {
  size(500, 500);
  
  blueX = width*.25;
  blueY = height/2;

  redX = width*.75;
  redY = height/2;

  background(255);
  
  frameRate(1000);
}

void draw() {

  stroke(0,0,255);
  strokeWeight(2);
  
  blueX += random(-2, 2);
  blueY += random(-2, 2);
    
  if(blueX < 0){
    blueX = width;
  }
  if(blueX > width){
    blueX = 0;
  }

  if(blueY < 0){
    blueY = height;
  }
  if(blueY > height){
    blueY = 0;
  }
  strokeWeight(6); 
  point(blueX, blueY);
  
  stroke(255,0,0);
  strokeWeight(2);
  
  redX += random(-2, 2);
  redY += random(-2, 2);
  
  if(redX < 0){
    redX = width;
  }
  if(redX > width){
    redX = 0;
  }
  
  if(redY < 0){
    redY = height;
  }
  if(redY > height){
    redY = 0;
  }  
  strokeWeight(40); 
  point(redX, redY);
  
}

InferNova · August 11, 2021, 12:33am

Hey There !

You have got a really cool animation going !
Like it was pointed out saveFrame() is the way to go.

Some great solutions have been pointed out how to utilize this well, but I would like to add my solution too !

As your looking to capture the animation while its running I recommend utilizing frameCount utilizing frameCount will just limit by how many frames you capture the animation playing. Be it TICK_TIME = 60 frames, TICK_TIME = 120 or TICK_TIME = 10 !

Here’s a more verbose example.

if (frameCount % TICK_TIME == 0) {
  saveFrame()
}

Anyway here’s the full code, that way you can see really at action what I am trying to explain.

Any further questions let us know !

Happy coding

float blueX;
float blueY;

float redX;
float redY;
int frames;
final int TICK = 10;

void setup() {
  size(500, 500);
  frames = 0;
  blueX = width*.25;
  blueY = height/2;

  redX = width*.75;
  redY = height/2;

  background(255);
}

void draw() {

  stroke(0, 0, 255);
  strokeWeight(2);

  blueX += random(-2, 2);
  blueY += random(-2, 2);

  if (blueX < 0) {
    blueX = width;
  }
  if (blueX > width) {
    blueX = 0;
  }

  if (blueY < 0) {
    blueY = height;
  }
  if (blueY > height) {
    blueY = 0;
  }

  point(blueX, blueY);

  stroke(255, 0, 0);
  strokeWeight(2);

  redX += random(-2, 2);
  redY += random(-2, 2);

  if (redX < 0) {
    redX = width;
  }
  if (redX > width) {
    redX = 0;
  }

  if (redY < 0) {
    redY = height;
  }
  if (redY > height) {
    redY = 0;
  }

  point(redX, redY);

  if (frameCount % TICK == 0) {
    saveFrame("animation-" + (frames++) + ".jpg");
  }
}

glv · August 11, 2021, 12:33am

This may be of interest:

https://processing.org/reference/libraries/pdf/index.html

:)

humano · August 11, 2021, 1:19am

Definitely, convert RGB colors to CMYK out of processing seems much easier than any other thing.

humano · August 11, 2021, 1:21am

Pdf seems really interesting, but how can I combine my code with pdf exporting?

if (mousePressed ==true) {
saveFrame();
}

glv · August 11, 2021, 10:36am

You have to read the documentation and do some testing to see if this meets your needs:

There is also an SVG library and there may be other contributed libraries.

:)

humano · August 11, 2021, 8:46pm

I have tried with this, but does not do anything

float blueX;
float blueY;

float redX;
float redY;

import processing.pdf.*;

void setup() {
  size(500, 500, PDF, "filename.pdf");
  
  blueX = width*.25;
  blueY = height/2;

  redX = width*.75;
  redY = height/2;

  background(255);
  
  frameRate(1000);
}

void draw() {

  stroke(0,0,255);
  strokeWeight(2);
  
  blueX += random(-2, 2);
  blueY += random(-2, 2);
    
  if(blueX < 0){
    blueX = width;
  }
  if(blueX > width){
    blueX = 0;
  }

  if(blueY < 0){
    blueY = height;
  }
  if(blueY > height){
    blueY = 0;
  }
  
  point(blueX, blueY);
  
  stroke(255,0,0);
  strokeWeight(2);
  
  redX += random(-2, 2);
  redY += random(-2, 2);
  
  if(redX < 0){
    redX = width;
  }
  if(redX > width){
    redX = 0;
  }
  
  if(redY < 0){
    redY = height;
  }
  if(redY > height){
    redY = 0;
  }  
  
  point(redX, redY);
  
 if (mousePressed == true) {
saveFrame();
} 

println("Finished."); 
exit();

  
}

glv · August 11, 2021, 9:19pm

I integrated your code with one of the PDF examples in the tutorial and it works:

Keep at it!

:)

humano · August 11, 2021, 10:47pm

I have tried instructions from tutorial in other similar sketch but it only creates a white empty pdf.

import processing.pdf.*;

boolean record; 

float x;
float y;

float r; 
float g;
float b;


void setup() {
  size(300, 300);
  x = width / 2;
  y = height / 2;
  
  r = random(255);
  g = random(255);
  b = random(255);
  
  background(50);
}

void draw() {
  
  if(record) {
  beginRecord(PDF, "frame-####.pdf");  
  }
    
  for (int i = 0; i < 1000; i++) {
    step();
  }
}

void step() {
  x += random(-1, 1);
  y += random(-1, 1);
  
  x = constrain(x, 0, width);
  y = constrain(y, 0, height);
  
  r += random(-1, 1);
  g += random(-1, 1);
  b += random(-1, 1);
  
  r = constrain(r, 0, 255);
  g = constrain(g, 0, 255);
  b = constrain(b, 0, 255);
  
  stroke(r, g, b);
  point(x, y);
  
  if (record) {
    endRecord();
  record = false;
  }
 


}

glv · August 12, 2021, 10:52am

The sketch you provided does not create a PDF at all.

boolean record; //The default is false

This is never true in your code.

Delete the PDFs before you run the sketch to see if it is working.

Do you want a single frame or many frames?

The examples in the tutorial work.
Scrutinize the examples and understand what they are doing.

Keep trying!

:)

humano · August 12, 2021, 4:00pm

Hi again!

I have got a pdf with this code, pressing letter “q” and stopping animation. Effectively, picture has 300 ppp when I open it in photoshop. I should be happy… but I am not because what I was looking for something to get many frames while the animation is going on, as I got with

if (mousePressed ==true) {
saveFrame();
}

Could you please help me? Here is my code:

import processing.pdf.*;


float x;
float y;

float r; 
float g;
float b;


void setup() {
  size(300, 300);
  x = width / 2;
  y = height / 2;
  
  r = random(255);
  g = random(255);
  b = random(255);
  
  background(50);
  
  beginRecord(PDF, "everything.pdf");
}

void draw() {
  
    for (int i = 0; i < 1000; i++) {
    step();
  }
}

void step() {
  x += random(-1, 1);
  y += random(-1, 1);
  
  x = constrain(x, 0, width);
  y = constrain(y, 0, height);
  
  r += random(-1, 1);
  g += random(-1, 1);
  b += random(-1, 1);
  
  r = constrain(r, 0, 255);
  g = constrain(g, 0, 255);
  b = constrain(b, 0, 255);
  
  stroke(r, g, b);
  point(x, y);
  
}  
  
  void keyPressed() {
    if (key == 'q') {
      endRecord();
      exit();
    }
    
  }

humano · August 12, 2021, 11:34pm

Now I have tried with this again and I have been able to save many pdf files pressing the mouse, but they are empty. I am really doing my best with turorials, but I don’t get the result. Could you please help me?

import processing.pdf.*;

boolean record;

float x;
float y;

float r; 
float g;
float b;


void setup() {
  size(300, 300);
  x = width / 2;
  y = height / 2;
  
  r = random(255);
  g = random(255);
  b = random(255);
  
  background(50);
  
  
}

void draw() {
  
    if (record) {
      beginRecord(PDF, "frame-####.pdf");
    }
  
    for (int i = 0; i < 1000; i++) {
    step();
  }
}

void step() {
  x += random(-1, 1);
  y += random(-1, 1);
  
  x = constrain(x, 0, width);
  y = constrain(y, 0, height);
  
  r += random(-1, 1);
  g += random(-1, 1);
  b += random(-1, 1);
  
  r = constrain(r, 0, 255);
  g = constrain(g, 0, 255);
  b = constrain(b, 0, 255);
  
  stroke(r, g, b);
  point(x, y);
  

  
  if (record) {
    endRecord();
    record = false;
  }
    
  }
  
  void mousePressed() {
    record = true;
  }

glv · August 13, 2021, 1:34am

You are ending the PDF record after a loop count of zero so you have only one loop displayed in the frame and that is what you record.

I added a print statement so you can see this.

Click here for code

import processing.pdf.*;

boolean record;

float x;
float y;

float r; 
float g;
float b;

int num;

void setup() {
  size(300, 300);
  x = width / 2;
  y = height / 2;

  r = random(255);
  g = random(255);
  b = random(255);

  background(50);
}

void draw() {

  if (record) {
    beginRecord(PDF, "frame-####.pdf");
  }

  for (int i = 0; i < 1000; i++) {
    num = i; //store i in num for later
    step();
  }
}

void step() {
  x += random(-1, 1);
  y += random(-1, 1);

  x = constrain(x, 0, width);
  y = constrain(y, 0, height);

  r += random(-1, 1);
  g += random(-1, 1);
  b += random(-1, 1);

  r = constrain(r, 0, 255);
  g = constrain(g, 0, 255);
  b = constrain(b, 0, 255);

  stroke(r, g, b);
  point(x, y);

  if (record) {
    endRecord();
    println(num); // Loop count where recording ends
    record = false;
  }
}

void mousePressed() {
  record = true;
}
``

Consider using a PGraphics buffer and saving that as a PDF or an image.

Reference:
https://processing.org/reference/PGraphics.html

Code from reference with some modifications:

PGraphics pg;

void setup() {
  size(200, 200);
  pg = createGraphics(40, 40);
  
  //Added this
  pg.beginDraw();
  pg.background(100);
  pg.endDraw();
}

void draw() {
  pg.beginDraw();
  //pg.background(100); //Commented this
  pg.stroke(255);
  pg.line(20, 20, mouseX, mouseY);
  pg.endDraw();
  image(pg, 9, 30); 
  image(pg, 51, 30);
}

:)

humano · August 13, 2021, 2:48pm

Print statment didn’t solve it, the exported pdf is still this small and empty file, like the file that I got frame-2397
Do you know why?