210504a

let url = [

  "https://coolors.co/0081a7-00afb9-fdfcdc-fed9b7-f07167",

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

  // "https://coolors.co/355070-6d597a-b56576-e56b6f-eaac8b",

  // "https://coolors.co/ffbe0b-fb5607-ff006e-8338ec-3a86ff",

];

let palette, texture;

let c;

​

function setup() {

  createCanvas(800, 800);

  noSmooth();

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

  angleMode(DEGREES);

​

  texture = createGraphics(width, height);

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

  texture.stroke(0, 0, 100, 15);

  for (let i = 0; i < width * height * 5 / 100; i = i + 1) {

    texture.strokeWeight(random(3));

    texture.point(random(width), random(height));

  }

}

​

function draw() {

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

​

  c = palette[0];

  palette.shift();

  background(c);

​

  let offset = width / 20;

  let x = offset;

  let y = offset;

  let d = width - 2 * offset;

​

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

  drawingContext.shadowBlur = offset / 2;

​

  recursiveRect(x, y, d, this);

​

  imageMode(CORNER);

  image(texture, 0, 0);

  // noLoop();

  frameRate(1 / 2);

  // save();

}

​

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

  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 / 3) {

        recursiveRect(nx, ny, w, g);

      } else {

        drawSteppedGraphic(nx + w / 2, ny + w / 2, w);

      }

    }

  }

}

​

function drawSteppedGraphic(cx, cy, d) {

  let g = createGraphics(d, d, WEBGL);

  let camera = g.createCamera();

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

  g.angleMode(DEGREES);

  g.ortho(-width / 2, width / 2, -height / 2, height / 2, -2000, 2000);

​

  camera.setPosition(0, -250, 500);

  camera.lookAt(0, 0, 0);

​

  let dir = random() > 0.5 ? -1 : 1;

  let N = int(random(3, 8));

  let m = int(random(N + 1, N * N));

​

  let arr = generateHeightMap(N);

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

​

  g.directionalLight(colors[0], 0, 0, -1);

  g.directionalLight(colors[1], 0, 1, 0);

  g.directionalLight(colors[2], 1, 0, 0);

​

  g.push();

  g.translate(0, 200, 0);

  g.rotateY(-45);

​

  g.noStroke();

  // g.stroke(0,0,0);

  // g.strokeWeight(1);

​

  let n = 0;

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

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

      let z = map(i, 0, arr.length, -200, 200);

      let x = map(j, 0, arr[i].length, -200, 200);

      let d = arr[i][j] * (400 / N) + 1; // +1 is min height

      let y = -d / 2;

      let w = 400 / N;

      let h = 400 / N;

      g.push();

      g.translate(x, y, z);

      g.scale(0.9, 1, 0.9);

      g.box(w, d, h);

​

      if (n++ == m) {

        g.push();

        g.translate(0, -d / 2 - w / 2 - w / 10, 0);

        g.sphere(w / 2);

        g.pop()

      }

      g.pop();

    }

  }

  g.pop();

  imageMode(CENTER);

  image(g, cx, cy, d, d);

}

​

function generateHeightMap(num) {

  let arr = [];

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

    let a = [];

    let n = i == 0 ? num : arr[i - 1][0];

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

      let m = i == 0 ? num : arr[i - 1][j];

      if (n > m) {

        n = m;

      } else if (random() < 0.35) {

        n--;

        n = max(n, 0);

      }

      a.push(n);

    }

    arr.push(a);

  }

  return arr;

}

​

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;

}