230529a

let ratio = 0.95;

let offset;

​

function setup() {

  createCanvas(800, 800);

  colorMode(HSB, 360, 100, 100, 100);

  angleMode(DEGREES);

}

​

function draw() {

  background(0, 0, 90);

  randomSeed(230529 + frameCount / 150);

  offset = width / 15;

  let x = offset;

  let y = offset;

  let d = width - offset * 2;

  herringboneInRect(x, y, d, 8, 0);

  // noLoop();

}

​

function herringboneInRect(x, y, d, num, depth) {

  let w = sqrt(sq(d + offset * 2) * 2);

  let rd = d / num;

​

  push();

  strokeWeight(2);

​

  rectMode(CENTER);

  fill(0, 0, 100, 0);

  noStroke();

  rect(x + d / 2, y + d / 2, d, d);

  drawingContext.clip();

​

  push();

  translate(x + d / 2, y + d / 2);

  rotate((int(random(4)) * 360) / 4);

  scale(random() > 0.5 ? -1 : 1, random() > 0.5 ? -1 : 1);

  translate(-w, -w);

  let ox = -w;

  let i = 0;

  while (ox < w * sqrt(2)) {

    let nx = ox;

    let ny = (-i * rd) / 2;

    while (ny < w * sqrt(2)) {

      let v =

        (nx + rd / 2 + (ny + rd / 2) * width) / (width * height) +

        frameCount / 150 * map(ny, 0, height, 0.5, 3);

      let n = int(noise(nx / width, ny / height, frameCount / 150) * 4);

      let m = v;

      v %= 1;

      v = easeInOutCirc(v);

      stroke(0, 0, 0);

      rectMode(CORNER);

      push();

      strokeCap(SQUARE);

      strokeWeight(1);

​

      let dir = v;

      if (random() > 0.5 && int(m) % 2 == 0) {

        strokeWeight((rd / 2) * dir);

        push();

        translate(nx + rd / 2, ny + rd / 2 / 2);

        rotate(45 + n * 90);

        scale(ratio);

        line(-rd / 2, 0, rd / 2, 0);

        pop();

      } else {

        strokeWeight(rd * dir);

        push();

        translate(nx + rd / 2, ny + rd / 2 / 2);

        rotate(45 + n * 90);

        scale(ratio);

        line(0, -rd / 2 / 2, 0, rd / 2 / 2);

        pop();

        // line( ny, nx + rd / 2, ny + rd / 2);

      }

      pop();

​

      nx += rd;

      n = int(noise(nx / width, ny / height, frameCount / 150) * 4);

      fill(0, 0, random(10, 100 - 10));

      stroke(0, 0, 0);

      push();

      strokeCap(SQUARE);

      dir = 1 - v;

      if (random() > 0.5 && int(m) % 2 == 0) {

        strokeWeight(rd * dir);

        push();

        translate(nx + rd / 2 / 2, ny + rd / 2);

        rotate(45 + n * 90);

        scale(ratio);

        line(-rd / 2 / 2, 0, rd / 2 / 2, 0);

        pop();

      } else {

        strokeWeight((rd / 2) * dir);

        push();

        translate(nx + rd / 2 / 2, ny + rd / 2);

        rotate(45 + n * 90);

        scale(ratio);

        line(0, -rd / 2, 0, rd / 2);

        pop();

      }

​

      pop();

      ny += rd;

    }

    ox += rd / 2;

    i++;

  }

  pop();

  pop();

}

​

function easeInOutCirc(x) {

  return x < 0.5 ?

    (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2 :

    (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2;

}