If you think this is interesting you might also enjoy a little thing I made a few years back (move the mouse around, and hold down mouse button to rotate):
Sorry about that. This uses WebGL, which has had some issues with Chrome on some GPU cards / OS combination. The Chrome team take these issues very seriously, and you can ping them with your specs: http://productforums.google.com/forum/#!categories/chrome/re...
I think, the algorithm is not really special btw. In fact this is very basic physics simulation. I could not decipher the JS code, but each lock can be replicated as a chain of connected nodes (i.e. there is a force between them or a constraint to keep them connected) + added radial force from the mouse + small random noise.
You keep track of each node's position, and its velocity. If connectedness is simulated as a force, it can be as simple as
1) Compute force {Fx,Fy} for each node, then integrate:
2) vx(t+dt) = vx(t) + (Fx/m) * dt
3) x(t+dt) = x(t) + vx(t+dt) * dt
If it is using constraints than the code is more complex though, but for this kind of simulation constraints are overshoot probably.
You can add gravity too, it can be a fun addition..
kind of like the "net" interactive animation with physics in the browser which iirc was done with asm.js (there was a thread on HN about a month ago but I can't seem to find it now)
I can't really speak to why it would be interesting to non-web developers.
But for those of us whose days consist mostly of writing JavaScript, this is pretty cool. Stuff like this hasn't been possible until recently, and I would guess (anecdotally) that most of us don't have much experience with coding graphics/animation.
It's not that anyone thinks this is groundbreaking computer science. It's just introducing something interesting and fun to developers who might not have known this kind of thing was even possible.
If it makes you feel any better, I will often spend days or weeks writing such things that include a great deal of math and then look at it again after a day off and have no clue how it works.
With a lot of physics-based math the best way to see what everything does (assuming you don't understand the core concepts out of the gate) is to just tweak all of the vars that contribute to size, shape and movement to see how they work.
It's good to hear that even people familiar with this can easily get confused about it. I think it's a sign perhaps you should comment your code more :P
Seriously though it's the writing part that I couldn't do - I'd be happy to come back and not understand something if I could even write it in the first place!
You should know how to draw things first before dwelling into maths. For eg, look at this one: https://github.com/MathiasPaumgarten/hair/blob/master/source...
and check out drawFinger, its all about drawing an arc. Once you know basics, i think its matter of time that you can produce jaw dropping things like this. coming to maths that you need to learn: learn co-ordinate geometry for all 2d related stuff.
So what? That does not mean that he should look into math to understand the physics behind this demo.
Yeah, geometry is pretty much math (that's why I separated it in the parent comment) but physics justs uses math to model and express the physic concepts.
The math behind the physics on this demo is just addition, subtraction, multiplication... He shouldn't be concerned about the math, but about the physics... unless he doesn't know elementary math of course.
The math behind the basic Newtonian Physics is damn simple. The geometry is very simple too (basic Euclidean Geometry, Bezier curves and that's pretty much it).
You are not exactly right. FYI, Newtonian mechanics = differential equations and calculus. And more advanced Lagrangian mechanics is a reinterpretation of the same ideas. I'm almost sure that Calculus was created by people like Newton in responce to the needs of mechanics and physics.
The fact that the program is implemented by using " just addition, subtraction, multiplication" is irrelevant, because this is how computers (and mathematical numerical methods) work.
Well, physics IS NOT math even if physics uses math as a tool.
Economics isn't math even if economics uses math all the time.
The rest of your comment is correct but irrelevant. He could (and should) go learn the physics he's lacking... but he would probably not learn a single new math concept.
The math needed to express these physics concepts is taught in secondary education (addition, subtraction, multiplication, vectors... not much more).
The "physics" he didn't understand in the code IS math, though. That's the point. Even if you know physics, you won't be able to understand the code without the math.
I could indeed reverse engineer by playing around, but it's unlikely I'd ever be able to independently produce something like that myself if I went down that path. I think both is the best, learn some theory, play around with it, rinse, repeat. That said, what areas of geometry and physics should I focus on? Any good online resources?
It does, I know. That's why I said "sorry" :). However - Since I wrote it in AMD I didn't want to put up with concatenating and renaming. If you are interested in the code, check out the git repo. But you are right, I'm not happy to see compiled code on codepen either. I'm such a hypocrite I guess ...
Froze after two seconds of playing around in Safari, this error may or may not be relevant…
[Error] TypeError: 'undefined' is not an object (evaluating 'g.getOrigin')
y (BHIek, line 170)
dispatch (BHIek, line 170)
loop (BHIek, line 170)
(anonyme Funktion)
This is why requestAnimationFrame [1] for animating. Not only does it sync with the system's refresh rate, it pauses processing when the tab isn't focussed
Cool. Just one thing, animation stops when you move your mouse cursor to nearly the right end of the line between the head and left hand on Firefox 21 and Chrome 26 but not on IE 10.
You can crash the JS if you circle around the inside of the face for a few seconds. It will fail on getting an element so the getOrigin method is not defined.
Incredible. I have not seen anything like this since Macromedia Flash came out about 12 years ago... Sigh
There is good reason why we don't use flash today though right? It is resource intensive (looks at task manager and realizes that browser with hair page open is eating up 12% of i7 processor).
I needed to put on sun screen to protect myself from the glare of your snarkiness.
You didn't see anything like this 12 years ago, because it simply wasn't possible with just HTML. You had to use a closed source, expensive tool to do it. And 12 years ago, when it was being done by people like Joshua Davies, Manny Tan, that guy behind assembler.org, they were doing something very, very important: they were bringing computer art to every living room, they were exploring generative algorithmic art and they were advancing the idea of what could be done with tech of that time. It was pretty important shit.
This code is useful in a lot of practical ways - games coming to mind almost instantly. But not everything has to be practical. Something can just be beautiful. I find this to be beautiful and fun.
HN needs less posts like yours. It used to not have them. I am glad to see some positive in other comments in this thread, but your comment in particular is relatively useless. Particularly after you admit to using Windows in 2013. That's like someone driving a Ford telling me what a waste of metal a work of art like a Lamborghini is.
Your comment started out pretty well and then you put yourself into the same group as the one you were trying to disparage with this really unnecessary and unfounded comment.
> Particularly after you admit to using Windows in 2013. That's like someone driving a Ford telling me what a waste of metal a work of art like a Lamborghini is.
Which is a shame because I thought you had a good point up until then.
Perhaps rather than criticizing the demo negatively, which I see no reason to do, he/she could rather have initiated a discussion about where things like this belong in modern web development. Is this use of JavaScript just going to become the next Flash until everyone dislikes it enough for it to become a "legacy" technology? (I mean the same status as Flash has now)
That is perhaps extreme, but I guess a valid question. Think about it though, the author did not have to create anything but he/she did spend his own time creating this. Furthermore, the author did not have to share it with us but he/she still did. So why the negative (and unconstructive) feedback? Why not just not upvote and move on?
I found his comment not very snarky, but quite interesting, indeed, one of the main arguments against Flash, and here we are with the same drawback with this amazing new technology.
Not only are there "task managers" in other operating systems (and Chrome itself), but plenty of people aren't allowed to install Ubuntu server addition on their work machines.
That said, he should just replace "task manager" with "top" or whatever to get him over the OS snobbery stuff that I thought sailed into the sunset years ago. It's really, really dumb to judge someone by the OS they happen to be using at any given moment, especially when they're commenting on a cross-platform technology.
Wow, a lot of mixed reactions here. My comment is not meant to tear down the developer of hair, I am just pushing an agenda. I am pissed off as hell with current web standards. Why the hell are we 12 years later and still in the same place (overall) as far as technological innovation? 12 years... You should all be mad as hell that HTML5/CSS/JavaScript is not many strides better than flash was 10-12 years ago. You should all be mad as hell that there is no open standard for an API where anyone can create their own markup, their own language to run in all major browsers. Screw this compile to JS stuff. I really do admire those doing it, but this is a hack, a workaround.
I hear all this whining that flash was closed source and not an open standard, yet we are stuck in a proprietary mess of similar sorts and I don't hear complaints about that. We are relegated to all learn HTML5/CSS/JS. Doesn't that piss anyone else off? What if when writing applications for Windows, Mac and Linux, you could only choose one programming language, one markup language, and one layout/styling/positioning language? You would be pissed as hell. Well the browser is the OS of the web so why aren't you pissed off? Why is everyone so exited and happy for HTML5? It should be thrown back in the faces of the consortium and a loud demand for what I mentioned earlier should be put out.
THEN we would see some REAL INNOVATION. Let the people, the hackers/developers release their creative energy on the building blocks of the web. Give us the freedom to do it. Open standards that are so high level (such as a specific language following exact specifications) are causing stagnation of innovation.
I strongly disagree. I'm pretty sure that chastising comments about people being dicks on HN are one of the major forces keeping dickishness in check. Sometimes people need a reminder of which arrow to click.
>In any case - was the original/root comment here really that bad? Honestly...
Yes. One of the things that HN has been in the past, and should try to be in the future, is a place where people can post their projects and feel like they'll receive constructive feedback. If scoring cheap status points by tearing people down is what you want, you can check out literally any other large online community.
Well, I disagree that the original comment was "tearing people down". I find it incredible constructive to reflect on the reality of a given situation. What he said was not disparaging to the developer - it seemed more pointed to the general nature of web development.
If you'd rather have a community where nobody can speak their mind and everybody walks on eggshells though - perhaps you should start a smaller online where you can implement that rule. Otherwise - let's just keep adding to the noise, shall we?
There's nothing wrong with people speaking their mind, so long as they are considerate and are trying to add substance to the discussion.
But there was nothing constructive in goggles99's comment, and its general tone was mean. It doesn't pass the "real life test"; if OP had shown this demo to a group of people face to face, only an asshole would have responded with what goggles99 said.
>Otherwise - let's just keep adding to the noise, shall we?
You might not be aware of it, but what you're doing here is known as "derailing".
No need for sarcastic sighs, codepen and alike are simply this generation's demoscene. Nobody is thinking of making a restaurant site with hair animations.
Yes, there is a good reason. For starters I can't cut and paste flash / actionscript code into a file and fire up a browser and start hacking on it without any extra tools.
The main reason I don't and never used flash is because the entire stack is mostly proprietary. Developing for it required tools from Macromedia/Adobe (At least, I never found a decent open variant).
Flash applications also tended to have poorly integrated user interfaces. All of the standard web-browing features (back, forward, copy link location, save image, open link in new window, etc.) had to be replicated by the developer of each individual application. So most of them functioned poorly.
And CPU utilization was not the metric people used against flash with regard to performance complaints. The metric was time spent waiting for the goddamn site to load. People complained about flash's performance in two main scenarios. The first, were sites that were supposed to be useful that tried to be overly creative with intro movies and fancy dynamic menus that users had to wait for. The second scenario was pages with flash-based ads, where once again, content on the page would take longer to display because the browser was busy downloading and running banner ads that were 100x the size and complexity of the target content.
You're lucky! On my old Core 2 Duo, the animation takes 40-60% CPU (nothing when idle). But this is a lot better than flash which frequently takes 100% of a core for even relatively trivial redering (videos and such), and stays high even when idle. My GPU sucks, so I think mostly everything is software rendered anyway.
Also, Flash is a pain to get working on *BSD and is no longer supported on Linux, which is reason enough to move to JS.
HTML5 isn't necessarily about lower CPU, it's about openness, cross-platform compatibility and integrating with other browser elements, all of which Flash completely fails at.
Also it's a pretty neat animation and works without plugins, provided your system OpenGL version is recent enough.
12% on i7 means one core out of 8 is fully booked. Windows never has more than 100% CPU, unlike mac and linux, which have 100% for each core and then tell you "Xcode uses 390% of CPU". :)
Nope ... just compiled because it uses AMD. That is a modular JavaScript format that resolves dependency management. Source is also JS, just not minified.
http://genesisbbs.com/appstem/appstem.html
(Warning: uses Flash!!)