Jacobian

let t = 0;
let n = 25;
let c;
let onionConstant = 0.557306692985664478851093059145927180832;
function setup() {
  domain = [-2 * PI, 2 * PI];
  createCanvas(500, 500);
  background(255);
  describe(
    "On staticky radial graph paper a half a circle is drawn with slicing from a single point that starts at the origin and moves down to show onion cutting strategies. Random points are drawn with shading based on a jacobian calculation so that the citer starts lighter and things get darker.  "
  );
  rectMode(CENTER);
  strokeWeight(0.5);
  strokeCap(SQUARE);
  rs = [];
  t = 0;
}

function draw() {
  background(245, 250, 255, 20);
  translate(width / 2, height / 2);
  stroke(100, 110, 120, 10);

  drawGrid();
  t += 0.008;
  c = {
    x: 0,
    y: (width / 25) * 8 * onionConstant * abs(sin(t))
  };
  noFill();
  r = (width / 25) * 16;
  stroke(30, 40, 50, 100);

  strokeWeight(1);
  line(-width / 2 + width / 25, 0, width / 2 - width / 25, 0);
  for (let i = 0; i < 8; i++) {
    arc(0, 0, r - (i * width) / 12.5, r - (i * width) / 12.5, PI, 2 * PI);
  }

  for (let i = 0; i < 25; i++) {
    line(
      c.x,
      c.y,
      (r / 2) * cos((-i * PI) / 25),
      (r / 2) * sin((-i * PI) / 25)
    );
    line(
      c.x,
      c.y,
      (r / 2) * cos((-(i + 1) * PI) / 25),
      (r / 2) * sin((-(i + 1) * PI) / 25)
    );
  }
  noStroke();

  for (let i = 0; i < 2000; i++) {
    fill(100, 100, 100);
    rad1 = random(0, r / 2);
    theta = random(0, PI);
    jac = jacobian(rad1, theta);
    fill(235 - jac, 245 - jac, 255 - jac);
    x1 = rad1 * cos(theta);
    y1 = -rad1 * sin(theta);

    if (!isNaN(jac)) {
      circle(x1, y1, 3);
    }
  }

  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 jacobian(r1, theta) {
  h = abs(c.y);
  h2 = h * h;
  x = r1 * cos(theta);
  y = r1 * sin(theta);
  thetaH = PI / 2 - Math.atan2(h + y, x);
  C = Math.cos(thetaH);
  S = Math.sin(thetaH);
  S2 = S * S;
  term1 = r1 * r1 - h2 * S2;
  if (term1 <= 0) {
    return NaN;
  }
  sqrtTerm = Math.sqrt(term1);
  n1 =
    r1 *
    C *
    (S * (-1 * ((h2 * S * C) / sqrtTerm) - h * S) + C * (sqrtTerm + h * C));
  n2 =
    r1 *
    S *
    (C * ((-1 * (h2 * S * C)) / sqrtTerm - h * S) - S * (sqrtTerm + h * C));

  jacob = n1 / sqrtTerm - n2 / sqrtTerm;
  return jacob;
}

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 < 500; i++) {
    x = random(-width / 2, width / 2);
    y = random(-width / 2, width / 2);
    fill(245, 250, 255, 150);
    circle(x, y, 2);
  }
}