← Back to portfolio

Procedural Character Generation • Loot System

CAST.GEN & BODY.GEN

React • JavaScript • Web Audio API • HTML5 Canvas • Procedural Generation

CAST.GEN and BODY.GEN are a pair of browser-based procedural character generators built with React and rendered on HTML5 Canvas. Every roll produces a fully unique character — name, pixel-art portrait or full body, ID badge, and role — pulled from a six-tier rarity system inspired by loot mechanics in modern games.

The systems are built entirely from scratch with no external libraries: custom pixel-art renderers drawing directly to canvas, a synthesized Web Audio API sound engine that scales from a single beep on common rolls up to a multi-layered cinematic moment on Mythic drops, and a weighted random selection pipeline for both names and visual traits.

Role
Solo — Design & Engineering
Renderer
HTML5 Canvas (32×38 / 64×104 px)
Audio
Web Audio API — synthesized
Stack
React, Babel, Vanilla JS
Status
Live & playable

Rarity Tiers

Every roll resolves against a six-tier weighted table. The rates are designed so that Legendary and Mythic drops are genuinely rare — not just visually distinct.

Tier Drop Rate Name Style Visual
Common 55% First + static last name Standard portrait, no effects
Uncommon 27% First + fused portmanteau surname Green particle burst on reveal
Rare 12% First + suffixed surname (±hyphen) Blue glow eyes, blue particles
Epic 4% Corporate title + First + surname Purple glow, void eyes, screen shake
Legendary 1.5% Divine root name + legendary title Gold crown, holo badge, gold dust, full overlay
Mythic 0.5% Corp title + divine root + epic title Blood mark, cinematic 8-layer sound, red storm

Features


Try It

Name & Face Generator
CAST.GEN
Roll a procedurally generated character with a pixel-art portrait and downloadable ID badge. Tier affects name structure, face traits, audio reveal, and badge design.
OPEN CAST.GEN →
Full-Body Generator
BODY.GEN
Extended version of CAST.GEN that renders a full pixel-art body — torso, arms, and legs — using the same tier system and name pipeline.
OPEN BODY.GEN →
React JavaScript HTML5 Canvas Web Audio API Procedural Generation Pixel Art Loot System