Show description
Project Review: The Complete Microprocessor
Project Review: The Complete Microprocessor
The Complete Microprocessor
Architecture & Design Review Lab 4 Completed
Student: Lalo Morales
Overview
Architecture Map
Instruction Set
The Build Journey
System Overview
You have successfully built a fully functional 4-bit Microprocessor. This system is capable of executing programmed instructions stored in memory, performing arithmetic calculations, and making decisions based on logic.
🧠 The Brainless CPU
Role: The Calculator
Contains the Arithmetic Logic Unit (ALU) and the Accumulator. It performs math (ADD, SUB) and logic (AND) operations on data.
🎮 The Controller
Role: The Puppet Master
A ROM-based Finite State Machine. It reads "Opcodes" and translates them into control signals (wires) that tell the other parts what to do.
📍 Address Generator
Role: The Navigator
Calculates where to look in memory. It can step forward sequentially (Program Counter) or jump to specific locations (MAR).
✅ Status Check
✓ Hardware assembly completed.
✓ Instruction set defined (LOAD, ADD, STOP, AND, ZERO, SUB, STORE).
✓ Verified via Simulation (Digital & Verilog).
Interactive Architecture
Hover over any component to understand its role in your circuit.
DATA BUS (4-bit)
ADDRESS BUS
CONTROL SIGNALS
CONTROLLER
ADDRESS GEN
RAM
BRAINLESS CPU
Component
Description goes here...
The Language of Your Machine
You moved from building hardware to defining software. These are the commands your CPU understands.
LOAD ACC (Op: 0)
Reads a value from RAM and puts it into the Accumulator.
Accum = RAM[PC]
ADD (Op: 1)
Adds a value from RAM to the current Accumulator value.
Accum = Accum + RAM[PC]
AND (Op: 3)
Bitwise AND operation. Keeps bits only if they are 1 in both numbers.
Accum = Accum & RAM[PC]
ZERO (Op: 4)
Clears the Accumulator by subtracting it from itself.
Accum = Accum - Accum
SUB (Op: 5)
Subtracts a RAM value from the Accumulator.
Accum = Accum - RAM[PC]
STORE (Op: 6)
Saves the Accumulator value into a specific RAM address.
RAM[Operand] = Accum
Micro-Operations (The "Secret" Steps)
Every instruction above is broken down into tiny steps inside the Controller's ROM.…
Project Review: The Complete Microprocessor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Review: The Complete Microprocessor</title>
<style>
:root {
--bg-color: #0f172a;
--card-bg: #1e293b;
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--accent-cyan: #06b6d4;
--accent-green: #10b981;
--accent-purple: #8b5cf6;
--border-color: #334155;
--font-main: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
body {
background-color: var(--bg-color);
color: var(--text-primary);
font-family: var(--font-main);
margin: 0;
padding: 0;
line-height: 1.6;
overflow-x: hidden;
}
/* Header */
header {
background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
padding: 2rem;
border-bottom: 1px solid var(--border-color);
text-align: center;
position: relative;
}
header h1 {
margin: 0;
font-size: 2.5rem;
background: linear-gradient(to right, var(--accent-cyan), var(--accent-purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
header p {
color: var(--text-secondary);
margin-top: 0.5rem;
font-size: 1.1rem;
}
.badge {
background-color: var(--accent-green);
color: #000;
padding: 4px 12px;
border-radius: 9999px;
font-size: 0.8rem;
font-weight: bold;
vertical-align: middle;
margin-left: 10px;
}
/* Navigation */
nav {
display: flex;
justify-content: center;
background-color: var(--card-bg);
padding: 1rem;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}
nav button {
background: transparent;
border: none;
color: var(--text-secondary);
padding: 0.5rem 1.5rem;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
nav button:hover, nav button.active {
color: var(--accent-cyan);
}
nav button.active::after {
content: '';
position: absolute;
bottom: -1rem;
left: 0;
width: 100%;
height: 3px;
background-color: var(--accent-cyan);
}
/* Main Container */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
/* Sections */
.section {
display: none;
animation: fadeIn 0.5s ease-in-out;
}
.section.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
h2 {
color: var(--accent-cyan);
border-left: 4px solid var(--accent-purple);
padding-left: 1rem;
margin-top: 0;
}
/* Cards */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.card {
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 1.5rem;
transition: transform 0.2s;
}
.card:hover {
transform: translateY(-5px);
border-color: var(--accent-cyan);
}
.card h3 {
margin-top: 0;
color: var(--accent-purple);
display: flex;
align-items: center;
gap: 10px;
}
/* Interactive Diagram */
.diagram-container {
background-color: #1a1a1a;
border-radius: 16px;
padding: 2rem;
position: relative;
overflow: hidden;
border: 1px solid var(--border-color);
margin-bottom: 2rem;
text-align: center;
}
svg {
max-width: 100%;
height: auto;
}
/* SVG Styles */
.svg-box {
fill: var(--card-bg);
stroke: var(--accent-cyan);
stroke-width: 2;
transition: all 0.3s ease;
cursor: pointer;
}
.svg-box:hover {
fill: #1e3a4a;
stroke: var(--text-primary);
filter: drop-shadow(0 0 8px var(--accent-cyan));
}
.svg-text {
fill: var(--text-primary);
font-family: monospace;
font-size: 14px;
pointer-events: none;
}
.svg-wire {
stroke: var(--text-secondary);
stroke-width: 2;
fill: none;
stroke-dasharray: 5;
animation: dash 30s linear infinite;
}
.svg-wire.control { stroke: var(--accent-purple); }
.svg-wire.data { stroke: var(--accent-green); }
@keyframes dash {
to { stroke-dashoffset: -1000; }
}
/* Info Panel */
#info-panel {
background-color: rgba(15, 23, 42, 0.95);
border: 1px solid var(--accent-cyan);
padding: 1rem;
border-radius: 8px;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 80%;
display: none;
color: var(--text-primary);
text-align: left;
box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}
/* Timeline */
.timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.timeline::after {
content: '';
position: absolute;
width: 4px;
background-color: var(--border-color);
top: 0;
bottom: 0;
left: 20px;
}
.timeline-item {
padding: 10px 40px;
position: relative;
margin-bottom: 2rem;
}
.timeline-item::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
left: 14px;
background-color: var(--bg-color);
border: 4px solid var(--accent-cyan);
border-radius: 50%;
top: 15px;
z-index: 1;
}
.timeline-content {
background-color: var(--card-bg);
padding: 1.5rem;
border-radius: 8px;
border-left: 4px solid var(--accent-cyan);
}
/* Code Block */
pre {
background-color: #000;
padding: 1rem;
border-radius: 8px;
overflow-x: auto;
color: var(--accent-green);
font-family: 'Courier New', Courier, monospace;
}
/* Footer */
footer {
text-align: center;
padding: 2rem;
color: var(--text-secondary);
font-size: 0.9rem;
border-top: 1px solid var(--border-color);
margin-top: 4rem;
}
</style>
</head>
<body>
<header>
<h1>The Complete Microprocessor</h1>
<p>Architecture & Design Review <span class="badge">Lab 4 Completed</span></p>
<p style="font-size: 0.9rem; color: var(--accent-cyan);">Student: Lalo Morales</p>
</header>
<nav>
<button onclick="switchTab('overview')" class="active" id="btn-overview">Overview</button>
<button onclick="switchTab('architecture')" id="btn-architecture">Architecture Map</button>
<button onclick="switchTab('instructions')" id="btn-instructions">Instruction Set</button>
<button onclick="switchTab('journey')" id="btn-journey">The Build Journey</button>
</nav>
<div class="container">
<!-- OVERVIEW SECTION -->
<div id="overview" class="section active">
<h2>System Overview</h2>
<p>You have successfully built a fully functional 4-bit Microprocessor. This system is capable of executing programmed instructions stored in memory, performing arithmetic calculations, and making decisions based on logic.</p>
<div class="grid">
<div class="card">
<h3>🧠 The Brainless CPU</h3>
<p><strong>Role:</strong> The Calculator</p>
<p>Contains the Arithmetic Logic Unit (ALU) and the Accumulator. It performs math (ADD, SUB) and logic (AND) operations on data.</p>
</div>
<div class="card">
<h3>🎮 The Controller</h3>
<p><strong>Role:</strong> The Puppet Master</p>
<p>A ROM-based Finite State Machine. It reads "Opcodes" and translates them into control signals (wires) that tell the other parts what to do.</p>
</div>
<div class="card">
<h3>📍 Address Generator</h3>
<p><strong>Role:</strong> The Navigator</p>
<p>Calculates where to look in memory. It can step forward sequentially (Program Counter) or jump to specific locations (MAR).</p>
</div>
</div>
<div style="margin-top: 2rem; padding: 1rem; background: rgba(16, 185, 129, 0.1); border-radius: 8px; border: 1px solid var(--accent-green);">
<h3 style="color: var(--accent-green); margin-top:0;">✅ Status Check</h3>
<ul style="list-style: none; padding: 0;">
<li>✓ Hardware assembly completed.</li>
<li>✓ Instruction set defined (LOAD, ADD, STOP, AND, ZERO, SUB, STORE).</li>
<li>✓ Verified via Simulation (Digital & Verilog).</li>
</ul>
</div>
</div>
<!-- ARCHITECTURE SECTION -->
<div id="architecture" class="section">
<h2>Interactive Architecture</h2>
<p>Hover over any component to understand its role in your circuit.</p>
<div class="diagram-container">
<svg viewBox="0 0 800 400">
<!-- Data Bus (Green) -->
<path d="M 100 200 L 700 200" class="svg-wire data" />
<text x="380" y="190" fill="#10b981" font-size="12">DATA BUS (4-bit)</text>
<!-- Address Bus (Cyan) -->
<path d="M 200 150 L 600 150" class="svg-wire" style="stroke: var(--accent-cyan);"/>
<text x="380" y="140" fill="#06b6d4" font-size="12">ADDRESS BUS</text>
<!-- Control Signals (Purple) -->
<path d="M 200 300 L 600 300" class="svg-wire control" />
<text x="380" y="320" fill="#8b5cf6" font-size="12">CONTROL SIGNALS</text>
<!-- Controller -->
<rect x="50" y="250" width="150" height="100" class="svg-box" onmouseover="showInfo('controller')" onmouseout="hideInfo()"/>
<text x="85" y="305" class="svg-text">CONTROLLER</text>
<!-- Address Gen -->
<rect x="50" y="50" width="150" height="100" class="svg-box" onmouseover="showInfo('addrgen')" onmouseout="hideInfo()"/>
<text x="75" y="105" class="svg-text">ADDRESS GEN</text>
<!-- RAM -->
<rect x="600" y="50" width="150" height="100" class="svg-box" onmouseover="showInfo('ram')" onmouseout="hideInfo()"/>
<text x="655" y="105" class="svg-text">RAM</text>
<!-- CPU -->
<rect x="600" y="250" width="150" height="100" class="svg-box" onmouseover="showInfo('cpu')" onmouseout="hideInfo()"/>
<text x="635" y="305" class="svg-text">BRAINLESS CPU</text>
<!-- Connections -->
<line x1="125" y1="150" x2="125" y2="200" stroke="#555" stroke-width="2" />
<line x1="675" y1="150" x2="675" y2="200" stroke="#555" stroke-width="2" />
</svg>
<div id="info-panel">
<h3 id="info-title" style="margin-top:0; color: var(--accent-cyan);">Component</h3>
<p id="info-desc">Description goes here...</p>
</div>
</div>
</div>
<!-- INSTRUCTIONS SECTION -->
<div id="instructions" class="section">
<h2>The Language of Your Machine</h2>
<p>You moved from building hardware to defining software. These are the commands your CPU understands.</p>
<div class="grid">
<div class="card">
<h3>LOAD ACC (Op: 0)</h3>
<p>Reads a value from RAM and puts it into the Accumulator.</p>
<code style="color: var(--accent-green)">Accum = RAM[PC]</code>
</div>
<div class="card">
<h3>ADD (Op: 1)</h3>
<p>Adds a value from RAM to the current Accumulator value.</p>
<code style="color: var(--accent-green)">Accum = Accum + RAM[PC]</code>
</div>
<div class="card">
<h3>AND (Op: 3)</h3>
<p>Bitwise AND operation. Keeps bits only if they are 1 in both numbers.</p>
<code style="color: var(--accent-green)">Accum = Accum & RAM[PC]</code>
</div>
<div class="card">
<h3>ZERO (Op: 4)</h3>
<p>Clears the Accumulator by subtracting it from itself.</p>
<code style="color: var(--accent-green)">Accum = Accum - Accum</code>
</div>
<div class="card">
<h3>SUB (Op: 5)</h3>
<p>Subtracts a RAM value from the Accumulator.</p>
<code style="color: var(--accent-green)">Accum = Accum - RAM[PC]</code>
</div>
<div class="card">
<h3>STORE (Op: 6)</h3>
<p>Saves the Accumulator value into a specific RAM address.</p>
<code style="color: var(--accent-green)">RAM[Operand] = Accum</code>
</div>
</div>
<h3>Micro-Operations (The "Secret" Steps)</h3>
<p>Every instruction above is broken down into tiny steps inside the Controller's ROM. For example, <strong>STORE</strong> takes 2 steps:</p>
<pre>
Step 1: Fetch address from RAM -> Load into MAR (Memory Address Register)
Step 2: Put Accumulator on Data Bus -> Write enabled -> Save to RAM
</pre>
</div>
<!-- JOURNEY SECTION -->
<div id="journey" class="section">
<h2>How You Got Here</h2>
<p>This microprocessor is the culmination of 4 labs worth of work.</p>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-content">
<h3>Lab 1: The Foundation</h3>
<p>You built basic <strong>Adders</strong> and <strong>Incrementers</strong>. These circuits are now living inside your ALU (Arithmetic Logic Unit) and your PC (Program Counter). Without them, the computer couldn't count or do math.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>Lab 2: Decisions</h3>
<p>You built <strong>Multiplexers (Muxes)</strong>. These are the "traffic cops" of your circuit. In the final diagram, you see them choosing whether the address comes from the PC or the MAR.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>Lab 3: Memory & State</h3>
<p>You built <strong>Registers</strong> and the <strong>"Brainless" CPU</strong>. This gave the machine a short-term memory (Accumulator) but it had no way to execute a program automatically.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>Lab 4: Intelligence</h3>
<p>You added the <strong>Controller</strong> (ROM) and <strong>Address Generator</strong>. This closed the loop. Now, the machine fetches its own instructions, decodes them, and executes them in a cycle.</p>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>Generated for CSE/EEE 120 | Lalo Morales</p>
</footer>
<script>
function switchTab(tabId) {
// Hide all sections
document.querySelectorAll('.section').forEach(el => el.classList.remove('active'));
// Deactivate all buttons
document.querySelectorAll('nav button').forEach(el => el.classList.remove('active'));
// Activate selected
document.getElementById(tabId).classList.add('active');
document.getElementById('btn-' + tabId).classList.add('active');
}
const infoData = {
'controller': {
title: 'The Controller (ROM)',
desc: 'The heart of the machine. It holds the "Microcode" inside a ROM. It looks at the current Instruction Register (IR) and outputs control signals (wires) to tell the RAM to read, or the ALU to add.'
},
'addrgen': {
title: 'Address Generator',
desc: 'Contains the Program Counter (PC) and Memory Address Register (MAR). It decides WHICH memory address we are talking to. Usually, it just counts up (PC), but for Store/Jump commands, it uses the MAR.'
},
'ram': {
title: 'RAM (Random Access Memory)',
desc: 'Stores your program (instructions) and your variables (data). The "ram_vals.hex" file you loaded goes here.'
},
'cpu': {
title: 'Brainless CPU',
desc: 'The brawn. It contains the ALU (Math stuff) and the Accumulator (the result register). It does exactly what the Controller tells it to do via the control wires.'
}
};
function showInfo(component) {
const panel = document.getElementById('info-panel');
const title = document.getElementById('info-title');
const desc = document.getElementById('info-desc');
if(infoData[component]) {
title.innerText = infoData[component].title;
desc.innerText = infoData[component].desc;
panel.style.display = 'block';
}
}
function hideInfo() {
document.getElementById('info-panel').style.display = 'none';
}
</script>
</body>
</html>