How to control saved image resolution? // get() and save()

p5.js Coding Questions
1

I’m trying to save a single image frame from a p5 webgl canvas to a variable. I used the second line of code below just to see the image for myself, as a reference. I noticed that the image it produces is exactly my defined canvas resolution, (which is pretty pixelated at 400x400px canvas size) however if I right click and save an image right from the same sketch in my browser, the resulting image is 1200x1200 pixels, and the look of that image resembles the running sketch in my browser more closely, as it’s is far smoother/less pixelated there than in the image saved from my code.

Why is that, and how can I have control over this? Should I just increase my canvas size and scale what’s happening inside proportionally, or is there a way to grab exactly the image data source that an image is saved from, when I right-click>save image?

	let img = get();
	img.save('img','png');
2

One reason can be high dpi settings of your display. What does pixelDensity() return? You can set it to 1 to make the resolution match the actual value you set
https://p5js.org/reference/#/p5/pixelDensity

1 Like
3

Thanks for the quick answer! You’re right, it returns 3. I will probably do exactly what you suggested, and set it to 1.

How should I interpret what’s going on behind the scenes? Is there a name for the image returned by get()? Is it a p5.image? I’m asking because i noticed saveCanvas() saves the higher resolution version and is supposedly a p5.Element, according to the reference. I can’t find a way to save that as a variable (and don’t necessarily need to anyway thanks to your clarification). still curious though.

4

I think what happens is that the canvas is actually 1200x1200. Because your screen is in high dpi mode, 3 physical pixels effectively count as 1 pixel thus 1200x1200 is needed to cover 400x400 area. Also you have to set them for each graphics if you create p5.graphics.

5

So there’s basically a “wrapper” around the renderer, scaling the output according to my display dpi. Interesting. I guess that’s a side effect of using a webgl context for the render.

Anyway, thanks for your help!

1 Like