Faithful

let t = 0;
let n = 25;

let d;

function setup() {
  createCanvas(500, 500);
  background(255);
  describe(
    "on staticky radial graph paper, two half circles are drawn with 3 circles in each with arrow like connections that are symmetric to each other, but one has extra lines representing a rough idea of a functor diagram"
  );
  rectMode(CENTER);
  strokeWeight(0.5);
  strokeCap(SQUARE);
  d = width / 25;
}

function draw() {
  background(245, 250, 255, 20);
  translate(width / 2, height / 2);
  stroke(100, 110, 120, 10);
  drawGrid();
  t += 0.01;
  noFill();
  noStroke();
  for (let i = 0; i < 1000; i++) {
    fill(30, 40, 50, 50);
    r = random(0, d * 9);
    theta = random(0, PI);
    circle(r * cos(theta), r * sin(theta), 4);
    fill(190, 200, 210, 50);
    circle(r * cos(theta), -r * sin(theta), 4);
  }
  stroke(100, 110, 120);
  strokeWeight(2);

  fill(150, 160, 170, 60);
  an = PI / 25;
  r = d * 6;

  circle(r * cos(an * 20), r * sin(an * 20), 40);
  circle(r * cos(an * 20), -r * sin(an * 20), 40);
  fill(110, 120, 130, 90);
  circle(r * cos(an * 12), r * sin(an * 12), 40);
  circle(r * cos(an * 12), -r * sin(an * 12), 40);

  fill(230, 240, 250, 90);
  circle(r * cos(an * 5), r * sin(an * 5), 40);
  circle(r * cos(an * 5), -r * sin(an * 5), 40);

  noFill();
  circle(r * cos(an * 20), -r * sin(an * 20), 50);
  circle(r * cos(an * 12), -r * sin(an * 12), 50);
  circle(r * cos(an * 5), -r * sin(an * 5), 50);
  strokeWeight(3);
  stroke(10, 20, 30, 100);

  arc(0, 0, r * 2, r * 2, an * 13, an * 19);
  circle(r * cos(an * 19), r * sin(an * 19), 10);
  stroke(100, 110, 120);
  arc(0, 0, r * 3.4, r * 1.3, an * 5, an * 20);
  circle(r * cos(an * 20), r * sin(an * 20), 10);

  push();
  stroke(255);
  rotate((-PI / 25) * 8);
  arc(0, 0, r * 2, r * 2, an * 13, an * 19);
  circle(r * cos(an * 19), r * sin(an * 19), 10);
  pop();

  push();
  scale(1, -1);
  stroke(10, 20, 30, 100);
  arc(0, 0, r * 2, r * 2, an * 13, an * 19);
  arc(0, 0, r * 1.9, r * 1.9, an * 13, an * 19);
  circle(r * cos(an * 19), r * sin(an * 19), 10);
  stroke(100, 110, 120);
  arc(0, 0, r * 3.4, r * 1.3, an * 5, an * 20);
  arc(0, 0, r * 3.3, r * 1.2, an * 5, an * 20);
  circle(r * cos(an * 20), r * sin(an * 20), 10);

  push();
  stroke(255);
  rotate((-PI / 25) * 8);
  arc(0, 0, r * 2, r * 2, an * 13, an * 19);
  arc(0, 0, r * 1.9, r * 1.9, an * 13, an * 19);
  circle(r * cos(an * 19), r * sin(an * 19), 10);
  pop();

  pop();
  stroke(40, 50, 60);
  strokeWeight(2);
  for (let i = 0; i < 10; i++) {
    d1 = abs(2 * r * sin(20 * an)) / 10;
    if (i % 2 === 0) {
      stroke(0);
    } else {
      noStroke();
    }
    line(
      r * cos(20 * an),
      r * sin(20 * an) - ((i + t) % 10) * d1,
      r * cos(20 * an),
      r * sin(20 * an) - d1 * ((i + t + 1) % 10)
    );
  }

  for (let i = 0; i < 12; i++) {
    d1 = abs(2 * r * sin(12 * an)) / 12;
    if (i % 2 === 0) {
      stroke(0);
    } else {
      noStroke();
    }
    line(
      r * cos(12 * an),
      r * sin(12 * an) - d1 * ((i + t) % 12),
      r * cos(12 * an),
      r * sin(12 * an) - d1 * ((i + t + 1) % 12)
    );
  }

  for (let i = 0; i < 15; i++) {
    d1 = abs(2 * r * sin(20 * an)) / 15;
    if (i % 2 === 0) {
      stroke(0);
    } else {
      noStroke();
    }
    line(
      r * cos(5 * an),
      r * sin(5 * an) - d1 * ((i + t) % 15),
      r * cos(5 * an),
      r * sin(5 * an) - d1 * ((i + t + 1) % 15)
    );
  }
  stroke(100, 110, 120);
  circle(0, 0, r * 3);
  line(-r * 1.5, 0, r * 1.5, 0);

  strokeWeight(1);
  noFill();
  stroke(100, 110, 120, 30);
  rect(0, 0, width / 1.02, width / 1.02);
  rect(0, 0, width / 1.04, width / 1.04);
}

function drawGrid() {
  for (let i = 0; i < n; i++) {
    rotate((2 * PI) / n);
    line(-width / 1.5, 0, width / 1.5, 0);
    circle(0, 0, (width / n) * 2 * i);
  }
  noStroke();
  for (let i = 0; i < 100; i++) {
    x = random(-width / 2, width / 2);
    y = random(-width / 2, width / 2);
    fill(245, 250, 255, 150);
    circle(x, y, 3);
  }
}

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