# Exporting still images from animations

**URL:** <https://discourse.processing.org/t/exporting-still-images-from-animations/31666>\
**Category:** Coding Questions\
**Created:** [August 10, 2021, 5:34pm UTC](https://discourse.processing.org/t/exporting-still-images-from-animations/31666 "2021-08-10T17:34:42Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [August 10, 2021, 5:34pm UTC](https://discourse.processing.org/t/exporting-still-images-from-animations/31666/1 "2021-08-10T17:34:42Z")

</div>

Hi there !

I want to export still images from this animation and I don’t know how to do it. This code make interesting images in different moments and I would like to frozen and export them to print them in HQ. Could you please help me? Thank you so much!

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

```

---

<div class="post-metadata">

**Author:** ![BrendanL](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/brendanl/32/14076_2.png) [@BrendanL](https://discourse.processing.org/u/BrendanL)\
**Post date:** [August 10, 2021, 6:38pm UTC](https://discourse.processing.org/t/exporting-still-images-from-animations/31666/2 "2021-08-10T18:38:28Z")

</div>

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

---

<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:** [August 10, 2021, 6:50pm UTC](https://discourse.processing.org/t/exporting-still-images-from-animations/31666/3 "2021-08-10T18:50:42Z")

</div>

hi

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

```auto
//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/saveFrame_.html)

[https://processing.org/reference/mousePressed\_.html](https://processing.org/reference/mousePressed_.html)

[https://processing.org/reference/boolean.html](https://processing.org/reference/boolean.html)

---

<div class="post-metadata">

**Author:** ![BrendanL](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/brendanl/32/14076_2.png) [@BrendanL](https://discourse.processing.org/u/BrendanL)\
**Post date:** [August 10, 2021, 7:35pm UTC](https://discourse.processing.org/t/exporting-still-images-from-animations/31666/4 "2021-08-10T19:35:32Z")

</div>

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](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: [https://www.youtube.com/watch?v=Rwttllcf86I](https://www.youtube.com/watch?v=Rwttllcf86I)

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [August 10, 2021, 9:57pm UTC](https://discourse.processing.org/t/exporting-still-images-from-animations/31666/5 "2021-08-10T21:57:13Z")

</div>

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

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

```

Now I have two another questions about printing:

1. 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?

2. 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!

---

<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:** [August 10, 2021, 10:20pm UTC](https://discourse.processing.org/t/exporting-still-images-from-animations/31666/6 "2021-08-10T22:20:54Z")

</div>

@humano read this

[Best way to do this: tint(C, M, Y, K)?](https://discourse.processing.org/t/best-way-to-do-this-tint-c-m-y-k/5317)

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

---

<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:** [August 10, 2021, 10:50pm UTC](https://discourse.processing.org/t/exporting-still-images-from-animations/31666/7 "2021-08-10T22:50:59Z")

</div>

> [@How to make different sizes for one renderer](https://discourse.processing.org/t/how-to-make-different-sizes-for-one-renderer/3323/5):
>
> well, I did not measure it, I really thaught it was. I mean, what is the advantage of using createGraphics() than a save("myImage.png") plus exit() combination ? here is my result [[image]](https://flic.kr/p/MdswqT) and here is the code PGraphics pg; PImage img ; color orange, yellow, green; float x, y, nb, s, alpha; void setup() { // A3 size (300 DPI) 3508 \* 4961 pg = createGraphics(980, 270); //pg = createGraphics(3508, 2480); pg.beginDraw(); pg.background(255); pg.imageMode(CENTER); img = loadImage("…

---

<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:** [August 11, 2021, 12:02am UTC](https://discourse.processing.org/t/exporting-still-images-from-animations/31666/8 "2021-08-11T00:02:32Z")

</div>

> [@humano](#):
>
> 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?

i am not sure what you mean

try strokeWeight(40);

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

```

> **[strokeWeight() / Reference](https://processing.org/reference/strokeWeight_.html)**
>
> Sets the width of the stroke used for lines, points, and the border around shapes. All widths are set in units of pixels. Using point() with strokeWeight(1) or smaller may draw nothing to …

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [August 11, 2021, 12:33am UTC](https://discourse.processing.org/t/exporting-still-images-from-animations/31666/9 "2021-08-11T00:33:40Z")

</div>

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.

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

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

```

---

<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:** [August 11, 2021, 12:33am UTC](https://discourse.processing.org/t/exporting-still-images-from-animations/31666/10 "2021-08-11T00:33:53Z")

</div>

> [@humano](#):
>
> 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?

This may be of interest:

[https://processing.org/reference/libraries/pdf/index.html](https://processing.org/reference/libraries/pdf/index.html)

`:)`

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [August 11, 2021, 1:19am UTC](https://discourse.processing.org/t/exporting-still-images-from-animations/31666/11 "2021-08-11T01:19:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [August 11, 2021, 1:21am UTC](https://discourse.processing.org/t/exporting-still-images-from-animations/31666/12 "2021-08-11T01:21:47Z")

</div>

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

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

```

---

<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:** [August 11, 2021, 10:36am UTC](https://discourse.processing.org/t/exporting-still-images-from-animations/31666/13 "2021-08-11T10:36:09Z")

</div>

> [@humano](#):
>
> Pdf seems really interesting, but how can I combine my code with pdf exporting?
> 
> copied!
> 
> ```auto
> if (mousePressed ==true) {
> saveFrame();
> }
> 
> ```

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

> **[Libraries](https://processing.org/reference/libraries/)**
>
> Extend Processing beyond graphics and images into audio, video, and communication with other devices.

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

`:)`

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [August 11, 2021, 8:46pm UTC](https://discourse.processing.org/t/exporting-still-images-from-animations/31666/14 "2021-08-11T20:46:30Z")

</div>

I have tried with this, but does not do anything

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

  
}
  
  

```

---

<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:** [August 11, 2021, 9:19pm UTC](https://discourse.processing.org/t/exporting-still-images-from-animations/31666/15 "2021-08-11T21:19:17Z")

</div>

> [@humano](#):
>
> I have tried with this, but does not do anything

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

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/38b7e3d8040a4a013b6d25419cd01de228039437.png)

Keep at it!

`:)`

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [August 11, 2021, 10:47pm UTC](https://discourse.processing.org/t/exporting-still-images-from-animations/31666/16 "2021-08-11T22:47:47Z")

</div>

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

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

}

```

---

<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:** [August 12, 2021, 10:52am UTC](https://discourse.processing.org/t/exporting-still-images-from-animations/31666/17 "2021-08-12T10:52:29Z")

</div>

> [@humano](#):
>
> I have tried instructions from tutorial in other similar sketch but it only creates a white empty pdf

_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!

`:)`

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [August 12, 2021, 4:00pm UTC](https://discourse.processing.org/t/exporting-still-images-from-animations/31666/18 "2021-08-12T16:00:50Z")

</div>

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

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

```

Could you please help me? Here is my code:

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

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [August 12, 2021, 11:34pm UTC](https://discourse.processing.org/t/exporting-still-images-from-animations/31666/20 "2021-08-12T23:34:35Z")

</div>

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?

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

```

---

<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:** [August 13, 2021, 1:34am UTC](https://discourse.processing.org/t/exporting-still-images-from-animations/31666/21 "2021-08-13T01:34:15Z")

</div>

> [@humano](#):
>
> I don’t get the result. Could you please help me?

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**
>
> ```auto
> 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](https://processing.org/reference/PGraphics.html)

Code from reference with some modifications:

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

```

`:)`

[Next page](https://discourse.processing.org/t/exporting-still-images-from-animations/31666.md?page=2)