Seamless Loops

p5js
javacript
math
animation
Published

October 28, 2018

Using this tutorial in processing, and Golan Levin’s sketch in processing, started to understand how to make seamlessly looping animations. I took Golan’s awesome demo and ported it to p5.js (live demo). This gif made the technique click for me.

The basic idea is think of the random values as locations on a clock face. This gives 1D noise over time (shown in the image above). For 2D you can use 3D noise space and think about a line sweeping through.

There are lots of details, such as how big is the path you are sweeping (changing the smoothness of noise), higher-dimensions, non-circular paths… Math is fun!