{/* peashooters: r1c0, r2c1, r3c0 */}

{/* peas */}

{/* zombies */}

{/* cursor */}

{/* HUD: sun counter */}

{String(125 + tick).padStart(4,"0")}

{/* corner badge */}

WAVE 1

); } /* ─────────────────────────────────────── Home page ─────── */ function Home({ setTab }) { return (

{/* HERO */}

// CSEE 4840 · Spring 2026 · Milestone 1 shipped Plants vs Zombies, on a chip. We built a Plants vs Zombies clone that runs on a Cyclone V FPGA — a 640×480 lawn, rasterized one scanline at a time, with five very slow zombies and one very calm Peashooter. The ARM CPU on the same board runs the game in C; the FPGA does the pixels.

{ setTab("demo"); window.scrollTo(0,0); }}>PLAY THE DEMO → { setTab("hardware"); window.scrollTo(0,0); }}>HOW IT WORKS GITHUB ↗

60 HZ 640×480 VGA 8-BIT INDEX DE1-SoC CYCLONE V

↳ live preview · 60 fps in browser

// pal[7] = #008000 // pal[5] = #FF0000

{/* SPECS STRIP */}

{[ { num: "640×480", label: "VGA", cap: "// 60 Hz, hardware timing" }, { num: "13", label: "Colors", cap: "// hardware palette LUT" }, { num: "48", label: "Shapes", cap: "// rect · circle · digit · sprite" }, { num: "4×8", label: "Lawn grid", cap: "// 80×90 px cells" }, { num: "1", label: "Cyclone V", cap: "// Terasic DE1-SoC" }, ].map(it => (

{it.num}

{it.label.toUpperCase()}

{it.cap}

))}

{/* WHAT IS THIS — for casual viewers */}

// the explainer What's an FPGA, and why put a game on one? Most games run on a CPU and a graphics card. This one runs on a chip you can re-wire — a Cyclone V FPGA. Instead of installing a graphics card, we describe one in code, and the chip becomes that card.

The board has two halves on one die. The ARM side runs Linux and the C game loop — spawning zombies, moving the cursor, ticking the sun economy. The FPGA side reads a little table of "shapes" and turns them into pixels, one scanline at a time, sixty times a second. They talk to each other through five 32-bit registers at 0xff200000.

} /> } />

{/* THE FRAME, BROKEN DOWN */}

// one frame, 16.67 ms How a single frame happens.

Sixty times a second, the C game loop on the ARM CPU pushes a new state to the FPGA. The FPGA waits for vertical blank, latches it, and starts drawing.

{/* CONTROLS / HOW TO PLAY */}

// controls Five keys. Five zombies. The driver reads the keyboard from /dev/input/event0. The C game loop polls it at 60 Hz. No mouse, no networking. Sit at the board, hands on the keys, like an arcade.

FPS · 60 SUN · 25 / 8s PEA · 1 dmg ZOMBIE HP · 3

↑↓←→

Move the cursor across the 4×8 lawn grid.

Space

Place a Peashooter — costs 50 sun.

D

Remove a plant in the cursor cell.

Esc

Quit the game.

$ ./pvz
// arrow keys move the cursor.
// win condition: kill all 5 zombies. lose: any zombie reaches x=0.

{/* DESTINATIONS — pick a tab */}

// where to next Pick a rabbit hole.

{ setTab("demo"); window.scrollTo(0,0); }} /> { setTab("hardware"); window.scrollTo(0,0); }} /> { setTab("software"); window.scrollTo(0,0); }} />

); } /* ──────────────── helpers ──────────────── */ function ConceptCard({ role, title, body, chip, tint, icon }) { return (

{role}

{icon}

{title}

{body}

{chip}

); } function BrainIcon() { return ( ); } function ChipIcon() { return ( ); } function FrameTimeline() { const steps = [ { t: "t = 0 ms", a: "HPS", c: "var(--lawn-600)", title: "Poll keyboard", body: "input.c reads /dev/input/event0. Cursor moves, plant placed if user hit Space." }, { t: "t ≈ 0.1 ms", a: "HPS", c: "var(--lawn-600)", title: "Update game state", body: "game.c ticks: zombie movement, peas fired, collision, sun economy, win/lose check." }, { t: "t ≈ 0.5 ms", a: "HPS", c: "var(--lawn-600)", title: "Build shape list", body: "render.c walks the world and writes up to 48 shape descriptors via ioctl." }, { t: "t ≈ 0.6 ms", a: "BUS", c: "var(--trace-cyan)", title: "Commit", body: "ioctl(PVZ_COMMIT_SHAPES) latches the shadow table. The FPGA now sees the new frame." }, { t: "t ≈ 0.7 ms", a: "FPGA", c: "var(--zombie-500)", title: "Wait for vsync", body: "Linebuffer swap roles at hsync. New shapes activate at the next vertical blank." }, { t: "t ≈ 1 ms", a: "FPGA", c: "var(--zombie-500)", title: "Rasterize 480 lines", body: "shape_renderer.sv walks 525 vcounts × 800 hcounts. Each pixel: BG cell color overwritten by any visible shape on that scanline." }, { t: "t = 16.67 ms", a: "VGA", c: "var(--sun-500)", title: "Frame out the wire", body: "640×480 pixels reach the monitor. The HPS is already half-done with the next frame." }, ]; return (

{/* timeline line */}

{steps.map((s, i) => (

{s.a}

{s.t}

{s.title}

{s.body}

))}

); } function DestCard({ label, title, body, badge, tint, tintFg, onClick }) { const [hover, setHover] = useState(false); return (

setHover(true)} onMouseLeave={() => setHover(false)} style={{ background: "#fff", border: "2px solid var(--ink-900)", boxShadow: hover ? "var(--shadow-pixel-3)" : "var(--shadow-pixel-2)", transform: hover ? "translate(-2px,-2px)" : "none", cursor: "pointer", padding: 0, display: "flex", flexDirection: "column", }}>

{label} // {badge}

{title}

{body}

OPEN →

); } window.Home = Home;