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 STAGES = 6;

​

const FRAMES = 200 * STAGES;

const FPS = 24;

​

let rec;

// let size;

function setup() {

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

  // size = 1080; // avi recording

  // size = 720;  // gif recording

​

  const canvas = createCanvas(1080, 1920);

  frameRate(FPS);

​

  rec = setupRecording("spiral", canvas, FRAMES, {

    avi: {

      fps: 24,

      quality: 0.92,

    }

  });

}

​

function keyPressed(evt) {

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

    if (!rec.recording) {

      rec.start();

      frameCount = 0; // reset time

      prevStep = -1;

    } else rec.stop();

  }

}

​

let step=0;

let t;

let prevStep = -1;

function draw() {

  const frame = (frameCount - 1) % (FRAMES / STAGES);

  t = fract(frame / STAGES);

  step = floor(frameCount / FRAMES * STAGES);

  if (step != prevStep)

    reset();

  prevStep = step;

  translate(width / 2, height / 2)

​

  let drawCount = step == 0 ? 1 : step > 3 ? 4 : 2;

  for (let i=0; i<drawCount; i++)

    drawScene();

​

  if (rec.recording) rec.recordFrame();

}

​

function reset(loop=false) {

  colorMode(HSB);

  angleMode(DEGREES); 

  background("black")

  angle = 0

  radius = 450

  deltaAngle = 3;

  if (step > 0) {

    deltaRadius = 1;

    radius = 0;

  }

  if (step > 1) {

    deltaRadius = 3;

    numArms = 7

    curve = 0.2

    deltaAngle = 360/numArms + curve  

  }

   if (step > 2) {

    deltaRadius = 2;

    numArms = 12

    deltaAngle = 360/numArms + curve  

  }

  if (step > 3) {

    radius = 0

    deltaRadius = 2

    numArms = 5

    curve = 0.3

    deltaAngle = 360 / numArms + curve

  }

  if (step > 4) {

    hueVal = 0

    deltaHue = 1

​

    radius = 0

    deltaRadius = 2

    numArms = 6

    curve = 0.55

    deltaAngle = 360 / numArms + curve

  }

}

​

​

function drawScene() {

  if (step > 3) {

     if (radius > width / 2 - 55)

      deltaRadius = -deltaRadius

​

    // if (radius < 0)

    //   reset(true)

  }

  if (step > 0)

    radius += deltaRadius

  angle += deltaAngle

  x = radius*cos(angle)

  y = radius*sin(angle)

​

  strokeWeight(24)

  stroke(255)

  if (step > 2)

    stroke(random(0, 255), random(0, 255), random(0, 255))

  if (step > 4)  

    stroke(hueVal, 100, 100)

  point(x, y)

  if (step > 4) {

    hueVal += deltaHue

​

    if (hueVal > 360)

      hueVal = 0

  }

}

​

​