var dim;
let animation;
function setup() {
  smooth();
  frameRate(144);
  createCanvas(getViewport()[0], getViewport()[1]);
  background(51);
  let vp = getViewport();
  if (vp[0] > vp[1]) {
    dim = vp[1]*0.9;
  } else {
    dim = vp[0]*0.9;
  }
  animation = new Animation(width/2,height/2,dim);
}

function draw() {
  clear();
  background(255);
  animation.update(frameRate());
  animation.show();
  //text(getViewport(),100,100);
}

function getViewport() {

  var viewPortWidth;
  var viewPortHeight;

  // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
  if (typeof window.innerWidth != 'undefined') {
    viewPortWidth = window.innerWidth,
      viewPortHeight = window.innerHeight
  }

  // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
  else if (typeof document.documentElement != 'undefined' &&
    typeof document.documentElement.clientWidth !=
    'undefined' && document.documentElement.clientWidth != 0) {
    viewPortWidth = document.documentElement.clientWidth,
      viewPortHeight = document.documentElement.clientHeight
  }

  // older versions of IE
  else {
    viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
      viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
  }
  return [viewPortWidth, viewPortHeight];
}