tangent

let nV, d, r, c1, t;

function setup() {
  createCanvas((d = 500), d);
  rectMode(CENTER);
  colors = random([col1, col2, col3, col4, col5]);
  nV = random([3, 4, 5, 6, 7, 8, 9]);
  mul = [0.89, 0.92, 0.93, 0.935, 0.935, 0.94, 0.945];
  r = (d * 0.8) / 2;
  c1 = random([3, 4, 5]);
  c2 = random([2, 6, 7, 8, 9]);
  c3 = random([0, 1, 2]);
  c4 = random([4, 8, 7, 9]);
  dep = random([1, 2, 3, 4, 5, 7]);
  dep2 = random(dep, dep + 3);
  angleMode(DEGREES);
}

function draw() {
  t1 = frameCount / 3;
  translate(d / 2, d / 2);
  background(colors[c1 - 3]);
  border();
  stroke(colors[c4]);
  strokeWeight(2);
  push();
  rotate(-t1 / 5);
  for (let i = 0; i < dep; i++) {
    push();
    scale(1 - (0.95 / dep) * i, 1 - (0.95 / dep2) * i);
    tang(Math.pow(-1, i) * t1);
    pop();
  }
  pop();
}

function tang(t) {
  for (let i = 0; i < nV; i++) {
    let theta1 = (360 / nV) * i;
    let theta2 = (360 / nV) * (i + 1);
    x1 = r * cos(theta1);
    y1 = r * sin(theta1);
    x2 = r * cos(theta2);
    y2 = r * sin(theta2);
    line(x1, y1, x2, y2);
    r3 = dist(
      r * cos(theta1),
      r * sin(theta1),
      0.9 * r * cos(theta1),
      0.9 * r * sin(theta1)
    );
    dx = r * mul[nV - 3] * cos(theta2) - r * mul[nV - 3] * cos(theta1);
    dy = r * mul[nV - 3] * sin(theta2) - r * mul[nV - 3] * sin(theta1);
    nn = 3;
    for (let j = 0; j < nn; j++) {
      x = x1 * mul[nV - 3] + dx * abs(sin((t + (360 / nn) * j) % 90));
      y = y1 * mul[nV - 3] + dy * abs(sin((t + (360 / nn) * j) % 90));
      push();
      strokeWeight(1);
      stroke(colors[c3]);
      translate(x, y);
      fill(colors[c1]);
      circle(0, 0, r3);
      fill(colors[c2]);
      circle(r * 0.02 * cos(t * 14), r * 0.02 * sin(t * 14), r * 0.03);

      pop();
    }
  }
}

function border() {
  noFill();
  fill(colors[c1]);
  stroke(colors[c2]);
  const d1 = (d * 0.9) / 2;
  beginShape();
  vertex(-d1, 0);
  vertex(-d1, d1);
  vertex(d1, d1);
  vertex(d1, 0);
  for (let i = 0; i <= 180; i += 1) {
    vertex(d1 * cos(i), d1 * sin(i));
  }
  vertex(-d1, 0);
  endShape();

  beginShape();
  vertex(-d1, 0);
  vertex(-d1, -d1);
  vertex(d1, -d1);
  vertex(d1, 0);
  for (let i = 0; i >= -180; i -= 1) {
    vertex(d1 * cos(i), d1 * sin(i));
  }
  vertex(-d1, 0);
  endShape();

  noFill();
  strokeWeight(4);
  rect(0, 0, d * 0.95, d * 0.95, 3);
  stroke(colors[1]);
}

function static() {}

let colors;

let col1 = [
  "#050706",
  "#3b3735",
  "#8c7d79",
  "#e7ccc6",
  "#d9c3d8",
  "#beb2e2",
  "#a3a3eb",
  "#afaeef",
  "#babaf3",
  "#c2c6f1"
];

let col2 = [
  "#080605",
  "#233731",
  "#438374",
  "#62d9bf",
  "#85e0a4",
  "#9adc79",
  "#a7da52",
  "#b3e564",
  "#bff176",
  "#ccf58c"
];

let col3 = [
  "#000000",
  "#1e2b2b",
  "#3e6363",
  "#60a3a3",
  "#61a792",
  "#5da678",
  "#5aa360",
  "#779b5a",
  "#8d9253",
  "#a1945f"
];

let col4 = [
  "#0f0a0a",
  "#1b1515",
  "#382b31",
  "#9c7b9b",
  "#e3b4ca",
  "#ebc28d",
  "#efce82",
  "#f4d89b",
  "#e4cfaf",
  "#ccc2c1"
];

let col5 = [
  "#323a3b",
  "#2c3435",
  "#394344",
  "#9aaeb1",
  "#d4f7f1",
  "#c2f8db",
  "#a7e5ce",
  "#83c4c7",
  "#8bb9be",
  "#9bb2b5"
];

function mousePressed() {
  setup();
  draw();
}