Monitor scale problem.

[EmmanuelPil]

• screen scale problem.

Hi.
I'm using a Windows 7 Ultimate 64bit PC with the latest Chrome version.
It's quite common to use at least a 125 % 'scale' screen setting for medium to larger screen resolutions.
And they can be changed rapidly to test. But if you leave the normal 'browser' zoom at 100% the sketches are not playing properly.
For example in this sketch, the arrows points are not drawn when the browser zoom setting is not set to 80%. Only lines.
I have added a temporary workaround, asking once to adjust the zoom in an alert.
Another sketch also doesn't play or well when zoom isn't correct

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[limzykenneth]

Hi @EmmanuelPil, can you take some screenshots of the problem demonstrating expected and actual behaviour? It is a bit hard for me to diagnose what the problem is from just reading your description and looking at sketches without knowing what they should look like in the first place. Thanks!

[EmmanuelPil]

Thank you for looking into this. My windows scale (or sometimes called video) setting = 125 % on my 1920 * 1080 monitor,
otherwise, the font and other items are far too small.
When I leave the normal zoom at 100% in the Chrome browser, the arrow points of the vector-lines in the sketch linked above, are not drawn. When I set the zoom to 80%, they are. In the second sketch, with no zoom adjustment, the fill flood does not work properly.

Thank you.

[limzykenneth]

I don't have a Windows machine to test and also not too familiar with WebGL. I'll refer to @stalgiag to have a look at this. Would be helpful if you can create a bare minimum example then we can get testing the problem quickly.

[EmmanuelPil]

Of course. I should have done that in the beginning.
I have tracked down the problem.
It is the strokeWeight() function that in a bigger scale percentage amplifies incorrectly.
Testing this code with different browser zoom settings >= 125% monitor scale will make this obvious.

function setup() {
  createCanvas(40, 40, WEBGL);
  background(0);
  stroke(255);
  strokeWeight(30);
  point(0, 0, 0);
}

[stalgiag]

@EmmanuelPil thanks for the simple example. I tested extensively at zoom settings ranging from 30% to 300% and could not see any issues on my Mac with latest Chrome or Firefox. I will test again on Windows when I get a chance.

[EmmanuelPil]

Thanks. Just to clarify, It's not just the browser zoom. It only happens when using the windows scale setting above 100%.
See this link. https://www.windowscentral.com/how-set-custom-display-scaling-setting-windows-10

[ashwalk33r]

I can confirm problems with that.

When using Windows Text and UI scale on 125% (those are 2 separate settings) my canvas is 2 times bigger and pixelDensity is 2.
When I lower it to 100% canvas has exact measures and pixelDensity is 1.
I use this feature as my eyesight is impaired and cant really use computer without it.

But why p5js bugs on this?

[stalgiag]

Hi @EmmanuelPil I got a chance to look at this with Windows. I adjusted the windows scale setting and up and down. I didn't notice a change in the example code you posted. Perhaps it is subtle and I am missing it? Can you post a picture of what renders on your computer with that sketch when your scale is at 125%? Thanks!

[EmmanuelPil]

Normal 100% scale 80% zoom chrome browser

Normal 100% scale 100% zoom chrome browser

125% window scale 80% zoom chrome browser

125% window scale 100% zoom chrome browser
As you can see the last picture has a stroke point with different behavier.
code used:

function setup() {
  createCanvas(100, 100, WEBGL);
  background(0);
  stroke(255);
  strokeWeight(80);
  point(0, 0, 0);
}

Edit: Of course re-run after each different zoom setting.

[stalgiag]

Thank you @EmmanuelPil ! This is really helpful. Sorry it took me so long to see. Sometimes the more obvious something is the harder it is to see.

I looked into it and the reason this is happening is that the RendererGL.pointSize property is not modified by pixelDensity. It seems a bit odd to me that we are tracking two properties for strokeWeightone for points and one for strokes. I faintly recall this decision being made so that there could be different default weights for strokes and points in GL because the 1pixel points are hard for people to see.

Anyways! This can be fixed by adjusting the value of this.pointSize when passing to the shader. One could send this.pointSize * this._pInst._pixelDensity instead. All of this happens in p5.RendererGL.prototype._setPointUniforms.

This could be a good issue for someone interested in trying out WebGL contributions.