let pendulums = [];
let stop = true;
function setup() {
  frameRate(144);
  createCanvas(getViewport()[0], getViewport()[1]-4);
  pendulums.push(new Pendulum(width/4-width/8,height/2,width/1920 * 0.5));
  pendulums.push(new Pendulum(width*2/4-width/8,height/2,width/1920 * 0.5));
  pendulums.push(new Pendulum(width*3/4-width/8,height/2,width/1920 * 0.5));
  pendulums.push(new Pendulum(width*4/4-width/8,height/2,width/1920 * 0.5));
  for(let i = 0; i < pendulums.length; i++){
    pendulums[i].show();
  }
  // slider = createSlider(0, 10, 1);
  // slider.position(50, 0);
  stroke(50);
}

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

  for(let i = 0; i < pendulums.length; i++){
    if(!stop)
    pendulums[i].update();
    pendulums[i].show(frameCount);
  }

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

function keyPressed() {
  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];
}