Support pixel density on p5.Image

[davepagurek]

Increasing Access

Currently, if you call .get() on a p5.Graphics, it creates a p5.Image out of the contents of the graphics object. However, if you are using a high dpi display (e.g. most phones now), the resulting image will look blurry compared to the original p5.Graphics because images currently have a hardcoded pixel density of 1.

Calling .get() on a p5.Graphics is useful for performance in WebGL: if you want to use it as a texture and know the p5.Graphics won't change, it will be faster to turn it into an image so p5 knows it doesn't need to send its data to the GPU every frame. This can make WebGL sketches run much more smoothly. Unfortunately, it is currently not easy to use this performance enhancement and also not lose visual quality (it's possible but requires accessing the undocumented internals of p5.Image). Allowing it would help make for a better viewing experience on phones.

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

Feature enhancement details

Implementing this change might be as small as letting us set the (currently hardcoded to 1) _pixelDensity property on a p5.Image:

p5.js/src/image/p5.Image.js

Line 147 in c27002c

this._pixelDensity = 1;

[limzykenneth]

I think I can picture the problem you are describing but a sample sketch would help a bit as well. I'm also thinking would there be any implication when it comes to user loaded images (eg. causing confusion for unexpected behaviour of images with pixel density matching or not matching canvas pixel density, etc)

[davepagurek]

Sure thing! For the point about blurriness, here's a quick example that uses a shader to make a black-and-white checkerboard pattern out of the pixels. If you call get() and then draw it next to the original, there's no more checkerboard, as the pixels have been averaged into a solid color: https://editor.p5js.org/davepagurek/sketches/a1iW4K-U_

For a less contrived example, here's what it looks like when you do the same side by side comparison with text instead of that shader. The effect is more noticeable when scaling an image up a bit: https://editor.p5js.org/davepagurek/sketches/bxgZZPIFP

For performance in WebGL, here's a test with a 1000x1000 graphic being used as a texture. Using the graphic, I get 10fps on my 2015 macbook, as it has to update the whole texture on the GPU every frame since we aren't sure if it's changed or not. If you toggle the two texture() lines to use the image as a texture instead, it goes up to 60fps because none of that work needs to happen each frame: https://editor.p5js.org/davepagurek/sketches/H3RoV53fE

I'm also thinking would there be any implication when it comes to user loaded images

I agree, and this can maybe be an opt-in feature for that reason?

[limzykenneth]

Just want to greenlight this for adding a method to p5.Image in order to change the underlying pixelDensity value from the default 1.