Código de ejemplo (abrir con cuidado ya que puede trabar el navegador con el tiempo):
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
let grafos = []
function randomGraph() {
return {
x: Math.random() * 500,
y: Math.random() * 500,
w: 5 + Math.random() * 70,
h: 5 + Math.random() * 70
}
}
function middleX(g) {
return g.x + (g.w / 2)
}
function middleY(g) {
return g.y + (g.h / 2)
}
function draw() {
ctx.clearRect(0, 0, 500, 500);
let c = 2 + Math.trunc(Math.random() * 5)
let columns = c
grafos.length = 0
for (let i = 0; i < c; i++) {
grafos.push(randomGraph())
}
ctx.fillStyle = "#FFFFFF"
ctx.fillRect(0, 0, 500, 500);
ctx.fillStyle = "#00FF00";
for (let i = 0; i < grafos.length; i++) {
ctx.strokeStyle = "#0000FF";
ctx.fillRect(grafos[i].x, grafos[i].y, grafos[i].w, grafos[i].h);
ctx.rect(grafos[i].x, grafos[i].y, grafos[i].w, grafos[i].h);
ctx.stroke();
}
ctx.lineWidth = 2;
ctx.strokeStyle = "#FF0000";
for (let y = 0; y < columns; y++) {
for (let x = 0; x < columns; x++) {
let index = (y * columns + x) % grafos.length
let index2 = ((y + 1) * columns + (x + 1)) % grafos.length
//console.log('index', index, index2)
ctx.moveTo(middleX(grafos[index]), middleY(grafos[index]))
ctx.lineTo(middleX(grafos[index2]), middleY(grafos[index2]))
ctx.stroke()
}
}
window.requestAnimationFrame(draw)
}
window.requestAnimationFrame(draw)
https://stackblitz.com/edit/web-platform-nex6wm?file=index.html