210123a

let nx, ny, m;

let offset;

let url = ["https://coolors.co/fec5bb-fcd5ce-fae1dd-f8edeb-e8e8e4-d8e2dc-ece4db-ffe5d9-ffd7ba-fec89a",

           "https://coolors.co/e63946-f1faee-a8dadc-457b9d-1d3557",

           "https://coolors.co/f4f1de-e07a5f-3d405b-81b29a-f2cc8f",

           "https://coolors.co/8ecae6-219ebc-023047-ffb703-fb8500",

];

let palette;

​

function setup() {

  createCanvas(800, 800);

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

  angleMode(DEGREES);

  strokeJoin(ROUND);

}

​

function draw() {

  palette = shuffle(createPalette(random(url)), true);

  let c = palette[0];

  palette.splice(0, 1);

  m = 0;

  clear();

​

  offset = width / 20;

  separateGrid(offset, offset, width - offset * 2, height - offset * 2, 8);

  let g = get();

  clear();

  background(c);

  push();

  let shadowBlur = offset / 5;

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

  drawingContext.shadowBlur = shadowBlur;

  drawingContext.shadowOffsetX = shadowBlur * 1.3;

  drawingContext.shadowOffsetY = shadowBlur / 2;

  image(g, 0, 0);

  pop();

​

  frameRate(1/2);

}

​

function keyPressed(){

  save();

}

​

function separateGrid(x, y, w, h, depth) {

  let n = random([1, 0.4, 0.5, 0.6]); //noise((nx + x) / 400, (ny + y) / 400, frameCount / 400);

  if (depth > 0) {

    if (depth % 2 == 1) {

      separateGrid(x, y, w * n, h, depth - 1);

      separateGrid(x + w * n, y, w - w * n, h, depth - 1);

    } else {

      separateGrid(x, y, w, h * n, depth - 1);

      separateGrid(x, y + h * n, w, h - h * n, depth - 1);

    }

  }

  if (depth == 0) {

    drawRectWithTriangle(x, y, w, h, ++m);

  }

}

​

function drawRectWithTriangle(x, y, w, h, n) {

  if (min(w, h) < 1) return;

  let colors = shuffle(palette.concat(), true);

  let rotate_num = n;

  let _w, _h;

  if (rotate_num % 2 == 1) {

    _w = h;

    _h = w;

  } else {

    _w = w;

    _h = h;

  }

  push();

  translate(x + w / 2, y + h / 2);

  rotate(rotate_num * 360 / 4);

  scale(0.9);

  stroke(0, 0, 100);

  fill(colors[0]);

  translate(-_w / 2, -_h / 2);

  fill(colors[1]);

  triangle(0, _h / 2, _w / 2, _h / 2, _w, _h);

  fill(colors[2]);

  triangle(_w / 2, 0, _w / 2, _h / 2, _w, _h);

  rect(0, 0, _w / 2, _h / 2);

  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;

}