granite proportions

by Grzegorz Matyszewski

HTML

<div id="path"></div>

SCSS

.tile {
  display: inline-block;
  vertical-align: top;

  &--grayfine { background: #a9adb3; }
  &--graythick { background: #b8bfc6; }
  &--yellow { background: #a9a597; }
  &--red { background: #867470; }
}

#path { font-size: 0; transform: scale(1.5); }

TypeScript

const settings = {
	pathWidth: 980,
	pathHeight: 1100,
	minSize: 6,
	maxSize: 10,
  height: 8,
  colors: ['grayfine', 'graythick', 'yellow', 'red'], // szara drobna, gruba, żółta, czerwona
  proportions: [0.7, 0.2, 0.1, 0.1],
};

let width = 0;
let height = 0;
let html = '';

const sum = settings.proportions.reduce((total, num) => {
  return total + num;
});

function randomColor(): string {
	let i = 0;
	let p = settings.proportions[0];
  let r = Math.random() * sum;
	while (r > p) {
    i++;
  	p += settings.proportions[i];
  }
  return settings.colors[i];
}

while	(height < settings.pathHeight) {
	while (width < settings.pathWidth) {
  	const w = settings.minSize + Math.random() * (settings.maxSize - settings.minSize);
    const c = randomColor();
  	width += w;
    html += '<div class="tile tile--' + c + '" style="width: ' + w + 'px; height: ' + settings.height + 'px"></div>';
  }
  height += settings.height;
  width = 0;
}

$('#path').html(html).css({ width: settings.pathWidth });
console.log({
	grayfine: $('.tile--grayfine').length,
  graythick: $('.tile--graythick').length,
  yellow: $('.tile--yellow').length,
  red: $('.tile--red').length,
});