# How to "attach" a box to another box
**URL:** https://discourse.processing.org/t/how-to-attach-a-box-to-another-box/8053
**Category:** Coding Questions
**Created:** [February 2, 2019, 9:13pm UTC](https://discourse.processing.org/t/how-to-attach-a-box-to-another-box/8053 "2019-02-02T21:13:54Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@Quilliam](https://discourse.processing.org/u/Quilliam)
#### Post date: [February 2, 2019, 9:13pm UTC](https://discourse.processing.org/t/how-to-attach-a-box-to-another-box/8053/1 "2019-02-02T21:13:54Z")
The best example I can think of for what I mean is coding something similar to a ferris wheel. Say we have:
```auto
function draw() {
background(20);
push();
rotateZ(frameCount * 0.01);
fill(255, 0, 0);
box(300, 5, 5);
pop();
push();
rotateZ(frameCount * -0.01);
fill(0, 0, 255);
sphere(20, 20);
pop();
}
```
Is there a way to “pin” the sphere to one end of the long “stick” box, so that its rotations etc all happen relative to the end of the box? Basically can you create groups of shapes where if I transform the parent, all children will stay in their same position relative to the parent shape, and can also have their own transformations.
Is this achievable?
EDIT: It seems this is done by nesting with push() and pop(), here’s the working code:
```auto
function draw() {
background(20);
fill(200);
push();
translate(0, 50, 0);
rotateY(-frameCount * .01);
push();
translate(75, 0, 0);
box(150, 5, 5);
push();
translate(75, 0, 0);
rotateX(frameCount * .01);
rotateY(frameCount * .01);
rotateZ(frameCount * .01);
box(30, 30);
pop();
pop();
pop();
}
```
---
### Author:  [@8BitRift](https://discourse.processing.org/u/8BitRift)
#### Post date: [February 3, 2019, 5:29am UTC](https://discourse.processing.org/t/how-to-attach-a-box-to-another-box/8053/2 "2019-02-03T05:29:24Z")
Yes, you accomplish this with the createShape(GROUP) method as referenced here:
[https://processing.org/reference/createShape\_.html](https://processing.org/reference/createShape_.html) the group example is the last example in the list if you want to apply transformations to the child objects you will have to recreate the shape.
---
### Author:  [@Quilliam](https://discourse.processing.org/u/Quilliam)
#### Post date: [February 3, 2019, 9:05pm UTC](https://discourse.processing.org/t/how-to-attach-a-box-to-another-box/8053/3 "2019-02-03T21:05:07Z")
Forgive me if I’m being slow here but the syntax and functions on that Processing page looks different to what I’ve been learning on [p5js.org](http://p5js.org) Reference page, am I missing something obvious here?
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [February 6, 2019, 12:23am UTC](https://discourse.processing.org/t/how-to-attach-a-box-to-another-box/8053/4 "2019-02-06T00:23:46Z")
It really depends on what you are trying to attach a box to another box _for_.
For a simple case, I recommend looking at the p5.js examples list: Arm
[https://p5js.org/examples/transform-arm.html](https://p5js.org/examples/transform-arm.html)
See also, Chain:
[https://p5js.org/examples/simulate-chain.html](https://p5js.org/examples/simulate-chain.html)
If you want to do something more complex with lots of boxes all connected by articulation points, then I suggest Box2D for p5.js. Shiffman has a _lot_ of intro Box2D tutorials on YouTube, and it is perfect for connecting boxes to other boxes via connection points (or springs, etc).
[https://www.google.com/search?q=p5.js+box2d](https://www.google.com/search?q=p5.js+box2d)