Quickly generate grid images to test shader positioning

generate-grid-image.js

const { createCanvas } = require('canvas');
const fs = require('fs');

const gridWidth = parseInt(process.argv[2]) || 16;
const gridHeight = parseInt(process.argv[3]) || 16;
const SQUARE_SIZE = 200;

// Inferred.
const WIDTH_PX = gridWidth * SQUARE_SIZE;
const HEIGHT_PX = gridHeight * SQUARE_SIZE;

const canvas = createCanvas(WIDTH_PX, HEIGHT_PX);
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, WIDTH_PX, HEIGHT_PX);

// Select background color based on position.
function getSquareColor(x, y) {
	const hue = (x / (gridWidth - 1)) * 240; // Red to blue.
	const saturation = 10 + (y / (gridHeight - 1)) * 90; // 10% to 100% saturation.
	const lightness = 50;

	return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}

function drawCenteredText(ctx, text, x, y, width, height, fontSize, color = '#000000') {
	ctx.fillStyle = color;
	ctx.font = `bold ${fontSize}px Arial`;
	ctx.textAlign = 'center';
	ctx.textBaseline = 'middle';

	const centerX = x + width / 2;
	const centerY = y + height / 2;

	ctx.fillText(text, centerX, centerY);
}

// Draw the grid.
for (let row = 0; row < gridHeight; row++) {
	for (let col = 0; col < gridWidth; col++) {
		const x = col * SQUARE_SIZE;
		const y = row * SQUARE_SIZE;

		const color = getSquareColor(col, row);
		ctx.fillStyle = color;
		ctx.fillRect(x, y, SQUARE_SIZE, SQUARE_SIZE);
		ctx.strokeStyle = '#000000';
		ctx.lineWidth = 2;
		ctx.strokeRect(x, y, SQUARE_SIZE, SQUARE_SIZE);

		const xPosition = col + 1;
		drawCenteredText(ctx, xPosition.toString(), x, y, SQUARE_SIZE, SQUARE_SIZE, 80, '#000000');
		const yPosition = row + 1;
		drawCenteredText(ctx, yPosition.toString(), x, y + 60, SQUARE_SIZE, SQUARE_SIZE, 40, '#000000');
	}
}

const buffer = canvas.toBuffer('image/png');
const filename = `grid_${gridWidth}_${gridHeight}.png`;
fs.writeFileSync(filename, buffer);

console.log(`Image generated successfully as "${filename}"`);
console.log(`Image size: ${WIDTH_PX}x${HEIGHT_PX} pixels`);
console.log(`Grid: ${gridWidth}x${gridHeight} squares of ${SQUARE_SIZE}x${SQUARE_SIZE} pixels each`);

grid_10_10.png

grid_11_11.png

grid_12_12.png

grid_13_13.png

grid_14_14.png

grid_15_15.png

grid_16_16.png

grid_17_17.png

grid_18_18.png

grid_19_19.png

grid_20_20.png

grid_21_21.png

grid_22_22.png

grid_23_23.png

grid_24_24.png

grid_25_25.png

grid_26_26.png

grid_27_27.png

grid_28_28.png

grid_29_29.png

grid_30_30.png

grid_31_31.png

grid_32_32.png

grid_33_33.png

grid_34_34.png

grid_35_35.png

grid_36_36.png

grid_37_37.png

grid_38_38.png

grid_39_39.png

grid_3_3.png

grid_40_40.png

grid_41_41.png

grid_42_42.png

grid_43_43.png

grid_44_44.png

grid_45_45.png

grid_46_46.png

grid_47_47.png

grid_48_48.png

grid_49_49.png

grid_4_4.png

grid_50_50.png

grid_51_51.png

grid_52_52.png

grid_53_53.png

grid_54_54.png

grid_55_55.png

grid_56_56.png

grid_57_57.png

grid_58_58.png

grid_59_59.png

grid_5_5.png

grid_60_60.png

grid_61_61.png

grid_62_62.png

grid_63_63.png

grid_64_64.png

grid_6_6.png

grid_7_7.png

grid_8_8.png

grid_9_9.png

package.json