tokyo olympic emblem tiling for p5.js

emblem.js

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  var unitSize = windowHeight / 8.0;
  var length30 = unitSize * (1.0 + sqrt(3)) / sqrt(2);
  var length60 = unitSize * sqrt(3);
  var length90 = unitSize * sqrt(2);

  var i;
  background(255);
  noFill();
  push();
  translate(width / 2, height / 2);

  for (i = 0; i < 12; i++) {
    push();
    rotate(PI / 6.0 * i)
    drawRect(30, unitSize);
    pop();
  }

  rotate(PI / 12.0)

  for (i = 0; i < 12; i++) {
    push();
    rotate(PI / 6.0 * i)
    translate(unitSize, 0);
    drawRect(60, unitSize);
    pop();
  }
  rotate(PI / 12.0)

  for (i = 0; i < 12; i++) {
    push();
    rotate(PI / 6.0 * i)
    translate(length30, 0);
    drawRect(90, unitSize);
    pop();
  }
  rotate(PI / 12.0)

  for (i = 0; i < 12; i++) {
    push();
    rotate(PI / 6.0 * i)
    translate(unitSize + length60, 0);
    drawRect(120, unitSize);
    pop();
  }
  rotate(PI / 12.0)

  for (i = 0; i < 12; i++) {
    push();
    rotate(PI / 6.0 * i)
    translate(length30 + length90, 0);
    drawRect(150, unitSize);
    pop();
  }
  rotate(PI / 12.0)

  pop();
}

function drawRect(angle, size) {
  var radian = angle * PI / 180.0;
  push();
  stroke(255, 0, 0, 63);
  rotate(-radian / 2.0);
  beginShape();
  vertex(0, 0);
  vertex(size, 0);
  vertex(size + size * cos(radian), size * sin(radian));
  vertex(size * cos(radian), size * sin(radian));
  endShape(CLOSE);
  stroke(200);
  line(size / 2.0 * cos(radian), size / 2.0 * sin(radian), size + size / 2.0 * cos(radian), size / 2.0 * sin(radian));
  line(size / 2.0, 0, size / 2.0 + size * cos(radian), size * sin(radian));
  noStroke();
  fill(0, 0, 63, 127);
  beginShape();
  vertex(size / 2.0 * cos(radian), size / 2.0 * sin(radian));
  vertex(size / 2.0 + size * cos(radian), size * sin(radian));
  vertex(size + size / 2.0 * cos(radian), size / 2.0 * sin(radian));
  vertex(size / 2.0, 0);
  endShape(CLOSE);
  pop();
}