That is so beautiful. The underlying algorithm is perlin noise (see <a href="https://en.wikipedia.org/wiki/Perlin_noise" rel="nofollow">https://en.wikipedia.org/wiki/Perlin_noise</a>) and it's over 40 years old!<p>It's such a fabulous tool as the generated images can be used for effects like glass/ice displacements, cheap water-like effects, but you can also generate terrains from it or just cool visual effects that benefit from random patterns. The core property to me is that it feels very organic/natural.<p>This was such a common tool in Flash AS3 back in the days to create stunning effects, games and such. I'm not active in building visual stuff like that anymore but I bet it's still very common in this field, because why not?
I think it's technically Simplex noise, but yes also developed by Perlin.
P5JS makes it very easy to start playing around with.<p><a href="https://p5js.org/reference/p5/noise/" rel="nofollow">https://p5js.org/reference/p5/noise/</a>
maybe there is more going on here but it's relatively easy to make a text post processing shader and apply it to anything, 3d scene, a video, etc...<p><a href="https://post-processing.tresjs.org/guide/pmndrs/ascii" rel="nofollow">https://post-processing.tresjs.org/guide/pmndrs/ascii</a><p><a href="https://forum.babylonjs.com/t/ascii-shader-using-glsl-postprocessing/56666" rel="nofollow">https://forum.babylonjs.com/t/ascii-shader-using-glsl-postpr...</a><p><a href="https://threejs.org/examples/?q=ascii#webgl_effects_ascii" rel="nofollow">https://threejs.org/examples/?q=ascii#webgl_effects_ascii</a><p><a href="https://fwdapps.net/l/asci/" rel="nofollow">https://fwdapps.net/l/asci/</a><p><a href="https://codesandbox.io/p/sandbox/ascii-postprocessing-n628p8?file=%2Fsrc%2Findex.js" rel="nofollow">https://codesandbox.io/p/sandbox/ascii-postprocessing-n628p8...</a><p><a href="https://www.youtube.com/watch?v=NxeRcnLr0ko" rel="nofollow">https://www.youtube.com/watch?v=NxeRcnLr0ko</a>
Thematically related:
<a href="https://play.ertdfgcvb.xyz/#/src/demos/chromaspiral" rel="nofollow">https://play.ertdfgcvb.xyz/#/src/demos/chromaspiral</a>
Given the name, I expected more actual ASCII characters/options and selectable text. Visually appealing and fun to play with, however.
This is cool... But I feel like having different color/brightness for each symbol kinda defeats the purpose of it being ASCII when the symbols only correspond to different intensities anyway.
Yes, but it is "ascii art" and hence artistic freedom.
Yeah, with all these colors, any single character should be enough.
This is beautiful, I saw a similar tool weeks ago: <a href="https://ascii.0xbalance.xyz" rel="nofollow">https://ascii.0xbalance.xyz</a>
Very cool, found myself just staring at it for a few minutes! Thanks for sharing!
This looks like a good way to model "satellite-view clouds" where you render "the full atmosphere". I don't think it would work well when modeling "ground-view clouds" however. I have been looking for a good (fast) algorithm for doing that, would appreciate it if people have pointers for that.
I had a similar effect for a C program I wrote a long time ago (I think 2007?). Here's a video:
<a href="https://www.youtube.com/watch?v=H4j-BkwMB20" rel="nofollow">https://www.youtube.com/watch?v=H4j-BkwMB20</a><p>and the code:
<a href="https://github.com/kristopolous/ascsee" rel="nofollow">https://github.com/kristopolous/ascsee</a><p>I just updated it so it compiles on modern systems.<p>I also found the original version if you like being an archaeologist: <a href="https://9ol.es/tmp/gol.c" rel="nofollow">https://9ol.es/tmp/gol.c</a>
Super fun! I was exploring this type of thing as one of my first experiments with Claude Code early last year.<p><a href="https://github.com/pj4533/asciidelic" rel="nofollow">https://github.com/pj4533/asciidelic</a>
<a href="https://asciidelic.com" rel="nofollow">https://asciidelic.com</a><p>I should go back and add mobile support, maybe fullscreen support.
cool. but if it's really about ASCII then I expect to have possibility to copy/paste a cloudy sky in my text editor ;-P
Nice. This looks similar to what I have implemented: <a href="https://www.npmjs.com/package/asciiground" rel="nofollow">https://www.npmjs.com/package/asciiground</a>, but I intended it more as a library where a user could program their own patterns by extending the existing systems. Sadly, my GitHub account got flagged, so there is no way to access the repository or GitHub pages for the demo at the moment.
It has very little to do with ASCII but cool nonetheless.
Now I want this on a digital artframe in my livingroom.
Spent longer than I'd like to admit trying to recreate the Balatro background effect...
You can render only single characters. First you need to change the HTML "max" attribute of <input> to 1.1 in the "Glyph Thresholds". And set 0.0 for the desired characters and the characters above. Set 1.1 for the remaining characters.<p>For example, if you only want the dash, set the dot and dash to 0.0. Then set 1.1 for the plus, ring, and cross characters.
Really like it, only thing some of the cells can be jittery and rapidly switch back and forth between two symbols, making for an unpleasant effect, maybe there is a way to smooth this?
and if you ctrl+- like 7 times youre back to showing clear pixels. If you set cell size to 4, then 5 times is enough :)
Just throwing a HELL YES <with a kung fu punch> out there for this. Nice work. I've been trying to integrate a live ascii video feature for a while now and the subtle detail on this is really inspiring.
Similar Perlin-based effect with mouse reactivity & audio:<p><a href="https://srdjan.pro" rel="nofollow">https://srdjan.pro</a>
Well thats pretty cool!
This is a genuine work of art. I don't care how impractical it is, it's utterly beautiful, and a joy to play with.
Trippy!<p><pre><code> browsh https://caidan.dev/portfolio/ascii_clouds/</code></pre>
Neat. It'd be more "ASCII" if it used 8x16 pixel (but right extended to 9x16) characters in 80:133 width:height aspect ratio since 80x25 characters at 720x400 on 4:3 results in 80:133 pixels. An arbitrary sized canvas is cool so long as the aspect ratio is preserved.<p>The infamous MCGA/"VGA" mode 13h had pixels with an aspect ratio 6:5, while 320 x 240 Mode X was square (1:1).<p>I still remember the unchained offset calculation for the memory offset for pixel memory access before the era of U and V pipes and many optimizing compiler passes:<p><pre><code> unsigned short offset = (((y << 2) + y) << 6) + x;
unsigned char far *ptr = (unsigned char far*)MK_FP(0xA000, offset);
// IIRC: #define MK_FP(seg, off) ((void far *)((unsigned long)(seg) << 16 | (unsigned long)(off))) // far pointers != linear address
</code></pre>
In real-mode (linear): 0xa0000 + (320 * y) + x
Infamous means famous but for a bad reason, basically notorious. I've noticed a <i>lot</i> of people making this mistake recently, as well as people using ignorant to mean stupid. But I digress...<p>Many of us have that mode 13h stuff memorised too, including the 0x3c8 and 0x3c9 palette registers etc. And since 320x200 bytes is less than 65536 you don't need to do any segment stuff to access the full frame buffer.
Would love this as an audio visualizer
That’s pretty hypnotic. Very cool.
Here I'm being ridiculous but I was a bit disappointed that it was a canvas rendering and not a mono-font text block
i would kill to have something like this in wallpaper engine
related: <a href="https://www.gifcii.fun" rel="nofollow">https://www.gifcii.fun</a>
very very cool!
Except it is not ascii
Miasma!
Dope!
What is this?
that looks pretty good
I don't understand.
nicee
That is magic
What do you see in the clouds?