# How to roll a yoga mat - box geometry + rotations

**URL:** https://discourse.threejs.org/t/how-to-roll-a-yoga-mat-box-geometry-rotations/81543
**Category:** Questions
**Tags:** rotation, geometry
**Created:** [April 23, 2025, 1:03pm UTC](https://discourse.threejs.org/t/how-to-roll-a-yoga-mat-box-geometry-rotations/81543 "2025-04-23T13:03:53Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![pxpx](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pxpx/32/59135_2.png) [@pxpx](https://discourse.threejs.org/u/pxpx)
#### Post date: [April 23, 2025, 1:03pm UTC](https://discourse.threejs.org/t/how-to-roll-a-yoga-mat-box-geometry-rotations/81543/1 "2025-04-23T13:03:53Z")

</div>

Hello community,  
since few days I can’t wrap my head around a problem - I want to roll a yoga mat (box geometry).  
I tried many vertex deformations and still hopeless.  
(I know some time ago, Yuri Artiukh(akella) made a demo with rolling a plane geometry in an archimedean spiral - though his solution didn’t work here).

A more general case would be - how to roll a deformed box along any curve..  
But let’s say my problem for now would be just to roll a yoga mat.

I appreciate any advice how to get to the solution. Hope the sketches are clear enough.  
Thanks!

 ![PXL_20250423_121722653.MP~2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/c/3c286ae08e526e36cb2486bb317761182ab8fb09.jpeg)

---

<div class="post-metadata">

### Author: ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)
#### Post date: [April 23, 2025, 7:30pm UTC](https://discourse.threejs.org/t/how-to-roll-a-yoga-mat-box-geometry-rotations/81543/2 "2025-04-23T19:30:37Z")

</div>

I’m very hesitant whether to post the next, or not to post it, because it might look very tempting to you, but at the same time it is far from your approach, because:

- it does not use a single box geometry
- it does not use a shader for calculation of rolling
- it does not use [Archimedean spiral](https://en.wikipedia.org/wiki/Archimedean_spiral), but [Pythagorean spiral](https://en.wikipedia.org/wiki/Spiral_of_Theodorus)

I had fun making this demo.

[https://codepen.io/boytchev/full/yyygJbz](https://codepen.io/boytchev/full/yyygJbz)

[![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/f/0f470420164662c03df1f68f784410435cbdab4f.png)](https://codepen.io/boytchev/full/yyygJbz)

---

<div class="post-metadata">

### Author: ![jrlazz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jrlazz/32/64383_2.png) [@jrlazz](https://discourse.threejs.org/u/jrlazz)
#### Post date: [April 24, 2025, 2:45am UTC](https://discourse.threejs.org/t/how-to-roll-a-yoga-mat-box-geometry-rotations/81543/3 "2025-04-24T02:45:27Z")

</div>

Hi @PavelBoytchev …  
I think it’s a work of pure genius! 😉

---

<div class="post-metadata">

### Author: ![pxpx](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pxpx/32/59135_2.png) [@pxpx](https://discourse.threejs.org/u/pxpx)
#### Post date: [April 24, 2025, 1:14pm UTC](https://discourse.threejs.org/t/how-to-roll-a-yoga-mat-box-geometry-rotations/81543/4 "2025-04-24T13:14:08Z")

</div>

@PavelBoytchev I am beyond speechless. Wow. Didn’t expect it 🙂  
So basically the yoga mat is built of multiple boxes, which are rotated along z axis.  
The Math.atan2() is there to calculate the rolling angle..

Gonna brush up now my knowledge about Pythagorean spiral.

Thank you so much!

---

<div class="post-metadata">

### Author: ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)
#### Post date: [April 24, 2025, 2:44pm UTC](https://discourse.threejs.org/t/how-to-roll-a-yoga-mat-box-geometry-rotations/81543/5 "2025-04-24T14:44:20Z")

</div>

Yes, the general formula for the angle between two boxes in rolled state is:

\alpha = k \arctan \frac{1}{\sqrt{n}}

where k defines how tight the spiral is, and n is the box. In the demo k=2.35, but you may try with k=1 to see the difference.

For large n the Pythagorean spiral approximates the Archimedean spiral and they become visually the same. I use Pythagorean, because I found it easier to calculate angles.

Also, there is no need to have multiple boxes, it could be just one box with many subdivisions along one of the edges. I used boxes to save myself from calculating a few more (co)sines and digging into `position`/`normal` attributes.
