# Screen proportion for cellphones

**URL:** <https://discourse.processing.org/t/screen-proportion-for-cellphones/14908>\
**Category:** Processing for Android\
**Created:** [October 23, 2019, 11:24pm UTC](https://discourse.processing.org/t/screen-proportion-for-cellphones/14908 "2019-10-23T23:24:44Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![kelwinzxu](https://avatars.discourse-cdn.com/v4/letter/k/a88e57/32.png) [@kelwinzxu](https://discourse.processing.org/u/kelwinzxu)\
**Post date:** [October 23, 2019, 11:24pm UTC](https://discourse.processing.org/t/screen-proportion-for-cellphones/14908/1 "2019-10-23T23:24:44Z")

</div>

Hello  
I’m new in Processing so I have a question for cellphones proportion…  
Imagine that I have the following code:

```auto
void setup(){
  size(900,1600);
}
void draw(){
  backgroud(0);
  ellipse(150,1200,300,300);
  ellipse(450,1200,300,300);
  ellipse(750,1200,300,300);
}

```

This program creates a box with a normal cellphone proportion 16:9, and it draws 3 circles at the bottom filling it without any space left to draw another circle.  
What if I want to switch the “size(900,1600);” with “fullScreen();” in a way that the circles change their size according to the cellphones sizes, adapting and filling up the space resizing the balls? Is there any way to change the size of the circles acoording to the cellphone size in an easy way? Because I created a program that calculate the proportion and it is really annoying to use because in every object that contains size, xy position, velocity, and more I need to apply this proportion code.  
Proportion code:

```auto
int cellYSize;
int cellXSize;
int xOffSize;
int xOS;
float allP;
void proportionStp(int Height){
  //general cellphones proportion 16:9
  cellYSize = Height;//changeable (height)
  cellXSize = (cellYSize * 16)/9;
  xOffSize = width - cellXSize;
  xOS = xOffSize / 2;
  allP = cellYSize/720.0; //This cellphone as 1
}

void showProportion(){
  noStroke();
  fill(0);
  strokeJoin(MITER);
  rect(0,0,xOS,cellYSize);
  rect(width - xOS,0,width,cellYSize);
  fill(50);
  rect(0,cellYSize,width,height);
}

```

-In everything I used allP to multiply and correct the size, you don’t need to understand this tiny part of the code, just to show you that I think that I’m complicating things

I think that there is a better way that I don’t know so here I am, asking for help  
Thank you and sorry if I wrote anything wrong

---

<div class="post-metadata">

**Author:** ![kelwinzxu](https://avatars.discourse-cdn.com/v4/letter/k/a88e57/32.png) [@kelwinzxu](https://discourse.processing.org/u/kelwinzxu)\
**Post date:** [October 23, 2019, 11:27pm UTC](https://discourse.processing.org/t/screen-proportion-for-cellphones/14908/2 "2019-10-23T23:27:25Z")

</div>

First time in the community too so I don’t know why some parts are bold?  
(Don’t know if bold is that word)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 24, 2019, 12:42am UTC](https://discourse.processing.org/t/screen-proportion-for-cellphones/14908/3 "2019-10-24T00:42:39Z")

</div>

please post code here using the

```auto
</> Preformatted text

```

button from the editor menu  
looks like

> ```  
> type or paste code here  
> ```

* * *

could you draw all into one image  
and resize that with one command  
example JAVA / not Android related /

```auto
/** Image: Load and Display */

PImage img, imgfit;
int showx0=300, showx, showy0=200, showy;
int zoom=20;
float dz = 0.05;

void setup() {
  size(300, 200);
  img = loadImage("moonwalk.jpg");
  resize();
  println("use key [+] [-] for zoom");
}

void draw() {
  background(200, 200, 0);
  image(imgfit, mouseX, mouseY);
}

void keyPressed() {
  if ( key == '+' ) zoom++;
  if ( key == '-' ) zoom--;
  resize();
}

void resize() {
  zoom = constrain(zoom,1,100);
  println("zoom: "+zoom);
  showx = int(showx0 * zoom * dz);
  showy = int(showy0 * zoom * dz);
  imgfit=img.copy();
  imgfit.resize(showx, showy);
}

```

---

<div class="post-metadata">

**Author:** ![kelwinzxu](https://avatars.discourse-cdn.com/v4/letter/k/a88e57/32.png) [@kelwinzxu](https://discourse.processing.org/u/kelwinzxu)\
**Post date:** [October 24, 2019, 1:18am UTC](https://discourse.processing.org/t/screen-proportion-for-cellphones/14908/4 "2019-10-24T01:18:46Z")

</div>

Ohh I understand, but I don’t know how to get an image on the screen and resize it to fit on a cellphone screen. Is there a way in processing?  
Sorry I’m just bad in programming

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 24, 2019, 2:46am UTC](https://discourse.processing.org/t/screen-proportion-for-cellphones/14908/5 "2019-10-24T02:46:53Z")

</div>

yes, but first make the graphics ( draw into it )  
and then resize it like a zoomed ( ratio correct ) image

```auto
PGraphics mydraw;
int showx0=300, showx, showy0=200, showy;
int zoom = 20;
float dz = 1.0/zoom;

void settings () {
  size(showx0,showy0);  
}

void setup() {
  make_graphics();
  resize(); // init

  println("use key [+] [-] for zoom");
}

void draw() {
  background(200,200,0);
  image(mydraw, 0,0,showx, showy);
}

void keyPressed() {
  if ( key == '+' ) zoom++;
  if ( key == '-' ) zoom--;
  resize();
}

void make_graphics() {
  mydraw = createGraphics(showx0,showy0);
  mydraw.beginDraw();
  mydraw.background(102);
  mydraw.stroke(255);
  int d = height/2;
  mydraw.ellipse(d/2,d/2,d,d);
  d = 40;
  mydraw.ellipse(d/2,height-d/2,d,d);
  mydraw.ellipse(width-d/2,height-d/2,d,d);
  mydraw.point(mydraw.width*0.5, mydraw.height*0.5);
  mydraw.endDraw();
}

void resize() {
  zoom = constrain(zoom,1,100);
  float zoomf = zoom * dz;
  println(" zoom "+nf(zoomf,0,1));
  showx = int(showx0 * zoomf);
  showy = int(showy0 * zoomf);
}

```

---

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [October 24, 2019, 7:30am UTC](https://discourse.processing.org/t/screen-proportion-for-cellphones/14908/6 "2019-10-24T07:30:52Z")

</div>

Hi @kelwinzxu,

Maybe I don’t understand your problem, but just doing:

```auto
void setup(){
  size(displayWidth,displayHeight);
}

```

you have your size of the same size of your phone, and referring with:

```auto
height and/or width

```

You can make your circles adapt to the screen size even if it is different or changes creating them referring to the width or height:

```auto
ellipse( width/3 - (width/3)/2 , height-width/3, width/3,width/3);
ellipse( width*2/3 - (width/3)/2 , height-width/3, width/3,width/3);
ellipse( width*3/3 - (width/3)/2 , height-width/3, width/3,width/3);

```

> **Putting all together**
>
> ```auto
> void setup(){
> size(displayWidth, displayHeight);
> }
> void draw(){
> background(0);
> fill(255);
> ellipse( width/3 - (width/3)/2 , height-width/3, width/3,width/3);
> ellipse( width*2/3 - (width/3)/2 , height-width/3, width/3,width/3);
> ellipse( width*3/3 - (width/3)/2 , height-width/3, width/3,width/3);
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![kelwinzxu](https://avatars.discourse-cdn.com/v4/letter/k/a88e57/32.png) [@kelwinzxu](https://discourse.processing.org/u/kelwinzxu)\
**Post date:** [October 24, 2019, 9:13am UTC](https://discourse.processing.org/t/screen-proportion-for-cellphones/14908/8 "2019-10-24T09:13:55Z")

</div>

But this key feature (+ / -) isn’t available on cellphones, is it?  
And I don’t if I understood your program (I haven’t got this deep yet) but is the `int showx, showy` the final size of the image?  
I just wanted a simpler program for the proportion, that the cellphone do the - resize automatically -, and when I publish the program to other cellphones, with a different screen size, It won’t affect on the program, because I’m programming another thing, bigger than 3 balls.  
Because if there isn’t any easier way, I think I will continue to program the way I started it

---

<div class="post-metadata">

**Author:** ![kelwinzxu](https://avatars.discourse-cdn.com/v4/letter/k/a88e57/32.png) [@kelwinzxu](https://discourse.processing.org/u/kelwinzxu)\
**Post date:** [October 24, 2019, 9:16am UTC](https://discourse.processing.org/t/screen-proportion-for-cellphones/14908/9 "2019-10-24T09:16:28Z")

</div>

Yes, this is the way I’m programming, but I think it’s a little bit annoying to do the math everytime I need to draw something new or calculations of physics and movement, because this 3 balls program is just an example, I have a bigger project I’m working on, like a game, but When I publish or share with my friends, I want to the program do adapt to my friends screen without affecting the gameplay because of the cellphone size difference