hippie/source/view/demo/art/squares.liquid

---
title: Squares²
tags:
- demoArt
---
{% layout 'hippie/simple.liquid' %}

{% block style %}
<style>
	canvas {
		display: block;
	}
</style>
{% endblock %}

{% block body %}{% endblock %}

{% block script %}
<script>
	function fillCanvasWithSquares(maxSquareSize = 128, steps = 3, percentages = [40, 30, 20]) {
		const canvas = document.createElement('canvas');
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		document.body.appendChild(canvas);

		const ctx = canvas.getContext('2d');
		const colors = [
			'#e1d170',
			'#cfb16a',
			'#8b3050',
			'#683657',
			'#354063',
			'#4b5776',
			'#c8dbe2',
			'#90bac2',
			'#7daeb7'
		];

		function isPowerOfTwo(n) {
			return n > 0 && (n & (n - 1)) === 0;
		}

		if (!isPowerOfTwo(maxSquareSize)) {
			console.error('maxSquareSize must be a power of 2');
			return;
		}

		if (steps < 1) {
			console.error('steps must be at least 1');
			return;
		}

		// Generate sizes by halving for each step
		const sizes = [];
		for (let i = 0; i < steps; i++) {
			sizes.push(maxSquareSize / Math.pow(2, i));
		}

		// Validate percentages array
		if (!Array.isArray(percentages)) {
			console.error('percentages must be an array');
			return;
		}

		if (percentages.length !== sizes.length - 1) {
			console.warn(`percentages array should have ${sizes.length - 1} elements. Adjusting...`);
			percentages = percentages.slice(0, sizes.length - 1);
			while (percentages.length < sizes.length - 1) {
				percentages.push(50);
			}
		}

		const minSize = sizes[sizes.length - 1];

		let grid = Array(Math.ceil(canvas.height / minSize))
			.fill(null)
			.map(() => Array(Math.ceil(canvas.width / minSize)).fill(false));

		function canPlace(gridX, gridY, sizeInCells) {
			if (gridY + sizeInCells > grid.length || gridX + sizeInCells > grid[0].length) return false;
			for (let y = gridY; y < gridY + sizeInCells; y++) {
				for (let x = gridX; x < gridX + sizeInCells; x++) {
					if (grid[y][x]) return false;
				}
			}
			return true;
		}

		function markOccupied(gridX, gridY, sizeInCells) {
			for (let y = gridY; y < gridY + sizeInCells; y++) {
				for (let x = gridX; x < gridX + sizeInCells; x++) {
					grid[y][x] = true;
				}
			}
		}

		function draw(gridX, gridY, sizeInPixels) {
			const x = gridX * minSize;
			const y = gridY * minSize;

			ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
			ctx.fillRect(x, y, sizeInPixels, sizeInPixels);
			ctx.strokeStyle = '#333';
			ctx.lineWidth = 1;
			ctx.strokeRect(x, y, sizeInPixels, sizeInPixels);
		}

		function fill() {
			// Process each size with its corresponding percentage
			for (let sizeIndex = 0; sizeIndex < sizes.length; sizeIndex++) {
				const size = sizes[sizeIndex];
				const sizeInCells = size / minSize;
				const percentage = sizeIndex < percentages.length ? percentages[sizeIndex] : 0;

				if (sizeIndex < sizes.length - 1) {
					// For all sizes except the last, apply percentage
					const positions = [];
					for (let gridY = 0; gridY < grid.length; gridY++) {
						for (let gridX = 0; gridX < grid[0].length; gridX++) {
							if (canPlace(gridX, gridY, sizeInCells)) {
								positions.push({ gridX, gridY });
							}
						}
					}
					positions.sort(() => Math.random() - 0.5);

					const target = Math.floor(positions.length * percentage / 100);
					for (let i = 0; i < target; i++) {
						const { gridX, gridY } = positions[i];
						if (canPlace(gridX, gridY, sizeInCells)) {
							markOccupied(gridX, gridY, sizeInCells);
							draw(gridX, gridY, size);
						}
					}
				} else {
					// Fill remaining space with the smallest size
					for (let gridY = 0; gridY < grid.length; gridY++) {
						for (let gridX = 0; gridX < grid[0].length; gridX++) {
							if (canPlace(gridX, gridY, sizeInCells)) {
								markOccupied(gridX, gridY, sizeInCells);
								draw(gridX, gridY, size);
							}
						}
					}
				}
			}
		}

		fill();

		window.addEventListener('resize', () => {
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
			grid = Array(Math.ceil(canvas.height / minSize))
				.fill(null)
				.map(() => Array(Math.ceil(canvas.width / minSize)).fill(false));
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			fill();
		});
	}

	fillCanvasWithSquares(128, 4, [2, 24, 64]);
</script>
{% endblock %}