elliptic

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

function setup() {
  w = max(400, min(windowWidth, windowHeight) * 0.9);
  gSpace = (w / nGrid) * 0.95;
  describe(
    "a trammel of archimedes drawn with reflection over the x and y axis to look more like a lattice with ellipses that result shown on a blueprint design. Animated to draw the ellipses"
  );
  createCanvas(w, w);
  rectMode(CENTER);

  d = w;
  angleMode(DEGREES);
  textSize(16);
  r = 4 * gSpace;
}

function draw() {
  background(bgCol);
  translate(w / 2, w / 2);
  drawGrid();
  t = frameCount / 3;
  stroke(255, 255, 255, 30);
  strokeWeight(5);
  line(0, r, 0, -r);
  line(r, 0, -r, 0);
  strokeWeight(1);
  noStroke();
  fill(255);
  x1 = 0;
  y1 = r * sin(t);
  x2 = r * cos(t);
  y2 = 0;
  m = (y2 - y1) / (x2 - x1);
  function gety(x) {
    y = m * x + y1;
  }
  d = r;
  dx = d / sqrt(1 + m * m);
  dy = (d * m) / sqrt(1 + m * m);
  if (x2 < 0) {
    x3 = x1 + dx;
    y3 = y1 + dy;
  } else {
    x3 = x1 - dx;
    y3 = y1 - dy;
  }

  d = r / 2;
  dx = d / sqrt(1 + m * m);
  dy = (d * m) / sqrt(1 + m * m);
  if (x2 < 0) {
    x4 = x2 - dx;
    y4 = y2 - dy;
  } else {
    x4 = x2 + dx;
    y4 = y2 + dy;
  }

  stroke(255);
  circle(x1, y1, 5);
  circle(x2, y2, 5);
  circle(-x1, -y1, 5);
  circle(-x2, -y2, 5);
  line(x1, y1, x2, y2);
  line(-x1, -y1, -x2, -y2);
  line(-x1, -y1, x2, y2);
  line(x1, y1, -x2, -y2);
  line(x1, y1, x3, y3);
  line(x1, y1, -x3, y3);
  line(-x1, -y1, x3, -y3);
  line(x2, y2, x4, -y4);
  line(-x2, -y2, -x4, y4);
  line(x2, y2, x4, y4);
  line(-x1, -y1, -x3, -y3);
  line(-x2, -y2, -x4, -y4);
  fill(255, 255, 255, 30);
  stroke(255, 255, 255, 150);
  ellipse(0, 0, 2 * r, 4 * r);
  ellipse(0, 0, 3 * r, r);
  noStroke();
  noStroke();
  fill(bgCol);
  rect(-width / 2 + gSpace / 2, 0, gSpace, height);
  rect(width / 2 - gSpace / 2, 0, gSpace, height);
  rect(0, -width / 2 + gSpace / 2, height, gSpace);
  rect(0, width / 2 - gSpace / 2, height, gSpace);

  fill(gCol);
  text("elliptic", -w / 2 + 10, w / 2 - 5);
}

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