Live data from Hacker News

ASCII Clouds

caidan.dev

71–80 of 99 posts

Re: ASCII Clouds

#71

You can render only single characters. First you need to change the HTML "max" attribute of 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.

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.

Re: ASCII Clouds

#74
post #31

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?

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.

Re: ASCII Clouds

#75
post #10

Just throwing a HELL YES 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.

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.

Re: ASCII Clouds

#76
post #41

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 ve…

P5JS makes it very easy to start playing around with. https://p5js.org/reference/p5/noise/

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

Re: ASCII Clouds

#77
post #30

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.

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/

Re: ASCII Clouds

#79
post #22

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

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!
Post reply on HN