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 = 1920; // avi recording

  // const size = 500;  // gif recording

​

  // const canvas = createCanvas(size, size);

  const canvas = createCanvas(1280, 720);

​

  colorMode(HSL, 1);

  frameRate(fps);

​

  rec = setupRecording("golden ratio sunflower spiral", 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

    // }

  });

​

}

​

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

​

const radius = 1.5; //Math.sqrt(0.5);

const dotSize = 0.2;

const PHI = (1 + Math.sqrt(5)) / 2;

​

const frames = 1000;

let frame = 0;

let t;

​

function draw() {

  let inc = 1;

  if (!rec.recording)

    inc = deltaTime / (1000 / fps);

  frame += inc;

​

  t = fract(frame / frames);

  t = 0.76; 

  // t = fract(mouseX / width);

​

  translate((width - height) / 2, 0);

  scale(height, height);

  strokeWeight(0.005);

​

  drawScene();

​

  if (rec.recording)

    rec.recordFrame();

}

​

function drawScene() {

  background(0);

  fill(1);

  noStroke();

  const count = 2000 * invCosn(t);

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

    const f = i / count;

    const angle = i * PHI;

    const dist = f * radius;

​

    const x = 0.5 + cos(angle * TWO_PI) * dist;

    const y = 0.5 + sin(angle * TWO_PI) * dist;

​

    const sig = pow(cosn(f - t * 6), 2);

    const r = f * sig * dotSize;

​

    const hue = fract(t + f * 0.5);

    const sat = 1;

    const light = 0.6 * sig + 0.25;

    const clr = color(hue, sat, light);

    fill(clr);

​

    circle(x, y , r);

  }

​

  scale(1 / height, 1 / height);

​

  textStyle(BOLDITALIC);

  textFont("times new roman");

  stroke(0);

  strokeWeight(10);

  fill("white");

  // fill(t,1,0.5);

  textAlign("center");

  textSize(120);

  text("Golden Ratio", 0.5 * height, 0.5* height - 50);

  text("Sunflower Spiral", 0.5 * height, 0.5* height + 50);

  textAlign("center");

  textSize(60);

  text("Creative Coding Tutorial P5.js", 0.5 * height, 0.5* height +150);

}