Graphical 3D vector subtraction and addition visualizer, and the monitor scale problem

Gallery
1

P5.js sketch representing graphical 3D vector subtraction and addition by rotating. around y-axis.

I am interested in learning about how far the video setting relates to the sketch canvas. (In my case I’ve set it to 125% on my W7 PC with 1920 * 1080 monitor, making items like windows, icons, etc, 125% bigger) The sketch has an 800*800 canvas size, and when played not fullscreen I have to set my browser zoom to 80% to visualize the buttons.
I appreciate any comments related to the issue. Thanks.

2 Likes
2

When I run the same code on the P5.js Web Editor, it gives the error “Script error. (: line 0)”, even with all Chrome extensions and accessibilities removed. But when I use a Chrome incognito window it works well. So I embedded the sketch on this forum and it runs! These things make me feel so uncomfortable using P5.js.

3

This is because when you use the accessibility features on in the editor settings, you get this kind of error.
Another remaining problem is the video (scale) setting.
I need to set this setting to 125% on my 1920 * 1080 monitor, otherwise, the font and other items are far too small. So I have to adjust the zoom level to 80% to view the sketch.
However at a normal 100% browser zoom and a 125% windows scale setting, the arrow points are not drawn. I’ve issued this on Github.

4

I’ve written a temporary workaround where an alert popup will give the current zoom and scale data and ask (just once at startup) to adjust the zoom level. (If necessary).
I did that for the OpenProcessing link above but not for the embedded Web Editor sketch above because it would be annoyingly applied to the whole page.
I’ve tried to use
document.defaultView.self === document.defaultView.top or window !== window.top
in an if block to avoid this code when an iframe is use, but without success.
So if anyone has an idea how to solve that, please comment.

let out = document.querySelector(".output");
window.addEventListener("resize", getSizes, false);
let zoom;
let start = true;


function setup() {
  createCanvas(400, 400);
  getSizes();
}

function draw() {
  background(220);
}

function getSizes() {
  let zoom = ((window.outerWidth - 10) / window.innerWidth) * 50;
  let scale = window.devicePixelRatio;
  if (scale != 1 && start == true) {
    alert('Browser zoom is ± ' + int(zoom) + ' and device scale = ' + scale.toFixed(2) + 
    '\nPlease consider to set your browser zoom to ± ' + int(zoom / scale) +
    ' and refresh \npage, to vizualize the arrow points and buttons.');
  }
  start = false;
}
5

Dunno if it can be of any help to fix your iframe glitch, but I guess it’s worth a try: :framed_picture:

1 Like
6

Thank you. Good stuff! I’ll play with this.