201020a

let url = "https://coolors.co/540d6e-ee4266-ffd23f-3bceac-0ead69";

let palette;

let cells, offset, margin, d;

let imgs;

​

function setup() {

  createCanvas(800, 800);

  noSmooth();

  palette = createPalette(url);

​

  imgs = [];

​

  cells = int(random(2, 8));

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

    imgs.push(createImage(15, 15));

  }

  offset = width / 15;

  margin = offset / 1.5;

  d = (width - offset * 2 - margin * (cells - 1)) / cells;

}

​

function draw() {

  clear();

  randomSeed(1);

  let n = 0;

​

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

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

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

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

      drawPixelImage(x, y, d, d, imgs[n], this);

      n++;

    }

  }

​

  let g = get();

  clear();

  background(240);

  push();

  drawingContext.shadowColor = color(0, 50 / 100 * 255);

  drawingContext.shadowBlur = d / 20;

  drawingContext.shadowOffsetX = d / 20 / 2;

  drawingContext.shadowOffsetY = d / 20 / 2;

  image(g, 0, 0);

  pop();

​

}

​

function drawPixelImage(x, y, w, h, img, g) {

  let num = 10; //int(random(2,5)) * 3;

​

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

  noiseSeed(x + y * width);

  img.loadPixels();

  for (let j = 0; j < img.height; j++) {

    for (let i = 0; i < img.width / 2; i++) {

      let k = 0;

      for (let c of colors) {

        let n = noise(abs(i - img.width / 2) / 5, k * 100 + j / 4, frameCount / 150);

        if (n > map(k, 0, colors.length, 0.45, 0.65)) {

          img.set(i, j, c);

        } else {

          if (k == 0) img.set(i, j, color(0, 0));

        }

​

        k++;

      }

    }

  }

  img.updatePixels();

  drawFlipImage(x, y, w, h, img, g);

​

}

​

​

function drawFlipImage(x, y, w, h, half_img, g) {

  g.push();

  g.translate(x, y);

  g.image(half_img, 0, 0, w, h);

  g.scale(-1, 1);

  g.image(half_img, -w, 0, w, h);

  g.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;

}