
Tearable Cloth Simulation in JavaScript - NathanKP
http://codepen.io/stuffit/pen/KrAwx
======
MrScruff
Without wishing to appear negative, I do find it odd the way that a technical
crowd react to these online demos. Would you have found this impressive if it
was a compiled executable? Because this is just the same thing, just running
slower because it's on the web. It's not technically novel in any way.

If you're curious about the algorithm, then take a look at the presentation
'Advanced Character Physics' by Jacobson. They were used in published games at
least 13 years ago and are very widely known and implemented.

I get that there's some novelty to this stuff, but we already know that asm.js
can achieve performance within a factor of 2 of compiled C code. Since we know
that exists, I don't really see what's interesting about seeing each
individual piece of code ported to work on the web.

~~~
tripzilch
Imagine if HN and comp.sys.ibm.pc.demos really would have the same audience.
So everybody'd be like

"oh, cloth simulation. we did that in the 90s",

as well as,

"... in javascript, even! ... just like scenerdude303 did 8 years ago, except
he didn't have a canvas-element back then, web browsers were still make of
wood and he had to get up at 5am to write the code in the snow when it was
still fresh, type with his bare feet and be crawling uphill both ways, ah, why
when I was a young programmer ...", etc.

 _Except_ that many people would also be supportive. Cool cloth demo, it works
well! Nice touch with the interactivity and the right-mouse cutting action.
Because those two make it fun to play with, and slightly more interesting than
just the simulation by itself.

Because, and this is something that the actual HN audience should (optimally)
also understand, writing a small demo like this is an act of creativity. That
should be stimulated no matter what, because--actually I just remembered from
some other discussions[0], there's really a load of people here that _don't_
understand this: When making art, there is tremendous value in doing what has
been done before. It's called practice, and the value is having the experience
of having _done_ something yourself. It's also rumoured to make perfect. It
only gets you so far to just _know_ the "why?" and the "how?". To get anywhere
you also need to make something. Because _only_ from the vantage-point of
being right in the middle of that mess, you can truly decide what your
personal take on it, your influence will be. And if you can't, just go right
back to practice :)

[0] it was a series of InkScape tutorials called "vector game art for
programmers" or something. many people were complaining "but he's only showing
how to make _these_ characters and objects", that the author didn't explain
_why_ the circles go where they should and what a proper shadow should look
like. only by people that didn't actually _do_ the exercises, of course.
there's no magic involved. just practice. if character faces are too complex,
go draw fruits. all fruits. and then remake the rest of pac-man's sprites in
vector! (in the snow, uphill both ways, etc)

~~~
thesash

        When making art, there is tremendous value 
        in doing what has been done before. 
        It's called practice, and the value is having 
        the experience of having done something yourself.
    

This is so true, and so often overlooked in the rush to "innovate" or
"disrupt" or compete with those around us. The most creative creations are an
act of play, and it takes a lot of practice to get that good at playing.

------
simonsarris
I was helping someone with this exact demo a few days ago. They wanted the
demo so that it was an image that gets stretched appropriately with the
"cloth":

[http://stackoverflow.com/questions/15661270/html5-canvas-
str...](http://stackoverflow.com/questions/15661270/html5-canvas-
strokestyle/16051569#16051569)

I give a teeny explanation of the structure of the thing, but only enough to
understand how to use an image instead of a wireframe.

------
patio11
Somebody should put this on the App Store with 10 textures for $0.99 and
extras if you buy more. It would sell like crazy.

~~~
andrewljohnson
No, it wouldn't. It's engaging for about 2 seconds, and doesn't even begin to
compare to the addictiveness of a successful game, even if you lumped a bunch
of bogus social stuff on.

I think this is only really novel to technical users looking through a lens of
tech, though of course I think it's incredibly novel too. But addictive video
games already do very realistic stuff around hair, cloth, and all sorts of
things, and your average game player will rip the cloth and move back to Angry
Birds.

I agree it's really cool, and I Facebooked this, but a cool animation a game
does not make.

~~~
tjoff
"It's engaging for about 2 seconds"

In other words, it clearly surpasses the vast majority of games in the app
store.

~~~
rimantas
If you were able to try "the vast majority of games in the app store" no
wonder you couldn't spend more than 2 seconds on each.

------
mok
This is basically a rip-off and a direct port from this processing scetch:
<http://www.openprocessing.org/sketch/20140>

the presentation is arguably nicer but i am a bit disappointed how it claims
copyright and doesn't give attribution.

~~~
oliverhunt
First thing I thought too. Bit of a shame

------
kens
Very cool physics simulation. I think it needs a little damping though; if I
cut all the cloth off I end up with a creepy wiggling pile of cloth at the
bottom. (To reproduce: slowly cut across the top of the cloth so it all falls
into one pile.)

~~~
trhtrsh
The threads move far too fast in general, to be any physical substance.

Needs a bit of parameter tuning.

------
pdog
Tearing at the cloth is just so... satisfying.

------
ne0phyte
Don't get me wrong, this is a cool demo, but as someone who experimented with
verlet based physics before I don't understand what is so impressive about a
basic implementation in JavaScript.

The math behind it is ridiculously easy and JS got faster over the years. And
as someone already mentioned there is a 13 years old paper about verlet
physics in games so this is everything but new.

------
ck2
It's so little code, blows me away.

~~~
signa11
you might want to check this tutorial out:

[http://gamedev.tutsplus.com/tutorials/implementation/simulat...](http://gamedev.tutsplus.com/tutorials/implementation/simulate-
fabric-and-ragdolls-with-simple-verlet-integration/)

which is what this thingy seems to be based on...

~~~
epaga
Excellent tutorial, thanks! I just tried submitting it to HN but it was auto-
killed for some reason. Any idea why?

~~~
SeanDav
Depends what you mean by "killed" but your submission won't be accepted if
there is already a duplicate one with the same url.

------
laurentoget
Is there any connection between this and <http://subprotocol.com/verlet-js/>
which was posted on HN a few days ago, or did you both happen to play with the
same algorithm at the same time?

~~~
NathanKP
I'm actually not the developer. I just happened across it, enjoyed it a lot,
and was surprised to find that it wasn't posted on HN yet.

~~~
nthitz
Ah but it was: <https://news.ycombinator.com/item?id=5481441>

~~~
NathanKP
Oh I did not see it the first time around. At any rate I'm glad it is getting
more exposure this time.

------
j2kun
Can anyone speak to what's going on in these algorithms? I'm interested in the
physics/math behind them. For example, how much about partial differential
equations do I need to know to understand them?

~~~
efraim
It's very simple really. It's a grid of point masses with constraints between
them (the lines you see) that says to keep the points at a constant distance
from each other. Think of the constraints as springs that follow Hooks law[1],
only infinitely stiff. You iterate through all the constraints and move the
two points of each constraint apart if they are too close, or closer if they
are too far apart. You need some basic linear algebra for the distance and
direction calculations. It's common to use verlet integration to actually move
the points because it's so easy do solve the constraints with it. Add some
gravity and it looks very convincing.

To tear the "cloth", all you need to do is to remove those particular
constraints from the list.

[1] <http://en.wikipedia.org/wiki/Hooke%27s_law>

~~~
gknoy
One of the things I love about encountering things like this on HN are
comments like these, which are even more informative than the original post.
I'd seen the demo in the OP, and thought, "neat". Later on, I read comments
that say, "Oh, you just need to ___ the ___ with ___, and use ___'s Law to
____ for the whole grid" --- most of which is completely over my head. In some
perspectives this might seem discouraging -- trivializing the difficulty of
learning it. However, I find it tremendously invigorating: the idea that it's
simple for someone with the right learning and knowledge means that it's
something I could do to, if I wanted to spend the time to learn it.

Thanks for posting comments like this. It opens my eyes to questions I didn't
even know I had. ("What's a verlet?" "Oh man, I need to re-learn my linear
algebra someday...")

------
mixedbit
Imagine a js library that would allow to tear content on a page. I would love
to tear some of my emails ;)

------
gobengo
I read this headline and was like "Why on earth would I want to see a terrible
simulation?" oy

------
darxius
I tried so hard to tear that last line, but just couldn't.

Awesome simulation by the way. Just getting into js myself (yeah, I know).

------
krmmalik
That was surprisingly therapeutic. If those chinese balls can be sold for $5
that serve the same "pain", then maybe Patio11's suggestion that someone
should stick this in the app store has some weight.

Either way, if it doesn't require too much coding, and I have honestly no idea
of how much coding it does or does not require, since i'm not a coder, but i'm
assuming it's not that much work to pick up a HTML5 framework and run with it.

Better still. If it can't be charged for, it's a sure way of generating
interest and creating a crowd or audience of a group of people that clearly
like something like this, which should open up ideas for associated revenue
streams with this serving as a hook.

If i was a coder, i'd suddenly give it a shot, even if it was only for my own
learning and experimentation.

The reasons, at least for me, to give it a shot would far outweigh the reasons
not to.

------
eksith
This reminds me of the experiments of Glenn Murphy ( <http://bodytag.org> )

------
guybrushT
I just wasn't ready for the awesomeness. In 2002, as a graduate student I
worked on developing a similar app for Phantom (a desktop haptic device that
our research group had bought). It took me a full semester to create a similar
haptic simulation (actually, our visuals weren't half as good as the one
here). Our goal was to simulate the texture and "feel" of skin, with the aim
of one day allowing doctors to operate patients remotely. When I first came
across haptic devices, I (wrongly) said to myself - 'my god! everything will
work this way one day'. The promise of combining physics-driven visuals and
haptic feedback still remains unfulfilled to this day (except some games, but
still to a very limited extend, in my knowledge). Thanks for putting this out
there. It was fun to revisit my graduate school memories!

------
topbanana
That's not tearable at all, it's great

------
ochoseis
This is awesome. I don't know what's more satisfying: actually tearing the
cloth to pieces, or the fact that my 2009 13" macbook pro can run it smoothly
without stressing the CPU.

~~~
garretruh
Lucky you. It maxes out the CPU on an early 2008 (2.4 GHz w/ x3100) MacBook. I
guess an actual GPU makes all the difference.

~~~
D9u
My 4 year old netbook's Intel Atom N270 (1.6 GHz, 1 GB RAM, Graphics
(integrated)Intel (GMA)GPU model 950) only went up to 58% CPU usage during the
tearing.

    
    
        Running userland applications:
        FreeBSD 9.x
        Chromium
        2 terminals (urxvtc)
        top
        tshark
        DWM + dmenu
    

Seems like it was worth the $99.

------
davidedicillo
This is better than popping bubblewrap paper. Amazing job.

~~~
eksith
Especially since more cloth is only a refresh away, whereas bubble wrap....
well, you only get so much of it at a time.

~~~
leeoniya
flash, but here you go: <http://www.virtual-bubblewrap.com/bubble-wrap.swf>

~~~
eksith
There goes my evening :(

------
hmottestad
Awesome. My cpu didn't spike past 25% for chrome renderer and 20% for helper
while doing all the tearing I could manage.

My cpu goes to 800% (4 core + HT).

------
josephagoss
Pretty cool, I like how the result of the torn cloth is rather artist looking.

I used to study fine art, if you want to reference something original I always
thought setting up a physics engine for creating scenes that you could
reference in your painting would be cool, instead of having to acquire and
damage the objects yourself.

------
darkchasma
This is simply magic, I'm kinda speechless.

------
tomrod
Neat! I showed this to my wife (she is learning JS for fun). We were both
really impressed.

------
Goopplesoft
Interesting discussion on reddit about this:
[http://www.reddit.com/r/programming/comments/1ayxbr/simulati...](http://www.reddit.com/r/programming/comments/1ayxbr/simulating_cloth/c92anom)

------
soheil
Modified to support touch, Vine video:
<https://twitter.com/wyz/status/326808367437848576>

~~~
alliebug
Can you share the source code for this modification? Interested to diff the
two and see just what magic is required to turn something that does not
support touch events into something that does. Everything I find on stack
exchange about it outright doesn't work for me on the platforms I need to
support. Fingers crossed!

~~~
soheil
There you go: <http://codepen.io/anon/pen/qpDGf>

------
hgupta
Nice work!

Is there a way to add the stress/elasticity factor to it, so as to demonstrate
that after certain point of pulling a point on cloth, any more force will tear
the cloth?

------
valtron
Was playing around with this, made a waving flag:
<http://codepen.io/anon/pen/mnadz>

------
csmatt
That's just tearable! haha It's actually pretty cool!

------
petercooper
If you like this, you'll love <http://www.surgeonsimulator2013.com/> (there's
a free Web playable demo available). A totally unrealistic surgery simulator
where instead of cutting a cloth, you're thrusting scalpels and drills around
the innards of a poor soul.

~~~
tripzilch
> Web playable demo

before anyone goes looking for it, it's "web playable" as long as you got the
Unity3D plugin.

------
Pitarou
I'm speechless with admiration.

------
kevinbluer
Wow, ridiculously impressive.

------
kaiku
Fantastic!

------
joetech
Read this as "terrible" the first time and was confused. Nice effect.

------
tled
How to apply texture to this, make it looks like a real cloth ?

------
waynesonfire
I wish I could click on the cloth and have it simulate a bullet

------
lanstonpeng
That's less than 300 LOC which interests me so much!

------
danbruc
Cut, cut and cut across...and it smiles at you. :)

------
niteshade
I read this as 'Terrible Cloth Simulation'. Lol.

------
nimeshneema
Crashes on Safari on iPod Touch iOS 6.1.3

------
D9u
It's a nice demonstration. Well done.

------
achughes
That... that was beautiful.

------
curiouslearn
This is truly awesome.

------
aswath87
Cannot stop tearing.

------
cjc1083
protip: don't make the cloth considerably larger :(

------
damianball
Much admiration.

------
heroic
it makes for a great stress buster, imo

------
xyproto
Tearably nice

------
tantalor
Read that as "terrible cloth simulation."

------
GabrielMtn
really fascinating! Great job

------
kadaj
Awesome.

------
clickonchris
modified for touch events

------
angel_007
admiration !!

------
aviswanathan
Stressball 2.0

------
justplay
awesome

------
filefreak
this is a great experiment.

------
L0j1k
This is beautiful, and even more so considering it's done so well in
JavaScript. It's times like these when I reflect with disdain that our
industry is so full of hipster brogrammers with tons of butthurt. Get over
yourself.

------
radiusq
Thats just _tearable_.

had to be said

~~~
Mz
I think you should have written some kind of code that blinked back and forth
between _tearable_ and _terrible_.

:-P

------
iamtyce
Holy flying batsh*t, that's great!

------
Datsundere
why should I learn js. Give me incentives that defeats the flaws JS has. eg.

[1,2,3] + [4,5,6] is 1,2,34,5,6 what the hell is this. Am I supposed to go
around to find every fucking bugs it has and change my understanding of basic
operations?

