# Get same X and Y positions relative to screen resolution
**URL:** https://discourse.processing.org/t/get-same-x-and-y-positions-relative-to-screen-resolution/32252
**Category:** Coding Questions
**Created:** [September 14, 2021, 1:27pm UTC](https://discourse.processing.org/t/get-same-x-and-y-positions-relative-to-screen-resolution/32252 "2021-09-14T13:27:28Z")
**Posts on this page:** 16
**Page:** 1
### Author:  [@QwertySamyak](https://discourse.processing.org/u/QwertySamyak)
#### Post date: [September 14, 2021, 1:27pm UTC](https://discourse.processing.org/t/get-same-x-and-y-positions-relative-to-screen-resolution/32252/1 "2021-09-14T13:27:28Z")
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.
---
### Author:  [@rapatski](https://discourse.processing.org/u/rapatski)
#### Post date: [September 14, 2021, 8:18pm UTC](https://discourse.processing.org/t/get-same-x-and-y-positions-relative-to-screen-resolution/32252/2 "2021-09-14T20:18:17Z")
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.:
```auto
// 20% margin:
let marginX = 0.2 * width;
let marginY = 0.2 * height;
```
?
---
### Author:  [@QwertySamyak](https://discourse.processing.org/u/QwertySamyak)
#### Post date: [September 17, 2021, 5:12pm UTC](https://discourse.processing.org/t/get-same-x-and-y-positions-relative-to-screen-resolution/32252/3 "2021-09-17T17:12:53Z")
Hi, sorry for the late reply but I added an edit.
---
### Author:  [@rapatski](https://discourse.processing.org/u/rapatski)
#### Post date: [September 17, 2021, 5:29pm UTC](https://discourse.processing.org/t/get-same-x-and-y-positions-relative-to-screen-resolution/32252/4 "2021-09-17T17:29:09Z")
Yeah I already gave you the answer.
---
### Author:  [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [September 18, 2021, 8:11am UTC](https://discourse.processing.org/t/get-same-x-and-y-positions-relative-to-screen-resolution/32252/5 "2021-09-18T08:11:45Z")
> 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()](https://p5js.org/reference/#/p5/displayDensity) function. And maybe also the [pixelDensity()](https://p5js.org/reference/#/p5/pixelDensity) one.
Also a [link](https://www.scientiamobile.com/what-is-pixel-density/) to explain the pixel density.
---
### Author:  [@rapatski](https://discourse.processing.org/u/rapatski)
#### Post date: [September 18, 2021, 9:11am UTC](https://discourse.processing.org/t/get-same-x-and-y-positions-relative-to-screen-resolution/32252/6 "2021-09-18T09:11:54Z")
```auto
// 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);
}
```
---
### Author:  [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [September 18, 2021, 9:46am UTC](https://discourse.processing.org/t/get-same-x-and-y-positions-relative-to-screen-resolution/32252/7 "2021-09-18T09:46:35Z")
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.
---
### Author:  [@rapatski](https://discourse.processing.org/u/rapatski)
#### Post date: [September 18, 2021, 10:14am UTC](https://discourse.processing.org/t/get-same-x-and-y-positions-relative-to-screen-resolution/32252/8 "2021-09-18T10:14:11Z")
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.
```auto
// 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.
---
### Author:  [@rapatski](https://discourse.processing.org/u/rapatski)
#### Post date: [September 18, 2021, 10:15am UTC](https://discourse.processing.org/t/get-same-x-and-y-positions-relative-to-screen-resolution/32252/9 "2021-09-18T10:15:55Z")
Although I did just notice that this was posted in p5js, so if things are different there, apologies…
---
### Author:  [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [September 18, 2021, 10:38am UTC](https://discourse.processing.org/t/get-same-x-and-y-positions-relative-to-screen-resolution/32252/10 "2021-09-18T10:38:04Z")
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 =)
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [September 18, 2021, 4:21pm UTC](https://discourse.processing.org/t/get-same-x-and-y-positions-relative-to-screen-resolution/32252/11 "2021-09-18T16:21:20Z")
> [@QwertySamyak](#):
>
> rect(20, 20, 20, 20)
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:
https://editor.p5js.org/jeremydouglass/sketches/1O-Ykziqh
```auto
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.
```auto
// 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.
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [September 18, 2021, 4:28pm UTC](https://discourse.processing.org/t/get-same-x-and-y-positions-relative-to-screen-resolution/32252/12 "2021-09-18T16:28:46Z")
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
https://editor.p5js.org/jeremydouglass/sketches/s3_A5sQdo
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.
---
### Author:  [@QwertySamyak](https://discourse.processing.org/u/QwertySamyak)
#### Post date: [September 18, 2021, 7:22pm UTC](https://discourse.processing.org/t/get-same-x-and-y-positions-relative-to-screen-resolution/32252/13 "2021-09-18T19:22:30Z")
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)
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [September 18, 2021, 7:27pm UTC](https://discourse.processing.org/t/get-same-x-and-y-positions-relative-to-screen-resolution/32252/14 "2021-09-18T19:27:56Z")
Hi @QwertySamyak – that calculation was in my first answer.
```auto
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)`
---
### Author:  [@QwertySamyak](https://discourse.processing.org/u/QwertySamyak)
#### Post date: [September 18, 2021, 8:04pm UTC](https://discourse.processing.org/t/get-same-x-and-y-positions-relative-to-screen-resolution/32252/15 "2021-09-18T20:04:11Z")
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.
---
### Author:  [@rapatski](https://discourse.processing.org/u/rapatski)
#### Post date: [September 18, 2021, 8:08pm UTC](https://discourse.processing.org/t/get-same-x-and-y-positions-relative-to-screen-resolution/32252/16 "2021-09-18T20:08:53Z")
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.