[SOLVED] Fullscreen sketch scaling and preformance

[ScottGrogin]

I want to have my sketch resolution be the same across different screen sizes. I have tried using PGraphics with image() but the performance suffers and my sketches frame rate drops. Am I using PGraphics and image() incorrectly / is there a better way to do this? I’ll post my code below.

PGraphics pg;

Fly fly;


void setup() {
  noCursor();
  
  fullScreen();
  pg=createGraphics(900, 900);
  background(0);
  fly = new Fly(pg);
  
}

void draw() {
  fly.Draw();
}

class Fly {

  PGraphics pg;

  float speed;
  ArrayList<PVector> loc;
  ArrayList<Float> theta;
  Float s=0f;

  public Fly(PGraphics pg) {
    s+=1;
    this.pg = pg;
    theta = new ArrayList<Float>();
    speed =5;
    loc = new ArrayList<PVector>();
    for (int i=0; i<20; i++) {
      loc.add(new PVector(pg.width/2, pg.height/2));
      theta.add(new Float(0));
    }
  }

  public void Draw() {
    pg.beginDraw();
   
    pg.fill(255, 10);
 
    pg.rect(0, 0, pg.width, pg.height);
    pg.fill(0);
    for (int i=0; i<loc.size(); i++) {
      pg.ellipse(loc.get(i).x, loc.get(i).y, 5, 5);
      loc.set(i, loc.get(i).add(new PVector(cos(theta.get(i))*speed, sin(theta.get(i))*speed)));
      theta.set(i, theta.get(i)+random(-1, 1));
      if (loc.get(i).x > pg.width)loc.get(i).x=0;
      if (loc.get(i).y >pg.height)loc.get(i).y=0;
      if (loc.get(i).x<0)loc.get(i).x=pg.width;
      if (loc.get(i).y<0)loc.get(i).y=pg.height;
    }




    pg.endDraw();
    //image(pg, width/2 - pg.width/2, height/2 - pg.height/2);//Preformance does not suffer here
    image(pg, width/3-(height/5)/2, (height/5)/2, height-height/5, height-height/5);//Preformance suffers here with down scaling
  }
}

[Sarah]

Check out:

[SOLVED] Making the contents of a frame relative to its size

To make your canvas resizable, you can simply put surface.setResizable(true); in your setup. If you want to make it compatible to any size, the best way to do it would be to find everything that has an x, y, width or height value, and make it relative to width and height. Here’s an example of that: void setup() { size(200, 200); surface.setResizable(true); } void draw() { background(100, 100); float x = width/2; float y = height/2; float w = width/20; // Width float h = height/…

[ScottGrogin]

Hi Sara,

Thanks for the response. I know that I can do relative sizing and have a windowed sketch with size(), but I want the sketch to be fullscreen with a letter-boxed area where the drawing happens with a fixed resolution.

I plan on adding more sketches to this sketchbook to make a top down shooter like game. If I made the sizing relative people with larger monitors would have more room to move around and would have an easier time dodging bullet patterns than someone on a smaller screen. I also don’t want to force players to play the game in windowed mode with no scaled fullscreen option.

[Sarah]

Do you want the sketch to expand itself to fullscreen, but keep its original aspect ratio, or for it to simply keep its size with any screen?

If you want the prior option, you can just put:

if (width > height) pg=createGraphics(height, height);
if (width < height) pg=createGraphics(width, width);

Then use what I did on
https://discourse.processing.org/t/solved-making-the-contents-of-a-frame-relative-to-its-size/3595/2

[ScottGrogin]

I want it to keep its size, and have it be positioned in the center of the screen. In my sketch right now I have it so that the square where everything is being drawn will have borders on all sides.

I want it to behave exactly like the photo. What I have above works to do this, it is just very slow and laggy.

[ScottGrogin]

After looking around some more I figured out that all I had to do was change the renderer to P2D to get better preformance, I feel silly

[Sarah]

If the canvas is always going to be 900 x 900, and you just want to move it to the center of the screen, you could just draw everything in one corner, then use translate(); to move it to the center.

P2D only makes the sketch faster by putting the quality of the sketch down, but a sketch of that scale shouldn’t drop the fps down to 10-30.

[ScottGrogin]

Translating would work well for centering, but if someone has a screen height or width less than 900px the canvas will be out of bounds. I would want the canvas to appear smaller to fit on the screen but behave like it were 900x900. If a person’s screen is really massive the canvas should appear larger, but behave like a 900x900 size. I don’t mind if the image appears a bit stretched.

[Sarah]

So you want to scale the sketch to the screen size, while keeping the 1:1 (900:900) ratio?

[ScottGrogin]

Yes, that is exactly what I want to do.

[Sarah]

@Sarah

If you want the prior option, you can just put:

if (width > height) pg=createGraphics(height, height);
if (width < height) pg=createGraphics(width, width);

Then use what I did on
https://discourse.processing.org/t/solved-making-the-contents-of-a-frame-relative-to-its-size/3595/2

Just follow what I said above then

[ScottGrogin]

Ohhh. I get it now. I feel even more silly than before . Thanks for being so patient with me.