<p>I progammed a simple cloth animation.  Initially I tried to implement Hooke's law, but it wasn't numerically stable, presumably because I used explicit Euler.  Anyway, I came up with <a href="https://codepen.io/fweth/full/wvedBPz" rel="nofollow noreferrer">something</a> (WebGL2 based, won't work in Safari unfortunately) I quite like but don't understand the math at all.</p>
<p>Every point has a position <span class="math-container">$p$</span> and velocity <span class="math-container">$v$</span>.  The position is given relative to the initial position, where the initial position of point <span class="math-container">$(i,j)$</span> can be thought as <span class="math-container">$(i,j,0,0)$</span> (I rendered the cloth in 4 dimensions to make it more interesting, but that should not make a huge difference).  There is a linear gravity term <span class="math-container">$g_v$</span> on the velocity which pulls the point back to its original position and also a friction term <span class="math-container">$f_v$</span> which slows down the velocity, so we have <span class="math-container">$v_{t+1}=f_vv_t+g_vp_t+d$</span> where <span class="math-container">$d$</span> is some external disturbance which is triggered by mouse clicks.  But the position doesn't follow just <span class="math-container">$p_{t+1}=p_t+v_{t+1}$</span>, as I added some term to implement clothiness, so the points tend to the center of the four surrounding points.  What I came up with is <span class="math-container">$$p_{t+1}=g_pp_t+v_{t+1}+\frac{c}{|c|^{2/3}+1}$$</span> where the center <span class="math-container">$c$</span> is computed as the sum of the positions of the four neighbouring points, <span class="math-container">$g_p&lt;1$</span> is some kind of another gravity term and the <span class="math-container">$2/3$</span> basically just make the last term approximates <span class="math-container">$c$</span> for small <span class="math-container">$|c|$</span> but grows slower for larger values of <span class="math-container">$|c|$</span>.</p>
<p>I played around with this and tried to get rid of some terms but couldn't really find a satisfying way to do so.  On the other hand, I just can't wrap my head around what I have actually done here.  The velocity is not the true velocity anymore, as it doesn't reflect the change in position.  Yet the new position feeds back in the velocity via the <span class="math-container">$g_v$</span> term.  It's also weird that if you click the cloth once, it more or less just changes position, but on every further click it behaves much more like a cloth.</p>
<p>Can someone tell me if this math does make any sense or if there is some underlying principle for this dynamics which I accidentally approximated?</p>

CC BY-SA 4.0
2021-09-14T14:35:00.780Z
How did you include rest length to the springs? Also it would be really useful to include a shear resistance term.
joojaa
CC BY-SA 4.0
2021-09-14T15:02:12.553Z
The weird thing is, I didn't include rest length at all!  The actual position (which the points don't know, each live in its own coordinate system) only comes to play at the external disturbance factor and the actual rendering.  Will research shear resistance, thanks!
fweth
CC BY-SA 4.0
2021-09-14T16:38:57.700Z
i have a similar experience from trying to make a more drooping but deterministic flag particle animation. Where my fumctions were clearly wrong from intended, because of a typo,  but looked really good. One conclusion is that what human brain thinks of as clothiness is not nesseserily very accurate so a lot of things with certain kinds of features is interpretted by the brain as being cloth.
joojaa
CC BY-SA 4.0
2021-09-14T18:05:06.360Z
Totally agree!  I also don't want to be physically correct, but just understand what is goinng on.  Especially the behaviour on the first click, i.e. the first distortion, seems particularly weird to me.  My intuition is that my model houses a much simpler model, which is also physically incorrect, but has fewer parameters and is easier to understand and manipulate.
fweth
CC BY-SA 4.0
2021-09-15T04:09:24.810Z
This might be a better question for physics stackexchange.
Nathan Reed
CC BY-SA 4.0
2021-09-27T04:19:18.280Z
From the aspect of usual “forward” way to do simulation, we have a model to formulate (spring) forces and constraints, then apply Gauss-Seidel to iteratively solve/relax constraints. Specially for each GS iteration we relax the constraints along gradients of constraints. Here it seems you are “reversing” the approach, by having an iteration pattern first, and then want to see what dynamics you are simulating. I guess maybe treating terms in your iteration as “constraint gradient” and integrating them can reveal the “constraint” you are simulating.
TheBusyTypist
<physically-based><webgl>
What's The Math Behind This Cloth Animation?
fweth
# What's The Math Behind This Cloth Animation?

(Asked by: username_0 on 2021-09-14)

I progammed a simple cloth animation. Initially I tried to implement Hooke's law, but it wasn't numerically stable, presumably because I used explicit Euler. Anyway, I came up with [something](https://codepen.io/username_0/full/wvedBPz) (WebGL2 based, won't work in Safari unfortunately) I quite like but don't understand the math at all.

Every point has a position $p$ and velocity $v$. The position is given relative to the initial position, where the initial position of point $(i,j)$ can be thought as $(i,j,0,0)$ (I rendered the cloth in 4 dimensions to make it more interesting, but that should not make a huge difference). There is a linear gravity term $g\_v$ on the velocity which pulls the point back to its original position and also a friction term $f\_v$ which slows down the velocity, so we have $v\_{t+1}=f\_vv\_t+g\_vp\_t+d$ where $d$ is some external disturbance which is triggered by mouse clicks. But the position doesn't follow just $p\_{t+1}=p\_t+v\_{t+1}$, as I added some term to implement clothiness, so the points tend to the center of the four surrounding points. What I came up with is $$p\_{t+1}=g\_pp\_t+v\_{t+1}+\frac{c}{|c|^{2/3}+1}$$ where the center $c$ is computed as the sum of the positions of the four neighbouring points, $g\_p<1$ is some kind of another gravity term and the $2/3$ basically just make the last term approximates $c$ for small $|c|$ but grows slower for larger values of $|c|$.

I played around with this and tried to get rid of some terms but couldn't really find a satisfying way to do so. On the other hand, I just can't wrap my head around what I have actually done here. The velocity is not the true velocity anymore, as it doesn't reflect the change in position. Yet the new position feeds back in the velocity via the $g\_v$ term. It's also weird that if you click the cloth once, it more or less just changes position, but on every further click it behaves much more like a cloth.

Can someone tell me if this math does make any sense or if there is some underlying principle for this dynamics which I accidentally approximated?

**Tags:** physically-based, webgl

> **Comments:**
> **username_1**: How did you include rest length to the springs? Also it would be really useful to include a shear resistance term.  
> **username_0**: The weird thing is, I didn't include rest length at all!  The actual position (which the points don't know, each live in its own coordinate system) only comes to play at the external disturbance factor and the actual rendering.  Will research shear resistance, thanks!  
> **username_1**: i have a similar experience from trying to make a more drooping but deterministic flag particle animation. Where my fumctions were clearly wrong from intended, because of a typo,  but looked really good. One conclusion is that what human brain thinks of as clothiness is not nesseserily very accurate so a lot of things with certain kinds of features is interpretted by the brain as being cloth.  
> **username_0**: Totally agree!  I also don't want to be physically correct, but just understand what is goinng on.  Especially the behaviour on the first click, i.e. the first distortion, seems particularly weird to me.  My intuition is that my model houses a much simpler model, which is also physically incorrect, but has fewer parameters and is easier to understand and manipulate.  
> **username_2**: This might be a better question for physics stackexchange.  
> **username_3**: From the aspect of usual “forward” way to do simulation, we have a model to formulate (spring) forces and constraints, then apply Gauss-Seidel to iteratively solve/relax constraints. Specially for each GS iteration we relax the constraints along gradients of constraints. Here it seems you are “reversing” the approach, by having an iteration pattern first, and then want to see what dynamics you are simulating. I guess maybe treating terms in your iteration as “constraint gradient” and integrating them can reveal the “constraint” you are simulating.  

---

## 0 answers

