9 ms·
Hair
- minikomi 13y agoAwesome effect.. However, I was really disappointed to see that the code had been minified. Doesn't that kind of go against the point of codepen et al?
- mrPaumgarten 13y agoIt 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 ...
- minikomi 13y agoHey, I'm only saying so because it's cool and wanted to read through it! Checking out the git repository now :)
- ryanpetrich 13y agoI suspect codepen may have a size limit on how much code can be in a pen. Source is here: https://github.com/MathiasPaumgarten/hair https://github.com/MathiasPaumgarten/hair
- stravid 13y agoThere is a notice at the top with a GitHub link. https://github.com/MathiasPaumgarten/hair https://github.com/MathiasPaumgarten/hair
- bcoates 13y agoThis looks like a job for a sourcemap: http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ http://www.html5rocks.com/en/tutorials/developertools/source...
- foobarbazqux 13y agoDude is so metal.
- waxjar 13y agoI left this open in a tab on the background with the intention to check it out later. It froze my machine.
- jlengrand 13y agoSame
- readme 13y agoThat makes me pretty worried about the quality of your machine.
- waxjar 13y agoIt's a 2011 macbook pro.
- Samuel_Michon 13y agoWhat browser do you use? An app isn’t supposed to freeze the entire system.
- waxjar 13y agoChrome.
- readme 13y agos/Machine/Operating System/
- WickyNilliams 13y agoThis 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 [1] http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ http://www.paulirish.com/2011/requestanimationframe-for-smar...
- goggles99 13y agoIncredible. 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).
- diminish 13y agoit is cool, but, browsers must give reachable options to cpu consuming operations with canvas and other js animations.
- wavefunction 13y agoLike gpu acceleration? http://stackoverflow.com/questions/15363798/which-mobile-browsers-has-gpu-acceleration-for-html5-canvas http://stackoverflow.com/questions/15363798/which-mobile-bro... iOS5 with Nitro Javascript Chrome for Android on Android4+ (default browser) Windows Phone 7 with IE9 I don't see Blackberry providing any support but...
- kozhevnikov 13y agoNo need for sarcastic sighs, codepen and alike are simply this generation's demoscene. Nobody is thinking of making a restaurant site with hair animations.
- kybernetyk 13y agoOk, sorry for being ignorant but I'm not a web developer. So: What is so special about this? Is there some new technology in use? I'm clearly not getting something with this submission.
- _pmf_ 13y agoIt runs on "The Web (TM)"[1] without plugin. That makes it very amazing and innovative, apparently. [1] "The Web (TM)" being just the right combination of operating system, specific browser version and graphic card.
- hkmurakami 13y agokind 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)
- andyjohnson0 13y agoTearable Cloth Simulation in JavaScript https://news.ycombinator.com/item?id=5592679 https://news.ycombinator.com/item?id=5592679
- smackfu 13y agoAnd the funny thing is that the main things that make these demos possible are: 1) They finally said "ok, you can just update pixels directly like a 1980s computer". 2) Computers are fast enough to run Javascript at decent frame rates now.
- olalonde 13y ago1. Demonstrates a cool algorithm most HNers are not familiar with. 2. It's written in a language most HNers are familiar with. 3. Doesn't require any special environment to watch or play with. 4. It's open source.
- a-nikolaev 13y ago
- rikelmens 13y agoA small bug: The far left hair doesn't become the one on top when the mouse pointer goes to far left.
- gurkendoktor 13y agoFroze 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)
- bliker 13y agoSo is there any way to block css animation or WebGL? I think it will be the next Flashblock
- mistercow 13y agoThis doesn't use either of those, and yes, why don't we hold the evolution of the web back for no good reason whatsoever.
- WickyNilliams 13y agoSo whenever I read the source on things like this I always hit a blocker with the maths - I just don't understand the reasoning and theory behind it. Can anyone tell me what areas of math should I look at learning to comprehend (maybe even produce) this kind of thing?
- kaoD 13y agoActually is more physics than math, and some geometry for drawing.
- nkozyra 13y agoPhysics & geometry can only be computationally expressed via the medium of math.
- kaoD 13y agoSo 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).
- nkozyra 13y agoI was simply correcting the notion that it's "not math." Understanding something like this can go one of two ways: 1. Reverse engineer it by playing with the code. This is, of course, the very ethos of these code share sites. 2. Learn the basics of physics & geometry on your own and come back to it. Feel free to choose either method, but for the developer who is curious, option 1 is a lot faster.
- JoelSutherland 13y agoIf it weren't for submissions like these, how could young developers that visit HN learn how to make ugly comments?
- ahassan 13y agoYou 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.
- john9824 13y agoThe site is broken. I can't see any animation or anything. Who even writes ugly code like this: .slice(0),this.depMaps.rjsSkipMap=e.rjsSkipMap,this.errback=n,this.inited=!0,this.ignore=r.ignore,r.enabled||this.enabled?this.enable():this.check()},defineDepById:function(e,t){var n;return each(this.depMaps,function(t,r){if(t.id===e)return n=r,!0}),this.defineDep(n,t)},defineDep:function(e,t){this.depMatched[e]||(this.depMatched[e]=!0,this.depCount-=1,this.depExports[e]=t)},fetch:function(){if(this.fetched)return;this.fetched=!0,r.startTime=(new Date).getTime();var e=this.map;if(!this.shim)return e.prefix?this.callPlugin():this.load();T(this,!0)(this.shim.deps||[],bind(this,function(){return e.prefix?this.callPlugin():this.load()}))},load:function(){var e=this.map.url;c[e]||(c[e]=!0,r.load(this.map.id,e))},check:function(e){if(!this.enabled||this.enabling)return;var
- lnanek2 13y agoProbably compiled from some other language? Like Dart or CoffeeScript?
- mrPaumgarten 13y agoNope ... just compiled because it uses AMD. That is a modular JavaScript format that resolves dependency management. Source is also JS, just not minified.
- clarkmoody 13y agoFirst bit of the JavaScript apologizes for the compiled code and refers the reader to the source: https://github.com/MathiasPaumgarten/hair https://github.com/MathiasPaumgarten/hair
- gavanwoolery 13y agoIf 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): http://genesisbbs.com/appstem/appstem.html http://genesisbbs.com/appstem/appstem.html (Warning: uses Flash!!)
- DanielRibeiro 13y agoGPU based hair: https://www.shadertoy.com/view/XsfGWN https://www.shadertoy.com/view/XsfGWN
- swamp40 13y agoYour link totally screwed my computer (Win7, Chrome). I tried it twice (I'm a masochist, I guess). It somehow took over all the computer time (realtime priority?), and chrome wasn't even using 100% of the CPU time in Task Manager. Everything froze up except the mouse, which moved like it was underwater.
- DanielRibeiro 13y agoSorry 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/report-a-problem-and-get-troubleshooting-help http://productforums.google.com/forum/#!categories/chrome/re... More info: https://support.google.com/chrome/answer/1220892?hl=en https://support.google.com/chrome/answer/1220892?hl=en
- gavanwoolery 13y agoVery cool - I've seen plenty of GPU-based hair, but never just as a shader.
- bil 13y agoCool. 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.
- tieTYT 13y agoIt seems to stop working after I use it after a while. Is this a bug or intended?
- asghar07 13y agoawesome effect..
- TurplePurtle 13y agoLooks fun and informative for new programmers. That said I don't understand why this has so many points, and don't really think it belongs here.
- octatone2 13y agoUncaught TypeError: Cannot call method 'getOrigin' of undefined