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

Processing Coding Questions
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