Top
Best
New

Posted by 0x000xca0xfe 2 days ago

Getting Creative with Perlin Noise Fields(sighack.com)
128 points | 20 comments
thomascountz 5 hours ago|
If you're into exploring this sort of thing yourself, I can extremely highly recommend Daniel Shiffman's Nature of Code[1]. It's among my top-5 recommended books about computing in general, let alone for algorithmic art.

[1]: https://natureofcode.com/

FeteCommuniste 3 hours ago|
Also his "Coding Train" videos on YouTube: https://www.youtube.com/@TheCodingTrain
mvanga 6 hours ago||
Author here. I wrote this many years ago (2017?) while exploring techniques to create art that I could put up on my walls :-) If you enjoyed this article there are more similar ones linked on the main page: https://sighack.com/
liendolucas 5 hours ago|
Iteration 19 is particularly beautiful if you look at it with polarized glasses, it almost looks like a 3d effect.
iamsaitam 2 hours ago||
If you dig Perlin noise fields, the next stop is fBM (Fractional Brownian Motion). Inigo Quilez has a good article about it - https://iquilezles.org/articles/fbm/
FeteCommuniste 3 hours ago||
Nice examples, I think I landed on that page quite a while ago. I love Processing and Perlin noise. One thing I enjoyed was using Perlin noise values to compute a "region" on the canvas and making the behavior of a particle depend on which region it was in. Examples:

https://020406.org/processing/PerlinNoiseBounds1.png

https://020406.org/processing/PerlinNoiseBounds2.png

https://020406.org/processing/PerlinNoiseBounds3.png

The Processing code I wrote to make them is here: https://github.com/Brian-Fearn/Processing/blob/main/PerlinNo...

rikroots 6 hours ago||
It turns out that adding noise to gradients is a really useful thing to do - so many new effects can be created with just a few additional parameters. Sadly, CSS and Canvas API gradients (linear, radial, conic) are very basic implementations (and SVG is not much more advanced).

Recently I did some work to add software gradient enhancements to my canvas library. Because these run on the CPU rather than GPU they're computationally intense, but still worth the effort just to see what can be done with different spreads (pad, repeat, reflect, transparent) and noise engine operations inserted while calculating stuff like gradient color selection, and pixel positioning.

Linear gradient demo test - https://scrawl-v8.rikweb.org.uk/demo/canvas-003.html

markstock 4 hours ago||
Generative artist here: the beautiful thing about this exploration is that these techniques can be applied to ANY vector field, whether they originate in random noise or global simulations.

The reason these add so much visual interest to a simple noise function is that each pixels color now relies on many more of the random values. Generative art blossoms with this extra computational effort.

m12k 6 hours ago||
Reminds me of this writeup that I read recently about using a different noise function (not Perlin) to emulate terrain erosion: https://blog.runevision.com/2026/03/fast-and-gorgeous-erosio...
tehrash 7 hours ago||
Great write up! I also dove in to this topic a while ago over at https://damoonrashidi.me/articles/flow-field-methods, but putting the live processing sketches in was a very nice touch! Good job, and nice outputs!
neomantra 6 hours ago||
Really nice exploration, and their other posts are interesting too!

We used Perlin noise for demos of our Golang/BubbleTea terminal Glyph heatmap widget and then later with our Picture widget.

Live WASM demos of the Golang terminal programs:

https://nimblemarkets.github.io/ntcharts/demos/heatmap-perli...

https://nimblemarkets.github.io/ntcharts/demos/heatpicture-p... Press 't' to switch between glyph/image modes

More comments...