Every mech avatar generated by MechGen is assembled from seven distinct part categories, each with 10 unique variants. Understanding how these parts work together is the key to appreciating why no two mechs look quite the same — and how over 10 million unique combinations emerge from a relatively simple system.
The 64x64 Canvas
All MechGen robots live on a 64x64 pixel grid. That is 4,096 total pixels to work with. Every part is drawn using fillRect() calls directly on an HTML canvas — no sprite sheets, no external images, no SVGs. Pure programmatic pixel art.
The drawing happens back-to-front in a specific order: accessory first, then legs, body, arms, head, antenna, and finally eyes on top. This layering ensures that parts overlap naturally, with the head sitting on the body and eyes rendered last so they are always visible.
The Seven Part Categories
Head (10 variants)
The head is the defining feature of any mech. It sits at the top-center of the canvas and establishes the robot’s silhouette. Variants range from the chunky Block head (a simple square) to the sleek Dome (rounded top), the aggressive Horned (angular protrusions), and the regal Crown (stepped top edge).
Each head variant changes how the eyes and antenna sit, since those parts are positioned relative to the head’s bounds.
Eyes (10 variants)
Eyes give your mech personality. Dots are the classic two-pixel eyes. Wide stretches them horizontally for a surprised look. Visor draws a single horizontal band across the face — very Cylon. Cyclops is a single centered eye. X-Eyes give a defeated look, while LED Strip runs a row of tiny dots.
Eyes are always drawn in the eye color from the active palette, making them pop against the head.
Antenna (10 variants)
The antenna sits above the head and adds verticality. None keeps it clean. Spike is a single pointed rod. Dual Rods adds two parallel antennae. Dish attaches a satellite receiver. Halo floats a ring above the head for an angelic look.
Since antenna is drawn after the head, it overlaps naturally at the attachment point.
Body (10 variants)
The body is the largest single part and defines the mech’s build. Standard is a balanced rectangle. Tank is extra wide and armored. Slim is narrow and tall. Barrel has a rounded profile. Orb is completely spherical.
The body connects the head above to the legs below, and provides attachment points for the arms on either side.
Arms (10 variants)
Arms extend from the body’s sides. Standard arms are simple rectangles. Claws end in grabby pincers. Cannons are thick cylindrical weapons. Blades taper to sharp points. None removes the arms entirely for a streamlined look.
Arms are drawn after the body so they can overlap the body’s edges naturally.
Legs (10 variants)
Legs ground the mech and affect its stance. Standard legs are two simple columns. Treads replace legs with tank tracks. Digitigrade bends backward like a bird’s leg. Hover removes ground contact entirely, showing thrust effects. Spider adds four thin limbs. Wheels replaces feet with circles.
Accessory (10 variants)
Accessories add the finishing touch. None keeps it minimal. Jetpack straps thrusters to the back. Shield adds a protective panel to one side. Chest Light embeds a glowing element in the torso. Shoulder Missiles mount launchers on top. Energy Core adds a visible power source. Wing Fins extend small wings. Tail appends a rear appendage.
Since accessories are drawn first (behind everything else), they peek out from behind the body without covering important details.
The Color System
Parts alone do not make a mech unique — color does. Each mech uses a five-color scheme:
- Primary: The main body and head color
- Secondary: Used for arms, legs, and accents
- Accent: Highlights and detail elements
- Eyes: Always the eye color, designed to contrast with the head
- Background: The canvas backdrop (or transparent)
MechGen includes 12 curated palettes that ensure every random combination looks cohesive. The darken() and lighten() helper functions generate shading from these base colors, adding depth without requiring extra palette entries.
The Math: 10 Million Combinations
With 10 variants per category across 7 categories, the raw combinatorial count is:
10 x 10 x 10 x 10 x 10 x 10 x 10 = 10,000,000 combinations
Multiply that by 12 color palettes and 5 adjustable colors, and the actual design space is astronomically larger. But even at the part level, 10 million is enough to ensure that any seed string you provide — your name, your bot’s ID, a random UUID — maps to a visually distinct mech.
Designing for Determinism
Every aspect of MechGen’s rendering is deterministic. Given the same part indices and color values, the canvas output is pixel-identical every time. This is what makes MechGen.fromSeed() work: a string is hashed to a number, that number seeds a pseudorandom number generator (LCG algorithm), and the PRNG selects parts and palette in a fixed sequence.
No randomness leaks in. No timing-dependent rendering. No floating-point drift. The same seed always produces the same robot, on any browser, on any device.
Try It Yourself
Head over to the MechGen generator and click through the part categories. Watch how each swap changes the character’s personality. Or type a seed string in bot mode and see your deterministic mech materialize.
Understanding the anatomy of a mech makes the generation process feel less like magic and more like design — which is exactly what it is.