Just want some color random blocks okay

by Admiral Potato

HTML

<script src="https://unpkg.com/[email protected]/dist/lil-gui.umd.min.js"></script>
<script src="https://unpkg.com/[email protected]/seedrandom.min.js"></script>
<div id="output"></div>

CSS

* {
	margin: 0;
	padding: 0;
	font-size: 1em;
	line-height: 1em;
}

html {
	font-size: 0;
}

body {
	padding: 8px;
	background-color: #000;
}

.boxy {
	display: inline-block;
}

JavaScript

var settings = {
	seed: 10,
	minWidth: 10,
	maxWidth: 100,
	increment: 10,
	height: 10,
	hSpacing: 5,
	vSpacing: 5,
	radius: 5,
	count: 1024
};

var gui = new lil.GUI()


var params = {
	seed: [0, 1024, 1],
	minWidth: [1, 1024, 1],
	maxWidth: [1, 1024, 1],
	increment: [1, 1024, 1],
	height: [1, 1024, 1],
	hSpacing: [0, 1024, 1],
	vSpacing: [0, 1024, 1],
	radius: [0, 1024, 1],
	count: [10, 2048, 1],
}


Object.keys(settings).forEach(function (key) {
	var extra = params[key] || []
	var value = settings[key]
	var type = typeof value
	var addMethod = 'add'
	if (
		type === 'string'
		&& value.indexOf('#') === 0
	) {
		addMethod = 'addColor'
	}
	gui[addMethod](settings, key, ...extra)
})

var element = document.getElementById('output');

var colors = ('57385ca75265ec7263febe7e').match(/.{1,6}/g);

var renderList = function (list) {
	var listString = list.map(function (width, index) {
		var styles = [
			'background-color: #' + colors[index % colors.length],
			'width: ' + width + 'px',
			'height: ' + settings.height + 'px',
			'margin-left: ' + settings.hSpacing + 'px',
			'border-radius: ' + (settings.radius) + 'px',
		].join(';')
		return '<span class="boxy" style="' + styles + '"></span>';
	}).join('\n');
	var blockStyles = [
		'line-height: ' + settings.vSpacing + 'px',
	].join(';');
	element.innerHTML = '<div style="' + blockStyles + '">' + listString + '</div>';
};


var makeThingPlease = function () {
	var rng = new Math.seedrandom(settings.seed)
	
	var list = [];
	var widthDiff = settings.maxWidth - settings.minWidth;
	var segmentCount = Math.floor(widthDiff / settings.increment);
	for (var i = 0; i < settings.count; i++) {
		var randomWidth = Math.floor(rng() * segmentCount) * settings.increment;
		list.push(
			settings.minWidth + randomWidth
		)
	}
	renderList(list);
};

makeThingPlease();

gui.onChange(makeThingPlease);