Looping Frame Animations

const sketch = {

  fps: 30, // frames per second

  fpp: () => ctrl.fppSlider.value(), // frames per period

};

​

let clock;

let noiseloop;

function setup() {

  createCanvas(600, 600);

  colorMode(HSB);

  frameRate(sketch.fps);

  createControls();

}

​

function draw() {

  stroke(100);

  ctrl.frozenFrame.update();

  clock = new PeriodicFrameClock(sketch.fpp());

  noiseloop = clock.createNoiseLoop(0.5, ctrl.speedSlider.value());

​

  // animation

  const g = createGraphics(width / 2, height / 2);

  drawGraphics(g);

  image(g, 0, 0);

​

​

  // debug frames

  const frozenFrame = ctrl.frozenFrame.value();

  const frames = [{

      f: 0,

      x: 0,

      y: height / 2,

    txt: "first frame"

    },

    {

      f: sketch.fpp(),

      x: width / 2,

      y: height / 2,

      txt: "last frame"

    },

    {

      f: frozenFrame,

      x: width / 2,

      y: 0,

      txt: "frozen frame"

    }

  ];

  for (let i = 0; i < frames.length; i++) {

    const f = frames[i];

    clock.freeze(f.f, () => drawGraphics(g));

    image(g, f.x, f.y);

    drawText(`${f.txt} (${f.f})`, f.x + 30, f.y + 30);

  }

​

  drawGrid();

​

  drawDebugInfo();

}

​

function drawGraphics(g) {

  const t = clock.tick();

  g.colorMode(HSB);

  g.background(20);

  g.stroke(100);

  g.push();

  g.translate(g.width / 2, g.height / 2);

  const h = map(clock.sin(t), -1, 1, 100, 200);

  g.stroke([h, 80, 80]);

  g.strokeWeight(2);

​

  // use our clock's periodic functions, with

  // x value moving faster based on slider

  const speedUp = ctrl.speedSlider.value();

  const x = map(clock.sin(t), -1, 1, -g.width / 4, g.width / 2);

  const y = map(clock.cos(clock.time(speedUp)), -1, 1, -g.height / 4, g.height / 2);

  g.line(0, 0, x, 0);

  g.push();

  g.rotate(-PI / 4);

  g.line(0, 0, y, 0);

  g.pop();

​

  g.line(0, 0, 0, y);

  g.push();

  g.rotate(-PI / 4);

  g.line(0, 0, 0, x);

  g.pop();

​

  // noisy dots

  g.strokeWeight(8);

  const n = noiseloop.value(t);

  const noff = n * 50;

  g.point(noff + clock.tan(clock.time(speedUp)),

    noff + clock.tan(clock.time(speedUp / 5)));

  g.point(x + noff, y - noff);

  g.point(x - noff, y + noff);

  g.point(x - noff, y - noff);

​

  g.pop();

}

​

function drawGrid() {

  push();

  stroke([0, 0, 100, 0.2]);

  line(0, height / 2, width, height / 2);

  line(width / 2, 0, width / 2, height);

  pop();

}

​

function drawDebugInfo() {

  push();

  translate(30, 30);

  noFill();

  strokeWeight(1);

  circle(0, 0, 20);

  strokeWeight(5);

  point(10 * clock.cos(clock.time()), 10 * clock.sin(clock.time()));

​

  drawText(`

duration: ${clock.duration(sketch.fps).toFixed(1)}s, speed up: ${ctrl.speedSlider.value()}

time: ${clock.time().toFixed(2)} of ${clock.period().toFixed(2)}`, 30, -30);

  pop();

}

​

function drawText(t, x, y) {

  push();

  textSize(12);

  textAlign(LEFT, TOP);

  noStroke();

  fill(100);

  text(t, x, y);

  pop();

}