6 ms·

Getting Creative with Perlin Noise Fields

191 points by 0x000xca0xfe 3mo ago

ttctciyf 3mo ago
Reminds me of something I saw on shadertoy a while back: > wiggly string-like texture from treating a noise field as an angle and sampling the curvature, with some dodgy trig. https://www.shadertoy.com/view/XssGD8 https://www.shadertoy.com/view/XssGD8 I wonder if the gifs in TFA would translate into the shader animation domain?
tehrash 3mo ago
Great write up! I also dove in to this topic a while ago over at https://damoonrashidi.me/articles/flow-field-methods https://damoonrashidi.me/articles/flow-field-methods, but putting the live processing sketches in was a very nice touch! Good job, and nice outputs!
- deleted 3mo ago
  [deleted]
srean 3mo ago
Very beautiful. I am a complete newbie, so I might be asking about something obvious -- does anyone know how some of these would relate to plotting random Polya vector fields ? For example, one can take a sum of complex rational functions of the form f_i(z) = r_i / (z - p_i) where (r_i,p_i) are complex numbers drawn from some random point process, say a generalized Poisson one. One needs to plot the conjugate of sum_i f_i(z). EDIT: so many lovely pages pointed to in the comments ! Let me convey collective thanks to all, rather than clutter this page with individual thanks. @ttctciyf you are marked dead. Not sure why.
- ttctciyf 3mo ago
  > @ttctciyf you are marked dead. Not sure why. Beats me too! Thanks for the heads up.
  - srean 3mo ago
    Mail dang at hn@crowycombinator.ravencom they clear it up quickly. Remove the corvids.
atulvi 3mo ago
My old work using perlin noise https://a.tulv.in/noise-planets.html https://a.tulv.in/noise-planets.html
- srean 3mo ago
  Please make an HN post out of your generative bad hand writing. Very cool.
ameon 3mo ago
some beautiful effects and good ideas. My favs are iterations 8, 20, 25
mvanga 3mo 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/ https://sighack.com/
- liendolucas 3mo ago
  Iteration 19 is particularly beautiful if you look at it with polarized glasses, it almost looks like a 3d effect.
rikroots 3mo 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 https://scrawl-v8.rikweb.org.uk/demo/canvas-003.html
- bschwindHN 3mo ago
  Speaking of gradients and noise, adding "Interleaved Gradient Noise" to gradients can get rid of the color banding that you'll often see on gradients displayed over a wide area.
chadgpt3 3mo ago
This is awesome
m12k 3mo 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-erosion-filter.html https://blog.runevision.com/2026/03/fast-and-gorgeous-erosio...
neomantra 3mo 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-perlin/ https://nimblemarkets.github.io/ntcharts/demos/heatmap-perli... https://nimblemarkets.github.io/ntcharts/demos/heatpicture-perlin/ https://nimblemarkets.github.io/ntcharts/demos/heatpicture-p... Press 't' to switch between glyph/image modes
neuropacabra 3mo ago
This is super nice article. Will revisit this one more time and try that out as well. In the age of AI slop, it is such a pleasure to read actual people blogs about what they do and are passionate about. Thank you this one!
thomascountz 3mo 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/ https://natureofcode.com/
- FeteCommuniste 3mo ago
  Also his "Coding Train" videos on YouTube: https://www.youtube.com/@TheCodingTrain https://www.youtube.com/@TheCodingTrain
jadar 3mo ago
If you have played Minecraft, you have a pretty good idea what kind of things Perlin Noise can generate. Maybe not the structures but definitely the terrain is generated by Perlin noise. (At least it was in the 1.4.7 days when I was in the code.)
markstock 3mo 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.
deleted 3mo ago
[deleted]
swordlucky666 3mo ago
[flagged]
FeteCommuniste 3mo 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/PerlinNoiseBounds1.png https://020406.org/processing/PerlinNoiseBounds2.png https://020406.org/processing/PerlinNoiseBounds2.png https://020406.org/processing/PerlinNoiseBounds3.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/PerlinNoiseBounds/PerlinNoiseBounds.pde https://github.com/Brian-Fearn/Processing/blob/main/PerlinNo...
kmewhort 3mo ago
[flagged]
iamsaitam 3mo 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/ https://iquilezles.org/articles/fbm/
- beepbooptheory 3mo ago
  Every article on that site is wonderful.
bezko 3mo ago
Couldn't help myself and asked Google Studio to one shot this: https://perlin-noise-fields-explorer-560691554368.us-east1.run.app https://perlin-noise-fields-explorer-560691554368.us-east1.r...
deadbabe 3mo ago
One of the cool things to do with Perlin noise is to build a kinda predictable random number generator. Good for games.
smcameron 3mo ago
Curl Noise[1] is also cool. I've used it to create some gas giant planets for video games [2] though I used opensimplex noise [3] rather than perlin as the base noise, but either will work. [1] https://www.cs.ubc.ca/~rbridson/docs/bridson-siggraph2007-curlnoise.pdf https://www.cs.ubc.ca/~rbridson/docs/bridson-siggraph2007-cu... [2] https://github.com/smcameron/gaseous-giganticus https://github.com/smcameron/gaseous-giganticus [3] https://en.wikipedia.org/wiki/OpenSimplex_noise https://en.wikipedia.org/wiki/OpenSimplex_noise
fractal618 3mo ago
I learned a lot about perlin noise when generating virtual worlds for Wurm Unlimited fascinating stuff and very satisfying when you get results you’re looking for.

191 points by 0x000xca0xfe 3mo ago

Reminds me of something I saw on shadertoy a while back: > wiggly string-like texture from treating a noise field as an angle and sampling the curvature, with some dodgy trig. https://www.shadertoy.com/view/XssGD8 https://www.shadertoy.com/view/XssGD8 I wonder if the gifs in TFA would translate into the shader animation domain?

tehrash 3mo ago

Great write up! I also dove in to this topic a while ago over at https://damoonrashidi.me/articles/flow-field-methods https://damoonrashidi.me/articles/flow-field-methods, but putting the live processing sketches in was a very nice touch! Good job, and nice outputs!

deleted 3mo ago
[deleted]

srean 3mo ago

Very beautiful. I am a complete newbie, so I might be asking about something obvious -- does anyone know how some of these would relate to plotting random Polya vector fields ? For example, one can take a sum of complex rational functions of the form f_i(z) = r_i / (z - p_i) where (r_i,p_i) are complex numbers drawn from some random point process, say a generalized Poisson one. One needs to plot the conjugate of sum_i f_i(z). EDIT: so many lovely pages pointed to in the comments ! Let me convey collective thanks to all, rather than clutter this page with individual thanks. @ttctciyf you are marked dead. Not sure why.

ttctciyf 3mo ago
> @ttctciyf you are marked dead. Not sure why. Beats me too! Thanks for the heads up.
- srean 3mo ago
  Mail dang at hn@crowycombinator.ravencom they clear it up quickly. Remove the corvids.

atulvi 3mo ago

My old work using perlin noise https://a.tulv.in/noise-planets.html https://a.tulv.in/noise-planets.html

srean 3mo ago
Please make an HN post out of your generative bad hand writing. Very cool.

ameon 3mo ago

some beautiful effects and good ideas. My favs are iterations 8, 20, 25

mvanga 3mo 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/ https://sighack.com/

liendolucas 3mo ago
Iteration 19 is particularly beautiful if you look at it with polarized glasses, it almost looks like a 3d effect.

rikroots 3mo 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 https://scrawl-v8.rikweb.org.uk/demo/canvas-003.html

bschwindHN 3mo ago
Speaking of gradients and noise, adding "Interleaved Gradient Noise" to gradients can get rid of the color banding that you'll often see on gradients displayed over a wide area.

chadgpt3 3mo ago

This is awesome

m12k 3mo 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-erosion-filter.html https://blog.runevision.com/2026/03/fast-and-gorgeous-erosio...

neomantra 3mo 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-perlin/ https://nimblemarkets.github.io/ntcharts/demos/heatmap-perli... https://nimblemarkets.github.io/ntcharts/demos/heatpicture-perlin/ https://nimblemarkets.github.io/ntcharts/demos/heatpicture-p... Press 't' to switch between glyph/image modes

neuropacabra 3mo ago

This is super nice article. Will revisit this one more time and try that out as well. In the age of AI slop, it is such a pleasure to read actual people blogs about what they do and are passionate about. Thank you this one!

thomascountz 3mo 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/ https://natureofcode.com/

FeteCommuniste 3mo ago
Also his "Coding Train" videos on YouTube: https://www.youtube.com/@TheCodingTrain https://www.youtube.com/@TheCodingTrain

jadar 3mo ago

If you have played Minecraft, you have a pretty good idea what kind of things Perlin Noise can generate. Maybe not the structures but definitely the terrain is generated by Perlin noise. (At least it was in the 1.4.7 days when I was in the code.)

markstock 3mo 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.

deleted 3mo ago

[deleted]

swordlucky666 3mo ago

[flagged]

FeteCommuniste 3mo 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/PerlinNoiseBounds1.png https://020406.org/processing/PerlinNoiseBounds2.png https://020406.org/processing/PerlinNoiseBounds2.png https://020406.org/processing/PerlinNoiseBounds3.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/PerlinNoiseBounds/PerlinNoiseBounds.pde https://github.com/Brian-Fearn/Processing/blob/main/PerlinNo...

kmewhort 3mo ago

[flagged]

iamsaitam 3mo 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/ https://iquilezles.org/articles/fbm/

beepbooptheory 3mo ago
Every article on that site is wonderful.

bezko 3mo ago

Couldn't help myself and asked Google Studio to one shot this: https://perlin-noise-fields-explorer-560691554368.us-east1.run.app https://perlin-noise-fields-explorer-560691554368.us-east1.r...

deadbabe 3mo ago

One of the cool things to do with Perlin noise is to build a kinda predictable random number generator. Good for games.

smcameron 3mo ago

Curl Noise[1] is also cool. I've used it to create some gas giant planets for video games [2] though I used opensimplex noise [3] rather than perlin as the base noise, but either will work. [1] https://www.cs.ubc.ca/~rbridson/docs/bridson-siggraph2007-curlnoise.pdf https://www.cs.ubc.ca/~rbridson/docs/bridson-siggraph2007-cu... [2] https://github.com/smcameron/gaseous-giganticus https://github.com/smcameron/gaseous-giganticus [3] https://en.wikipedia.org/wiki/OpenSimplex_noise https://en.wikipedia.org/wiki/OpenSimplex_noise

fractal618 3mo ago

I learned a lot about perlin noise when generating virtual worlds for Wurm Unlimited fascinating stuff and very satisfying when you get results you’re looking for.