
ASCII interactive fluid animation - wlll
http://nkwiatek.com/
======
gsiener
Looks like the script was made by this guy <http://nerget.com/>

~~~
nkwiatek
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
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?

~~~
nkwiatek
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!

~~~
olliej
Hurrah! Good to see it being reused :D

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

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

~~~
nkwiatek
Changelog: added "hacker mode"

~~~
xyzzyb
Very nice :-)

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

------
agentgt
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...](http://adamgent.com/post/16714341387/making-qr-codes-even-dorkier-
with-ansi-ascii)

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

------
verelo
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
I got a similar effect just by moving the cursor around:
<http://imgur.com/5gl83>

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

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

------
EmilENewton
ROFL in the code:

    
    
        // forget about IE, just forget about it
    

I just thought that was hilarious.

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

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

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

------
arraypad
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
Conway's game of life?

~~~
arraypad
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>

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

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

~~~
nkwiatek
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.

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

~~~
nkwiatek
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.

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

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

------
amatheus
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?

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

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

~~~
olliej
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

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

~~~
andys627
Great story. Compelling and rich.

------
shmerl
Nice work.

------
djtriptych
I miss junior high school.

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

~~~
djtriptych
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.

~~~
rooshdi
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.

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

~~~
kruhft
<http://nkwiatek.com/fluid.solver.js>

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

Looks readable.

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

~~~
olliej
And then there's my actual simulator -- who needs comments? :D _facepalm_

