moment

const bgCol = "#447abd";
const gCol = "#a2c2e8";
const nGrid = 20;
let w;
let nV, r, mul, d;
let g = 9.81;
let gSpace;

function setup() {
  w = max(400, min(windowWidth, windowHeight) * 0.9);
  describe("");
  createCanvas(w, w);
  rectMode(CENTER);
  angleMode(DEGREES);
  textSize(16);
  gSpace = (w / nGrid) * 0.95;
}

function draw() {
  background(bgCol);
  translate(w / 2, w / 2);
  drawGrid();
  t = frameCount * 3;
  stroke(255);
  strokeWeight(1);
  for (let i = 2; i < 8; i += 0.2) {
    pend(i * gSpace, 90);
  }
  noStroke();
  fill(gCol);
  text("moment", -w / 2 + 10, w / 2 - 5);
}

function pend(L, theta0) {
  x = L * sin(theta0 * cos(sqrt(g / L) * t));
  y = L * cos(theta0 * cos(sqrt(g / L) * t));
  stroke(255);
  line(0, 0, x, y);
  fill(gCol);
  circle(x, y, 10);
  m = 0.2;
  mo = -m * g * L * sin(theta0 * cos(sqrt(g / L) * t));
  noStroke();
  rect(0, -width / 2 + L, mo, 4);
}

function drawGrid() {
  stroke(gCol);
  strokeWeight(0.3);
  for (let i = 1; i <= nGrid; i++) {
    for (let j = 1; j <= nGrid; j++) {
      line(
        -w / 2 + gSpace * i,
        -w / 2 + gSpace,
        -w / 2 + gSpace * i,
        w / 2 - gSpace
      );
      line(
        -w / 2 + gSpace,
        -w / 2 + gSpace * i,
        w / 2 - gSpace,
        -w / 2 + gSpace * i
      );
    }
  }
  noFill();
  strokeWeight(3);
  rect(0, 0, w - 2 * gSpace);
}

function mousePressed() {
  frameCount = 0;
}
function windowResized() {
  setup();
  draw();
}