I need help with scalibility in full-screen sketches

Processing Project Guidance
1

I often program all my projects on many different computers, with different resolutions, leading me to my problem.
Because of the many different resolutions my sketches go through I have 3 options:

  1. code windowed applications
  2. code for ONE fullscreen resolution and deal with it when using different computers
  3. make a system for scaling the render of sketches down and up to match different resolutions

I have tried so many different methods for implementing #3 on my own but they have never worked, ending up overly complicated killing my inspiration for working on what I was doing.

I am really at a loss here about how to do this and need someone else to help point me in the direction of a way to achieve #3, Help.

2

Hi, I’ve had this problem as well. We use the same application on three different screens, so instead of having defined fixed shape sizes (in pixels). We now use percentages of the screen width and height to always get a ‘workable’ output.

Displaying my code with customized classes would be definitely overcomplicated, but I always use a percentage of height and width to display stuff like graphs, images, etc on screen and this seems to work really well

1 Like
3

I love this idea and have used it before, but struggled to implement it with collision logic.

Is there any chance you have coded something with collisions using this method I could take a look at?

4

Nope, unfortunately not

5

That’s unfortunate, thanks for the suggestion, and I will try implementing it again sometime.

6

Can you give an example of what kind of collisions you are struggling with making proportional?

Here is an example adapted from Thompson’s rect-rect demo: http://www.jeffreythompson.org/collision-detection/rect-rect.php

…but now with two rectangles defined using screen-relative properties.

/** Random screen size with scaled objects and collision detection
 *  2019-06-05 Processing 3.4
 *  https://discourse.processing.org/t/i-need-help-with-scalibility-in-full-screen-sketches/11791/2
 */
float[] r1;
float[] r2;

void settings(){
  // create a random screen size
  int w = (int)random(100,1000);
  int h = (int)random(100,1000);
  size(w, h);
}

void setup() {
  float mindim = min(width, height);
  float maxdim = max(width, height);
  // create a rect that is a 20th of the maximum screen dimension
  r1=new float[]{0, 0, 0.05*maxdim, 0.05*maxdim};
  // create a rect that is half the minimum screen dimension
  r2=new float[]{0, 0, 0.5*mindim, 0.5*mindim};
  // center the rect for the default rectMode -- although this is more elegant to express with rectMode(CENTER)
  r2[0]=(width-r2[2])/2.0;
  r2[1]=(height-r2[3])/2.0;
  noStroke();
}

void draw() {
  background(255);
  r1[0] = mouseX;
  r1[1] = mouseY;
  boolean hit = rectRect(r1, r2);
  if (hit) {
    fill(255,150,0);
  }
  else {
    fill(0,150,255);
  }
  rect(r2[0],r2[1],r2[2],r2[3]);
  // draw the other square
  fill(0, 150);
  rect(r1[0],r1[1],r1[2],r1[3]);
}


boolean rectRect(float[] r1, float[] r2) {
  if (r1[0] + r1[2] >= r2[0] && r1[0] <= r2[0] + r2[2] &&
      r1[1] + r1[3] >= r2[1] && r1[1] <= r2[1] + r2[3]) {
        return true;
  }
  return false;
}

This sketch is using vanilla rect/rect collision – the only proportional logic is at object creation, which in this case is in setup. Don’t change your collision logic at all – once your objects are generated with percentage-based coordinates, treat those coordinates like any other – they are just numbers.

1 Like