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

**URL:** https://discourse.processing.org/t/solved-making-the-contents-of-a-frame-relative-to-its-size/3595
**Category:** Coding Questions
**Created:** [September 17, 2018, 9:44am UTC](https://discourse.processing.org/t/solved-making-the-contents-of-a-frame-relative-to-its-size/3595 "2018-09-17T09:44:58Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![delsey](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/delsey/32/11380_2.png) [@delsey](https://discourse.processing.org/u/delsey)
#### Post date: [September 17, 2018, 9:44am UTC](https://discourse.processing.org/t/solved-making-the-contents-of-a-frame-relative-to-its-size/3595/1 "2018-09-17T09:44:58Z")

</div>

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.

---

<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 17, 2018, 10:29am UTC](https://discourse.processing.org/t/solved-making-the-contents-of-a-frame-relative-to-its-size/3595/2 "2018-09-17T10:29:10Z")

</div>

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:

```auto
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](https://processing.org/reference/map_.html). 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:

```auto
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`.

---

<div class="post-metadata">

### Author: ![delsey](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/delsey/32/11380_2.png) [@delsey](https://discourse.processing.org/u/delsey)
#### Post date: [September 18, 2018, 8:21am UTC](https://discourse.processing.org/t/solved-making-the-contents-of-a-frame-relative-to-its-size/3595/3 "2018-09-18T08:21:03Z")

</div>

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

---

<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 18, 2018, 9:50am UTC](https://discourse.processing.org/t/solved-making-the-contents-of-a-frame-relative-to-its-size/3595/4 "2018-09-18T09:50:02Z")

</div>

> [@delsey](#):
>
> remove empty spaced between the content before starting to resize it?

What do you mean by remove empty space?

---

<div class="post-metadata">

### Author: ![delsey](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/delsey/32/11380_2.png) [@delsey](https://discourse.processing.org/u/delsey)
#### Post date: [September 21, 2018, 10:56am UTC](https://discourse.processing.org/t/solved-making-the-contents-of-a-frame-relative-to-its-size/3595/5 "2018-09-21T10:56:15Z")

</div>

Nevermind, I figured it out. Thank you.