JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='animation' width='600' height='600' style='background: #ccc'></canvas>

JavaScript

let data = [
  { "UserId": 38, "Connections":[39,40] },
  { "UserId": 39, "Connections":[40] },
  { "UserId": 40, "Connections":[] }
];

const canvas = document.getElementById('animation');
const ctx = canvas.getContext('2d');

// from const to let so we can add users
let users = [];

// random X position
function getRandomX() {
 return Math.round(Math.random() * (canvas.width - 80));
}

// random Y position
function getRandomY() {
 return Math.round(Math.random() * (canvas.height - 80));
}

// random Direction
function getDir() {
	return Math.random() > 0.5 ? 1 : -1;
}

// separate function to add a user
// a `user` is a user response object from the webservice
// eg. one object from the above `data` object
function addUser(user) {
	users.push({
  	id: user.UserId,
    connections: user.Connections,
    width: 80,
    height: 80,
    x: getRandomX(),
    y: getRandomY(),
    dir: {
    	x: getDir(),
      y: getDir()
    }
  });
}

// loop over current bootstrapped data and add each set as user
data.forEach(user => {
	addUser(user);
});

// this is the same
function drawUsers () {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
  
	users.forEach(user => {
    ctx.beginPath();
  	ctx.rect(user.x, user.y, user.width, user.height);
    ctx.strokeStyle = 'red';
    ctx.stroke();
    ctx.closePath();
    
    user.connections.forEach(connection => {
    	const other = users.find(user => user.id === connection);
      
      ctx.beginPath();
      ctx.moveTo(user.x + (user.width / 2), user.y + (user.height / 2));
      ctx.lineTo(other.x + (other.width / 2), other.y + (other.height / 2));
      ctx.strokeStyle = 'black';
      ctx.stroke();
      ctx.closePath();
    });
  });
  
  window.requestAnimationFrame(drawUsers);
}

function updateUsers () {
	users.forEach(user => {
  	if (user.x <= 0) user.dir.x = 1;
  	if (user.x + user.width > canvas.width) user.dir.x = -1;
    if (user.y <= 0) user.dir.y = 1;
    if (user.y + user.height > canvas.height) user.dir.y =...