JS_Projects/clock/sketch.js

let pendulums = [];
let stop = true;
let t = 0;
let s = 1;
let st = true;
function setup() {
  frameRate(144);
  createCanvas(getViewport()[0], getViewport()[1]-4);
  pendulums.push(new Pendulum(width/2,height/2,width/1920 * 1.5,7/6*0.5));
  pendulums.push(new Pendulum(width/2,height/2,width/1920 * 1.5,6/6*0.5));
  pendulums.push(new Pendulum(width/2,height/2,width/1920 * 1.5,5/6*0.5));
  slider = createSlider(0, 10, 1);
  button = createButton('refresh');
  button.position(width / 2 - 40, 25);
  button.mousePressed(buttonCall);
  slider.position(width / 2 - 70, 0);
  // 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);
  textSize(width/1920 * 1.5 * 40);
}

function draw() {
  clear();
  background(240);
  push();
  stroke(50);
  strokeWeight(width/1920 * 1.5 * 7);
  //line((width/2),(height/7), (width/2),(height/6));
  line((width/2)-(width/1920 * 1.5 * 100 * 2) - width/1920 * 1.5 * 10,height/2, (width/2)-(width/1920 * 1.5 * 100 * 2) - width/1920 * 1.5 * 30,height/2);
  line((width/2)+(width/1920 * 1.5 * 100 * 2) + width/1920 * 1.5 * 10,height/2, (width/2)+(width/1920 * 1.5 * 100 * 2) + width/1920 * 1.5 * 30,height/2);

  //line((width/2),height/7*6, (width/2),(height/6*5));
  line((width/2),height/2 - (width/1920 * 1.5 * 100 * 2) - width/1920 * 1.5 * 10, (width/2),height/2-(width/1920 * 1.5 * 100 * 2) - width/1920 * 1.5 * 30);
  line((width/2),height/2 + (width/1920 * 1.5 * 100 * 2) + width/1920 * 1.5 * 10, (width/2),height/2+(width/1920 * 1.5 * 100 * 2) + width/1920 * 1.5 * 30);
  pop();
  st = stop;
  s = slider.value();
  for(let i = 0; i < pendulums.length; i++){
    if(!st)
    for (let y = 0; y < s; y++) {
      //pendulum.update();
      pendulums[i].update();
    }
    pendulums[i].show();
  }
  if(!st)
    t+=s;
  text(Math.round(t/144/2 * 100 + Number.EPSILON ) / 100, width/1920 * 1.5 * 100, height/2-width/1920 * 1.5 * 40/2, 300, 100);

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

function buttonCall() {
  for(let i = 0; i < pendulums.length; i++){
    //pendulums[i].refresh();
    pendulums = [];
    t = 0;
    pendulums.push(new Pendulum(width/2,height/2,width/1920 * 1.5,7/6*0.5));
    pendulums.push(new Pendulum(width/2,height/2,width/1920 * 1.5,6/6*0.5));
    pendulums.push(new Pendulum(width/2,height/2,width/1920 * 1.5,5/6*0.5));
  }
}


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