Fragment shaders need width and height multiplied by pixelDensity()

p5.js Beginners
1

I’ve spent days trying to figure out why my rendering was off on my Android phone.
Then I realised I was fixing things for the Windows computer I’m writing on had 150% scaling.
Which means it was broken elsewhere. And it was just a coincidence that it worked on an iPad.

Fragment shaders need width and height multiplied by pixelDensity()

I thought I mention it just in case anyone else gets snared by scaling problems.
None of the examples do that, so they appear off centre for me.

2

So, to be nice to accessibility options, and other devices. You need:

var sc = pixelDensity();
shader.setUniform("resolution", [width*sc, height*sc]);

You can test it by right-clicking the desktop and selecting ‘Display Settings’.
Then setting Scale and Layout.

diisplaysettings
diisplaysettings1204×800 127 KB

(Windows is the most popular operating system in the world, not to mention Android is everywhere, including your TV!) All the shader demos that use resolution internally will also need to change.