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):
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.
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:
let marginX = 0.2 * width;
let marginY = 0.2 * height;
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 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);
}
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.
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);
}
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 =)
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:
make basew and baseh specific values (1920x1080) – design in source pixels
make basew 100 and baseh some target aspect ratio such as (1080/1920) – design in percentages of a source aspect ratio.
In any case:
express your design using numbers in your chosen base resolution,
wrap them in your decorators w() and f(), which do the conversion.
rescale at any time by setting your size or calling resizeCanvas at runtime to change your chosen target resolution.
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.
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.
(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)
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.
