Need help with saveCanvas

p5.js Coding Questions
1

I’m trying to generate a series of 12 related images and save each of them. At first I had the 12 generated in a for loop, but that routinely only got me 10 images saved and I had seen something in the saveFrames documentation saying that would only save the first 15 frames, so I tried a workaround: took out the for loop and pasted 12 sequences of the code to generate the canvas and save it. That worked, yay, went to bed.

This morning, I made one change (the text string printed in the corner of the canvas) and ran it again and only got 11 images saved - skipping image number 9. Confused, I rearranged the order to generate image 9 first and ran the code again and got 10 images saved - skipping images 2 and 4. I’ve run it repeatedly without making any changes, and each time I get 10 or 11 of the 12 images, with no pattern I can figure out to which ones are the ones not saved.

I know doing the same thing over and over and expecting different results is the definition of crazy, so I’m feeling pretty crazy right now. Would love it if there were someone with more p5 experience who recognizes what I’m doing wrong. Thanks for reading, folks.

let backgroundx = [];
let backgroundy = [];let backgroundmag = [];
let starfield; let nameconvention;
let n = 75;let m = 0;
backgroundmag = [10,9,8,7,7,6,6,6,5,5,5,5,5,4,4,4,4,4,4,4,4,3,3,3,3,3,3,3,3,3,3,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];
let months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
let researcher = "JBarnesGreen";

function setup() {
  createCanvas(400, 400);
	starfield = createGraphics(400,400);
  noLoop();
}

function draw() {
  starfield.background(0);
	for (i = 0; i < n; i++) {
    backgroundx[i] = random(0,400);backgroundy[i] = random(0,400);
		starfield.ellipse(backgroundx[i],backgroundy[i],backgroundmag[i]);
  }
  startmonth = 9
    //round(random(0,11));
  nearmag=random(backgroundmag)+1;
  parallaxAmplitude=round(random(20,100));
  nearx=round(random(40,360));neary=round(random(40,360));
  // for (m = 0; m < 12; m++) {
  //   image(starfield,0,0);
  //		fill(255);text(months[m],50,390);text(researcher,300,390);
  //   ellipse(nearx+parallaxAmplitude*cos(PI/6*(m+startmonth)),neary,nearmag);
  //   nameconvention = 'parallax '.concat(researcher).concat(' ').concat(months[m]);;
  //   saveCanvas(nameconvention, 'png');
  // }  
  image(starfield,0,0);
  fill(255);text(months[0],50,390);text(researcher,300,390);
  ellipse(nearx+parallaxAmplitude*cos(PI/6*(0+startmonth)),neary,nearmag);
  nameconvention = 'parallax '.concat(researcher).concat(' ').concat(0);;
  saveCanvas(nameconvention, 'png');
  image(starfield,0,0);
  fill(255);text(months[1],50,390);text(researcher,300,390);
  ellipse(nearx+parallaxAmplitude*cos(PI/6*(1+startmonth)),neary,nearmag);
  nameconvention = 'parallax '.concat(researcher).concat(' ').concat(1);;
  saveCanvas(nameconvention, 'png');
  image(starfield,0,0);
  fill(255);text(months[2],50,390);text(researcher,300,390);
  ellipse(nearx+parallaxAmplitude*cos(PI/6*(2+startmonth)),neary,nearmag);
  nameconvention = 'parallax '.concat(researcher).concat(' ').concat(2);;
  saveCanvas(nameconvention, 'png');
  image(starfield,0,0);
  fill(255);text(months[3],50,390);text(researcher,300,390);
  ellipse(nearx+parallaxAmplitude*cos(PI/6*(3+startmonth)),neary,nearmag);
  nameconvention = 'parallax '.concat(researcher).concat(' ').concat(3);;
  saveCanvas(nameconvention, 'png');
  image(starfield,0,0);
  fill(255);text(months[4],50,390);text(researcher,300,390);
  ellipse(nearx+parallaxAmplitude*cos(PI/6*(4+startmonth)),neary,nearmag);
  nameconvention = 'parallax '.concat(researcher).concat(' ').concat(4);;
  saveCanvas(nameconvention, 'png');
  image(starfield,0,0);
  fill(255);text(months[5],50,390);text(researcher,300,390);
  ellipse(nearx+parallaxAmplitude*cos(PI/6*(5+startmonth)),neary,nearmag);
  nameconvention = 'parallax '.concat(researcher).concat(' ').concat(5);;
  saveCanvas(nameconvention, 'png');
  image(starfield,0,0);
  fill(255);text(months[6],50,390);text(researcher,300,390);
  ellipse(nearx+parallaxAmplitude*cos(PI/6*(6+startmonth)),neary,nearmag);
  nameconvention = 'parallax '.concat(researcher).concat(' ').concat(6);;
  saveCanvas(nameconvention, 'png');
  image(starfield,0,0);
  fill(255);text(months[7],50,390);text(researcher,300,390);
  ellipse(nearx+parallaxAmplitude*cos(PI/6*(7+startmonth)),neary,nearmag);
  nameconvention = 'parallax '.concat(researcher).concat(' ').concat(7);;
  saveCanvas(nameconvention, 'png');
  image(starfield,0,0);
  fill(255);text(months[8],50,390);text(researcher,300,390);
  ellipse(nearx+parallaxAmplitude*cos(PI/6*(8+startmonth)),neary,nearmag);
  nameconvention = 'parallax '.concat(researcher).concat(' ').concat(8);;
  saveCanvas(nameconvention, 'png');
  image(starfield,0,0);
  fill(255);text(months[9],50,390);text(researcher,300,390);
  ellipse(nearx+parallaxAmplitude*cos(PI/6*(9+startmonth)),neary,nearmag);
  nameconvention = 'parallax '.concat(researcher).concat(' ').concat(9);;
  saveCanvas(nameconvention, 'png');
  image(starfield,0,0);
  fill(255);text(months[10],50,390);text(researcher,300,390);
  ellipse(nearx+parallaxAmplitude*cos(PI/6*(10+startmonth)),neary,nearmag);
  nameconvention = 'parallax '.concat(researcher).concat(' ').concat(10);;
  saveCanvas(nameconvention, 'png');
  image(starfield,0,0);
  fill(255);text(months[11],50,390);text(researcher,300,390);
  ellipse(nearx+parallaxAmplitude*cos(PI/6*(11+startmonth)),neary,nearmag);
  nameconvention = 'parallax '.concat(researcher).concat(' ').concat(11);;
  saveCanvas(nameconvention, 'png');
}
1 Like
2

I’m not currently sure why, but there’s definitively a limitation in the p5js saveCanvas code that seems to clamp duration between 0 and 15 seconds, and fps between 0 and 22.

(I haven’t looked at this deeper than this, and my initial thoughts are maybe some performance reasons or maybe a bottleneck somewhere causing the implementor to put in these limitations? needs further research!)

however, the documentation does mention https://github.com/spite/ccapture.js/, so you could give that a try! :smiley:

1 Like
3

If you want to manually step through a series of draw states, saving each one, I would recommend that you actually either manually call redraw() each time or that you set a start and stop. You can let draw do its job, and track the frames you want to save with a global counter.

let frame=-1;
let frameStop = 12;

let backgroundx = [];
let backgroundy = [];
let backgroundmag = [];
let starfield;
let nameconvention;
let n = 75;
let m = 0;
backgroundmag = [10, 9, 8, 7, 7, 6, 6, 6, 5, 5, 5, 5, 5, 4, 4, 4, 4, 4, 4, 4, 4, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
let researcher = "JBarnesGreen";

function setup() {
  createCanvas(400, 400);
  starfield = createGraphics(400, 400);
  frameRate(0.3);
}

function draw() {
  starfield.background(0);
  for (i = 0; i < n; i++) {
    backgroundx[i] = random(0, 400);
    backgroundy[i] = random(0, 400);
    starfield.ellipse(backgroundx[i], backgroundy[i], backgroundmag[i]);
  }
  startmonth = 9;
  nearmag=random(backgroundmag)+1;
  parallaxAmplitude=round(random(20, 100));
  nearx=round(random(40, 360));
  neary=round(random(40, 360));
  image(starfield, 0, 0);
  if (frame >= 0 && frame < frameStop) {
    fill(255);
    text(months[frame], 50, 390);
    text(researcher, 300, 390);
    ellipse(nearx+parallaxAmplitude*cos(PI/6*(frame+startmonth)), neary, nearmag);
    nameconvention = 'parallax '.concat(researcher).concat(' ').concat(months[frame]);
    saveCanvas(nameconvention, 'png');
    frame = frame + 1;
  }
}

function keyReleased() {
  frame = 0;
}

Press any key to save the 12 frames. Press again to save again. Notice that I dropped the frameRate to 0.3 (~1 frame every 3 seconds) – otherwise I was losing save events because they were blocked by my browser. With that setting the save sequence takes about 30 seconds. YMMV.

Also, if you want to save LOTS of frames, fast, with a simple sketch like this – you might consider using Processing(Java) instead of p5.js. It has much better direct access to the filesystem then a browser-based sketch.

1 Like