twisted sphere

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

function setup() {
  w = max(400, min(windowWidth, windowHeight) * 0.9);
  describe("");
  createCanvas(w, w, WEBGL);
  rectMode(CENTER);
  d = w;
  angleMode(DEGREES);
  describe(
    "3 twisted spheres drawn with white lines. they are rotationally symetrically in a triangle to start - almost like trillium, but animate , turn, and stretch in a dance. The design is in a bluepring style. "
  );
  textScreen = createGraphics(400, 400);
  textScreen.textSize(16);
  textScreen.fill(gCol);
  textScreen.text("twisted sphere", 100, 100);
}

function draw() {
  background(bgCol);
  orbitControl();

  drawGrid();
  t = 360 * sin(frameCount / 30);
  stroke(255);
  strokeWeight(1);
  a = 50;
  b = 0.4;
  push();
  translate(0, 0, 0);
  rotateZ(t);
  rotateX(90);

  noFill();
  stroke(255);
  push();
  translate(0, 0, 100);
  twistedSphere();
  pop();
  push();

  rotateY(120);
  translate(0, 0, 100);
  twistedSphere();
  pop();
  push();

  rotateY(240);
  translate(0, 0, 100);
  twistedSphere();
  pop();

  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 twistedSphere() {
  beginShape();
  for (let u = 0; u <= 360; u += 10) {
    for (let v = 0; v <= 360; v += 15) {
      x = a * cos(u + t) * cos(v + t);
      y = a * sin(u + t) * cos(v + t);
      z = a * sin(v + t) - b * u * cos(-t / 2);
      push();

      vertex(x, y, z);
      pop();
    }
  }
  endShape();
}
function drawGrid() {
  const gSpace = (w / nGrid) * 0.95;
  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();
}