ASCII interactive fluid animation | Hacker News Reader

ASCII interactive fluid animation

nkwiatek.com

663 pointswlll66 comments

Looks like the script was made by this guy http://nerget.com/

Yes, absolutely, much deserved credit goes to Oliver Hunt at nerget.com for implementing the equations discussed in that amazing Alias|Wavefront paper (by Jos Stam) in javascript. His work was very helpful for me and he is very much worthy of your attention.

Can you elaborate on what Oliver Hunt did and what you added to it? Seems like he wrote the original and you converted to ASCII output?

That's right. Oliver Hunt wrote a full simulator and released it under MIT, which was so perfect as I was just starting to look into fluid dynamics myself, for what ended up being this website. I used his physics calculator component almost verbatim, and wrote the display/ui stuff I needed around it as though I were using a library.

I've done more serious touching of it, for performance reasons -- taking mults and invariants out of loops, or memoizing for example -- but I always ended up either breaking it or making it slower, so for now I've settled with leaving it alone!

Hurrah! Good to see it being reused :D

Link to the paper:

http://www.dgp.toronto.edu/people/stam/reality/Research/pdf/...

I was surprised to see not just equations but actual C code -- a pretty readable paper.

The effect is neat, but one minor technical issue: the page tries to ask for a monospaced font by using the CSS:

    font-family: "Courier New";

Not everybody has Courier New installed, and some people who have it installed have disabled it. If the browser can't find a named font, it falls back on the default, which is usually proportional Instead, if you say:

    font-family: monospace;

...that's less characters to type, and it guarantees you'll get some kind of monospaced font, no matter what the user has available.

He probably prefers Courier New. Browsers will fallback to the next in the list if it can't use the given font, he probably wants font-family: "Courier New", monospace;

Switching the background-color to black and the text color to green results in a really cool looking display.

I'll admit, the first thing I wanted to know what what this would look like in green monochrome. (ala jwz, http://www.jwz.org/)

confirmed!

Changelog: added "hacker mode"

Awesome!-)

Very nice :-)

truley awesome in green how did you do this? that's the first thing that came to my mind

In Chrome (any other browser with developer tools would be able to do this as well) I just right clicked on the animation area and clicked "Inspect Element". Doing that exposes the developer tools which includes the ability to make live edits to CSS. The animation window is, very nicely, contained in a single element "p#fluid". From the developer tools it's a simple matter to change the color declaration from red to green and add a new "background-color: black" property.

Yep, also it's easier in firefox but you have to install Firebug :/

Nope, no need to install Firebug, as of Firefox 10. Just right-click -> Inspect Element -> Style, and edit away!

This is pretty cool! It's worth saying that the paper [1] referenced in the script source is also really quite interesting.

[1]: http://www.dgp.toronto.edu/people/stam/reality/Research/pdf/...

Thanks for pointing it out, i'm bleeding out the fingertips wanting to play with fluid physics now.

I'd pay $5 for this if it were a screen saver and didn't suck up too much CPU.

If you do end up making that, shoot me a message.

I was thinking about doing some ASCII animation with QR codes to actively see/test when the QR code becomes unscanable. I picked ASCII/ANSI cause I'm not good with graphics: http://adamgent.com/post/16714341387/making-qr-codes-even-do...

I might have to do it now that this guy has inspired me.

If you click (i love that clicking has an impact) for long enough you can make the whole image fill up with the same character (and the waves dont seem to settle down)

Very cool however!

http://i.imgur.com/7V2p0.png

I got a similar effect just by moving the cursor around: http://imgur.com/5gl83

Love this. I approve of anything that uses the old fashioned IBM "extended ASCII" characters from code page 437.

CP437 is such a classic indeed. I still find it more effective for viewing large amounts of raw data than hex.

ROFL in the code:

    // forget about IE, just forget about it

I just thought that was hilarious.

First off, extreme kudos to the original developer, and to nerget.com for implementing the algorithm. I'm curious how the display seems to be able to maintain a sense of a gridspace inside of a single text "p" tag. I need to look into that a bit more.

Secondly, I couldn't resist playing around with this a bit. I added a few UI components - allowing the user to change the ascii characters used, the color of the text, removes the dialog box after a period of time, and binding the clear feature to the space bar. All of which I felt like made it a little more fun for me to play with in full-screen mode.

Here is a link to my modified version for fun: http://www.johnmick.net/fluids/

Awesome! I love how you kept the SICP quote intact; that is essential.

Gotta say, I just spent 3-5 minutes playing with it. Very nice, very cool. Good job!

Very nice. I've used a similar effect for a few years on my homepage - http://arpad.co.uk - albeit with a far more primitive algorithm ;)

Annoyingly I didn't make a note of where I found the algorithm and I can't find the source now, but I remember being struck by its simplicity and deciding I had to find a use for it.

The meat of it is:

    z = (sum of surrounding cells) - z;
    z -= z >> 5;

Does anybody recognise it?

Conway's game of life?

Certainly along similar lines ;)

Sod's law, 10 minutes after posting I think I've found it, http://freespace.virgin.net/hugo.elias/graphics/x_water.htm

Blatant self-promotion: Here's my similar anim using Canvas. Since my animation uses not just characters, but color, I chose canvas over monospace text. In retrospect, its performance isn't where I would like it, but it does run on mobile. Admittedly, this one isn't a fluid sim (nor meant to be) or interactive (yet). http://www.andrew-n-marshall.com/

This is really cool, but it is intensely consuming the 80% of my cpu resource (osx 10.7.3 intel dual core & 8gb ram).

Agreed – this is very cool. Probably using so much CPU because it actually updates a paragraph tag in the DOM with all of those characters. I bet a canvas tag with text fills would solve the speed problem. But then, the page would not be SEO friendly ;)

Canvas actually gave me disappointing results, believe it or not. The text rendering wasn't as fast or as pleasantly rendered compared to just using the DOM. It didn't seem worth it to me to try and optimize a canvas rendering routine, although I could have been overly naive with my initial tests.

Did you tried creating a imageData for every single character in the "ASCII gradient" and then using putImageData( imageData, x, y )?

First of all, I am a big fan of your work Mr. Doob.

Secondly, no! That's a good idea, I'll have to try it out.

Yeah i got ~2fps on WP7.5 omnia7

i7 is at 10% :P

My P4 3Ghz with HT is about 70% :P

running about 25% on a 2.6GHz laptop i7 here. gnome/firefox

This is simply amazing. It seems like a beautiful work of art in some strange new genre.

Very reminiscent of Dwarf Fortress, except that it doesn't bring my machine to a crawl.

It's great. I wonder if it would be possible to switch colors? You would start with green for example, then change to red and the fluids start to mix the colors?

Anything that uses ASCII art in code, let alone interactively wins my heart the moment I set eyes on it. Big thumbs up! :)

I wrote a more advanced fluid solver a few years ago -- maybe I should see if it's easy to port to JS...

Do it!!! I've always intended to extend the simulator to support obstacles and directional inputs but never got round to it.

We need more things like this in JS :D

Minimalist, sexy, and original. Very nice, very nice.

Great story. Compelling and rich.

Nice work.

I miss junior high school.

haha yeah, i love this but i have to wonder what its practical application is.

I love it 100%. I just miss feeling like it was worthwhile work. Made me wistful for simpler times.

Apparently it pissed off hacker news for me to say so judging by the downvotes but I'm leaving it.

It's very cool stuff.

Yea, don't sweat it. The harmony of art and technology is definitely cool stuff and even though there may not be much practical uses for this right now, there may be potential down the line if utilized in the right context. Wish there was more of this sort of artsy hackery on HN, as I think there are great possibilities here.

yeah i am judging by the down votes i didnt get that across right, either...oh well. Its cool, no doubt, i'd just love to see a cool use of this besides the few seconds of entertainment i got from it. I'm sure someone will come up with something.

I think it's great.

And I don't think all programming has to have an immediate practical application. In fact I wish more of us were doing stuff like this. Practically every 30-something hacker I know was doing graphics demos in the early 90s.

I guess people thought I was saying any 13 year old could do this or something.

* shrug

actually thats a great point, i feel like when i first started programming (c64 - im not /that old/) i was always playing with sprites and graphical outputs...however something happened and it all became about data and forms.
People should do more stuff like this, maybe it'll open up our minds to greater possibilities.

+1.. I too, started with c64 and feel like I wouldn't be where I am at today if it wasn't for that. I use to take existing games and play with the graphics just to learn.

I was thinking exactly this just last week. I started with the C64, making simple demos just for the sheer love of it all, but then I never went anywhere with it. Then things got complicated enough that "fun" just had too much overhead.
As of last week, I've been playing with Pharo Smalltalk, of all things. So far, the combination of a "live" and "manipulable" gui library like Morphic and image-based environment has been great.
I can directly modify things and see the results, which makes it fun again, and I can save my entire project state, open windows and running demos and all, and resume it later when I have time. It means I can do something with half an hour of time, which is often all I have between work and kids. I just pop open the image and I'm back where I was, and I can write a few methods or just play with the objects and save again. Otherwise, it seems like it takes me at least half an hour just to start up emacs or eclipse, load all my project files, start an interpreter, get my brain back together, etc., etc.
It'll never be useful for my day job, but it makes writing silly little visualizations of A* or cellular automata actually fun.

For what it's worth, I don't really think that your down votes are because other people misinterpreted what you were saying; rather, you didn't really say anything. In subsequent comments you've revealed what you meant, and it's interesting.

This is really cool. Just cannot stop playing with it. Wondering if he could share his code.?

http://nkwiatek.com/fluid.solver.js
http://nkwiatek.com/fluid.display.ascii.js
Looks readable.

Wow, great whitespace, comments written for humans to read & not simply check off (eg, no "FluidDisplayASCII fluidly displays ASCII" laziness), and TODO markers. Restores a little faith in the world. ;^)

And then there's my actual simulator -- who needs comments? :D facepalm

Reply on news.ycombinator.com