210216a

let g;

let pallette;

let url = [

  "https://coolors.co/264653-2a9d8f-e9c46a-f4a261-e76f51",

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

  "https://coolors.co/ef476f-ffd166-06d6a0-118ab2-073b4c",

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

  "https://coolors.co/000000-14213d-fca311-e5e5e5-ffffff"

];

​

function setup() {

  createCanvas(800, 800);

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

  angleMode(DEGREES);

  // noSmooth();

​

  noSmooth();

  g = createMyGraphic(width, height);

}

​

function draw() {

  background(0, 0, 95);

​

  let x = 0;

  let y = 0;

  let xStep, yStep;

  while (y < height) {

    yStep = round(random(10, height / 10));

    x = 0;

    while (x < width) {

      let n = noise(x / 500, y / 100);

      let sampleX = map(n, 0, 1, 0, width);

      let img = g.get(sampleX, y, 3, yStep);

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

      drawingContext.shadowBlur = width / 30;

      image(img, x, y);

      x += 2;

    }

    y += yStep;

  }

  // image(g, 0, 0);

  noLoop();

}

​

function createMyGraphic(w, h) {

  g = createGraphics(w, h);

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

  g.angleMode(DEGREES);

​

  let q = sqrt(sq(w) + sq(h)) * 1.5;

  g.push();

  g.translate(w / 2, h / 2);

  g.rotate(45);

  g.shearX(random(30));

  g.shearY(random(30));

  g.translate(-q / 2, -q / 2);

  g.clear();

  let cells = int(random(3, 8)) * 5;

  let offset = 0; //g.width / 10;

  let margin = offset / 5;

​

  let d = (q + offset * 2 - margin * (cells - 1)) / cells;

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

    palette = createPalette(random(url));

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

      let x = -offset + i * (d + margin);

      let y = -offset + j * (d + margin);

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

      g.push();

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

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

      g.translate(-d / 2, -d / 2);

      let n = 0;

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

      for (let e = d * 2; e > 0; e -= d * 2 / sep) {

        g.fill(colors[n++ % colors.length]);

        g.noStroke();

        g.arc(0, 0, e, e, 0, 90, PIE);

      }

      g.pop();

    }

  }

  return g;

​

}

​

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;

}