This is an astonishing demo -- and I very nearly missed it, because I thought the scrolly graphic at the top was just a fancy animated header, followed by a bunch of text that seemed to be refering to something else. I only discovered the full demo when I accidentally scrolled up, and found it lurking there well above the start-point for the page. I can't help but think that a lot of other viewers must be missing it entirely.
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.
Yes, the demo was not obvious until I scrolled back to the top. It is beautiful, and I'm sure it took a lot of hard work. After trying it both FF and Chrome, it's frustrating that a 3 year old machine with a decent dedicated Radeon 4670 GPU, can't run such a simple demo at full 60 FPS.
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.
> I realized it would make a pretty neat demo just by itself, so I built that in too, to the dulcet tones of Selah Sue—whose last name I hope is not indicative.
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.
This is absurd. For demos of this nature people "rip off" we'll known designs all the time. Think of every corporate logo "done entirely in CSS3" or "Facebook style widget using angular.js" type demos, all of which don't bother asking permission because it's a demo. Derailing this thread because of a pedantic point about copyright protection is unproductive and distracting.
Now this is something you won't be able to buy with money.
True and simple. No agency has talent able AND willing to produce something of that quality and love in the budgets which are normally afforded to marketing campaigns...
It saddens me that i spend most of my professional time working for an agency.
> Now this is something you won't be able to buy with money. True and simple. No agency has talent able AND willing to produce something of that quality and love in the budgets which are normally afforded to marketing campaigns...
What's also of note is that the creator, Steven Wittens, was also one of the core Drupal developers. I was wondering why his name seemed familiar. Looks like genius doesn't stop working.
i feel your pain. wish more companies had the foresight to use webgl, and focus on proper graphics coders not just 'html5' when all they really mean is gradients and rounded corners.
There are so many impressive things going on here. The starting animation. Ambient occlusion. Integrating CSS 3D and WebGL. Even the achievements.
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.
Dynamically rendering at a lower resolution and then upscaling it to get a consistent 60fps is such a cool technique. The first example I ever saw of using a dynamic frame buffer in that way came in the form of WipEout HD on the PS3 back in 2008 or so[1], totally blew me away.
The header animation is the obvious treat... but the thing that sent me completely over the top is is how we camera-pan past the 3D illustration of the disc-based occlusion model during scrolling. <3 <3 <3 I'm currently making CGI-squee-noises worthy of the glory days of the SGI Magic Bus!
For everyone who cannot run this demo (old machine or on mobile) I've put up a recording of the main intro demo (there are actually a couple different ones) here:
Well, I don't know what browsers you guys are using, but on my laptop running linux and firefox 22 with an Intel Core2 Duo, my browser became completely unresponsive for some seconds and then only responded extremely jerkily until I closed the tab.
I just hope this practise doesn't spread outside of artsy demos.
On FF 23 on OS X, my quad-proc Core i7 is barely whirring the CPUs at all. Granted, this laptop does have a real GPU which I seriously doubt is the case for your C2D system.
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.
Awesome, but this almost drained my macbook battery dry, or at least that's my suspicion. It was in a background tab, but I noticed the name of the playing song had changed, even though my volume was down. Chrome should have some way to prevent a background tab from playing music while the volume is down, and web designers shouldn't expect you to have it turned up! Shouldn't there be an HTML5 hardware API for that??
[+] [-] nkoren|12 years ago|reply
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.
[+] [-] unconed|12 years ago|reply
[+] [-] slacka|12 years ago|reply
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.
[+] [-] mintplant|12 years ago|reply
[+] [-] mrspeaker|12 years ago|reply
Though even once you see it, easy to miss is the "settings" cog in the top right. EGA mode!
[+] [-] mck-|12 years ago|reply
[+] [-] devx|12 years ago|reply
[+] [-] TranceMan|12 years ago|reply
Also reload the page with the javascript console on.
[+] [-] BarkingOven|12 years ago|reply
Little badge popped up on the bottom of the screen: Achievement Unlocked - All Glory to the Hypnotoad
[+] [-] theGimp|12 years ago|reply
So the rewrite simply added a cool multiplier.
[+] [-] unknown|12 years ago|reply
[deleted]
[+] [-] skue|12 years ago|reply
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?
[+] [-] unconed|12 years ago|reply
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.
(1) http://en.wikipedia.org/wiki/Lena_Söderberg
[+] [-] marknutter|12 years ago|reply
[+] [-] Roritharr|12 years ago|reply
It saddens me that i spend most of my professional time working for an agency.
[+] [-] tripzilch|12 years ago|reply
That's why we have the demoscene ;-)
[+] [-] creamyhorror|12 years ago|reply
[+] [-] etherealG|12 years ago|reply
[+] [-] RTesla|12 years ago|reply
[+] [-] gnufied|12 years ago|reply
[+] [-] atonse|12 years ago|reply
[+] [-] makepanic|12 years ago|reply
The "cheater" achievement was a surprise.
[+] [-] SnowProblem|12 years ago|reply
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.
[+] [-] _frog|12 years ago|reply
[1]: http://insidethedigitalfoundry.blogspot.com.au/2008/09/wipeo...
[+] [-] saidajigumi|12 years ago|reply
[+] [-] lelandbatey|12 years ago|reply
http://www.youtube.com/watch?v=zjwA1VmuPnw
[+] [-] etherealG|12 years ago|reply
[+] [-] StandardFuture|12 years ago|reply
[+] [-] camus|12 years ago|reply
[+] [-] anonymous|12 years ago|reply
I just hope this practise doesn't spread outside of artsy demos.
[+] [-] saidajigumi|12 years ago|reply
[+] [-] hansjorg|12 years ago|reply
[+] [-] sillysaurus2|12 years ago|reply
[+] [-] aroman|12 years ago|reply
[+] [-] alipang|12 years ago|reply
[+] [-] sstarr|12 years ago|reply
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.
[+] [-] webXL|12 years ago|reply
[+] [-] gnerd|12 years ago|reply
[+] [-] jonespen|12 years ago|reply
[+] [-] FedericoElles|12 years ago|reply
[+] [-] jonahss|12 years ago|reply
-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?
[+] [-] spillywillly|12 years ago|reply
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!!!
[+] [-] misterjangles|12 years ago|reply
[+] [-] unknown|12 years ago|reply
[deleted]
[+] [-] christiangenco|12 years ago|reply
The story of my development career.
[+] [-] EvanYou|12 years ago|reply
[+] [-] sahrizv|12 years ago|reply