Lights

http://lights.elliegoulding.com/?

by citricsquid • 15 years ago

567 91 15 years ago

lights.elliegoulding.com

agravier• 15 years ago

It's pretty, but it systematically freezes about 2 minutes in on my Mac with Chrome 14.0.835.202.

Also, if it's laggy, try resizing the window.

culturestate• 15 years ago

No freezes here. Core i7 MBP running 10.7.2 and Safari 5.1.1. This is an absolutely gorgeous demo.

matdwyer• 15 years ago

Not freezing on me. Wow, very interesting.

I didn't even realize I could control where it was going till half way through. Had a blast trying to avoid the spotlights. Nice job!

mistertrotsky• 15 years ago

Really well-done! This impresses me a lot more than dropping a sphere in a box of water.

nixarn• 15 years ago

Says it doesn't support my browser :S Got a new iMac with OSX Lion and tried with with both Chrome (15 beta) and Safari.

lylejohnson• 15 years ago

Chrome 16.0.904.0 dev is what I'm running on my MacBook, and it works fine there. It wasn't working for me with Safari either until I saw the tip in SnowLprd's comment about enabling WebGL.

toshiroy• 15 years ago

I'm using Chrome 14 on Lion and it works fine.

ck24• 15 years ago

It's amazing. At first I was like - oh shoot, how did they license the music but then I was "oh".

Try banking hard right (or left) and then when the sky starts to go technocolor pull up hard. Wow.

Works great in Firefox 7, unless I go full width (2048x1152).

Chrome seems to spaz out if I try to change the window size.

Opera fans with full OpenGL drivers can now use WebGL too http://my.opera.com/desktopteam/blog/2011/10/13/introducing-...

ericb• 15 years ago

> At first I was like - oh shoot, how did they license the music but then I was "oh".

What does this mean?

ck24• 15 years ago

It's the music artist's website - I didn't realize it at first.

tonakai• 15 years ago

I tried with Opera Next (12 alpha) but it was stuck in loading phase, and the lights were a bit slower than recent chrome beta on the loading screen.

gourneau• 15 years ago

Wow, the last few seconds of the video are so beautiful.

SnowLprd• 15 years ago

For those on Mac OS X 10.7 with Safari and who are seeing a message saying that your browser doesn't support WebGL, that's only because WebGL isn't enabled by default. You can turn it on by first going to Safari Preferences > Advanced and then checking the box labeled "Show Develop menu in menu bar". Close preferences, and then under the "Develop" menu, choose "Enable WebGL". If you go back to the "Lights" page now, you should be now be able to check it out!

Hoff• 15 years ago

The site also works with Safari running 10.6 with WebGL enabled, based on a test with 5.1.1.

DanielRibeiro• 15 years ago

Guess it did not get enough traction yesterday: http://news.ycombinator.com/item?id=3102979

nbashaw• 15 years ago

It's always interesting to me what makes it up and what never catches on. Apparently more HN people are intrigued by the mere title "lights" than a title with more explanation.

webspiderus• 15 years ago

it was actually on the front page before it got edited to simply "lights" - the previous title was similar to the earlier submission.

skeletonjelly5• 15 years ago

I'm sure timing counts as well. Lunch breaks and all.

moe• 15 years ago

Beautiful, but "interactive" seems a bit of an overstatement here. Unless I missed some interactivity other than popping those bubbles and steering.

melvinram• 15 years ago

Moving your mouse would move the orientation of the light that was travelling across the landscape.

cshenoy• 15 years ago

From the landing page:

"Click to interact with the environment, keep the button pressed to fly faster."

Try clicking at different speeds and on different elements and you'll see the interactivity (works better with an external mouse). Contrast it to sitting back and watching it go.

spot3• 15 years ago

if you want real interaction: http://sp0t.org/videoriot

DrCatbox• 15 years ago

WebGL is a helluva drug.

Have they solved or answered the security considerations from letting a website issue graphics commands?

spot3• 15 years ago

yes: http://hacks.mozilla.org/2011/06/cross-domain-webgl-textures...

unless you mean something else...

nitrogen• 15 years ago

There were also concerns about running arbitrary shader code on the GPU, which has DMA access (Yes, Direct Memory Access access is a bit redundant...) to system memory, as well as the framebuffer which is in GPU memory.

taylorlb• 15 years ago

Really cool. I get that the Twitter usernames come in with the lyric "they're calling me" but it might be more sticky if the usernames show up sooner. Not sure everyone would want to keep flying around for so long.

DanBC• 15 years ago

Really nice. But whenever I see stuff like this I always wonder if it fits into less than 4k; some of that demo-scene stuff is amazing.

parfe3• 15 years ago

I think I miss the point. Do I control anything happening with the music or in the scene? This link reminds me of a Winamp visualization from 10 years ago, but now I can fly through it, in a web browser.

nickfrost2• 15 years ago

Seriously? You control the scene. The music is the ambiance that gives the scene life. Unless you can build something better, I'd say be impressed.

parfe3• 15 years ago

Again, I think I must be missing something. If you hit Play and don't touch the mouse you see the same exact animations as if you flew in a big arc at full speed.

You control nothing more than a camera angle with a glowing avatar.

voidfiles• 15 years ago

Feels static compared to what the arcade fire did with google.

http://thewildernessdowntown.com/

The web is a new medium, and browsers can be more expressive then pretty viz. Push the boundaries with this stuff don't just do your radio show on camera.

droz• 15 years ago

Every change of medium results in the old being shoe horned into the new until people figure out the new for what it can be.

navs• 15 years ago

I don't care much for the track but as the environment pulsated, I found myself smiling. Simply amazing.

Running perfectly on MacBook Pro 5th Gen with Google Chrome Canary (16.0.x.x).

citricsquid• 15 years ago

So uh, not to cause a fuss but why was the title edited? I can understand removing the word "impressive" as that is an opinion, but removing the explanation (interactive html5 / webgl presentation built with threejs) seems silly? How are users who casually browse news.yc supposed to look at this and have any clue what they're clicking? Titles that are descriptive should be more important than... well I can't think why it was changed to just "lights"? Surely the title containing some sort of description about the content is a courtesy that users would appreciate.

(For reference the original title was "Lights -- impressive html5 / webgl presentation built with threejs" and is now "Lights")

watty• 15 years ago

I agree - the only impressive thing about this is the technology.

jonathanb• 15 years ago

Even that's debatable.

nicklovescode• 15 years ago

I'd say the demo itself is incredible. It only became better when I realized it was WebGL

nickfrost2• 15 years ago

What else is supposed to be impressive about this?

spitfire2• 15 years ago

I'd say the technology is the least impressive part of it. It feels like 303/acme from 1996. Only on gigahertz machinery instead of a 486. and using hardware acceleration for very basic 3d effects, rather than software generated texture/env mapping.

But hey, kids these days.

WalterGR• 15 years ago

How are users who casually browse news.yc supposed to look at this and have any clue what they're clicking?

Since there's no way to hide these links with uninformative titles, the no-addon solution is to get them to display as "visited". So I click them and then immediately close the tab.

Website owners: Sorry for throwing off your stats.

tsunamifury• 15 years ago

FYI, the Bassnectar remix of this song is very good.

skeletonjelly5• 15 years ago

It's amazing. Great build.

For the lazy:

http://www.youtube.com/watch?v=Imixg3jrJS8

morsch• 15 years ago

  Unfortunately, this video is not available in Germany because it may contain music for which GEMA has not granted the respective music rights.
  Sorry about that.

God damnit.

mikeknoop• 15 years ago

http://soundcloud.com/bassnectar/ellie-goulding-lights-bassn...

SeoxyS• 15 years ago

That's a matter of taste & opinion, but personally I find the original to be much better. Not a huge fan of dubstep, I must say.

jahmed• 15 years ago

I forget that the remix is in fact just a remix

RyanMcGreal• 15 years ago

Not working for me on FF 7.0.1 or Chrome 14.0.835.202 on Windows XP. :(

sandieman2• 15 years ago

anyone know the developer(s) behind this?

sandieman2• 15 years ago

and to answer my own question: http://helloenjoy.com/ looks like dev team behind it.

Do some other cool work in webgl: http://helloracer.com/webgl/ http://helloenjoy.com/helloflower/

v21• 15 years ago

Yup, the main guy behind it is Carlos Alloa. He was also the guy behind Papervision, which did 3D in Flash years ago. And is also just a lovely guy.

ck24• 15 years ago

Try changing LIGHTS.releaseBuild = true to false.

Interesting debug data.

This must have been a beast to build, sync and debug.

I'd like to see the author post a "making of" entry.

skeletonjelly5• 15 years ago

I didn't get a lot of debug data (only Camera position written to console) but I did get a `Uncaught TypeError: Cannot call method 'update' of undefined` every frame. Can I ask what I was meant to see?

ck24• 15 years ago

http://img812.imageshack.us/img812/640/lightsdebug.png

Go into firebug and set a breakpoint after line 112 in Lights.js and reload the page.

Then when it hits the breakpoint, change LIGHTS.buildRelease=false; in the console.

You have to do it right at that point because it changes other initializations.

It shows a mini-heads-up display with FPS and other info and the console will output what "phase" the demo is at.

Someone very talented wrote this, it would probably take me a year from scratch!

At least listening to this music over and over wouldn't be too bad but at the 1000th time I might go insane.

Looks like it's a coder from the UK, nickname "C4RL05" aka Carlos Ulloa: http://twitter.com/#!/c4rl05

ajsharp• 15 years ago

Rad.

kruhft• 15 years ago

Crashed my browser, Linux Firefox 7.0.1...

beambot• 15 years ago

Didn't just crash my browser... crashed + rebooted the entire machine! Ubuntu 10.04 64-bit, Chrome.

gzur• 15 years ago

Same here. Windows 7 Pro x86, Chrome.

flink• 15 years ago

Wow, it works for me with FF 7.0.1 and nouveau on Linux. A little laggy when I go fullscreen, sure but the last time I tried viewing WebGL FF told me that my 3D setup wasn't supported.

Anyhow, cool presentation. It's impressive to see how WebGL is progressing.

hm2k• 15 years ago

This really impressed me.

jpulgarin• 15 years ago

Doesn't work on Chromium 12.0 in Ubuntu 11.04

5hoom2• 15 years ago

WebGL is going to be huge very soon.

Developers that are fluent with the technology are going to be in high demand once more people know what you can do & stuff like this is what everyone wants.

Time to get reading!

theroo• 15 years ago

Honestly, why would they be in more demand than Flash developers?

keen2• 15 years ago

He didn't say they would be.

But to answer your question: mobile devices that don't support Flash.

ranza• 15 years ago

I love that none of the js code is minimized! Great use of Mr. Doob's Three.js library

For reference:

http://lights.elliegoulding.com/js/Config.js

http://lights.elliegoulding.com/js/Lights.js

skeletonjelly5• 15 years ago

Thanks for linking to them. They make for a great code reference. Makes me wish I was more motivated about learning Processing.

marcamillion• 15 years ago

This is SURPRISINGLY mesmerizing. Something about the music and the animation and interaction just hooked me.

Plus the fact that it wasn't in Flash was a major plus. But not sure what it was...but had me going for a while.

alanh2• 15 years ago

Plus the fact that it wasn't in Flash was a major plus.

On a lame Mac Mini, I noticed my CPU was only at ~20%. No jitters detected. Very cool.

Laptop users should enjoy the lack of a noisy fan kicking in 30 seconds into it!

alanh2• 15 years ago

In case anyone is wondering: In Internet Explorer (IE9 is the only desktop browser to not support WebGL, or will be once Opera 12 ships [1]), you get an error message that WebGL was not detected [2].

[1]: Source – http://caniuse.com/#feat=webgl

[2]: Screenshot – http://cl.ly/0b3W0p251C0A2t2X2934

kevinchen• 15 years ago

Did this remind anybody else of a cell membrane with proteins and stuff attached?

jklipton• 15 years ago

This is awesome.

rymedia• 15 years ago

This looked effing amazing on my 27inch monitor

dangrossman• 15 years ago

I wish the visualizations in my media player looked anywhere as good as that.

filthylucre• 15 years ago

I thought it was great stuff.

aiurtourist• 15 years ago

If you're interested in learning WebGL, a fantastic resource is http://learningwebgl.com/ — especially the weekly summary of "WebGL Around the Web." (I have no affiliation — I just found it useful.)

tomlin• 15 years ago

I am currently working on a project that indexes beats and sounds to a .json object tied with a JS library that dispatches events based on the timing of a media file associated.

Eventually, it would be nice to have all forms of equipment taking queues from the events dispatched. ie, stage equipment, lights, etc.

This example serves to show that these types of applications are coming soon.

tambourine_man• 15 years ago

Frame by frame animation here.

ATI Radeon X1600 256 MB, 10.7.2

trurl123• 15 years ago

Does not work. I try to use Firefox 7 and Chrome.

Lights

Related Stories