cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

A modernised/improved version.

It's been a couple of years since I made the original tearable cloth, and since then both me and Javascript have improved. I thought it deserved an update.

It should be more efficient, wall collisions are greatly improved, and it has a slightly more stretchy, cloth-like texture. The code is better, a bit smaller and now in ES2015. That was the main point.


  1. Will it reach 3M views too ? :-D

  2. This is amazing! I hope one day I become as good as you kind sir!

  3. @mistic100 only 2,998,961 to go!

    @athoug I don't doubt you will be, if you aren't already.

  4. I thought the coolest thing about the original was how little code it needed. And now it's even less code. Gotta love the new JS stuff!

  5. You still haven't fixed the mouseUp event outside of canvas... it afterwards do weird things...

  6. 👏 Tiny script, huge magic! Thanks for sharing

  7. Awesome work!

    I hope, some day we can also leave the requestAnimationFrame polyfill behind :)

  8. I like how it tears.

  9. DAMN!!!!!!! You're the real G man

  10. wooo! I am just setting here playing with it for hours, this is so cool!

  11. Awesome

  12. So awesome @dissimulate! It would be wonderful if we could somehow add a background of a flag/banner image and transparent the cloth so it would be like a real flag moving in the wind.

  13. Thats awesome sir..

  14. Its so awesome I changed the program and added more options like wind, pattern, strength, etc. You can even change it to USA flag! (to show respect you can't rip it) Tearable cloth with more options!

  15. There's a little glitch that I think you should fix that @Akxe was talking about. If the mouse button is down and it is dragged off the canvas and is released, the code still counts as though it is down. Fix it by changing "canvas" on lines 215 and 223 to "window".

  16. Adapted this to work with a PIXI.js Plane Mesh, allow you to make a cloth image! http://codepen.io/shshaw/pen/JbrQrW?editors=1010

  17. 可怕!awesome!

  18. Amazing work! Would you please share some suggestions/tips on how you became so good? Did you learn alone, in university etc. (I am sorry if my English is poor)

  19. This is awesome

  20. super!

  21. I hate to be the one to tell you this, but this project of yours, it's... tearable.

    ba dum tsss

  22. Is it ever gonna contain a reset button?

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.