3 ms·

That is so beautiful. The underlying algorithm is perlin noise (see https://en.wikipedia.org/wiki/Perlin_noise https://en.wikipedia.org/wiki/Perlin_noise) and i

That is so beautiful. The underlying algorithm is perlin noise (see https://en.wikipedia.org/wiki/Perlin_noise 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 9mo ago
P5JS makes it very easy to start playing around with. https://p5js.org/reference/p5/noise/ https://p5js.org/reference/p5/noise/
- mildmelon 9mo ago
  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/pages/portfolio/ascii_clouds.astro https://github.com/caidanw/caidanw.github.io/blob/main/src/p...
  - stungeye 9mo ago
    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 https://editor.p5js.org/stungeye/sketches/LPdeHgz9B
evilturnip 9mo ago
I think it's technically Simplex noise, but yes also developed by Perlin.
- mildmelon 9mo ago
  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/ https://iquilezles.org/articles/warp/

cess11 9mo ago

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

mildmelon 9mo ago
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/pages/portfolio/ascii_clouds.astro https://github.com/caidanw/caidanw.github.io/blob/main/src/p...
- stungeye 9mo ago
  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 https://editor.p5js.org/stungeye/sketches/LPdeHgz9B

evilturnip 9mo ago

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

mildmelon 9mo ago
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/ https://iquilezles.org/articles/warp/