How to Position Shape based on display size

Processing Coding Questions
1

I wish to position buttons by calculating the x and y coordinates based on the display size.
I did something like this:

My laptop screen pixel is 1600x900.

<
float x_button1 =displayWidth-displayWidth/6;
float y_button1 =displayHeight-displayHeight/10;

my manual calculation based on screen size.
the button will be at x=1333 and y=90
that is toward top right hand of the screen.

sadly, the button ends up been displayed on the top right hand instead of left.
and if i directly input x=1333 and y=90. i will get correct position.
Can someone help out?

2

  1. First figure out where the origin of the screen is located. With the orientation set to ‘Landscape’ the origin on my tablet is upper left corner.

  2. Try using Processing calls width and height. To get near the left upper corner you will have to code for x = width - a large number close to the width and y = a very small fraction of the height because you want it near the top. From what you posted the calculated x value looks too big to me. Both x and y need to be small numbers if the origin(0,0) is at the top left corner and that’s near where you want the button located.

3

Thanks Sir.
</
static int x=0;

void setup()
{
size(displayWidth, displayHeight);
frameRate(20);
}

void draw()
{
background(0);
ellipse(x++, 100, 5,5);
text(x, 200, 400);
}>

I used the above code, could confirm the screen origin (0,0) is top left. and the screen is 1600x900.
but still not able to get location precision.
I am adopting to use the display resolution incase a different screen will be use to run the application.

4
  1. I presume that you are running your code in Java mode.
  2. You should to be able to precisely locate objects where you want them. Maybe post the code and an image to show the result so that we can see the problem.
  3. The code that you posted above seems to work ok here in Java mode. I can see a white dot traversing a screen the width and height of my desktop monitor (1920x1080) and the x-coordinate being displayed below it.
5

Looking at the code I expect it to be on the bottom right.

Example to confirm:

size(displayWidth, displayHeight);
println(displayWidth, displayHeight);
println(displayWidth-displayWidth/6, displayHeight-displayHeight/10);
strokeWeight(10);
point (displayWidth-displayWidth/6, displayHeight-displayHeight/10);

This may be helpful:

void setup() 
  {
  size(500, 500);
  //size(displayWidth, displayHeight);
  //fullscreen();
  }

void draw() 
  {
  background(0);
  strokeWeight(3);
  stroke(255, 255, 0);
  point(mouseX, mouseY);
  println(mouseX, mouseY);
  }

:)

6

Hi glv.
thanks.

Your suggestion opened my understanding.
I tested your code.

I clearly understand width and height are measurement of the window not really the screen resolution.

1 Like