Elongated Triangular Truchet Tiling

sketch
xxxxxxxxxx
 
// By Roni Kaufman
// https://ronikaufman.github.io
// https://twitter.com/KaufmanRoni
​
// see https://en.wikipedia.org/wiki/Elongated_triangular_tiling
​
let s = 100, u = s/5;
let h = s*Math.sqrt(3)/2;
let m = 9; // number of squares per line
let n = 12; // number of lines of squares and lines of triangles
let showShapes = false;
let hu, hu2;
let colors = ["#00b2b4", "#fdd35b"];
let strokeCol = "#333333";
​
function setup() {
  createCanvas(1112, 834, WEBGL);
  colorMode(HSB);
  hu = random(360);
  hu2 = (hu+180)%360;
  colors[0] = color(hu, 80, 100);
  colors[1] = color(hu2, 80, 100);
  noLoop();
  strokeWeight(2);
}
​
function draw() {
  translate(-width/2, -height/2);
  
  let y = 0; 
  let x0 = 0;
  while (y < height) {
    rowOfSquares(y, x0);
    rowOfTriangles(y+s, x0-s);
    y += s+h;
    x0 -= s/2;
    if (x0 < -s) x0 += s;
  }
}
​
function rowOfSquares(y, x0) {
  for (let x = x0; x < width; x += s) {
    squareTile(x, y);
  }
}
​
function rowOfTriangles(y, x0) {
  for (let x = x0; x < width; x += s) {
    triangleTile(x, y, x+s, y, x+s/2, y+h, 0);
    triangleTile(x+s/2, y+h/3, x+3*s/2, y+h/3, x+s, y+4*h/3, PI);
  }
}
​
function squareTile(x, y) {
  push();
  translate(x+s/2, y+s/2);
  rotate(random([0, PI/2, PI, 3*PI/2]));
  translate(-x-s/2, -y-s/2);
  
  let r = random(4);
  if (r < 1) {
    fill(colors[1]);
    noStroke();
    square(x, y, s);
    
    stroke(strokeCol);
    fill(colors[0]);
    arc(x, y, 4*u, 4*u, 0, PI/2);
    arc(x+s, y, 2*u, 2*u, PI/2, PI);
    arc(x+s, y, 4*u, 4*u, PI/2, PI);
    arc(x+s, y+s, 2*u, 2*u, PI, 3*PI/2);
    arc(x+s, y+s, 4*u, 4*u, PI, 3*PI/2);
    arc(x, y+s, 2*u, 2*u, 3*PI/2, TAU);
    arc(x, y+s, 4*u, 4*u, 3*PI/2, TAU);
    circle(x+s/2, y+s/2, 2*u);
    
    fill(colors[1]);
    arc(x, y+s, 2*u, 2*u, 3*PI/2, TAU);
    arc(x+s, y+s, 2*u, 2*u, PI, 3*PI/2);
    arc(x+s, y, 2*u, 2*u, PI/2, PI);
    arc(x, y, 2*u, 2*u, 0, PI/2);
  } else if (r < 2) {
    fill(colors[0]);
    noStroke();
    square(x, y, s);
    
    stroke(strokeCol);
    fill(colors[1]);
    arc(x, y, 6*u, 6*u, 0, PI/2);
    arc(x+s, y, 2*u, 2*u, PI/2, PI);
    arc(x+s, y+s, 6*u, 6*u, PI, 3*PI/2);
    arc(x, y+s, 2*u, 2*u, 3*PI/2, TAU);
    
    fill(colors[0]);
    arc(x, y, 4*u, 4*u, 0, PI/2);
    arc(x+s, y+s, 4*u, 4*u, PI, 3*PI/2);
    
    fill(colors[1]);
    arc(x+s, y+s, 2*u, 2*u, PI, 3*PI/2);
    arc(x, y, 2*u, 2*u, 0, PI/2);
  } else if (r < 3) {
    fill(colors[1]);
    noStroke();
    square(x, y, s);
    
    stroke(strokeCol);
    fill(colors[0]);
    arc(x+s/2, y, 3*u, 3*u, 0, PI);
    arc(x+s, y+s/2, 3*u, 3*u, PI/2, 3*PI/2);
    arc(x+s/2, y+s, 3*u, 3*u, PI, TAU);
    arc(x, y+s/2, 3*u, 3*u, -PI/2, PI/2);
    
    fill(colors[1]);
    arc(x+s/2, y, u, u, 0, PI);
    arc(x+s, y+s/2, u, u, PI/2, 3*PI/2);
    arc(x+s/2, y+s, u, u, PI, TAU);
    arc(x, y+s/2, u, u, -PI/2, PI/2);
  } else {
    fill(colors[1]);
    noStroke();
    square(x, y, s);
    
    stroke(strokeCol);
    fill(colors[0]);
    arc(x, y, 8*u, 8*u, 0, PI/2);
    arc(x+s, y+3*u/2, u, u, PI/2, 3*PI/2);
    arc(x+3*u/2, y+s, u, u, PI, TAU);
    arc(x+s, y+s, 4*u, 4*u, PI, 3*PI/2);
    
    fill(colors[1]);
    arc(x, y, 6*u, 6*u, 0, PI/2);
    arc(x+s, y+s, 2*u, 2*u, PI, 3*PI/2);
    
    fill(colors[0]);
    arc(x, y, 4*u, 4*u, 0, PI/2);
    
    fill(colors[1]);
    arc(x, y, 2*u, 2*u, 0, PI/2);
  }
  
  if (showShapes) {
    noFill();
    stroke(strokeCol);
    square(x, y, s);
  }
  
  pop();
}
​
function triangleTile(x1, y1, x2, y2, x3, y3, rot) {
  push();
  translate((x1+x2+x3)/3, (y1+y2+y3)/3);
  rotate(random([0, 2*PI/3, 4*PI/3]) + rot);
  translate(-(x1+x2+x3)/3, -(y1+y2+y3)/3);
  
  let r = random(2);
  if (r < 1) {
    fill(colors[1]);
    noStroke();
    triangle(x1, y1, x2, y2, x3, y3);
    
    stroke(strokeCol);
    fill(colors[0]);
    arc(x1, y1, 4*u, 4*u, 0, PI/3);
    arc(x2, y2, 4*u, 4*u, 2*PI/3, 3*PI/3);
    arc(x3, y3, 4*u, 4*u, 4*PI/3, 5*PI/3);
    
    fill(colors[1]);
    arc(x1, y1, 2*u, 2*u, 0, PI/3);
    arc(x2, y2, 2*u, 2*u, 2*PI/3, 3*PI/3);
    arc(x3, y3, 2*u, 2*u, 4*PI/3, 5*PI/3);
  } else {
    fill(colors[0]);
    noStroke();
    triangle(x1, y1, x2, y2, x3, y3);
    
    stroke(strokeCol);
    fill(colors[1]);
    arc(x1, y1, 6*u, 6*u, 0, PI/3);
    arc(x2, y2, 2*u, 2*u, 2*PI/3, 3*PI/3);
    arc(x3, y3, 2*u, 2*u, 4*PI/3, 5*PI/3);
    arc((x2+x3)/2, (y2+y3)/2, u, u, 2*PI/3, -PI/3);
      
    fill(colors[0]);
    arc(x1, y1, 4*u, 4*u, 0, PI/3);
      
    fill(colors[1]);
    arc(x1, y1, 2*u, 2*u, 0, PI/3);
  }
  
  if (showShapes) {
    noFill();
    stroke(strokeCol);
    triangle(x1, y1, x2, y2, x3, y3);
  }
  
  pop();
}