0 to 60 in One Second: Fusing WebGL, CSS 3D and HTML
acko.net
acko.net
So a note to web-masters: please put any content you want your users to see below the top of the page, not above it.
Though even once you see it, easy to miss is the "settings" cog in the top right. EGA mode!
Little badge popped up on the bottom of the screen: Achievement Unlocked - All Glory to the Hypnotoad
Also reload the page with the javascript console on.
As cool as it is, am I the only one that thinks the "web penalty" is ridiculous? From Crysis to StarCraft, I can play most new games no problem, but not a simple web demo like this.
"The computer revolution hasn't happened yet"...
So the rewrite simply added a cool multiplier.
The demo and technology are amazing, and he should be proud of his hard work. But I was a bit surprised by his appropriation of someone else's work to add a soundtrack. Why not try to reach out to the artist and ask permission first?
Now before you hit the downvote icon, here's a thought exercise: What do you think HN's reaction would be if a random musician used this web visualization in a music video without asking permission first? How often do we get irate about design theft, and why is doing the reverse in this case okay?
> The songs are used here entirely for educational purposes of course. Not that it matters, since they're all on YouTube anyway.
This is simply untrue. Although the blog entry has educational value, the music itself serves no purpose other than to provide a soundtrack. It's being used for entertainment value, and if the developer does professional web design and references this work on a resume or contract offerings, then it arguably serves a commercial marketing purpose as well.
And saying that the video is available elsewhere? That's again no different than appropriating images or artwork from elsewhere on the web and reusing them for other purposes.
It's good that he credited the music, and I'm glad he thought about reuse issues. But again, why not ask permission first? And if it can't be obtained, why not find a musician who needs the exposure and would be happy to have their music included?
The Seba track is chosen for its 80s style synths (itself a reuse of Vangelis' Blade Runner soundtrack), which separates cleanly in the FFT and enables the audio response to follow individual notes.
The Selah Sue track is chosen for its low bpm and jazz style vocals, which can easily be synced to a 6 DOF camera running at a constant speed on spline tracks without causing significant motion sickness. Trust me, you don't want to ride that thing on dubstep.
Neither demo could be accomplished without specific requirements in music, whether it's these songs or others, and each is a novel demonstration of web technology. The full source is on github, there's commentary and accurate, live diagrams of the internal mechanisms.
I don't deny that this is skirting the rules a bit, but the educational goal is genuine. I'm a DSP engineer. What's the difference between me slapping a commercial MP3 on a research project involving real-time graphics and audio processing, and a colleague using a copyrighted Playboy centerfold (1) to demonstrate their image processing algorithm? Also chosen for specific purposes: it contains a complex mix of textures that shows flaws in algorithms well, and is a plausible real world use case too.
For an encore, the server is configured to make pirating the songs from me as inconvenient as possible without compromising the demonstration.
It saddens me that i spend most of my professional time working for an agency.
That's why we have the demoscene ;-)
The "cheater" achievement was a surprise.
Notice he scales down the resolution when there are several frames dropping below 45 FPS. I've been thinking about how to solve the performance problem in voodoo.js, and this could be it. Good stuff.
[1]: http://insidethedigitalfoundry.blogspot.com.au/2008/09/wipeo...
Even if the could, that is. I can see gaming companies investing in visuals like this to enhance their game's web pages, or even delegate parts of the game's UI to a browser. Battlefield 3 (and probably 4) does this for its server browser, removing the need for a large chunk of UI from its game, and removing the need to update the whole game in a patch if they want to make changes to their server browser. No fancy 3D effects or animations in there though. At least, not yet. iirc, they've outsourced development of that server browser to a third party.
HTML was originally a document, but today we've stretched it to do so much. And that's great! There's no need to draw a line around fancy webgl stuff. Your whole page can twist and flow and sparkle and whatever. You can make styling prettier sure but also make you content deeper. It will take time work out the kinks but hey, it's an adventure! That's pretty cool! Boring is never good. And there will be those with poor taste no matter the medium. This isn't a fad and it isn't superficial. This can totally change our experience on the web. Why wouldn't you want to take advantage of such cool stuff?
I just hope this practise doesn't spread outside of artsy demos.
It feels like there aren't as many people doing interesting things and exploring new ideas on the web anymore but maybe I just don't know where to look.
-from mousing-over the play button too many times
That's 2/8 for me and I see a couple others in this thread. Is anyone keeping track somewhere?
All Glory to the Hypnotoad: Click play, let it run all the way through, or sit in another window for 15+ mintues
I think the rest come from fiddling with js in the console. I've been twisting knobs, like 'fov' and such, but haven't found anything yet.
Frickin brilliant, of course. /hat tip!!!
The story of my development career.