13 ms·
Tearable Cloth Simulation in JavaScript
- Pitarou 14y agoI'm speechless with admiration.
- darkchasma 14y agoThis is simply magic, I'm kinda speechless.
- pdog 14y agoTearing at the cloth is just so... satisfying.
- kaiku 14y agoFantastic!
- darxius 14y agoI 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).
- davidedicillo 14y agoThis is better than popping bubblewrap paper. Amazing job.
- eksith 14y agoEspecially since more cloth is only a refresh away, whereas bubble wrap.... well, you only get so much of it at a time.
- kevinbluer 14y agoWow, ridiculously impressive.
- deleted 14y ago[deleted]
- danbruc 14y agoCut, cut and cut across...and it smiles at you. :)
- iamtyce 14y agoHoly flying batsh*t, that's great!
- laurentoget 14y agoIs there any connection between this and http://subprotocol.com/verlet-js/ 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?
- josephagoss 14y agoPretty 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.
- tantalor 14y agoRead that as "terrible cloth simulation."
- ochoseis 14y agoThis 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 14y agoLucky 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 14y agoMy 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.
- lloeki 14y agoIt seems to be smooth on my Nexus 4, but interactions do not work so I'm not quite sure.
- damianball 14y agoMuch admiration.
- eksith 14y agoThis reminds me of the experiments of Glenn Murphy ( http://bodytag.org http://bodytag.org )
- curiouslearn 14y agoThis is truly awesome.
- gobengo 14y agoI read this headline and was like "Why on earth would I want to see a terrible simulation?" oy
- j2kun 14y agoCan 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 14y agoIt'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 http://en.wikipedia.org/wiki/Hooke%27s_law
- gknoy 14y agoOne 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...")
- sehugg 14y agoProbably something similar to this: http://gamedev.tutsplus.com/tutorials/implementation/simulate-fabric-and-ragdolls-with-simple-verlet-integration/ http://gamedev.tutsplus.com/tutorials/implementation/simulat...
- achughes 14y agoThat... that was beautiful.
- GabrielMtn 14y agoreally fascinating! Great job
- joetech 14y agoRead this as "terrible" the first time and was confused. Nice effect.
- filefreak 14y agothis is a great experiment.
- patio11 14y agoSomebody 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 14y agoNo, 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.
- kingkawn 14y agoi disagree this could make a lot of money off pure satisfaction. better than playing first person shooters and blowing things up
- hnriot 14y agoI disagree too, and it seems by the many comments that say how satisfying this is, that others find this fun. Obviously it would need a little more to make it a game, but just like Osmos which is simple physics and a simple concept (absorb smaller things) it can b very satisfying and successful. I think you're over thinking the game buying public. Many games have been little more than a concept like this.
- trhtrsh 14y ago"game" != "toy" https://www.google.com/search?q=bubble%20wrap%20app%20store&qscrl=1 https://www.google.com/search?q=bubble%20wrap%20app%20store&...
- archagon 14y agoThere are lots of very simple toys that are popular on the App Store. (Of course, it's hard to tell which ones will make money ahead of time.)
- D9u 14y agoIt's a nice demonstration. Well done.
- aviswanathan 14y agoStressball 2.0
- kens 14y agoVery 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.)
- Goopplesoft 14y agoInteresting discussion on reddit about this: http://www.reddit.com/r/programming/comments/1ayxbr/simulating_cloth/c92anom http://www.reddit.com/r/programming/comments/1ayxbr/simulati...
- ck2 14y agoIt's so little code, blows me away.
- signa11 14y agoyou might want to check this tutorial out: http://gamedev.tutsplus.com/tutorials/implementation/simulate-fabric-and-ragdolls-with-simple-verlet-integration/ http://gamedev.tutsplus.com/tutorials/implementation/simulat... which is what this thingy seems to be based on...
- epaga 14y agoExcellent tutorial, thanks! I just tried submitting it to HN but it was auto-killed for some reason. Any idea why?
- SeanDav 14y agoDepends what you mean by "killed" but your submission won't be accepted if there is already a duplicate one with the same url.
- sp332 14y agoon a hunch, I tried posting another article from that site, and it also arrived dead. Looks like that domain has been banned for some reason, probably spam.
- cjc1083 14y agoprotip: don't make the cloth considerably larger :(
- radiusq 14y agoThats just tearable. had to be said
- Mz 14y agoI think you should have written some kind of code that blinked back and forth between tearable and terrible. :-P
- nimeshneema 14y agoCrashes on Safari on iPod Touch iOS 6.1.3
- heroic 14y agoit makes for a great stress buster, imo
- lanstonpeng 14y agoThat's less than 300 LOC which interests me so much!
- mixedbit 14y agoImagine a js library that would allow to tear content on a page. I would love to tear some of my emails ;)
- guybrushT 14y agoI 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!
- waynesonfire 14y agoI wish I could click on the cloth and have it simulate a bullet
- MrScruff 14y agoWithout 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.
- Swizec 14y agoYes, I would find it impressive. Problem is, there's about a 5% chance I'd ever get to downloading and running it. Especially since it very likely wouldn't be compiled for mac or linux (the only systems I have) and I very very likely wouldn't feel inclined to compile it myself. That's why we love javascript demos. We're lazy sods.
- MrScruff 14y agoIn which case the impressiveness must be coming from the lack of domain familiarity. It's basically getting excited about a game physics 'Hello World'. I remember a good few years ago a colleague writing a fully textured 3D cloth sim that would remotely unfurl on your screen, displaying a given message on the cloth. He used it to display goatse.cx to me, which I wasn't very pleased about. This was developed in python and took him a few hours over a weekend as far as I remember, which seems about right.
- Swizec 14y agoMy familiarity with game physics ended somewhere in the early 00's when I went fully Linux. Since then the most visually impressive game I've played has been Diablo3. Intuitively I still think games look like counter-strike and when I see anything better, I am impressed. But you missed the more important point in my post: if this wasn't in a browser, I'd never see it.
- ne0phyte 14y agoDon'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.
- aswath87 14y agoCannot stop tearing.
- mok 14y agoThis is basically a rip-off and a direct port from this processing scetch: http://www.openprocessing.org/sketch/20140 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 14y agoFirst thing I thought too. Bit of a shame
- kadaj 14y agoAwesome.
- petercooper 14y agoIf you like this, you'll love http://www.surgeonsimulator2013.com/ 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 14y ago> Web playable demo before anyone goes looking for it, it's "web playable" as long as you got the Unity3D plugin.
- hmottestad 14y agoAwesome. 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).
- topbanana 14y agoThat's not tearable at all, it's great
- krmmalik 14y agoThat 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.
- justplay 14y agoawesome
- angel_007 14y agoadmiration !!
- tomrod 14y agoNeat! I showed this to my wife (she is learning JS for fun). We were both really impressed.
- csmatt 14y agoThat's just tearable! haha It's actually pretty cool!
- xyproto 14y agoTearably nice
- simonsarris 14y agoI 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-strokestyle/16051569#16051569 http://stackoverflow.com/questions/15661270/html5-canvas-str... 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.
- niteshade 14y agoI read this as 'Terrible Cloth Simulation'. Lol.
- Datsundere 14y agowhy 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?
- tled 14y agoHow to apply texture to this, make it looks like a real cloth ?
- valtron 14y agoWas playing around with this, made a waving flag: http://codepen.io/anon/pen/mnadz http://codepen.io/anon/pen/mnadz
- soheil 14y agoModified to support touch, Vine video: https://twitter.com/wyz/status/326808367437848576 https://twitter.com/wyz/status/326808367437848576
- alliebug 14y agoCan 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!
- L0j1k 14y agoThis 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.
- hgupta 14y agoNice 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?
- clickonchris 14y agomodified for touch events