I’ve used saveFrame("frames-######.png")
to save the frames from my animations.
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
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
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!
@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
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);
}
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");
}
}
Definitely, convert RGB colors to CMYK out of processing seems much easier than any other thing.
Pdf seems really interesting, but how can I combine my code with pdf exporting?
if (mousePressed ==true) {
saveFrame();
}
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.
:)
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();
}
I integrated your code with one of the PDF examples in the tutorial and it works:
Keep at it!
:)
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;
}
}
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!
:)
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();
}
}
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;
}
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);
}
:)
Print statment didn’t solve it, the exported pdf is still this small and empty file, like the file that I got
Do you know why?