Screen proportion for cellphones

Processing for Android
1

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

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:

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

2

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

3

please post code here using the

</> 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 /

/** 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);
}
4

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

5

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

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);
}
6

Hi @kelwinzxu,

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

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

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

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:

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 
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);
}
2 Likes
8

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

1 Like
9

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