const lerp = (a, b, t) => a + t * (b - a);
const birandom = () => Math.random() * 2 - 1;

const createLines = (options = {}) => {
	const lineCount = 32;
	const probability = 1/3;
	const segmentSize = 0.05;
	const segmentSizeHalf = options.segmentSize * 0.5;
	const segmentSizeQuarter = options.segmentSize * 0.4;
	
	let svgContents = '';

	for (let i = 0; i < lineCount; i++) {
		const r = Math.random();
		const t = (i + 1) / (lineCount + 1);
		const y = t * height;

		if (r < probability) {
			const segmentCount = 1 + Math.floor(Math.random() * 2);
			const points = [0, 1];

			const segments = new Array(segmentCount).fill()
				.map(_ => lerp(0.1, 0.9, Math.random()));

			segments.forEach((segment) => {
				const rotation = birandom() * 45;
				const segmentStart = segment - segmentSizeHalf;
				const segmentEnd = segment + segmentSizeHalf;

				points.push(segment - segmentSizeQuarter);
				points.push(segment + segmentSizeQuarter);

				svgContents += `<line x1="${segmentStart * width}" x2="${segmentEnd * width}" y1="${y}" y2="${y}" class="line" stroke-width="${options.lineWidth}" transform="rotate(${rotation}, ${segment * width}, ${y})"></line>`;
			});

			points.sort();

			for (let j = 0; j < points.length; j += 2) {
				const pointStart = points[j] * width;
				const pointEnd = points[j + 1] * width;

				svgContents += `<line x1="${pointStart}" x2="${pointEnd}" y1="${y}" y2="${y}" class="line" stroke-width="${options.lineWidth}"></line>`;
			}
		} else {
			svgContents += `<line x1="0" x2="${width}" y1="${y}" y2="${y}" class="line" stroke-width="${options.lineWidth}"></line>`;
		}
	}

	return svgContents;
};

const inputLineWidth = document.getElementById('input-line-width');
const inputSegmentSize = document.getElementById('input-segment-size');

const svg = document.getElementById('svg');
const height = svg.height.baseVal.value;
const width = svg.width.baseVal.value;

svg.innerHTML = createLines({
	lineWidth: inputLineWidth.value,
	segmentSize: inputSegmentSize.value,
});

window.addEventListener('input', () => {
	svg.innerHTML = createLines({
		lineWidth: inputLineWidth.value,
		segmentSize: inputSegmentSize.value,
	});
});