Seamless Loops

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!

P5 = require('p5')

function* createSketch(sketch) {
  const element = DOM.element('div');
  yield element;
  const instance = new P5(sketch, element, true);
  try {
    while (true) {
      yield element;
    }
  } finally {
    instance.remove();
  }
}

viewof radius = Inputs.range(
  [1,150], 
  {value: 100, step: 1, label: "Radius:"}
)
viewof noiseScale = Inputs.range(
  [0.001,1.0], 
  {value: 0.01, step: 0.001, label: "Noise Scale:"}
)

createSketch(s => {
    function makeOffscreenImg(s) {
        let offscreenImg = s.createGraphics(s.width, s.width);
        for (let x = 0; x<s.width; x++) {
           for (let y = 0; y<s.width; y++) {
                offscreenImg.stroke(255.0*s.noise(s.myScale*x, s.myScale*y));
                offscreenImg.point(x, y);
            }
        }
        return offscreenImg;
    }
    s.setup = function() {
        s.createCanvas(300, 400);
        s.currStep = 0;
        s.myScale = 0.01,
        s.nSteps = 150;
        s.myLoopingNoiseArray = [];
        s.offscreenImg = makeOffscreenImg(s);
    }
    s.draw = function() {
        let r = viewof radius.value;
        let ns = viewof noiseScale.value;
        if (s.myScale != ns) {
            s.myScale = ns;
            s.offscreenImg = makeOffscreenImg(s);
        }
        s.background(0);
        s.image(s.offscreenImg, 0, 0);

        // draw dot in circle
        s.currStep = s.frameCount % s.nSteps;
        var t = s.map(s.currStep, 0, s.nSteps, 0, 6.28);
        var px = s.width/2.0 + r * Math.cos(t);
        var py = s.width/2.0 + r * Math.sin(t);
        s.noStroke();
        s.fill(255);
        s.ellipse(px, py, 7, 7);

        // draw path
        let noiseAtLoc = s.height - 100.0*s.noise(s.myScale*px, s.myScale*py);
        s.myLoopingNoiseArray[s.currStep] = noiseAtLoc;
        s.noFill();
        s.stroke(255);
        s.beginShape();
        for (let i=0; i<s.nSteps; i++) {
            let nx = s.map(i, 0, s.nSteps-1, 0, s.width);
            let ny = s.myLoopingNoiseArray[i];
            s.vertex(nx, ny);
        }
        s.endShape();

        // draw dot on the path
        s.noStroke();
        s.fill(255);
        let ex = s.map(s.currStep, 0, s.nSteps-1, 0, s.width);
        s.ellipse(ex, noiseAtLoc, 7, 7);
    };
  }
)