About

Isometric projection maps three-dimensional objects onto a two-dimensional plane using a 30° rotation angle, where all three axes appear equally foreshortened at a ratio of 1:1:1. This generator computes screen coordinates using the transformation x_screen = (x − z) × cos(30°) and y_screen = (x + z) × sin(30°) − y, rendering each cube with three visible faces shaded at 100%, 75%, and 50% brightness to simulate directional lighting. Manual construction of isometric grids requires precise angle measurements and tedious vertex calculations for each cube face. A miscalculated projection angle or inconsistent shading destroys the dimensional illusion. This tool eliminates measurement errors by computing exact trigonometric positions for grids up to 50×50×50 cubes with automatic depth sorting via the painter's algorithm.

Formulas

The isometric projection transforms three-dimensional Cartesian coordinates into two-dimensional screen space. For a point at position (x, y, z) in 3D space, the screen coordinates are calculated as:

x_screen = x_origin + (x − z) × cos(30°) × s

y_screen = y_origin + (x + z) × sin(30°) × s − y × s

Where s represents the scale factor (cube size in pixels), and the origin point centers the grid on the canvas. The 30° angle derives from the isometric standard where tan⁻¹(0.5) ≈ 26.57° is rounded for visual consistency.

Each cube face requires six vertices. The top face vertices offset by ±0.5 on x and z axes at height y + 1. Face shading simulates a light source at the top-right using brightness multipliers:

L_top = 1.0, L_left = 0.75, L_right = 0.5

Depth sorting uses the painter's algorithm with combined depth value d = x + y + z, rendering cubes in ascending order so foreground cubes correctly overlap background cubes.

Reference Data

Pattern Type	Algorithm	Visual Effect	Best Use Case
Solid	Single color fill	Uniform appearance	Minimalist designs, icons
Checkerboard	(x + y + z) mod 2	Alternating colors	Game boards, retro aesthetics
Gradient	Linear interpolation along axis	Smooth color transition	Backgrounds, depth emphasis
Random	Pseudo-random color selection	Chaotic, organic feel	Abstract art, textures
Wave	sin(x + z) wave function	Undulating pattern	Water, terrain visualization
Diagonal	(x + z) mod n	Striped bands	Architectural renders
Height Map	y-axis color mapping	Elevation visualization	Topographic displays
Noise	Perlin-like value noise	Natural variation	Terrain, organic surfaces
Radial	Distance from center point	Circular gradient	Focus effects, highlights
Spiral	atan2(z, x) angle mapping	Rotating color bands	Dynamic compositions

Projection Type	Angle	Axis Ratio	Common Application
Isometric	30°	1:1:1	Technical drawings, video games
Dimetric	7°/42°	1:1:0.5	Pixel art, retro games
Trimetric	Variable	All different	Artistic renders
Cabinet	45°	1:1:0.5	Furniture design
Cavalier	45°	1:1:1	Architecture

Export Format	Compression	Transparency	Recommended For
PNG	Lossless	Yes (Alpha)	Web graphics, overlays
JPEG	Lossy (0.92 quality)	No	Photos, social media
WebP	Both options	Yes	Modern web optimization
SVG	None (vector)	Yes	Scalable icons, print

Frequently Asked Questions

Canvas resolution directly determines output quality. For print at 300 DPI, a 10×10 inch print requires 3000×3000 pixels. Use the scale multiplier option (2x or 4x) before export to generate high-resolution output. The generator calculates canvas dimensions as width × scale for the final render.

The painter's algorithm sorts all cubes by their combined depth value d = x + y + z before rendering. Cubes with lower depth values render first (back), while higher values render last (front). This ensures correct occlusion without expensive z-buffer calculations. Note: this approach assumes non-intersecting cubes on a regular grid.

Color banding occurs when the color space cannot represent smooth transitions across the gradient range. With 8-bit color channels providing 256 discrete values, gradients spanning large grids may show visible steps. Mitigate this by using dithering (adding slight noise), choosing colors with similar luminance values, or reducing the grid size to increase color step density per cube.

The current implementation uses the true isometric angle of 30° for industry-standard output. Modifying this angle would create a dimetric or trimetric projection, altering the 1:1:1 axis ratio. For dimetric projections (common in pixel art), angles of 26.57° (arctan(0.5)) produce integer pixel ratios suitable for aliased rendering.

A 50×50×10 grid requires rendering 25,000 cubes, each with 3 faces and 18 vertices. Total path operations exceed 75,000 per frame. The generator mitigates this using requestAnimationFrame batching and optional Web Worker offloading for computations. For real-time preview, reduce grid dimensions during adjustment, then increase for final export.

The base color is parsed into HSL components. The top face uses the original color at 100% lightness. The left face multiplies the lightness by 0.75, and the right face by 0.5. This simulates a directional light source positioned above and to the right of the cube grid, consistent with standard isometric rendering conventions.