Get same X and Y positions relative to screen resolution

Hi,

So I need to get a x and y position relative to the screen resolution that I am working with.
For example: I need the y coord 760 in a resolution of 1920x1080 to be at the same spot in the resolution 1280x720
I dont know if this question has already been answered but any help is appreciated.

Edit: By this question I mean that I want the created object to be at the same spot and in the same size on a different screen size.
For example (Very basic):

rect(20, 20, 20, 20)

gives this result on a 1280x720 resolution

and

rect(30, 30, 30, 30)

gives the same result on a 1920x1080 resolution

Now I want a calculation that gives this result (so I dont want to change the coordinates and size manually for every resolution) so I can add this for whichever size/position I will need to add in my game.

1 Like

Hi Samyak, welcome!

Not entirely sure what the context is. Do you have a snippet of code you can post? From the above I’d say you’d want to normalise your values and multiply them by the width or height? Eg.:

// 20% margin:
var marginX = 0.2 * width; 
var marginY = 0.2 * height;

?

4 Likes

Hi, sorry for the late reply but I added an edit.

Yeah I already gave you the answer

1 Like

By this question I mean that I want the created object to be at the same spot and in the same size on a different screen size.

If I understand correctly, if you would take a ruler in the real world and the users were to measure the position and the size of the object on the screen they will all measure the same thing (in cm for exemple).

If that’s the case, you want to have a look to the displayDensity() function. And maybe also the pixelDensity() one.

Also a link to explain the pixel density.

1 Like

// if you want to adapt from a pixel based position designed
// at a certain resolution, you can compute the normalised 
// values from them by dividing them by that resolution. 
// multiplying them by a different resolution gives you the
// result you're after.

// based on say, a 1280x720 design
int pixelPosX = 20; 
int pixelPosY = 20;

void setup() {
  //size(1280, 720); // first design/code everything at this resolution
  size(1920, 1080); // change to a different resolution, and it will scale
  
  // scale values
  pixelPosX = int(pixelPosX / 1280.f * width);
  pixelPosY = int(pixelPosY / 720.f * height);
  
  println(pixelPosX+"x"+pixelPosY);
}

1 Like

It will work only for screens that share the same pixel density.

Let’s say you have 2 monitors with different PPI: 100 and 200.

And let’s say you want to display a square that is 2 inches wide in real life on screen. Then, you would need to draw a square 200 pixels wide for the 100 PPI monitor and 400 pixels wide for the 200 PPI monitor.

1 Like

I’m not sure I understand what you mean. The whole point of pixelDensity() is that you don’t have to worry about any of those things, and let Processing double the pixel values for you.

Ie.

// based on say, a 1280x720 design
int pixelPosX = 20; 
int pixelPosY = 20;

int pixelSizeX = 1240; 
int pixelSizeY = 680;

void setup() {
  //size(1280, 720); // first design/code everything at this resolution
  size(1920, 1080); // you can then change to a different resolution, and it will scale
  
  pixelDensity(2);
  
  // scale values
  pixelPosX = int(pixelPosX / 1280.f * width);
  pixelPosY = int(pixelPosY / 720.f * height);
  
  pixelSizeX = int(pixelSizeX / 1280.f * width);
  pixelSizeY = int(pixelSizeY / 720.f * height);
  
  println(pixelPosX+"x"+pixelPosY);
  
  background(255, 0, 0);
  rect(pixelPosX, pixelPosY, pixelSizeX, pixelSizeY);

}

works just fine.

1 Like

Although I did just notice that this was posted in p5js, so if things are different there, apologies…

1 Like

It’s just that in your previous code snipet there was no reference to pixelDensity().
I just wanted to stress it out so @QwertySamyak has all the pieces of the puzzle =)

1 Like

You want to express all your values in a single base size and aspect ratio, but automatically retarget different sizes/ratios.

Here is a more complex approach that gives you more control:

let basew = 100;
let baseh = 100;

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

function draw() {
  background(220);

  // rectangle is 25% of canvas, offset by 5% margin
  rect(w(10), h(10), w(25), h(25));

  // test sizes, aspect ratios
  if(frameCount%480==0) resizeCanvas(400, 400);
  if(frameCount%480==120) resizeCanvas(800, 800);
  if(frameCount%480==240) resizeCanvas(360, 240);
  if(frameCount%480==380) resizeCanvas(200, 400);
}

function w(num) {
  return num * (width/basew);
}

function h(num) {
  return num * (height/baseh);
}

The key thing is to define w() and h() wrappers, then wrap all your scaled values in them.

In my example, all width and height values are wrapped with w() and h() – using my base values – these are both 100, so can be interpreted as percentages while designing.

  // rectangle is 25% of canvas, offset by 5% margin
  rect(w(10), h(10), w(25), h(25));

However, if you are designing for a specific initial screen size, you could:

  1. make basew and baseh specific values (1920x1080) – design in source pixels
  2. make basew 100 and baseh some target aspect ratio such as (1080/1920) – design in percentages of a source aspect ratio.

In any case:

  1. express your design using numbers in your chosen base resolution,
  2. wrap them in your decorators w() and f(), which do the conversion.
  3. rescale at any time by setting your size or calling resizeCanvas at runtime to change your chosen target resolution.
1 Like

I should also mention the simple approach: just call scale(ratiox, ratiow) at the top of draw().

  • Advantages:
    • one call, no decorators, everything is scaled
  • Disadvantages:
    • everything is scaled – including line thickness! – so there is no fine control and things may appear distorted

Note that scale doesn’t actually resize the canvas – if you want to do that, you also need to set size() or call resizeCanvas() separately.

For some people, simlply calling scale(ratiox, ratiow) will be more than enough. However, for a project like yours, I suspect (?) it probably won’t work.

1 Like

Hi everyone, thanks for answering, I have seen a few replies that I will certainly try (and they will probably work) but meanwhile, if its possible then give a short calculation that will make 1 value fit on all resolutions because I have +/- 100 objects that I will need to integrate the resolution flexibility in. Something simple and quick would be nice because then I just need a calculation to add in the x/y/w/h.

For instance (this doesn’t work):
rect(displayWidth / 20, displayHeight / 30, displayWidth / 15, displayWidth / 15)

(Btw @jeremydouglass 's post looks like it may work according to the quick and simple way that I want and @rapatski your first reply also looks something like that calculation)

Hi @QwertySamyak – that calculation was in my first answer.

function w(num) {
  return num * (width/basew);
}
function h(num) {
  return num * (height/baseh);
}

That’s really it. An aspect ratio is just a ratio – a width over a width, or a height over a height. Multiply your number by a ratio to get the scaled result: num * (width/basew)

1 Like

Yes, that’s what I said your post (I mean reply) looks promising, I guess the only change I have to make is instead of having basew/baseh at a ratio of 1:1 it has to be something like 16:9.

Sorry buddy, but my second answer also has this literally done for you. I think it’s time for you to crack your knuckles and do some work.

1 Like