Join the discussion
Write your take first — we'll ask for email only when you're ready to publish.
- Hacker News
- 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
by rikroots - 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...by m12k
- 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.
by markstock - 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-cu... [2] https://github.com/smcameron/gaseous-giganticus [3] https://en.wikipedia.org/wiki/OpenSimplex_noise
by smcameron - 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/by iamsaitam
- 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...
- 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/by mvanga
- 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.by thomascountz