let gif;

let canvas;

let framesToSkip =10;

let makeGif = true;

let isGifExported = false;

​

function setupGif() {

    recordedFrames = 0;

​

    gif = new GIF({

        workers: 2,

        quality: 10,

        workerScript: 'gif.worker.js'

    });

​

    const uuid = parseInt(Math.random()*10000000);

    gif.on('finished', function(blob) {

        print('GIT: finished')

        rendering = false;

        window.open(URL.createObjectURL(blob));

        saveAs(blob, `bezier-${uuid}@2x.gif`);

        setupGif();

        recordedFrames = 0;

    });

}

​

function setup() {

  canvas = createCanvas(300, 200);

  setAttributes('antialias', true);

  setupGif();

}

​

let x, y, r, offset;

let w = 10;

let delta = 15

function draw() {

  if (frameCount == 1) {

    mouseX = width/2

    mouseY = height/2

  }

  background(255);

  // Drawing code here

  let t = Math.sin(0.2*frameCount)*delta + delta;

  strokeWeight(w)

  offset =  0.5*(100 + t)+w

  r = 100 + t

  x = Math.min(width - offset,

    Math.max(mouseX, 0.5*(100 + t)+w)

  )

  y = Math.min(height - offset,

    Math.max(mouseY, 0.5*(100 + t)+w)

  )

  circle(x, y, r)

  // GIF: Add frame

  if (makeGif &&

      !isGifExported &&

      frameCount >= 100 &&

      ((frameCount - 1) % framesToSkip == 0 || frameCount == 1)

     ) {

    console.log(`Added frame.`)

    gif.addFrame(canvas.elt, { delay: 30, copy: true });

  }

  // GIF: Render when done

  if (makeGif &&

      !isGifExported &&

      // replace with condition to render

      frameCount >= 500

     ) {

    print('Exporting GIF...');

    gif.render();

    isGifExported = true;

  }

}