# \[SOLVED\] Fullscreen sketch scaling and preformance

**URL:** <https://discourse.processing.org/t/solved-fullscreen-sketch-scaling-and-preformance/3916>\
**Category:** Coding Questions\
**Created:** [September 27, 2018, 6:45pm UTC](https://discourse.processing.org/t/solved-fullscreen-sketch-scaling-and-preformance/3916 "2018-09-27T18:45:01Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![ScottGrogin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scottgrogin/32/1689_2.png) [@ScottGrogin](https://discourse.processing.org/u/ScottGrogin)\
**Post date:** [September 27, 2018, 6:45pm UTC](https://discourse.processing.org/t/solved-fullscreen-sketch-scaling-and-preformance/3916/1 "2018-09-27T18:45:01Z")

</div>

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.

```auto
PGraphics pg;

Fly fly;

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

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

```auto

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
  }
}
```

---

<div class="post-metadata">

**Author:** ![Sarah](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sarah/32/1675_2.png) [@Sarah](https://discourse.processing.org/u/Sarah)\
**Post date:** [September 28, 2018, 4:31am UTC](https://discourse.processing.org/t/solved-fullscreen-sketch-scaling-and-preformance/3916/2 "2018-09-28T04:31:59Z")

</div>

Check out:

> [@\[SOLVED\] Making the contents of a frame relative to its size](https://discourse.processing.org/t/solved-making-the-contents-of-a-frame-relative-to-its-size/3595/2):
>
> 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/…

---

<div class="post-metadata">

**Author:** ![ScottGrogin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scottgrogin/32/1689_2.png) [@ScottGrogin](https://discourse.processing.org/u/ScottGrogin)\
**Post date:** [September 28, 2018, 6:34am UTC](https://discourse.processing.org/t/solved-fullscreen-sketch-scaling-and-preformance/3916/3 "2018-09-28T06:34:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sarah](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sarah/32/1675_2.png) [@Sarah](https://discourse.processing.org/u/Sarah)\
**Post date:** [September 28, 2018, 11:15am UTC](https://discourse.processing.org/t/solved-fullscreen-sketch-scaling-and-preformance/3916/4 "2018-09-28T11:15:12Z")

</div>

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:

```auto
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](https://discourse.processing.org/t/solved-making-the-contents-of-a-frame-relative-to-its-size/3595/2)

---

<div class="post-metadata">

**Author:** ![ScottGrogin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scottgrogin/32/1689_2.png) [@ScottGrogin](https://discourse.processing.org/u/ScottGrogin)\
**Post date:** [September 28, 2018, 8:48pm UTC](https://discourse.processing.org/t/solved-fullscreen-sketch-scaling-and-preformance/3916/5 "2018-09-28T20:48:49Z")

</div>

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.

 ![fly.PNG](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/47b5818d344a3af089cb5e716689e9d70717a657.jpeg)

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

---

<div class="post-metadata">

**Author:** ![ScottGrogin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scottgrogin/32/1689_2.png) [@ScottGrogin](https://discourse.processing.org/u/ScottGrogin)\
**Post date:** [September 29, 2018, 12:52am UTC](https://discourse.processing.org/t/solved-fullscreen-sketch-scaling-and-preformance/3916/6 "2018-09-29T00:52:23Z")

</div>

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 😥

---

<div class="post-metadata">

**Author:** ![Sarah](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sarah/32/1675_2.png) [@Sarah](https://discourse.processing.org/u/Sarah)\
**Post date:** [September 29, 2018, 6:23am UTC](https://discourse.processing.org/t/solved-fullscreen-sketch-scaling-and-preformance/3916/7 "2018-09-29T06:23:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ScottGrogin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scottgrogin/32/1689_2.png) [@ScottGrogin](https://discourse.processing.org/u/ScottGrogin)\
**Post date:** [October 1, 2018, 4:40pm UTC](https://discourse.processing.org/t/solved-fullscreen-sketch-scaling-and-preformance/3916/8 "2018-10-01T16:40:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sarah](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sarah/32/1675_2.png) [@Sarah](https://discourse.processing.org/u/Sarah)\
**Post date:** [October 2, 2018, 8:11am UTC](https://discourse.processing.org/t/solved-fullscreen-sketch-scaling-and-preformance/3916/9 "2018-10-02T08:11:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ScottGrogin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scottgrogin/32/1689_2.png) [@ScottGrogin](https://discourse.processing.org/u/ScottGrogin)\
**Post date:** [October 2, 2018, 7:45pm UTC](https://discourse.processing.org/t/solved-fullscreen-sketch-scaling-and-preformance/3916/10 "2018-10-02T19:45:59Z")

</div>

Yes, that is exactly what I want to do.

---

<div class="post-metadata">

**Author:** ![Sarah](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sarah/32/1675_2.png) [@Sarah](https://discourse.processing.org/u/Sarah)\
**Post date:** [October 2, 2018, 10:20pm UTC](https://discourse.processing.org/t/solved-fullscreen-sketch-scaling-and-preformance/3916/11 "2018-10-02T22:20:52Z")

</div>

> [@Sarah](#):
>
> If you want the prior option, you can just put:
> 
> ```auto
> 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](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 🙂

---

<div class="post-metadata">

**Author:** ![ScottGrogin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scottgrogin/32/1689_2.png) [@ScottGrogin](https://discourse.processing.org/u/ScottGrogin)\
**Post date:** [October 2, 2018, 11:51pm UTC](https://discourse.processing.org/t/solved-fullscreen-sketch-scaling-and-preformance/3916/12 "2018-10-02T23:51:58Z")

</div>

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