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

Processing Coding Questions
1

Is there a way of making the contents in a frame relative to its size to make it completely resizable without losing functionality?

I already have an idea of how to it but a small tutorial would be quite nice.

1 Like
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/20; // Height
  rect(x-w/2, y-h/2, w, h);
}

Another (more efficent) way of doing it is to use the map function. The map functions takes a number, and puts it into a ratio that you want it to be in (See reference for more info). So if your canvas size is 200 x 200, you could use map like:

float widthchange = map(1,0,<defaultwidth>(200),0,width);
float heightchange = map(1,0,<defaultheight>(200),0,height);

Then multiply all x/width values with widthchange, and y/height values with heightchange.

4 Likes
3

And what about position values? Is there a smart way to remove empty spaced between the content before starting to resize it?

4

What do you mean by remove empty space?

1 Like
5

Nevermind, I figured it out. Thank you.

1 Like