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

  Press enter to start and stop recording.

  Will also stop recording after full cycle. Use this for perfect loops :)

​

  Feel free to share your gifs on my discord server! 

  https://discord.com/invite/DxbUee2y6D

  (max upload 8mb)   

  recommended gif settings:

    canvas size: 500x500

    quality: 1 (highest for 'accurate' colours)

    fps: 30 (or lower to save space)

    frames: 500

  libraries used:

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

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

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

*/

​

const fps = 60;

let rec;

​

function setup() {

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

  // const size = 1080; // avi recording

  // const size = 500;  // gif recording

​

  const canvas = createCanvas(size, size);

​

  colorMode(HSL, 1);

  frameRate(fps);

​

  // rec = setupRecording("you should name me", canvas, {

  //   avi: {

  //     fps: 60, 

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

  //   },

  //   // gif: {

  //   //   fps: 30,

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

  //   //   workers: 10 // multithreaded workers

  //   // }

  // });

​

  noStroke();

}

​

const eps = 0.00000000001;

const ssin = (v) => sin(v * TWO_PI);

const scos = (v) => cos(v * TWO_PI);

const sinn = (v) => ssin(v) * 0.5 + 0.5;

const cosn = (v) => scos(v) * 0.5 + 0.5;

const invCosn = (v) => 1 - cosn(v);

const tri = (v) => 1 - abs(1 - fract(v) * 2);

const bias = (x, s, t) => x < t ?

  t * x / (x + s * (t - x) + eps) :

  (1 - t) * (x - 1) / (1 - x - s * (t - x) + eps) + 1

​

let t;

​

function draw() {

  ({

    t

  } = parameters);

​

  scale(width, height);

  strokeWeight(0.005);

​

  drawScene();

​

  // if (rec.recording)

  //   rec.recordFrame();

}

​

function drawScene() {

  const {

    size

  } = parameters;

  background(0);

  fill(0);

  stroke(1);

​

  noFill();

  circle(0.25 + 0.5 * invCosn(t), 0.5, size);

  circle(0.75 - 0.5 * invCosn(t), 0.5, size);

  circle(0.5, 0.25 + 0.5 * invCosn(t), size);

  circle(0.5, 0.75 - 0.5 * invCosn(t), size);

}

​

const parametersConfig = {

  frame: {

    default: 0,

    min: 0,

    max: 1000,

    step: 1

  },

  size: {

    default: 0.25,

    min: 0,

    max: 1,

    step: 0.01

  },

}