Diagonal striped grid

let sze, clrs, num = 7, numStripes;

​

function setup() {

  sze = ~~(min(windowWidth, windowHeight) / num)

  // createCanvas(~~(windowWidth / sze) * sze, ~~(windowHeight / sze) * sze);

  createCanvas(windowWidth, windowHeight);

  describe("grid of tiles with vertical lines from two color palettes");

  frameRate(6);

​

  // extract colors from random two palettes

  clrs = [];

  clrs.push(random(palettes));

  clrs.push(random(palettes));

  // console.log(clrs);

​

  background("pink");

  stroke("steelblue");

  stroke(1);

  noStroke();

  numStripes = ~~random(2, 7);

  drawGrid();

  // loop();

}

​

function draw() {

  const x = ~~random(width/sze+1) * sze;

  const y = ~~random(height/sze+1) * sze;

  drawTile(x, y, sze, random(clrs), numStripes)

}

​

function drawGrid() {

  for (let y = 0; y <= height; y += sze) {

    for (let x = 0; x <= width; x += sze) {

      drawTile(x, y, sze, random(clrs), numStripes);

    }

  }

}

​

function drawTile(x, y, s, clrs, n) {

  push();

  translate(x, y);

  clip(() => {

    rect (0, 0, s); // rect (x, y, s)

  });

  shuffle(clrs, true);

  let h = sqrt(2 * s * s);

  // rect(0, 0, s, s)

  const dd = h/2

  const dy = s / n;

  let dx = dy;

  // console.log(s, h, n, dx);

  strokeWeight(dx*1.42)

  if (random()<0.5) {

    translate(s/2, s/2);

    rotate(HALF_PI);

    translate(-s/2, -s/2);

  }

  for (let i = 0; i < n; i++) {

    stroke(clrs[i%clrs.length])

    const px = dx / 2 + i * dx;

    const py = dx / 2 + i * dx;

    // console.log("  -> " + i + " " + px);

    line(px-dd, py+dd, px+dd, py-dd)

  }

  pop();

}

​

function mousePressed() {

  if (mouseButton != RIGHT) setup();

}