2D Cloth Simulation
January 13, 2010Andrew Hoyer
- http://www.andrew-hoyer.com
- Location:
- Edmonton, Canada
Launch Experiment
Slow? Not Working? Try it in Google Chrome.
From the Author:
The cloth is simulated by using a combination of point masses and constraints. The point masses are all attached to one another by the constraints, so as gravity tries to pull the masses down the constraints fight to pull the cloth back to its original shape. Its a never ending struggle!
Technology:
Javascript, Canvas
Comments
I'm an artist, and this is really fun to play around with to create awesome, relatively realistic fabric situations. Would it be possible to add, like a fill to it, so it'd be more like a fabric, plane rather than points and lines? Maybe have it shaded ...hmm, this almost makes me want to learn about all this programming stuff lol.
Reply to this commentThis one was always one of my favorite projects. So entertaining.
Reply to this commentThis is seriously awesome. Nice work!!
Reply to this commentI'm waiting for 3D cloth simulation ;-)
http://www.giuseppesicari.it
Reply to this commentThis one has always fascinated me.
Reply to this commentSet to 50 points in Opera 10.60, runs quite well on my Q6600 (apart from the sagging problem of course)
Reply to this commentnIhdSABAH T YMJHFDYDHFFFFFFFFFFFFFFFFFFFFFFFFFFALEUFOBADOTBAWFDUIGH WFDTR WQYERYFAWOUERTFWAROEUTsdfoaseröqgehruastfvdwu6f7 arsfgytausew yfuiwsyet 8fqwqr6etqwrg
Reply to this commentWasn't there 3 points?
Reply to this commentI just recently removed the 3 points from the select as it didn't really display all that much... Feel free to firebug it back in (many other users have done this, so just check out some of the older posts on how to do it).
Reply to this commentI wish there was more points since I have a powerful pc.
Reply to this commentThis is ultimately a very simple simulation, and as such it doesn't really have all of the physics built into the system to accommodate large numbers of points.
As I have explained in older posts, adding large numbers of points causes undesirable results (sagging and springiness)... go right ahead and use firebug to try as many points as you want. I personally find that things begin to slow down an unreasonable amount after about 30 points.
Reply to this commentcould this kind of technology be used to generate real fabrics and clothing from a blob of base molecular substrate in some kind of thermal laser 3D printer, just add ink and so "print" teatowels, sheets and clothing
Reply to this commentthat looks so cool!
thx for sharing source. .
Reply to this commentIn order to fix the greater sagging problem with a higher number of points, I added the following to the load() function:
DT = 0.5 / NUM_POINTS;
GRAVITY_SCALED = GRAVITY.multiply(DT*DT)
Reply to this commentThat is indeed one way of trying to fix things, although this in itself causes other problems. You'll notice that if you add this fix to the source, that when you end up simulating large numbers of points the cloth has more "hang time" as the gravity is decreased.
Its a good idea though. But a proper fix for this problem would mean reworking the constraint satisfaction method so that it properly accounts for mass and gravity.
Reply to this commentquero cadastrar
Reply to this commentPretty cool if you are stoned.
Reply to this commentWorks perfectly in my Opera 10.51
Also working on: FF, Safari and Chrome.
Reply to this commentI need gogle crome. Thanks
Reply to this comment2D cloth sumilation
Reply to this commentIt won't twist. somehow the cloth passes through itself. I tried to wind it like a towel you would whip someone with. but it doesn't wind up. Fun anyway.
Reply to this commentHow do I firebug it? hehehehe
Reply to this commentA work of programming art, complete with convincing physics computed with a challenging language. Bravo! By the way, I appreciated the snappy Processing link!
Reply to this commenthey ! it's cool ! 5stars for this !
Reply to this commenti used fire bug to make it have 300,000 points and my computer froze up for like an hour not a good idea!!!!!
Reply to this commentI used Firebug to add 25, 35 and 50 points. 25 looked totally amazing.
Reply to this commentandrew u totally rock dude
Reply to this commentgood job, andrew!
Reply to this commentWow Very Nice
Reply to this commentgreat work ^^
Reply to this commentThis is so awesome. Great job. =)
Reply to this commentphysics is great! would it be possible to have a user specified number of points, so that the quality would be infinite?
Reply to this commentThank you. It definitely is possible to have an infinite amount of points, but unfortunately as you increase the "resolution" of the cloth two undesirable things happen.
First, the computational complexity becomes very great and the simulation will start to become slow and choppy on some systems, which just doesn't look good.
Second, the cloth begins to sag greatly. Because each point feels a small amount of gravity, the more points you add the more the constraints have to fight against. There are several solutions to this problem but none are all that desirable. You could decrease the strength of gravity, but this causes the cloth to float around in slow motion. You could also increase the number of times the constraints are satisfied, but this again adds more computation per frame making the simulation slow and unresponsive.
It would definitely be a neat thing to do. Feel free to download the source code from here: http://www.andrew-hoyer.com/exp_src/cloth.zip and play around with the settings.
Thank you again for the comment.
Reply to this commentWhy not make it so that each time a new point is made, the gravity goes down?
I don't know much (if anything) about programing, but the downwards force is number, no?
so.. take the number of points, and divide it by, say, 2.
(just as an example, i'm too lazy to figure out the exact number that you would need) than use that number as the gravity (depending on how strong gravity at "5" or so is)
Does that make sense? >.<
Reply to this commentits jus too good..!!loved it!! i have no words how to express this...
Reply to this commentcyberspace
Reply to this commentpickles
Reply to this commentVery cool experiment!
I love the physics. :)
Reply to this commentThank you! I do too.
Reply to this commentpertamax...
anyway, cool script bro...
Reply to this commentThis is an excellent article, thank you very much for it,
I have found here much useful information in
buy ambien
Reply to this commentoch
Reply to this comment