Live data from Hacker News

Web GL Ocean Simulation

david.li

11–20 of 138 posts

Re: Web GL Ocean Simulation

#11

> Your browser does not appear to support the required technologies. It would've been nice to have an 'I don't care, proceed anyway' button. The check excludes Safari 7, which runs the demo just as well as Chrome. http://jsfiddle.net/bYHfh ^ removes the hasWebGLSupport() invocation. Very nice demo, though!

I am on latest chrome on win8, I still get that message. I guess it needs something more powerful than the onboard GPU I have.

Re: Web GL Ocean Simulation

#14

The code is quite cool to look at. Love seeing the extensive use of matrices and mathematics to create such a beautiful and mesmerizing display. If anyone is interested in playing around with it, I threw it up at JSFiddle here: http://jsfiddle.net/zyAzg/ Excellent demo.

I wonder if it was all handwritten. Esp. functions like invertMatrix or premultiplyMatrix. Or what he used to generate the code.

I once used WolframAlpha to get me some complicated formulas and wrote a custom WA-plaintext-output-to-C translator for that output to use it in my code. Here is the script: https://github.com/albertz/helpers/blob/master/wolframalpha_...

Example input: http://www.wolframalpha.com/input/?i=solve+a*x_1%5E3+%2B+b*x...

Output: s->a = ((x1 + x2 - 2.) / pow(x2 - x1, 3.)); s->b = ((- (((x1 + x2 - 2.) * pow(x1, 2.)) / pow(x2 - x1, 3.)) - ((4. * x2 * (x1 + x2 - 2.) * x1) / pow(x2 - x1, 3.)) + ((6. * (x1 + x2 - 2.) * x1) / pow(x2 - x1, 3.)) - ((7. * pow(x2, 2.) * (x1 + x2 - 2.)) / pow(x2 - x1, 3.)) + ((6. * x2 * (x1 + x2 - 2.)) / pow(x2 - x1, 3.)) - 1.) / (4. * x2 - 4.)); s->c = (1. / 2.) * ((((x1 + x2 - 2.) * pow(x1, 2.)) / pow(x2 - x1, 3.)) + ((4. * x2 * (x1 + x2 - 2.) * x1) / pow(x2 - x1, 3.)) - ((6. * (x1 + x2 - 2.) * x1) / pow(x2 - x1, 3.)) + ((pow(x2, 2.) * (x1 + x2 - 2.)) / pow(x2 - x1, 3.)) - ((6. * x2 * (x1 + x2 - 2.)) / pow(x2 - x1, 3.)) - ((4. * (- (((x1 + x2 - 2.) * pow(x1, 2.)) / pow(x2 - x1, 3.)) - ((4. * x2 * (x1 + x2 - 2.) * x1) / pow(x2 - x1, 3.)) + ((6. * (x1 + x2 - 2.) * x1) / pow(x2 - x1, 3.)) - ((7. * pow(x2, 2.) * (x1 + x2 - 2.)) / pow(x2 - x1, 3.)) + ((6. * x2 * (x1 + x2 - 2.)) / pow(x2 - x1, 3.)) - 1.)) / (4. * x2 - 4.)) + 1.); s->d = (1. / 4.) * ((((x1 + x2 - 2.) * pow(x1, 3.)) / pow(x2 - x1, 3.)) - ((4. * x2 * (x1 + x2 - 2.) * pow(x1, 2.)) / pow(x2 - x1, 3.)) - (((x1 + x2 - 2.) * pow(x1, 2.)) / pow(x2 - x1, 3.)) - ((pow(x2, 2.) * (x1 + x2 - 2.) * x1) / pow(x2 - x1, 3.)) + ((2. * x2 * (x1 + x2 - 2.) * x1) / pow(x2 - x1, 3.)) + ((6. * (x1 + x2 - 2.) * x1) / pow(x2 - x1, 3.)) + x1 - ((pow(x2, 2.) * (x1 + x2 - 2.)) / pow(x2 - x1, 3.)) + ((6. * x2 * (x1 + x2 - 2.)) / pow(x2 - x1, 3.)) + ((4. * (- (((x1 + x2 - 2.) * pow(x1, 2.)) / pow(x2 - x1, 3.)) - ((4. * x2 * (x1 + x2 - 2.) * x1) / pow(x2 - x1, 3.)) + ((6. * (x1 + x2 - 2.) * x1) / pow(x2 - x1, 3.)) - ((7. * pow(x2, 2.) * (x1 + x2 - 2.)) / pow(x2 - x1, 3.)) + ((6. * x2 * (x1 + x2 - 2.)) / pow(x2 - x1, 3.)) - 1.)) / (4. * x2 - 4.)) + 1.);

(https://github.com/albertz/music-player/blob/master/ffmpeg_p... SmoothClipCalc::setX)

Re: Web GL Ocean Simulation

#15
post #5

The code is quite cool to look at. Love seeing the extensive use of matrices and mathematics to create such a beautiful and mesmerizing display. If anyone is interested in playing around with it, I threw it up at JSFiddle here: http://jsfiddle.net/zyAzg/ Excellent demo.

Great demo, well written code. Though reading through it also highlights that JS is not a great language for linear algebra. But I don't think anyone is really suggesting otherwise.

"JS is not a great language for linear algebra." what does that even mean? It's a general purpose language. It all boils down to how you want to use it, like any other general purpose language. A lot of times in cases like this, people choose not to make it look pretty and easy to read to gain performance. This simulation is very CPU intensive, trying to have pretty code and speed is going to be tough.

Re: Web GL Ocean Simulation

#16

> Your browser does not appear to support the required technologies. It would've been nice to have an 'I don't care, proceed anyway' button. The check excludes Safari 7, which runs the demo just as well as Chrome. http://jsfiddle.net/bYHfh ^ removes the hasWebGLSupport() invocation. Very nice demo, though!

Agreed, I get the message, but your link leads to a very cool demo, on Firefox 17.

Re: Web GL Ocean Simulation

#17
Honestly very impressive, idea: if made into fullscreen (i.e. without edges visible) and with an added horizon and an emulated sun-rise/sun-set this would make for totally enthralling watching - the "live'ness" of it makes it a thousand times more interesting to the eye than images or pre-recorded video material.

Re: Web GL Ocean Simulation

#18
This runs at about 7 frames per second in Chrome on my 10-month-old 13" Macbook Pro at work.

Are people with better graphics cards seeing 60 (or even 30) fps? I'd love to be able to see this in all its glory.

Re: Web GL Ocean Simulation

#19
post #5

Earlier quoted context omitted.

Great demo, well written code. Though reading through it also highlights that JS is not a great language for linear algebra. But I don't think anyone is really suggesting otherwise.

"JS is not a great language for linear algebra." what does that even mean? It's a general purpose language. It all boils down to how you want to use it, like any other general purpose language. A lot of times in cases like this, people choose not to make it look pretty and easy to read to gain performance. This simulation is very CPU intensive, trying to have pretty code and speed is going to be tough.

Look into something like Octave, where matrices are first-order data types, and you'll know exactly what he means.
Post reply on HN