simply connected

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

function setup() {
  w = max(400, min(windowWidth, windowHeight) * 0.9);
  describe(
    "a sphere with circles moving up and down its surface rotates on a blueprint canvas"
  );
  gSpace = (w / nGrid) * 0.95;
  createCanvas(w, w, WEBGL);
  rectMode(CENTER);
  d = w;
  angleMode(DEGREES);
  describe(
    "A sphere with parallel circles spins where the circles move up and down it's surface over time. The sketch is 3d on a 2d blueprint design. "
  );
  textScreen = createGraphics(400, 400);
  textScreen.textSize(16);
  textScreen.fill(gCol);
  textScreen.text("simply connected", 100, 100);
}

function draw() {
  background(bgCol);
  orbitControl();
  ambientLight(gCol);
  pointLight(205, 205, 205, 1200, 0, 300);
  drawGrid();
  t = 360 * sin(frameCount / 30);
  stroke(255);
  strokeWeight(1);
  a = 50;
  b = 0.4;
  r = 4 * gSpace;
  noStroke();
  fill(gCol);
  push();
  rotateY(t);
  rotateZ(t);
  rotateX(t / 2);
  sphere(r, 24, 24);
  for (let i = 0; i < 6; i++) {
    push();
    s = r * sin((360 / 6) * i + t);
    fill(255);
    translate(0, s, 0);
    cylinder(sqrt(r * r - s * s) + 1, 2, 24, 24, 0, 0);
    pop();
  }
  push();
  pop();
  fill(255);
  translate(0, 40, 0);
  pop();
  noStroke();
  fill(gCol);
  push();
  translate(-90, width - 110, 0);
  drawingContext.disable(drawingContext.DEPTH_TEST);
  drawingContext.enable(drawingContext.BLEND);
  image(textScreen, -width / 2, -height / 2);
  drawingContext.enable(drawingContext.DEPTH_TEST);

  pop();
}

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();
}