index.js

let canvas = document.getElementById("c");
let ctx = canvas.getContext("2d");
let CANVAS_WIDTH = window.innerWidth;
let CANVAS_HEIGHT = window.innerHeight;
canvas.width = CANVAS_WIDTH;
canvas.height = CANVAS_HEIGHT;

// arrays
let dots = [];
let sticks = [];

// forming a BOX
dots.push(new Dot(100, 100, (Math.random() - 0.5) * 100.0); // x, y, vx, vy
dots.push(new Dot(200, 100));
dots.push(new Dot(200, 200));
dots.push(new Dot(100, 200));

// sticks
sticks.push(new Stick(dots[0], dots[1]))
sticks.push(new Stick(dots[1], dots[2]))
sticks.push(new Stick(dots[2], dots[3]))
sticks.push(new Stick(dots[3], dots[0]))
sticks.push(new Stick(dots[3], dots[1]))

function animate() {
  ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

  for (let d of dots) {
    d.update();
    d.constrain();
    d.render(ctx);
  }
  for (let s of sticks) {
    s.update();
    s.render(ctx);
  }

  requestAnimationFrame(animate);
}
animate();