html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #292a33;
  overflow: hidden;
}

const size = 20;
let d, x, y, angle, hist;

function setup() {
  createCanvas(windowWidth, windowHeight);
  angleMode(DEGREES);
  rectMode(CENTER);
  stroke(240);
  noFill();

  d = dist(0, 0, size, size);
  x = 0;
  y = height / 2;
  angle = 0;

  hist = [];
}

function draw() {
  clear();
  translate(x, y);
  rotate(angle);
  rect(0, 0, size * 2, size * 2);
  resetMatrix();

  if (x < width + size * 2) {
    const h = [];
    for (let i = 0; i < 4; i++) {
      const a = angle + 90 * i + 45;
      const tx = x + cos(a) * d;
      const ty = y + sin(a) * d;

      h.push({ x: tx, y: ty });
    }
    hist.push(h);
  }

  let prev = hist[0];
  for (let i = 1; i < hist.length; i++) {
    const cur = hist[i];
    for (let j = 0; j < 4; j++) {
      line(prev[j].x, prev[j].y, cur[j].x, cur[j].y);
    }
    prev = cur;
  }

  x++;
  angle += 0.6;
}