circuit

const bgCol = "#447abd";
const gCol = "#a2c2e8";
const nGrid = 20;
let wt, gSpace;
let pts;

function setup() {
  w = max(400, min(windowWidth, windowHeight) * 0.9);
  describe(
    "circles follow a circuit path that traces multiple triangles on an Eulerian Cycle on a blueprint design. "
  );
  gSpace = (w / nGrid) * 0.95;
  createCanvas(w, w);
  rectMode(CENTER);
  angleMode(DEGREES);
  textSize(16);
  pts = [
    { x: 2.5 * gSpace, y: 0 },
    { x: 0, y: 2.5 * gSpace },
    { x: -2.5 * gSpace, y: 0 },
    { x: 0, y: -8.5 * gSpace },
    { x: -7.5 * gSpace, y: 7.5 * gSpace },
    { x: 7.5 * gSpace, y: 7.5 * gSpace },
    { x: 0, y: -8.5 * gSpace },
    { x: 2.5 * gSpace, y: 0 },
    { x: 7.5 * gSpace, y: 7.5 * gSpace },
    { x: 0, y: 2.5 * gSpace },
    { x: -7.5 * gSpace, y: 7.5 * gSpace },
    { x: -2.5 * gSpace, y: 0 },
    { x: 2.5 * gSpace, y: 0 }
  ];
}

function draw() {
  background(68, 122, 189);
  translate(w / 2, w / 2);
  drawGrid();
  t = 500 + frameCount / 3;
  noStroke();
  for (let i = 0; i < pts.length - 1; i++) {
    fill(162 + i * 10, 194 + i * 10, 232 + i * 10);
    lineT(pts[i].x, pts[i].y, pts[i + 1].x, pts[i + 1].y, 4 + i / 2);
  }

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

function lineT(x1, y1, x2, y2, r) {
  circle(x1, y1, 10);
  circle(x2, y2, 10);
  let n = 10;
  if (x1 > x2) {
    let m = (y2 - y1) / (x2 - x1);
    let s = (x2 - x1) / n;
    for (let i = 0; i < n; i++) {
      let x = x1 - ((s * i + t) % (s * n));
      circle(x, m * (x - x1) + y1, r);
    }
  } else {
    let m = (y2 - y1) / (x2 - x1);
    let s = (x2 - x1) / n;
    for (let i = 0; i < n; i++) {
      let x = x1 + ((s * i + t) % (s * n));
      circle(x, m * (x - x1) + y1, r);
    }
  }
}

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