Generating Looping Noise
Overview
Here, I’ll describe 2 approaches for generating looping noise, with examples in GLSL and Processing.
Applying noise to a surface is a way to give objects an organic, unpredictable look.
Noise functions don’t inherently loop. So to make perfect looping gifs, vj clips, repeatable entropy of sorts, you have to make the chaos loop.
I recommend reading The Book Of Shaders’ article on Noise if you haven’t already.
Method 1: Interpolate between 2 noise functions
Although this is more expensive and naive, it’s nice for rapid prototyping, as it’s faster to implement, and you don’t need to modify any noise functions.
The idea is to have two noise functions, A and B, evolving over time and interpolate between the two. The second function, B, evolves such that it starts where function A began at every loop cycle.
Another useful thing is to define a transition start time, which defines the range in which the functions interpolate between each other. In the example below, the 2 second loop starts the transition at 1.5 seconds, therefore it will be a 0.5 second transition.
In GLSL, it looks like:
An example on Shadertoy can be seen below.
Method 2: Cycling the noise edges
To simplify, visualize in a single dimension. 1D Noise can generated by extracting the fractional and floored integer component of an increasing floating point number. The fractional component is used to interpolate between a random value generated by the current integer and the next one.
With this technique, the trick is to repeat the domain of the floored integers, such that it repeats a pattern of n “edges”.
This can be extended to 2D by repeating the domain of the square tile edges. Higher dimensions similarly.
Synchronize the noise evolve speed to scroll one tiles length per loop duration.
This gif was rendered as 30 frames with the duration of 1 second. I used Thomas Hooper’s Shadertoy Frame Exporter to export the frames.
Edge Cycling Example in Processing
Here’s an example that demonstrates looping noise applied to the radius of several concentric circles. The noise is feeded by the angle in which you are drawing around the circle.
And then the implementation of the noise functions described above:
I’ve pushed the example project to my Github. so you can check it out yourself. It’s by no means a library, but more of an example to checkout and build your own solutions.
–
Thanks for reading! If you have any questions, please send me an email.