gravity-dot.js

'use strict';

window.addEventListener('load', () => {
  const dot = document.createElement('div');
  
  for (const [key, val] of Object.entries({
    position: 'absolute',
    left: '0px',
    top: '0px',
    borderRadius: '100%',
    width: '10px',
    height: '10px',
    backgroundColor: 'blue',
    marginLeft: '-5px',
    marginTop: '-5px',
  })) {
    dot.style[key] = val;
  }
  
  document.body.appendChild(dot);
  
  const wp0 = 1;
  const r = 1;
  const g = 1;
  const K = 0.5 * r * wp0 * wp0 + 2 * g;
  
  let w = 0;
  const wp = w => Math.sqrt((2 / r) * (K - (1 + Math.cos(w)) * g));
  
  const updateDot = () => {
    const winSize = [window.innerWidth, window.innerHeight];
    const winSqSize = Math.min(...winSize);
    const radius = 0.5 * 0.8 * winSqSize;
    const center = winSize.map(x => x / 2);
    
    dot.style.left = `${center[0] + Math.sin(w) * radius}px`;
    dot.style.top = `${center[1] - Math.cos(w) * radius}px`;
  };
  
  let t = Date.now();
  
  const updatePhysics = () => {
    const dt = Date.now() - t;
    t += dt;
    
    w += (dt / 1000) * wp(w);
  };
  
  const draw = () => {
    updatePhysics();
    updateDot();
  };
  
  const loop = () => {
    draw();
    window.requestAnimationFrame(loop);
  };
  
  loop();
});