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 * (10 * sinn(t) + 0.5) * 0.001);

​

  const angle = 0.25;

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

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

  const steps = (instructions.length) * 25;

  let x = 0.5;

  let y = 0.25;

  let dir = 0;

  beginShape();

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

    const f = i / (steps);

    vertex(x * width, y * height);

​

    const instructionIndex = i % instructions.length;

​

    let dist = fract(dir) == 0.5

        ? sinn(dir * 0.25 + t * 3 + f * 2) * 0.02

        : 0.015

    // let dist = sinn(dir * 0.5 + t * 3 + f * 3) * 0.025;

    const a = dir + f;

    x += scos(a) * dist; 

    y += ssin(a) * dist;

    dir = (dir + instructions[instructionIndex]);

  }

  endShape();

}

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

}