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 = 450;

const FPS = 50;

​

let rec;

let size;

function setup() {

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

  size = 1080; // avi recording

  // size = 500;  // gif recording

​

  const canvas = createCanvas(size, size);

  frameRate(FPS);

  rec = setupRecording("greek plate pattern", canvas, FRAMES, {

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

    avi: { 

      fps: 50, 

      quality: 1 // full quality (1) does not encode properly (sad face)

    },

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

    // gif: { 

    //   fps: 50, // 50 is max (set FPS to 50 to see what this recording would look like)

    //   quality: 1, // lower is better (1 = best). Works to reduce filesize but fucks with colour, would recommend lowering fps instead ✌️

    //   workers: 1, // multithreaded workers

    // }

  });

  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(0);

  stroke(1); 

  noFill();

  strokeWeight(size * 0.002);

​

  const angle = 0.25;

  // const instructions = [0, 0, -angle, -angle, angle, angle,

  //                       0, 0, angle, angle, -angle, -angle];

  // const instructions = [angle, -angle, -angle, angle,-angle, -angle, angle, angle,

  //                       0, 0, angle, angle, -angle, -angle];

  const instructions = [angle, -angle, -angle, angle,-angle, -angle, angle, angle,

                        -angle, angle, angle, -angle, angle, angle, -angle, -angle];

  const steps = (instructions.length) * 35 + 1;

  let x = 0.5;

  let y = 0.175;

  let dir = 0;

  beginShape();

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

    const f = i / (steps - 1);

    vertex(x * width, y * height);

​

    const instructionIndex = i % instructions.length;

​

    let dist1 = hasAngle(dir, 0.5)

      ? sinn(dir * 0.5 + t * 3 + f * 2) * 0.03

      : 0.015

​

    let dist2 = hasAngle(dir, 0.25) || hasAngle(dir, 0.75)

       ? ssin(t * 3 + f * 1) * 0.02

      : 0.015

    let dist3 =  0.015;

    let dist4 = sinn(dir * 0 + t * 3 + f * 3) * 0.025;

    let dist = lerp(dist1, dist2, sinn(t));

    const a1 = dir + f * 1;

    const a2 = dir + f * 1;

    x += scos(a1) * dist; 

    y += ssin(a2) * dist;

    dir = (dir + instructions[instructionIndex]);

  }

  endShape();

}

const EPS = 0.00001;

function hasAngle(v, a) {

  return abs(normAngle(v - a)) < EPS;

}

function normAngle(v) {

  return fract(v + 0.5) - 0.5;

}

​

function sinn(v) {

  return ssin(v) * 0.5 + 0.5;

}

function cosn(v) {

  return scos(v) * 0.5 + 0.5;

}

​

function ssin(v) {

  return sin(TAU * v);

}

function scos(v) {

  return cos(TAU * v);

}