CPU Inside 02

An interactive ARM64 microarchitecture explorer built with C and Raylib. AI Generated and finetuned for the visualisation not code quality.

cpu_inside_02.mov

This project renders a large, zoomable "core tile" that lets you watch a small instruction trace move through the frontend, register file, execution fabric, load/store path, and cache hierarchy. It is not a cycle-accurate simulator; it is a visual teaching tool for understanding where instructions and operands travel inside a modern-ish CPU layout.

What This Repo Shows

• A full-screen interactive microarchitecture map with pan and zoom
• An instruction trace panel with three example ARM64 instructions
• Animated stage-by-stage flow through fetch, decode, register read, execute, memory, and writeback
• Architectural register highlighting for reads and writes
• Stylized L1I, L1D, L2, and L3 cache views that light up based on the active address
• A clean base for adding more pages and deeper CPU views later

Visual Legend

Use this legend while reading the UI:

• 🟦 cyan instruction or control-flow movement
• 🟩 green register reads
• 🟥 red writeback / produced values
• 🟨 gold memory address and load-store activity
• 🟧 copper structural panel outlines
• 🌌 dark navy background / chip canvas

Architecture Map

flowchart LR
T["Instruction Trace Panel"]
FE["Frontend"]
I1["L1I Cache<br/>8 sets x 4 ways"]
DE["Fetch / Decode / Rename"]
RF["Architectural Register File<br/>X0-X30, SP, PC, NZCV"]
EX["Integer / Branch / SIMD Fabric"]
LSU["Load / Store Pipeline"]
D1["L1D Cache<br/>8 sets x 4 ways"]
L2["Unified L2<br/>4 banks x 8 lines"]
L3["System L3 / SLC<br/>4 slices x 12 lines"]
WB["Writeback"]
T --> FE
FE --> I1
I1 --> DE
DE --> RF
RF --> EX
RF --> LSU
LSU --> D1
D1 --> L2
L2 --> L3
EX --> WB
D1 --> WB
WB --> RF
classDef panel fill:#10233b,stroke:#d79a52,color:#e8f3ff,stroke-width:2px;
classDef flow fill:#12395d,stroke:#52d1ff,color:#ebf9ff,stroke-width:2px;
classDef reg fill:#133c25,stroke:#4cd684,color:#eefdf3,stroke-width:2px;
classDef mem fill:#4f3a09,stroke:#ffd357,color:#fff8df,stroke-width:2px;
classDef wb fill:#4f1818,stroke:#ff6e63,color:#fff0ef,stroke-width:2px;
class T panel;
class FE,I1,DE flow;
class RF reg;
class LSU,D1,L2,L3 mem;
class EX,WB wb;

Loading

Pipeline Walkthrough

The explorer animates one instruction at a time through eight stages:

flowchart LR
S1["1. PC Fetch"] --> S2["2. L1I Access"] --> S3["3. Decode"] --> S4["4. Register Read"] --> S5["5. Execute"] --> S6["6. Load/Store Pipe"] --> S7["7. Data Cache"] --> S8["8. Writeback"]
classDef fetch fill:#163b63,stroke:#52d1ff,color:#eef8ff,stroke-width:2px;
classDef reg fill:#1d4f2b,stroke:#4cd684,color:#eefdf3,stroke-width:2px;
classDef exec fill:#5a1f1f,stroke:#ff6e63,color:#fff0ef,stroke-width:2px;
classDef mem fill:#5a430d,stroke:#ffd357,color:#fff7de,stroke-width:2px;
class S1,S2,S3 fetch;
class S4 reg;
class S5 exec;
class S6,S7,S8 mem;

Loading

Instruction stories currently baked into the demo

1. ldur x0, [x29, #-8]
2. stur x2, [x29, #-16]
3. add x1, x2, x3

These examples are enough to show three different dataflow patterns:

• a load that returns data into the register file
• a store that generates an address and sends source data into the memory path
• an ALU operation that reads two registers and writes one result back

Screen Tour

+--------------------------------------------------------------------------------------------------+
| Top bar: page switching, pause/reset hints, global controls |
+---------------------------+-----------------------------------------+-----------------------------+
| Instruction trace panel | Frontend + L1I + Decode | Status HUD |
| Click a trace slot to | Animated instruction path enters here | Current instruction, |
| restart from that insn | before operands fan out into the core | stage, zoom, run state |
+---------------------------+---------------------------+-------------+-----------------------------+
| Register file + NZCV | Integer / branch / SIMD | Load/store path |
| Read cells go green | ALU-side execution view | Address generation and memory plumbing |
+---------------------------+---------------------------+-------------------------------------------+
| L1D cache | Unified L2 | System L3 / SLC |
| Address-driven cache highlight | Banked cache view | Slice-oriented last-level |
+--------------------------------------------------------------------------------------------------+

Controls

• q: quit
• 1: open the explorer page
• 2: open the placeholder second page
• space: pause or resume stage animation
• r: reset the demo state and camera
• mouse wheel: zoom around the cursor
• left drag: pan the chip canvas when not interacting with the instruction panel
• middle drag: pan the chip canvas
• right drag: pan the chip canvas
• left click on an instruction slot: restart the animation from that instruction
• hover over an instruction slot: highlight the focused trace entry

What Is In The Model

The current build includes:

• 34 architectural cells: X0-X30, SP, PC, and NZCV
• 8 visible pipeline stages
• 3 demo instructions
• 1 main explorer page plus a reserved second page
• L1I and L1D cache panels with set/way highlighting
• banked L2 and sliced L3 overview panels

Build

Dependencies

• raylib
• a C compiler such as cc or clang
• optional: pkg-config for automatic Raylib flags in the Makefile

Commands

make
make run

The produced binary is arm_microarch.

Notes

• The app is a visualization-first project, not a hardware-accurate simulator.
• Page 2 is intentionally reserved for future views.
• The rendering and state logic currently live in a single file, which makes it easy to hack on but also a good candidate for future refactoring if the project grows.