Building a Procedural Pixel Sakura Tree in TypeScript
Designing a low-resolution HTML5 Canvas pixel-art cherry blossom tree with deterministic branching and minimal motion.
Crisp Pixels on Modern High-DPI Screens
When redesigning the front page alongside Transitioning My Second Brain from Org-Roam to the Web, I wanted a centerpiece that felt personal, calm, and crafted in code rather than a static profile photo.
The secret to sharp procedural pixel art on an HTML5 <canvas> is rendering into a compact logical grid (for example 160x144 pixels) and disabling bilinear interpolation via CSS:
function drawPixel(
ctx: CanvasRenderingContext2D,
x: number,
y: number,
color: string
) {
ctx.fillStyle = color;
ctx.fillRect(Math.round(x), Math.round(y), 1, 1);
}
Deterministic Bonsai Branching
By seeding a lightweight pseudo-random number generator (Mulberry32), every branch angle, gnarled trunk pixel, and layered blossom cluster is 100% deterministic for a given seed—while still allowing you to click Regenerate to grow a brand-new sakura tree.
Keeping Animations Minimal
Rather than running a heavy 60 FPS particle storm, the tree canopy itself is drawn once onto an offscreen pixel buffer. Only a handful of single-pixel petals drift gently at a capped frame rate, respecting prefers-reduced-motion and pausing whenever you switch tabs.