# Position relative to shape

**URL:** <https://discourse.processing.org/t/position-relative-to-shape/20926>\
**Category:** Coding Questions\
**Created:** [May 16, 2020, 12:56am UTC](https://discourse.processing.org/t/position-relative-to-shape/20926 "2020-05-16T00:56:06Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![casperleerink](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/casperleerink/32/9237_2.png) [@casperleerink](https://discourse.processing.org/u/casperleerink)\
**Post date:** [May 16, 2020, 12:56am UTC](https://discourse.processing.org/t/position-relative-to-shape/20926/1 "2020-05-16T00:56:06Z")

</div>

Hi!

Beginner question: is it possible to position elements relative to another shape. For example lets say I want to place 9 rectangles into another rectangle, it would be great if the size and position of the child rectangles could be derived from the parent rectangle. I know I can do this myself with variables, but it gets messy at some point.

Thanks!

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 16, 2020, 7:17am UTC](https://discourse.processing.org/t/position-relative-to-shape/20926/2 "2020-05-16T07:17:34Z")

</div>

Hello @casperleerink,

It sure is possible and in more than one way. 😊 You can dream up your own function that does what you want precisely. Or skim through [the p5.js Reference](https://p5js.org/reference/), keeping an eye out for anything that looks interesting.

With your question in mind, [translate()](https://p5js.org/reference/#/p5/translate) and [scale()](https://p5js.org/reference/#/p5/scale) stood out to me. Here’s an example of how they can work together:

```javascript
const PARENT_SQUARE_SIZE = 100;

function setup() {
  createCanvas(400, 400);
  
  background(220);

  rectMode(CENTER);
  translate(width / 2, height / 2);

  square(0, 0, PARENT_SQUARE_SIZE);
  scale(0.5);
  square(0, 0, PARENT_SQUARE_SIZE);
  
  noLoop();
}

```

 ![Two squares on grey background.](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/011b0268e967c5a72e4c62418b22d6265ed1ffd0.png)