Tearable Cloth Simulation in JavaScript
codepen.io
codepen.io
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.
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.
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.
But you missed the more important point in my post: if this wasn't in a browser, I'd never see it.
One of the nice things about a site like this is being exposed to domains that one is not familiar with. I for one know beans about physics simulations like this, so it is interesting.
Also, as someone who recalls what Javascript was like 10 or more years ago, yes, I am impressed with what it can do now.
I suppose this is true, though the same could have been said for flash before Javascript's recent strides, and I don't recall anyone being particularly excited about similar demos implemented in actionscript.
1) HN wasn't that big (or existing) at that time.
2) Now you can also see the code, it's not in some opaque swt archive.
3) You don't need a proprietary Adobe IDE to code it (yes, you could do without for Flash too with some bizarro third party tools. Talking about the mainstream).
4) Everybody hates flash anyway.
Of course experts are not impressed by things they are familiar with. But usually experts are pleased that something has bought interest to people not familiar that domain. For example, people are still blown away by the sight of a far away galaxy in a telescope. Astronomers love this, they don't suggest such wonder is "odd" because they are used to it.
OTOH, realize that many readers here were probably not programming then.
Programming is the archetypal field where everything old is new again. The antidote -- dig up all those 1-2 day projects you did 10 years ago that you think are stupid / too simple, and re-package them for the kids.
Second, I am pretty sure that if someone have done this in another language (Python, Ruby, F#) and provided a platform for easy delivery and sandboxing, the most common response would be "we don't need this, this is stupid".
People wanting to port stuff to new domains?
Excitement about the web being a feasible platform for running 3D stuff?
People learning about old stuff for the first time and doing experiments with the language available to them?
People who aren't familiar with this sort of thing find it really cool, hence the impressive number of upvotes. These online demos are accessible in the way some exe just isn't.
So condescending, dismissive, and of course the top voted comment :/
But that's what it is. Would you be impressed if I posted a rails CRUD app?
So condescending, dismissive, and of course the top voted comment :/
I'm sorry you think that. I don't mean to be critical of the developer in any way. I was merely remarking that from my perspective, just being on the web isn't enough to be novel or interesting.
Your comment became "THE" comment in this thread. And I would like you to ask yourself the following: "Is the world a better place with or without my comment?"
So, I would say yes.
You should consider that your post has zero content other than making a personal attack, which couldn't be said for the one you're criticising.
So what if you and a bunch of other people have been long familiar with similar stuff? When you say it "isn't that interesting" you're just saying that it isn't that interesting for _you_.
[EDIT: "When you say" -> "When you say it"]
The way I read it, is that by saying that you found it odd that people were impressed by this, it can be felt that you were implying that people impressed by this demo and code are some how backward in their knowledge or thinking. And by pointing that out, you must there for be implying your own superiority. So, bolstering self image and suggesting its ego driven fits with that.
Do you see what I mean?
You could have just said, "yeah very cool, and here is some additional info for those who are interested." But instead, you implied a negative value judgement on people who liked the demo and code. People don't like that much.
I realise that the HN readership includes a fair fraction of web developers in it's readership, so perhaps my view is in a minority. As others have said, if the link was to a technical discussion of the algorithm presented alongside a JS example implementation, it would have made more sense to me.
I do apologise if some took this as a personal slight.
HN may not need every "look at the old stuff I did in JS" post, sure. But it needs these pointless "I didn't like this" derails even less.
For a HN crowd interested in learning more about the domain, a blog post or something actually talking about it would be more appropriate and something that people can actually learn from.
A demo isn't something that people generally learn from. It's something that people look at, notice how pretty it is, and then move on, learning nothing.
It's how people learn, and you can choose to help them and share in the learning as even the teacher gets to learn from a student.
So, yes: I'd enjoy this a lot more if it was native code. And by the way, this is nowhere near a factor two of a compiled code implementation.
Ignore the code/algorithm itself for a moment and look at everything else: we see the code first and the results underneath. It's inherently open-source and fairly accessible, because it's JS, and everyone is at least a little bit familiar with the language. Lastly, it can be tweaked and recompiled on the fly so playing with the code has never been easier. I don't recall actionscript working like that.
As far as I know, the closest other languages (that don't compile to JS) can come at the moment is something like the Go Playground, and in comparison the best it can do is a text-based Game of Life[1] or a non-interactive generated picture[2] (which can be combined to a graphical version of GoL I suppose). And even something as minimal as the Go Playground turns out to be pretty awesome when discussing bugs/ideas about Go on the internet, so even there it helps and I wish more languages had something like it.
[1] http://play.golang.org/p/6j5z_RNr0q (by Jan Mercl)
[2] http://play.golang.org/p/yOn9pQwEzJ (taken from the Go Tour - http://tour.golang.org/#35 )
Who is that "we" you're talking about? Because it's obvious that the parent does not "already know" and neither do many people.
People see trivial stuff like this simulation all the time, not knowing anything about the domain or past developments, and are inspired to learn more, or change it and adapt it to create something else, etc.
It would a sad world, yours, where everybody should delve in domain specific tomes to learn about prior art and theories and such, instead of also being able to give a quick glance at some web page and see something he didn't knew about.
Not to mention that "having been done before" and "it can be done in Javascript, on the browser, with adequate performance, and not that difficult code, and you know what, you can adapt it for your web project too" is a different thing altogether.
The other reason is that most of us are familiar with the online world a large amount of us will have written JS and therefore have an emotional investment of some sort in it. Thanks to the recent JS engine/browser wars the possibilities have come on so far that it would have been almost inconceivable to have seen this five years ago in the IE dark ages so seeing it live like that is fascinating and gives an endorphin-fuelled sense of 'how far we've come'.
My guess is that even if this is common knowledge (which I doubt), lots of people still don't know what that means. Demos like this showcase that.
As to JS vs. AS or Java Applets, well, among the "technical crowd" I'd wager that JS is more popular than those other two platforms. Simple as that, perhaps?
"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)
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.
One way that would have avoided sounding negative, and which (I HOPE) would have got you a lot more upvotes, would have been to say something like "This is a nice demo! Here's some further reading for these algorithms {CITE}, and here are some other implementations if different languages {CITE}", with a bit of discussion of where you used them and the problems you solved.
Personally, I'd much rather see someone's implementation of something that yet another {article I don't like}.
I wouldn't really mind if this phenomenon didn't drain attention and resources from other technologies.
It's like this video: http://www.youtube.com/watch?v=GcDshWmhF4A
Where a guy builds a binary adding machine out of wood and marbles. I've seen them before. I've even seen nicer ones (more expertly constructed). His little counter / adder isn't really a feat in any way. I could even show you how to build a vastly better one with a CPLD. Yet, I am still impressed, and amused when I see that someone has built one. Wood, Minecraft, Little Big Planet, anything else.
But, don't stop being a hater. I even got something useful from your post 'Advanced Character Physics' by Jacobson. which is interesting, and which I probably wouldn't stumble across on my own.
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.
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.
In other words, it clearly surpasses the vast majority of games in the app store.
This is slashdot's review of the iPod. It's a great example of techies completly under judging a new product
the presentation is arguably nicer but i am a bit disappointed how it claims copyright and doesn't give attribution.
Needs a bit of parameter tuning.
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.
http://gamedev.tutsplus.com/tutorials/implementation/simulat...
which is what this thingy seems to be based on...
To tear the "cloth", all you need to do is to remove those particular constraints from the list.
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...")
I've used similar algorithms in a graph layout library of mine: http://getspringy.com/
If you're interested specifically in game physics using Verlet integration, http://web.archive.org/web/20100111035201/http://www.tekniku... is a nice reference. Most of the springy-cloth demos use Verlet integration.
Here's a short series on 3D game physics that doesn't rely on a Verlet integration scheme: http://gafferongames.com/game-physics/. The advantage here is you get a more general ODE solver. It's a little bit more tricky to get right, though.
Once you dig a bit deeper into it, you'll find that the hard part is collision detection/response. A nice intro is the two tutorials at http://www.metanetsoftware.com/technique.html. An in-depth reference is Real-Time Collision Detection by Christer Ericson.
A community related to this is http://www.bulletphysics.org/Bullet/phpBB3/.
Awesome simulation by the way. Just getting into js myself (yeah, I know).
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.
Running userland applications:
FreeBSD 9.x
Chromium
2 terminals (urxvtc)
top
tshark
DWM + dmenu
My cpu goes to 800% (4 core + HT).
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.
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?
before anyone goes looking for it, it's "web playable" as long as you got the Unity3D plugin.
had to be said
:-P
[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?