ASCII interactive fluid animation

http://nkwiatek.com/

by wlll • 14 years ago

663 66 14 years ago

nkwiatek.com

djtriptych3• 14 years ago

I miss junior high school.

verelo4• 14 years ago

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

djtriptych3• 14 years ago

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.

verelo4• 14 years ago

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.

Alind• 14 years ago

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

kruhft• 14 years ago

http://nkwiatek.com/fluid.solver.js

http://nkwiatek.com/fluid.display.ascii.js

Looks readable.

rufwork• 14 years ago

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. ;^)

acheron• 14 years ago

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

gue5t• 14 years ago

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

agentgt• 14 years ago

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.

nyrb• 14 years ago

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

gdubs• 14 years ago

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 ;)

nkwiatek6• 14 years ago

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.

yread• 14 years ago

Yeah i got ~2fps on WP7.5 omnia7

mihaifm• 14 years ago

i7 is at 10% :P

WhohReally• 14 years ago

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

vacri• 14 years ago

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

LefterisJP• 14 years ago

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

gsiener• 14 years ago

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

nkwiatek6• 14 years ago

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.

wdewind• 14 years ago

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?

sehugg• 14 years ago

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.

functionform• 14 years ago

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

andys627• 14 years ago

Great story. Compelling and rich.

gregfjohnson• 14 years ago

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

xyzzyb3• 14 years ago

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

logic• 14 years ago

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/)

zupreme• 14 years ago

confirmed!

nkwiatek6• 14 years ago

Changelog: added "hacker mode"

shmerl2• 14 years ago

Awesome!-)

xyzzyb3• 14 years ago

Very nice :-)

patrickakpala• 14 years ago

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

xyzzyb3• 14 years ago

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.

leoedin• 14 years ago

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/...

forgotpassagain• 14 years ago

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

verelo4• 14 years ago

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

MaysonL• 14 years ago

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

yekim• 14 years ago

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

deepkut• 14 years ago

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.

shmerl2• 14 years ago

Nice work.

EmilENewton• 14 years ago

ROFL in the code:

    // forget about IE, just forget about it

I just thought that was hilarious.

thristian• 14 years ago

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.

esrauch• 14 years ago

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;

Anm• 14 years ago

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/

arraypad2• 14 years ago

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?

martincmartin• 14 years ago

Conway's game of life?

arraypad2• 14 years ago

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

apu• 14 years ago

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

olliej3• 14 years ago

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

epaga• 14 years ago

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

amatheus• 14 years ago

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?

reconor• 14 years ago

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/

nkwiatek6• 14 years ago

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

ASCII interactive fluid animation

Related Stories