210523a

// reference: https://twitter.com/soooo/status/1396201422375510017

//https://twitter.com/takawo/status/1396273206609158145/photo/1

​

let url = "https://coolors.co/c43853-ff91a6-b06c0a-1d861d-5aac5a-000000-f4df6a-4db1c6-3798b9-f8d9cb";

let c = -1,

  pc = -1;

let palette;

​

function setup() {

  createCanvas(800, 800);

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

  angleMode(DEGREES);

  palette = createPalette(url);

}

​

function draw() {

  // background(0, 0, 90);

  background(random(palette));

​

  // noStroke();

  let offset = width / 15;

  let x = offset;

  let y = offset;

  let d = width - offset * 2;

​

  let depth = 1;

  herringboneInRect(x, y, d, random(3), depth);

  // frameRate(1 / 2);

  noLoop();

}

​

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);

  rectMode(CENTER);

  fill(random(palette));

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

  // strokeWeight(1);

  drawingContext.clip();

​

  push();

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

  drawingContext.shadowBlur = rd / 3;

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

  rotate(random(360));

  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, rd);

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

      let sep = int(random(1, 6));

      let angle = 0; //random(360);

      push();

      drawingContext.clip();

      if (depth > 0) {

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

      } else {

        for (let e = rd; e > 0; e -= rd / sep) {

          while (c == pc) {

            c = random(palette);

          }

          pc = c;

          fill(c);

          let r = (((rd - e) / rd) * rd) / 2;

          let cx = nx + rd / 2 + cos(angle) * r;

          let cy = ny + rd / 4 + sin(angle) * r;

          circle(cx, cy, e);

        }

      }

      pop();

      pop();

      push();

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

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

      push();

      drawingContext.clip();

      if (depth > 0) {

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

      } else {

        for (let e = rd; e > 0; e -= rd / sep) {

          while (c == pc) {

            c = random(palette);

          }

          pc = c;

          fill(c);

          let r = (((rd - e) / rd) * rd) / 2;

          let cx = nx + rd / 2 + cos(angle) * r;

          let cy = ny + rd / 4 + sin(angle) * r;

          circle(cx, cy, e);

        }

      }

      pop();

      pop();

​

      nx += rd;

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

      // stroke(0, 0, 0);

      // strokeWeight(1);

      push();

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

      // triangle(nx,ny,

      // nx+rd/2,ny,

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

      sep = int(random(1, 6));

      angle = 90; //random(360);

​

      push();

      drawingContext.clip();

      if (depth > 0) {

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

      } else {

        for (let e = rd; e > 0; e -= rd / sep) {

          while (c == pc) {

            c = random(palette);

          }

          pc = c;

          fill(c);

          let r = (((rd - e) / rd) * rd) / 2;

          let cx = nx + rd / 4 + cos(angle) * r;

          let cy = ny + rd / 2 + sin(angle) * r;

          circle(cx, cy, e);

        }

      }

      pop();

      pop();

​

      push();

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

      // triangle(nx,ny,

      // nx,ny+rd,

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

      push();

      drawingContext.clip();

      if (depth > 0) {

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

      } else {

        for (let e = rd; e > 0; e -= rd / sep) {

          while (c == pc) {

            c = random(palette);

          }

          pc = c;

          fill(c);

          let r = (((rd - e) / rd) * rd) / 2;

          let cx = nx + rd / 4 + cos(angle) * r;

          let cy = ny + rd / 2 + sin(angle) * r;

          circle(cx, cy, e);

        }

      }

      pop();

      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;

}