\

ASCII Clouds

355 points - 01/14/2026

Source
  • madethemcry

    01/14/2026

    That is so beautiful. The underlying algorithm is perlin noise (see https://en.wikipedia.org/wiki/Perlin_noise) and it's over 40 years old!

    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.

    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?

      • cess11

        01/14/2026

        P5JS makes it very easy to start playing around with.

        https://p5js.org/reference/p5/noise/

          • mildmelon

            01/15/2026

            Author here. P5JS is great and I've used it in the past. However you can get pretty far with just VanillaJS. Here's the source code to the ASCII Clouds tool, it's almost all plain JS.

            https://github.com/caidanw/caidanw.github.io/blob/main/src/p...

              • stungeye

                01/16/2026

                So cool. Thanks for sharing the source! A few years back I made a p5.js ASCII Cloud sketch using the extended ASCII block chars.

                For those curious what a stripped-down version of noise-based clouds would look like, it's only 50 lines of js: https://editor.p5js.org/stungeye/sketches/LPdeHgz9B

        • evilturnip

          01/14/2026

          I think it's technically Simplex noise, but yes also developed by Perlin.

            • mildmelon

              01/15/2026

              Author here, yes you are correct that it's Simplex noise. I also use a method of domain warping, I used this article as reference https://iquilezles.org/articles/warp/

      • greggman65

        01/14/2026

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

        https://post-processing.tresjs.org/guide/pmndrs/ascii

        https://forum.babylonjs.com/t/ascii-shader-using-glsl-postpr...

        https://threejs.org/examples/?q=ascii#webgl_effects_ascii

        https://fwdapps.net/l/asci/

        https://codesandbox.io/p/sandbox/ascii-postprocessing-n628p8...

        https://www.youtube.com/watch?v=NxeRcnLr0ko

          • oofoe

            01/14/2026

            Or you could just start with ASCII... I was discussing how shaders work with a friend and wound up hacking together a sort of "shadertoy" that runs in Emacs last night. Scroll to end of file to see examples...

            https://hg.sr.ht/~oofoe/shademacs/browse/sdf.el?rev=tip

              (shade 10 2 (lambda (x y) x))  ; Horizontal ramp.
              ;; @ # & % * = + : - · 
              ;; @ # & % * = + : - ·

        • burnt-resistor

          01/14/2026

          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.

          The infamous MCGA/"VGA" mode 13h had pixels with an aspect ratio 6:5, while 320 x 240 Mode X was square (1:1).

          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:

              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
          
          In real-mode (linear): 0xa0000 + (320 * y) + x

            • mildmelon

              01/15/2026

              Author here.

              Yes you're right in that it's not real ASCII, but more ASCII-esque. I took some artistic liberty to do everything on the GPU, if I had done true ASCII I would have had to move data back to the CPU and render the glyphs there. However it was too slow and didn't have the desired effect I was seeking.

              I am considering building out an additional feature set where it allows for true ASCII rendering, but we'll see if I get around to that.

              • pixelpoet

                01/14/2026

                Infamous means famous but for a bad reason, basically notorious. I've noticed a lot of people making this mistake recently, as well as people using ignorant to mean stupid. But I digress...

                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.

            • ksymph

              01/14/2026

              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.

                • mildmelon

                  01/15/2026

                  Author here, I understand where you are coming from. However I did choose to keep it this way as it generally looks better. I toyed with other methods and I may introduce them in as a setting.

                  • intrasight

                    01/14/2026

                    Yes, but it is "ascii art" and hence artistic freedom.

                    • Bimos

                      01/14/2026

                      Yeah, with all these colors, any single character should be enough.

                  • block_dagger

                    01/14/2026

                    Given the name, I expected more actual ASCII characters/options and selectable text. Visually appealing and fun to play with, however.

                      • tracker1

                        01/14/2026

                        Was experimenting with something similar... working on a modern QWK reader, and this is kind of a core thing to deal with, rendering ansi in messages as html. (synchronet color codes don't work right and renegade color codes untested).

                        Was an initial experiment with Claude Code, but kind of a cool result that's pretty close to what I want.

                        https://github.com/bbs-land/bbs-ansi-to-html

                        • mildmelon

                          01/15/2026

                          Author here, yeah I apologize for the misnomer. I could render it with actual ASCII but it was too slow because of needing to process it on the CPU. My method here is actually done all on the GPU and draws glyphs similar to how fonts are drawn. Well actually I'm using signed distance functions to draw the glyphs, but the glyphs are ASCII-esque.

                      • otikik

                        01/14/2026

                        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.

                          • mildmelon

                            01/15/2026

                            Author here. Interesting point about the satellite-view clouds, I'm not very familiar with that domain. But I can point you to the article I read about domain warping on top of noise, which is what I use to produce this effect.

                            https://iquilezles.org/articles/warp/

                        • ku1ik

                          01/14/2026

                          It has very little to do with ASCII but cool nonetheless.

                          • xwiz

                            01/14/2026

                            Thematically related: https://play.ertdfgcvb.xyz/#/src/demos/chromaspiral

                          • kristopolous

                            01/14/2026

                            I had a similar effect for a C program I wrote a long time ago (I think 2007?). Here's a video: https://www.youtube.com/watch?v=H4j-BkwMB20

                            and the code: https://github.com/kristopolous/ascsee

                            I just updated it so it compiles on modern systems.

                            I also found the original version if you like being an archaeologist: https://9ol.es/tmp/gol.c

                              • mildmelon

                                01/15/2026

                                Author here. Wow that’s so cool, thank you for sharing!

                            • sang459

                              01/15/2026

                              https://caidan.dev/portfolio/ascii_clouds/?cs=6&wa=0.1&ws=0....

                                • mildmelon

                                  01/15/2026

                                  Author here. Wow that one is so beautiful, I love the green! Great work and thanks for sharing!

                              • pj4533

                                01/14/2026

                                Super fun! I was exploring this type of thing as one of my first experiments with Claude Code early last year.

                                https://github.com/pj4533/asciidelic https://asciidelic.com

                                I should go back and add mobile support, maybe fullscreen support.

                                  • mildmelon

                                    01/15/2026

                                    Author here, I love that tool you built. Super nice effects and I’d love to see mobile support if you add it.

                                • scaradim

                                  01/14/2026

                                  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

                                    • binaryturtle

                                      01/14/2026

                                      It dies with lots of WebGL errors here, so I only see a white page. So that's definitely not ASCII in my book. Would be more fun to have an actual text based output indeed.

                                        • mildmelon

                                          01/15/2026

                                          Author here, can you elaborate more on what kind of WebGL errors you are getting?

                                            • binaryturtle

                                              01/15/2026

                                              This is an older Firefox, so this is probably all "normal", but also may be entirely unrelated to the actual cause for nothing showing up?

                                                  WebGL warning: drawArraysInstanced: Framebuffer not complete. (status: 0x8cd6) COLOR_ATTACHMENT0: Attachment has no width or height. ascii_clouds.astro_astro_type_script_index_0_lang.iEVYfoCC.js:274:3430
                                                  WebGL warning: drawArraysInstanced: Framebuffer must be complete. ascii_clouds.astro_astro_type_script_index_0_lang.iEVYfoCC.js:274:3430
                                                  WebGL warning: drawArraysInstanced: TEXTURE_2D at unit 0 is incomplete: The dimensions of `level_base` are not all positive. ascii_clouds.astro_astro_type_script_index_0_lang.iEVYfoCC.js:274:3980
                                                  …
                                                  [repeat]
                                                  …
                                                  WebGL: No further warnings will be reported for this WebGL context. (already reported 32 warnings) ascii_clouds.astro_astro_type_script_index_0_lang.iEVYfoCC.js:274:3430

                                  • mildmelon

                                    01/15/2026

                                    Hey, I'm the author here. Can't believe this got so much attention! I appreciate all of the kind words and feedback. I recently updated the tool to more easily share what you create through the url or you can export a PNG/WEBM. Would love to see what you make with it, please tag me c:

                                    If you're interested in seeing more of what I work on, follow me on my socials where I post everyday.

                                    Bluesky: https://bsky.app/profile/caidan.dev Twitter: https://x.com/caidanwilliams Threads: https://www.threads.com/@ancientsunshine

                                    • matthew_hre

                                      01/14/2026

                                      Spent longer than I'd like to admit trying to recreate the Balatro background effect...

                                        • mildmelon

                                          01/15/2026

                                          Author here, love that you tried to recreate the Balatro background. I was also similarly obsessed with that game last year. If you were able to recreate it I’d love to see, I just added more sharing capabilities to the tool.

                                      • TyrunDemeg101

                                        01/14/2026

                                        Very cool, found myself just staring at it for a few minutes! Thanks for sharing!

                                          • mildmelon

                                            01/15/2026

                                            Author here, so happy to hear you enjoyed the tool!

                                        • ynac

                                          01/14/2026

                                          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.

                                            • mildmelon

                                              01/15/2026

                                              Author here. Thanks so much for the rad reply and enthusiasm! So glad I could help inspire you, and please feel free to use this for any art you make, just tag me on socials or send it my way so I can check it out.

                                          • alexcz

                                            01/14/2026

                                            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?

                                              • mildmelon

                                                01/15/2026

                                                Author here. It’s likely the noise amount you’ve set or the glyph thresholds. I’m still tweaking it and trying to get it to be a bit more consistent.

                                            • ZpJuUuNaQ5

                                              01/14/2026

                                              Nice. This looks similar to what I have implemented: https://www.npmjs.com/package/asciiground, 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.

                                                • haritha-j

                                                  01/14/2026

                                                  First time I came across this, why does a github account get flaggged?

                                                    • dotancohen

                                                      01/14/2026

                                                      GP might be Israeli. I'm tempting fate by posting this, but I know two Israelis whose Github accounts were flagged following the October 7th attacks, and both stated that they know others as well. I don't know what the mechanism of flagging involves, but there are targeted campaigns against some Github (and other social things) users. It's not just one report and then the repo goes down.

                                                      • ZpJuUuNaQ5

                                                        01/14/2026

                                                        No idea. I submitted a reinstatement request, but I haven't received any response in the past 4 months.

                                                          • haritha-j

                                                            01/15/2026

                                                            new fear unlocked.

                                                    • mildmelon

                                                      01/15/2026

                                                      Author here, thanks for sharing your library looks very useful! I’ll have to check it out for sure!

                                                  • lasgawe

                                                    01/14/2026

                                                    This is beautiful, I saw a similar tool weeks ago: https://ascii.0xbalance.xyz

                                                      • mildmelon

                                                        01/15/2026

                                                        Author here. Thanks for the kind words! And I appreciate you sharing that tool, definitely checking it out!

                                                    • plastic041

                                                      01/14/2026

                                                      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.

                                                      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.

                                                        • mildmelon

                                                          01/15/2026

                                                          Author here. That’s a nice trick! I’ve been pondering on how to handle this but I think I’m going to allow the ability to toggle on/off the presence of glyphs so that you don’t have to muck around with the thresholds to get them to not render.

                                                      • some1else

                                                        01/14/2026

                                                        Similar Perlin-based effect with mouse reactivity & audio:

                                                        https://srdjan.pro

                                                          • mildmelon

                                                            01/15/2026

                                                            Author here, looks great! Thanks for sharing!

                                                            • efilife

                                                              01/14/2026

                                                              you should disclose that it's your portfolio

                                                          • firecall

                                                            01/14/2026

                                                            Well thats pretty cool!

                                                            • yanchep

                                                              01/14/2026

                                                              Trippy!

                                                                browsh https://caidan.dev/portfolio/ascii_clouds/

                                                                • mildmelon

                                                                  01/15/2026

                                                                  Author here. Wow that's so cool! I've never heard of browsh but it's so cool to see that my site (which was built to be as static as possible) works well and even renders the WebGL in the terminal. Thanks for sharing!

                                                              • sandos

                                                                01/14/2026

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

                                                                  • mildmelon

                                                                    01/15/2026

                                                                    Author here. Haha that's so creative! I definitely thought about lowering the limit, but then it wouldn't really be ASCII-esque lol. I might just lower it so that you don't have to do this workaround.

                                                                • fxn2

                                                                  01/14/2026

                                                                  related: https://www.gifcii.fun

                                                                    • mildmelon

                                                                      01/15/2026

                                                                      Author here. That's so cool, thanks for sharing!

                                                                  • casparvitch

                                                                    01/14/2026

                                                                    Would love this as an audio visualizer

                                                                      • mildmelon

                                                                        01/15/2026

                                                                        Author here. Interesting idea, I might have to tinker with it!

                                                                    • drob518

                                                                      01/14/2026

                                                                      That’s pretty hypnotic. Very cool.

                                                                        • mildmelon

                                                                          01/15/2026

                                                                          Author here. Thanks for the kind words, glad you're having fun with it!

                                                                      • NSPG911

                                                                        01/14/2026

                                                                        i would kill to have something like this in wallpaper engine

                                                                          • mildmelon

                                                                            01/15/2026

                                                                            Author here. Now that's a great idea! I might have to try and get it published there!

                                                                              • NSPG911

                                                                                01/17/2026

                                                                                Can you please update me when that happens?

                                                                            • onde

                                                                              01/14/2026

                                                                              On macOS there is Plash to use webpages as wallpapers. Works great

                                                                          • publicdebates

                                                                            01/14/2026

                                                                            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.

                                                                              • mildmelon

                                                                                01/15/2026

                                                                                Author here. Thanks so much for the kind feedback, I appreciate that you are getting so much joy out of it!

                                                                            • baalimago

                                                                              01/14/2026

                                                                              Here I'm being ridiculous but I was a bit disappointed that it was a canvas rendering and not a mono-font text block

                                                                                • mildmelon

                                                                                  01/15/2026

                                                                                  Author here. Not ridiculous at all, the name is a bit of a misnomer. I had tried doing true ASCII but moving data back to the CPU to render it all was too slow. So I opted to recreate them as glyphs that are drawn using signed distance functions, which gets pretty close to looking like real ASCII while still being incredibly performant due to it never leaving the GPU.

                                                                              • lanyard-textile

                                                                                01/14/2026

                                                                                Miasma!

                                                                                • arionmiles

                                                                                  01/14/2026

                                                                                  Dope!

                                                                                  • imdsm

                                                                                    01/14/2026

                                                                                    that looks pretty good

                                                                                    • imvetri

                                                                                      01/14/2026

                                                                                      What is this?

                                                                                        • mildmelon

                                                                                          01/15/2026

                                                                                          Author here. This is all done on the GPU using shaders. It's a few layers, and you can find the details over on my Bluesky post, feel free to read it there. I've been thinking about making a blog post covering how I went about building it.

                                                                                          https://bsky.app/profile/caidan.dev/post/3mcdwifkfvc2o

                                                                                      • intrasight

                                                                                        01/14/2026

                                                                                        Now I want this on a digital artframe in my livingroom.

                                                                                          • mildmelon

                                                                                            01/15/2026

                                                                                            Author here. Sounds like a great idea! If you are able to build it I'd love to see, tag me on socials or send it to me please c:

                                                                                        • Padriac

                                                                                          01/14/2026

                                                                                          I don't understand.

                                                                                            • mildmelon

                                                                                              01/15/2026

                                                                                              Author here.

                                                                                              It's a fun experiment into WebGL and graphics programming. I intended it to be a cool tool for getting inspiration for designing and creating other art in general. I do eventually want to build this out into a larger set of tools that would allow you to quickly iterate and build out various aesthetics for designing.

                                                                                              In it's current state, it's mostly practical for creating pretty images and videos that you could use in other projects. If there's more interest I could possibly turn it into more, would love to hear ideas and suggestions!

                                                                                              • keyle

                                                                                                01/14/2026

                                                                                                I think it's just a technological show piece, basically built on top of open source libraries and a couple of algorithms.

                                                                                                  • mildmelon

                                                                                                    01/15/2026

                                                                                                    Author here, you're mostly right in that it's a show piece. However, it uses no external libraries, I built it all myself using VanillaJS. I do use some famous noise algorithms, specifically Simplex noise and a method of domain warping.

                                                                                                    • imvetri

                                                                                                      01/14/2026

                                                                                                      Lets let author explain. Our explanation might derail newbie readers

                                                                                                  • imvetri

                                                                                                    01/14/2026

                                                                                                    Same here

                                                                                                      • mildmelon

                                                                                                        01/15/2026

                                                                                                        Author here, I've replied to the parent comment, hope that clears it up!

                                                                                                • heliumtera

                                                                                                  01/14/2026

                                                                                                  Except it is not ascii

                                                                                                    • mildmelon

                                                                                                      01/15/2026

                                                                                                      Author here, yes you're correct. The name is a bit of misnomer, and to do it truly with ASCII I'd have to move data back to the CPU which had pretty bad performance. I took a bit of artistic liberty and decided to draw my own ASCII-esque glyphs using signed distance functions. I'm considering adding a setting to swap the modes so that it does use true ASCII but again it'd be pretty rough performance on large screens.

                                                                                                  • r0075h3ll

                                                                                                    01/14/2026

                                                                                                    nicee

                                                                                                      • mildmelon

                                                                                                        01/15/2026

                                                                                                        Thank you!

                                                                                                    • hairozen

                                                                                                      01/14/2026

                                                                                                      very very cool!

                                                                                                        • mildmelon

                                                                                                          01/15/2026

                                                                                                          Thank you, glad you're enjoying it!

                                                                                                      • tomiezhang

                                                                                                        01/14/2026

                                                                                                        That is magic

                                                                                                          • mildmelon

                                                                                                            01/15/2026

                                                                                                            Thank you, glad you like the tool!

                                                                                                        • functionmouse

                                                                                                          01/14/2026

                                                                                                          What do you see in the clouds?