Toroid p5js experiment #1: embed two toroids with an offset phi variable and use two different palettes

Toroid-03.js

function setup() {
  createCanvas(800, 800, WEBGL);
}

function draw() {

  background("#111515");

  let scaleFactor = 1;

  let R = 200;
  let r = 60;

  let n1 = 17;
  let n2 = 57;

  // Grayscale
  let colorsGray = [
    "f8f9fa",
    "e9ecef",
    "dee2e6",
    "ced4da",
    "adb5bd",
    "6c757d",
    "495057",
    "343a40",
    "212529"
  ];

  let c6 = ["ff595e","ffca3a","8ac926","1982c4","6a4c93"];

  strokeWeight(3);
  noFill();
  scale(scaleFactor);

  function donut(offset, palette) {
    let colors = palette.map(function(i) { return '#' + i; });
    i = 0;
    for(t = 0; t < 1031; t++) {

      if (t%30 == 0) {
        beginShape();
      }
      let th  = (t % n1) * 2 * PI / n1;
      let phi = (t % n2) * 2 * PI / n2 + offset;

      let x = R*cos(phi) + r*cos(phi)*cos(th);
      let y = R*sin(phi) + r*sin(phi)*cos(th);
      let z = r*sin(th);

      curveVertex(x,y,z);

      if (t%30 == 29) {
        endShape();
        stroke(colors[i % colors.length]);
        i++;
      }
    }
  }

  palets = [colorsGray, c6];
  donut(0, palets[0]);
  donut(0.4, palets[1]);

  // draw palette
  for(k = 0; k < palets.length; k++) {
    for(j = 0; j < palets[k].length; j++) {
      let cp = palets[k].map(function(i) { return '#' + i; });
      fill(cp[j]);
      stroke(cp[j]);
      square((j+1)*30, 300 + 2*k*20, 20);
    }
  }
}