Text appears in different positions

p5.js Coding Questions
1

I had an earlier problem where buttons didn’t stay where I wanted on the canvas. I managed to resolve that problem. I should say resolved somewhat because the position is slightly different in Chrome compared to Mozilla.

var x;
var y;
function centerCanvas() {
  x = (windowWidth - width) / 2;
  y = (windowHeight - height) / 2;
  cnv.position(x, y);
  button1.position(x + 220, y + 535);
  button2.position(x + 706, y + 535);
}

function windowResized() {
  centerCanvas();
}

Now the problem is that using the same technique as above (positioning elements based on x,y values calculated from code above), text appears in different positions in different browsers, on different computers. Also, the text also appears in different positions depending on whether the page was loaded while the browser was maximized or not.

text("Select image:", x - 220, y); //x,y values calculated in the code above

How do I go about reliably positioning text and buttons in my sketch?

Thanks.

1 Like
2

Isn’t this literally what your code says – to position things differently based on x and y, and to base x and y on a fixed offset from the centers of the window / sketch? If you haven’t already resolved this issue, perhaps you could share a brief complete sketch (e.g. with editor.p5js.org) showing what is happening now, and explaining what you want to happen instead.

If you resize windows / canvases, text must always appear in “different positions”. The question is what you want to hold constant – fixed distance from the edge? percent? It looks like you are trying to do both, which may mean that you are doing neither.