JSFiddle - React, Tailwind, and code Playground

by magneto903

HTML

<canvas id="canvas" width=400 height=400></canvas>

JavaScript

// тех. параметры

r1 = 50 // радиус внутреннего кольца
r2 = 150 // радиус внешнего кольца

// координаты центра призмы
center_x = 200 
center_y = 200

// сгенерируем граф: N-призму
N=3

// маленькие числа - внутреннее кольцо
// большие числа - внешнее кольцо

// коориданты точек
var points = {}

// отношения между точками
var graph = {}

// генерация внутреннего и внешнего кольца 
var step = Math.PI*2/N

for (var i=0; i < N; i++) {
	// направление луча
	var angle = i*step
  
  // точка внутреннего кольца
  var x1 = center_x + Math.cos(angle)*r1;
  var y1 = center_y + Math.sin(angle)*r1;
  points[String(i)] = {"x": x1, "y": y1};
  
  // точка внешнего кольца
  var x2 = center_x + Math.cos(angle)*r2;
  var y2 = center_y + Math.sin(angle)*r2;
  points[String(i+N)] = {"x": x2, "y": y2};
  
  // добавим их в граф
  graph[String(i)] = []
  graph[String(i+N)] = []
}

print(graph)

// построим рёбра графа
// проход по обоим кольцам одновременно
for (var i=0; i < N-1; i++) {
  // ребро между кольцами
  graph[String(i)].push(String(i+N))
  graph[String(i+N)].push(String(i))
  
  // ребро-сегмент внутреннего кольца
  graph[String(i)].push(String(i+1))
  graph[String(i+1)].push(String(i))
  
  // ребро-сегмент внешнего кольца
  graph[String(i+N)].push(String(i+N+1))
  graph[String(i+N+1)].push(String(i+N))
}

// последнее ребро
b = String(0)
e = String(N-1)

graph[b].push(e)
graph[e].push(b)

graph[e].push(e+N)
graph[e+N].push(e)

graph[b+N].push(e+N)
graph[e+N].push(b+N)