210521a

let url =

  "https://coolors.co/fec5bb-fcd5ce-fae1dd-f8edeb-e8e8e4-d8e2dc-ece4db-ffe5d9-ffd7ba-fec89ahttps://coolors.co/fec5bb-fcd5ce-fae1dd-f8edeb-e8e8e4-d8e2dc-ece4db-ffe5d9-ffd7ba-fec89a";

​

let palette;

​

function setup() {

  createCanvas(800, 800);

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

  angleMode(DEGREES);

  palette = createPalette(url);

}

​

function draw() {

  background(0, 0, 90);

​

  let offset = -width / 20;

  let x = offset;

  let y = offset;

  let d = width - offset * 2;

​

  let depth = 2;

  herringboneInRect(x, y, d, random(2, 5), depth);

​

  // noLoop();

  frameRate(1/2);

}

​

function recursiveRect(x, y, d, g, depth) {

  let step = int(random(1, 4));

  let w = d / step;

  for (let j = 0; j < step; j++) {

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

      let nx = x + i * w;

      let ny = y + j * w;

      if (random(100) < 90 && w > width) {

        recursiveRect(nx, ny, w, g);

      } else {

        herringboneInRect(nx, ny, w, random(0.25, 5), depth);

      }

    }

  }

}

​

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

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

  let rd = d / num;

​

  push();

  strokeWeight(2);

  fill(0, 0, 100);

  rectMode(CENTER);

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

  drawingContext.clip();

​

  push();

  drawingContext.shadowColor = color(0, 0, 0, 33);

  drawingContext.shadowBlur = rd / 3;

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

  rotate(45 + (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)) {

      fill(random(palette));

      stroke(0, 0, 0);

      strokeWeight(1);

      rectMode(CORNER);

      push();

      rect(nx, ny, rd, rd / 2);

      drawingContext.clip();

      if (depth > 1) {

        herringboneInRect(nx, ny, rd, random(3), depth - 1);

      }

      pop();

      nx += rd;

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

      stroke(0, 0, 0);

      strokeWeight(1);

      push();

      rect(nx, ny, rd / 2, rd);

      drawingContext.clip();

      if (depth > 1) {

        herringboneInRect(nx, ny, rd, random(3), depth - 1);

      }

      pop();

​

      ny += rd;

    }

    ox += rd / 2;

    i++;

  }

  pop();

  pop();

}

​

function createPalette(_url) {

  let slash_index = _url.lastIndexOf("/");

  let pallate_str = _url.slice(slash_index + 1);

  let arr = pallate_str.split("-");

  for (let i = 0; i < arr.length; i++) {

    arr[i] = color("#" + arr[i]);

  }

  return arr;

}

​