ASCII Clouds

(caidan.dev)

187 points | by majkinetor 8 hours ago

29 comments

  • ZpJuUuNaQ5 9 minutes ago
    Nice. This looks very 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.
  • scaradim 43 minutes ago
    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
  • greggman65 7 hours ago
  • block_dagger 2 hours ago
    Given the name, I expected more actual ASCII characters/options and selectable text. Visually appealing and fun to play with, however.
  • otikik 1 hour ago
    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.
  • alexcz 1 hour ago
    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?
  • ksymph 5 hours ago
    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.
    • Bimos 4 hours ago
      Yeah, with all these colors, any single character should be enough.
  • plastic041 2 hours ago
    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.

  • ku1ik 3 hours ago
    It has very little to do with ASCII but cool nonetheless.
  • matthew_hre 6 hours ago
    Spent longer than I'd like to admit trying to recreate the Balatro background effect...
  • kristopolous 6 hours ago
    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

  • drob518 50 minutes ago
    That’s pretty hypnotic. Very cool.
  • some1else 3 hours ago
    Similar Perlin-based effect with mouse reactivity & audio:

    https://srdjan.pro

  • ynac 6 hours ago
    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.
  • yanchep 3 hours ago
    Trippy!

      browsh https://caidan.dev/portfolio/ascii_clouds/
  • firecall 7 hours ago
    Well thats pretty cool!
  • NSPG911 2 hours ago
    i would kill to have something like this in wallpaper engine
  • casparvitch 7 hours ago
    Would love this as an audio visualizer
  • burnt-resistor 3 hours ago
    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
  • fxn2 2 hours ago
  • lanyard-textile 2 hours ago
    Miasma!
  • baalimago 5 hours ago
    Here I'm being ridiculous but I was a bit disappointed that it was a canvas rendering and not a mono-font text block
  • arionmiles 3 hours ago
    Dope!
  • imvetri 4 hours ago
    What is this?
  • imdsm 7 hours ago
    that looks pretty good
  • functionmouse 7 hours ago
    What do you see in the clouds?
  • Padriac 7 hours ago
    I don't understand.
    • keyle 6 hours ago
      I think it's just a technological show piece, basically built on top of open source libraries and a couple of algorithms.
      • imvetri 4 hours ago
        Lets let author explain. Our explanation might derail newbie readers
    • imvetri 4 hours ago
      Same here
  • tomiezhang 4 hours ago
    That is magic
  • r0075h3ll 5 hours ago
    nicee