let pendulum;
let stop = true;

function setup() {
  frameRate(144);
  createCanvas(getViewport()[0], getViewport()[1] - 4);
  pendulum = new Drawing(width / 2, height / 2, width / 1920 * 0.5, 4);
  slider = createSlider(0, 10, 1);
  button = createButton('refresh');
  button.position(width / 2 - 40, 25);
  button.mousePressed(buttonCall);
  slider.position(width / 2 - 70, 0);
  stroke(50);
}

function draw() {
  clear();
  background(240);

  if (!stop) {
    for (let i = 0; i < slider.value(); i++) {
      pendulum.update();
    }
  }
  pendulum.show();

  // strokeWeight(0);
  // text(Math.ceil((a1 * 180 / Math.PI) - Math.PI / 2), -7.5, -15);
}

function buttonCall() {
  pendulum.refresh();
}

function keyPressed() {
  if (keyCode === 32) {
    if (stop === false) {
      stop = true;
    } else {
      stop = false;
    }
  }
}

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];
}