Different screen sizes android

Processing for Android
1

Hello,
While writing a little program on android processing, I noticed that the rendering was not the same depending on the screen I was using. Here is the code:

void setup () {
background (0);
fullScreen();
}

void draw () {
noStroke();
fill(245);
ellipse(width / 2, height / 1.95, height / 4.8, height / 4.8);
fill(245);
ellipse(width / 1.421, height / 2.365, height / 18.5, height / 18.5);
ellipse(width / 3.71824f, height / 1.73, height / 18.5, height / 18.5);
}

Here are the different image:

image

Sorry for the mistakes I use the Google Translate

Can you help me troubleshoot screen compatibility?
Thanks you.

3 Likes
2

i would assume that this is because the proportion of the screen varies between devices. I would first calculate the proportion of the screen and then i would use that info to calculate the position (and size) of the ellipses.

1 Like
3

Sorry I did not understand, is that someone could rewrite the sketch so that the proportion is respect ?
Thank.

4

Check this: http://andrescolubri.net/androidbook/chapter-3/index.html

Go to the section: Preparing sketch for release

Kf

2 Likes
5

Thank you i’m going to look.

1 Like
6

I am a beginner in programming and I still can not understand how to do it.
if anyone has any other advice I am a taker.
Thank.

7

If you follow the link above, it says you need to use displayDensity():

void setup() {
  fullScreen();
  noStroke();
}

void draw() {
  background(0);
  float r = 50 * displayDensity;   //  <------ This ensures this value is independent on screen specifications
  int maxi = int(width/r);
  int maxj = int(height/r);
  for (int i = 0; i <= maxi; i++) {
    float x = map(i, 0, maxi, 0, width);
    for (int j = 0; j <= maxj; j++) {
      float y = map(j, 0, maxj, 0, height);
      ellipse(x, y, r, r);
    }
  }
}

I do not have much experience with this topic, but I believe this is the way to do it. Give it a try and tell us if it works for you, or if it doesn’t.

Kf

8

The example works but I can not adapt it to my initial code.
Thank.

9

I do not know too much, but I think the problem does not come from the dpi but rather a problem of compatibility between the screen ratio (16 / 9,18 / 9,4 / 3).

10

Help me please, I’m lost. :disappointed_relieved::disappointed_relieved::disappointed_relieved:

11

Can you verify this? You have two dimensions, along the width and the height of the display. But your ellipses are based on the height only. Shouldn’t it be:

ellipse(width / 3.71824f, height / 1.73, width/ 18.5, height / 18.5);

Can you provide the output of this line: println(nf(1.0/displayDensity,0,4), width, height, nf(width*1.0/height, 0, 2));

Kf

12

if I use the line " ellipse(width / 3.71824f, height / 1.73, width/ 18.5, height / 18.5); " I would need a square screen (width=height), otherwise the ellipse is not round.

Here is the result of the next line " println(nf(1.0/displayDensity,0,4), width, height, nf(width*1.0/height, 0, 2)); "
Consol : 0,3333 1080 1920 0,56

My phone is an Asus zenfone 3 laser ,DPI = 401, screen = 1080*1920.

Thank you.

13

I realized this screen compatibility problem when I replaced the line " fullScreen(); " (16/9) with " size(909,1920); " (19/9) :

Screenshot_20180819-131220
Screenshot_20180819-131220.jpg1080×1920 35.6 KB

14

Consol: 0,3333 1080 1920 0, 56

Thank you.

15

@kfrajer when do you think ?

16

Hi,

This is because you are placing the small circles relative to the width of the screen.
Here is a video demonstrating your code:
demonstration

If you want the small circles to always be the same distance from the center try addig constants to the center coordinate, something like this:

void setup () {
background (0);
size(1000,480);
}

void draw () {
noStroke();
fill(245);
ellipse(width / 2, height / 1.95, height / 4.8, height / 4.8);
fill(245);
ellipse((width / 2)+70, height / 2.365, height / 18.5, height / 18.5);
ellipse((width / 2)-70, height / 1.73, height / 18.5, height / 18.5);
}

2 Likes
17

Hello,
First of all i want to thank you for your post is very complete.

But unfortunately your example does not work on all screens in portrait mode, as this video shows:

Exemple
Exemple.gif1080×1920 1.24 MB

As you can see after a while the two little circles get into the big circle.

Thank you.

18

I only considered screens with different width. If the height of the screen changes the center circle also changes. Maybe you should make it independent from the height.

void setup () {
fullScreen();
}

void draw () {
background(0);
stroke(255);
fill(0);
rect(0,0,width,height);
noStroke();
fill(245);
ellipse(width / 2, height / 2, 100,100);
ellipse((width/2)+50, (height / 2)-50, 30, 30);
ellipse((width/2)-50, (height / 2)+50, 30, 30);
}

An other idea is to always use a fixed 16:9 rectangle inside of the screen.
If there is a 16:9 phone it will display fullscreen, but width a 18:9 smartphone there will be a black line on the bottom.

1 Like
19

If to define the size of the circle I use the width instead of the height, the problem is the same.
About your other idea you may be right for the 18/9 screen but it may be more embarrassing if the user uses a screen 4/3.

Thank you.

20

I think there must be a way to solve the problem,
the link that @kfrajer has to share is interesting but I have trouble understanding and google translate does not really help me.
Link : http://andrescolubri.net/androidbook/chapter-3/index.html

Thank you.