spider graph

const bgCol = "#447abd";
const gCol = "#a2c2e8";
const nGrid = 20;
let gSpace;
let graph1;

function setup() {
  w = max(400, min(windowWidth, windowHeight) * 0.9);
  gSpace = (w / nGrid) * 0.95;
  describe("a spider graph on a blueprint design");
  createCanvas(w, w);
  rectMode(CENTER);
  n = int(random(5, 150));
  angleMode(DEGREES);
  textSize(16);
  graph1 = [];
  for (let i = 0; i < n; i++) {
    graph1[i] = int(random(1, 8));
  }
}

function draw() {
  background(bgCol);
  translate(w / 2, w / 2);
  drawGrid();
  t = frameCount;
  stroke(255);
  strokeWeight(0.5);
  for (let j = 0; j <= 8; j++) {
    r = j * gSpace;
    x1 = r * cos((360 / n) * (n - 1));
    y1 = r * sin((360 / n) * (n - 1));
    for (let i = 0; i < n; i++) {
      x = r * cos((360 / n) * i);
      y = r * sin((360 / n) * i);
      if (j === 8) {
        line(0, 0, x, y);
      }

      line(x, y, x1, y1);
      x1 = x;
      y1 = y;
    }
  }
  fill(255, 255, 255, 150);
  strokeWeight(1);
  beginShape();

  for (let i = 0; i < graph1.length; i++) {
    r = 8 * gSpace * abs(cos(cos(t / 2 - i) * sqrt(sqrt(i))) * cos(t * cos(i)));
    x = r * cos((360 / n) * i);
    y = r * sin((360 / n) * i);
    vertex(x, y);
    circle(x, y, 5);
  }
  endShape();

  noStroke();
  fill(gCol);
  text("spider graph", -w / 2 + 10, w / 2 - 5);
}

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() {
  setup();
  draw();
}
function windowResized() {
  setup();
  draw();
}