This script can render avi's and gifs. Setup recording in setup(). 

  Press enter to start and stop recording.

  Will also stop recording after recording 'FRAMES' frames. Use this for perfect loops :)

​

  libraries used:

    Video Builder: https://github.com/theshock/VideoBuilder

    gif.js: https://github.com/jnordberg/gif.js

    download: https://github.com/rndme/download

*/

​

const FRAMES = 300;

const FPS = 60;

​

let rec;

let size;

function setup() {

  // size = min(windowWidth, windowHeight); // fill window

  size = 1080;

  const canvas = createCanvas(size, size);

  frameRate(FPS);

  rec = setupRecording("Going in Circles", canvas, FRAMES, {

    // comment out this avi object if you don't want to record avi

    avi: { 

      fps: 60, 

      quality: 0.92

    },

  });

  colorMode(RGB, 1);

}

​

function keyPressed(evt) {

  if (evt.key == "Enter") {

    if (!rec.recording) {

      rec.start();

      frameCount = 0; // reset time

    } else

      rec.stop();

  }

}

​

let t;

function draw() {

  t = fract(frameCount / FRAMES);

​

  drawScene();

​

  if (rec.recording)

    rec.recordFrame();

}

​

function drawScene() {

  background(1, 0.5, 0);

  strokeWeight(0.05 * size);

  noFill();

​

  let max_count = 500;

  let count = sinn(t) * (max_count - 1) + 1;

  for (let i = 0; i < count; i++) {

    let iFract = i / max_count;

    let iFractNext = (i + 1) / max_count;

​

    let p1 = coordinates(iFract);

    let p2 = coordinates(iFractNext);

    const sig = tri(iFract);

    stroke(sig, 0, 1 - sig);

    line(

      p1.x * width, p1.y * height,

      p2.x * width, p2.y * height

    );

    // circle(p1.x * width, p1.y * height, 0.05 * size);

  }

}

​

function coordinates(angle) {

  const radius = 0.125 + sinn(angle * 1) * 0.25;

​

  let x = 0.5 + scos(angle * 3 + t * 2) * radius;

  let y = 0.5 + ssin(angle * 5 + t * 2) * radius;

​

  return { x, y };

}

​

function tri(v) {

  return 1 - abs((1 - fract(v) * 2));

}

​

function sinn(v) {

  return ssin(v) * 0.5 + 0.5;

}

​

function ssin(v) {

  return sin(PI * 2 * v);

}

​

function scos(v) {

  return cos(PI * 2 * v);

}

​

​

​