saveCanvas file name issues

p5.js Coding Questions
1

So I’ve been searching through various forums trying to find a solution, and I’ve turned up empty. I’m wondering if someone here can help.

I’ve created a simple sketch that generates a series of random shapes as part of an intro to creative coding workshop I’m teaching. My goal is to print out some of the images and have the students write instructions on how to recreate them. The problem emerges when I call on the saveCanvas( ) function. I am able to automatically download an image file, but if I provide any kind of file name string the file ends up being labeled ‘filename.filename’. I’ve even tried providing an extension with my filename (like saveCanvas(‘filename.png’); ) and end up getting filename.png.filename.png.

Here’s my (relevant) code:

var randoC;
var geometry;
var iterate;
var paint;
var wall = [];
var num = 0;

function setup() {
	createCanvas(windowWidth, windowHeight);
	SolLeWitt();
}

//function keyTyped(){
function keyPressed(){
	if (keyCode == 32) {
		SolLeWitt();
	}
	if (keyCode == 83) {
	//if (keyCode == 115) {
		saveCanvas('sollewitt' + num, 'png');
  	num++;
	}
}

function SolLeWitt(){
	background(0);
	iterate = int(random(3)+3);
	for(var i = 0; i < iterate; i++){
		wall.push(new Instructions());
	}
}

As you can see. I’ve even gone so far as to experiment with using both keyPressed and keyTyped (in the event that there’s some kind of bounce happening and the saveCanvas function is being triggered twice), and I keep getting the same results no matter what key listener I’m using. As best I can tell I’m following all the documentation and not doing anything out of the ordinary. I just wish I understood why this was happening. I’m still able to use the image files that I’m saving…it’s just really tedious to have to manually rename them (and deal with the constant file extension warnings).

One last thing worth noting: if I don’t provide any file name strings and just use saveCanvas( ); the files automatically download as “untitled.png”.

Any help from the community would be greatly appreciated!

1 Like
2

In the examples mentioned on https://p5js.org/reference/#/p5/saveCanvas createCanvas() gets appointed to a variable, and thereafter the variable is mentioned in the saveCanvas(). Have you tried that in combination with giving it a unique name?

// this example hasn't been tested
let num = 0;

function setup() {
  let c = createCanvas(100, 100);
  background(255, 0, 0);
  saveCanvas(c, 'myCanvas' + num, 'jpg');
}
3

Following code works from me (tested in Processing IDE):

let c;
let num = 0;

function setup() {
  c = createCanvas(100, 100);
  background(255, 0, 0);
  saveCanvas(c, 'myCanvas' + num, 'jpg');
}

function draw() {
}

function mouseReleased() {
  num++;
  saveCanvas(c, 'myCanvas' + num, 'jpg');
}
1 Like
4

So I think I figured it out…mostly.

When I saw Tiemen’s note about testing on the Processing IDE it got me thinking about implementation. So I copied my code into OpenProcessing (which can be viewed here), and low and behold…it works!

Mostly.

The file name and number system are being implemented but for some reason every file is getting “(1)” added to the file name (so sollewitt1 (1).png, sollewitt2 (1).png, etc.). Not quite sure what that’s all about…but I’d say it’s 90% of what I’m looking for, which is progress.

So what’s the key difference between OpenProcessing and the code I’ve been generating? Come to find out the local version of p5.js that I’ve been using is version 0.6.0 from January of this year (womp womp). I’ve been using p5-manager to create new p5 project folders and it looks like the default p5.js version that get’s installed when I run the command is v.0.6.0.

Just to verify that this was the problem, I went ahead and replaced the p5.js file in my library folder with a fresh download from the p5.js website…and everything works.

Mostly.

I’m still dealing with the weird “filename+number (1).png” issue. Any thoughts or insights on that?

EDIT:

I’m an idiot. I just realized that I’ve been saving all of my attempts to the same folder…which includes a number that I renamed when I was still struggling to figure out the initial issue. So the system was appending all my file names to reflect that there were existing copies in the directory. I’ve removed the files and…presto! Problem solved. I’m marking this as solved (and going to bed).

1 Like