let canvasS = 800;

let tilingOffset = 0;

​

let moves;

let tilingSize;

let place;

let colors;

let squareR;

​

function setup() {

  createCanvas(canvasS, canvasS);

  background(220)

  stroke(199, 152, 44);

  strokeWeight(5);

​

  colors = []

  colors[0] = color(255, 204, 160);

  colors[1] = color(98, 95, 190)

​

  squareR = octaSideL(octaR) * sqrt(2) / 2;

  let squareS = octaSideL(octaR);

  let octaS = octaSideL(octaR);

  let octaHH = octaHalfHeight(octaS, octaR);

​

  moves = {

    down: createVector(0, octaHH * 2),

    downRight: createVector(

      vecByAngle(45, octaHH + squareS / 2, "cos"),

      vecByAngle(45, octaHH + squareS / 2, "sin")),

    upRight: createVector(

      vecByAngle(45, octaHH + squareS / 2, "cos"),

      -vecByAngle(45, octaHH + squareS / 2, "sin")),

​

  };

​

  tilingSize = createVector(

    ceil(canvasS / (octaR)),

    ceil(canvasS / (octaR * 0.8)));

​

  // let tilingSize = createVector(5, 6)

  place = createVector(tilingOffset, tilingOffset);

  ///////////////////////////////////////////////////////

​

​

  frameRate(60)

}

​

function draw() {

​

​

​

​

  for (let j = 0; j <= tilingSize.x; j++) {

​

    place.set(tilingOffset, tilingOffset);

    place.y = moves["down"].y * j

​

    for (let i = 0; i <= tilingSize.y; i++) {

​

      let ctrl = abs(i % 2);

​

      fill(colors[ctrl]);

      // push()

      // rotate(millis()*PI/180 /55)

      // translate(200,200)

      if (ctrl == 0) {

        polygon(place.x, place.y, octaR, 8, 45 / 2)

        place.add(moves["upRight"]);

      } else if (ctrl == 1) {

        polygon(place.x, place.y, squareR, 4, 0)

        place.add(moves["downRight"]);

      }

      // pop()

    }

  }

​

​

​

​

​

​

​

​

​

​

}

​

​

​

​

​

​

​

​

​

function vecByAngle(angle, magnitude, cosOrSin) {

  if (cosOrSin == "sin")

    return sin(angle * PI / 180) * magnitude;

  else if (cosOrSin == "cos")

    return cos(angle * PI / 180) * magnitude;

}

​

​

function octaSideL(radius) {

  return radius * sin(PI / 4) / sin(67.5 * PI / 180);

}

​

function octaHalfHeight(side, radius) {

  return sqrt(sq(radius) - sq(side / 2));

}

​

​

function polygon(x, y, radius, npoints, rotation) {

  let angle = TWO_PI / npoints;

  let offsetAngle = rotation * PI / 180;

  beginShape();

  for (let a = 0; a < TWO_PI; a += angle) {

    let sx = x + cos(a + offsetAngle) * radius;

    let sy = y + sin(a + offsetAngle) * radius;

    vertex(sx, sy);

  }

  endShape(CLOSE);

}