Skip to content
LAM
Read Home Blog
Make Projects HTML Tools Games
Touch grass Notes Resume Links
Home Blog HTML Projects
Tools Games Notes Resume Links
Back The 4-Bit Machine: Under the Hood Electronics
Download Open
Show description 2,385 chars · Electronics

The 4-Bit Machine: Under the Hood

The 4-Bit Machine: Under the Hood












The 4-Bit Machine


You didn't just wire circuits. You built a brain. Here is the conceptual guide to how sand becomes software.












From Hardwired to Programmable


In Labs 1-3, you built circuits that did one thing (like an adder). To change what they did, you had to rewire them.



In Lab 4, you built a General Purpose Computer. By changing the numbers in memory (software), the same physical hardware can add, subtract, count, or make decisions without moving a single wire.





The "Von Neumann" Architecture

You built a classic architecture consisting of three pillars:


CPU: The worker (ALU + Registers)

Memory: The storage (RAM)

I/O: The communication (Bus)











The Anatomy of Your Processor









1. The Controller

The Boss


It reads instructions (numbers like 0, 1, 2) and converts them into electrical signals. It tells the other components when to work. It uses a Microcode ROM (a cheat sheet) to know which wires to turn on for each instruction.











2. The Datapath

The Muscle


Includes the ALU (Arithmetic Logic Unit) and the Accumulator. It doesn't decide what to do; it just blindly adds, subtracts, or stores numbers when the Controller tells it to.











3. The Memory

The Library


RAM: Holds your program (the list of instructions).
MAR: (Memory Address Register) holds the address of the specific shelf in the library we want to read from.











The "Heartbeat" of the Machine


Every computer, from this 4-bit chip to the laptop you are using right now, runs in a continuous loop called the Fetch-Decode-Execute cycle. Here is what happened in your simulation every time you clicked the clock.










1




Fetch (Step 0)

The Program Counter (PC) points to the next line of code in RAM. The Controller says "Read RAM!" and pulls that number into the Instruction Register (IR).











2




Decode (Microcode Lookup)

The Controller looks at the number in the IR (e.g., "1"). It checks its internal ROM to see what "1" means. It sees that "1" means "ADD".









3




Execute (Step 1+)

The Controller fires the control signals. It turns on the ALU (arith=1), opens the gates to the Accumulator (load_acc=1), and the math happens.…

The 4-Bit Machine: Under the Hood

13,590 bytes · HTML source
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The 4-Bit Machine: Under the Hood</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;600;700&family=Inter:wght@300;400;600&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: #0b0f19;
            color: #cbd5e1;
            background-image: radial-gradient(circle at 50% 0%, #1e293b 0%, #0b0f19 70%);
        }
        h1, h2, h3, h4 {
            font-family: 'Space Grotesk', sans-serif;
        }
        .glass-card {
            background: rgba(30, 41, 59, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(148, 163, 184, 0.1);
            transition: all 0.3s ease;
        }
        .glass-card:hover {
            border-color: rgba(56, 189, 248, 0.5);
            transform: translateY(-4px);
            box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
        }
        .highlight-text {
            background: linear-gradient(120deg, #38bdf8, #818cf8);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .step-connector {
            position: absolute;
            left: 24px;
            top: 40px;
            bottom: -40px;
            width: 2px;
            background: #334155;
            z-index: -1;
        }
        .last-step .step-connector { display: none; }
    </style>
</head>
<body class="min-h-screen p-6 md:p-12">

    <!-- Header -->
    <header class="max-w-5xl mx-auto mb-16 text-center">
        <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-blue-500/10 text-blue-400 mb-6 border border-blue-500/20">
            <i class="fas fa-microchip text-3xl"></i>
        </div>
        <h1 class="text-5xl md:text-6xl font-bold text-white mb-6 tracking-tight">The <span class="highlight-text">4-Bit Machine</span></h1>
        <p class="text-xl text-slate-400 max-w-2xl mx-auto">
            You didn't just wire circuits. You built a brain. Here is the conceptual guide to how sand becomes software.
        </p>
    </header>

    <!-- Main Content -->
    <div class="max-w-5xl mx-auto space-y-16">

        <!-- Section 1: The Philosophy -->
        <section>
            <div class="grid md:grid-cols-2 gap-8 items-center">
                <div>
                    <h2 class="text-3xl font-bold text-white mb-4">From Hardwired to Programmable</h2>
                    <p class="text-slate-300 mb-4 leading-relaxed">
                        In Labs 1-3, you built circuits that did <em>one thing</em> (like an adder). To change what they did, you had to rewire them.
                    </p>
                    <p class="text-slate-300 leading-relaxed">
                        In Lab 4, you built a <strong>General Purpose Computer</strong>. By changing the numbers in memory (software), the same physical hardware can add, subtract, count, or make decisions without moving a single wire.
                    </p>
                </div>
                <div class="glass-card rounded-2xl p-6 border-l-4 border-blue-500">
                    <h3 class="text-white font-bold mb-2">The "Von Neumann" Architecture</h3>
                    <p class="text-sm text-slate-400">You built a classic architecture consisting of three pillars:</p>
                    <ul class="mt-4 space-y-3 text-sm">
                        <li class="flex items-center"><i class="fas fa-brain text-purple-400 w-8"></i> <span><strong>CPU:</strong> The worker (ALU + Registers)</span></li>
                        <li class="flex items-center"><i class="fas fa-memory text-green-400 w-8"></i> <span><strong>Memory:</strong> The storage (RAM)</span></li>
                        <li class="flex items-center"><i class="fas fa-exchange-alt text-blue-400 w-8"></i> <span><strong>I/O:</strong> The communication (Bus)</span></li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- Section 2: The Anatomy -->
        <section>
            <h2 class="text-3xl font-bold text-white mb-8 text-center">The Anatomy of Your Processor</h2>
            <div class="grid md:grid-cols-3 gap-6">
                
                <!-- The Controller -->
                <div class="glass-card rounded-xl p-6 relative overflow-hidden group">
                    <div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                        <i class="fas fa-chess-king text-6xl text-purple-500"></i>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-2">1. The Controller</h3>
                    <p class="text-xs uppercase tracking-wider text-purple-400 font-bold mb-3">The Boss</p>
                    <p class="text-slate-400 text-sm">
                        It reads instructions (numbers like 0, 1, 2) and converts them into electrical signals. It tells the other components <em>when</em> to work. It uses a <strong>Microcode ROM</strong> (a cheat sheet) to know which wires to turn on for each instruction.
                    </p>
                </div>

                <!-- The Datapath -->
                <div class="glass-card rounded-xl p-6 relative overflow-hidden group">
                    <div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                        <i class="fas fa-calculator text-6xl text-green-500"></i>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-2">2. The Datapath</h3>
                    <p class="text-xs uppercase tracking-wider text-green-400 font-bold mb-3">The Muscle</p>
                    <p class="text-slate-400 text-sm">
                        Includes the <strong>ALU</strong> (Arithmetic Logic Unit) and the <strong>Accumulator</strong>. It doesn't decide <em>what</em> to do; it just blindly adds, subtracts, or stores numbers when the Controller tells it to.
                    </p>
                </div>

                <!-- The Memory -->
                <div class="glass-card rounded-xl p-6 relative overflow-hidden group">
                    <div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                        <i class="fas fa-book text-6xl text-blue-500"></i>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-2">3. The Memory</h3>
                    <p class="text-xs uppercase tracking-wider text-blue-400 font-bold mb-3">The Library</p>
                    <p class="text-slate-400 text-sm">
                        <strong>RAM:</strong> Holds your program (the list of instructions).<br>
                        <strong>MAR:</strong> (Memory Address Register) holds the address of the specific shelf in the library we want to read from.
                    </p>
                </div>
            </div>
        </section>

        <!-- Section 3: The Heartbeat (Fetch-Decode-Execute) -->
        <section>
            <h2 class="text-3xl font-bold text-white mb-8">The "Heartbeat" of the Machine</h2>
            <p class="text-slate-400 mb-8 max-w-3xl">
                Every computer, from this 4-bit chip to the laptop you are using right now, runs in a continuous loop called the <strong>Fetch-Decode-Execute</strong> cycle. Here is what happened in your simulation every time you clicked the clock.
            </p>

            <div class="space-y-0 relative">
                
                <!-- Step 1 -->
                <div class="relative pl-12 pb-8">
                    <div class="step-connector"></div>
                    <div class="absolute left-0 top-0 w-12 h-12 flex items-center justify-center">
                        <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-sm">1</div>
                    </div>
                    <div class="glass-card p-5 rounded-lg">
                        <h4 class="text-white font-bold mb-1">Fetch (Step 0)</h4>
                        <p class="text-slate-400 text-sm">The <strong>Program Counter (PC)</strong> points to the next line of code in RAM. The Controller says "Read RAM!" and pulls that number into the <strong>Instruction Register (IR)</strong>.</p>
                    </div>
                </div>

                <!-- Step 2 -->
                <div class="relative pl-12 pb-8">
                    <div class="step-connector"></div>
                    <div class="absolute left-0 top-0 w-12 h-12 flex items-center justify-center">
                        <div class="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold text-sm">2</div>
                    </div>
                    <div class="glass-card p-5 rounded-lg">
                        <h4 class="text-white font-bold mb-1">Decode (Microcode Lookup)</h4>
                        <p class="text-slate-400 text-sm">The Controller looks at the number in the IR (e.g., "1"). It checks its internal <strong>ROM</strong> to see what "1" means. It sees that "1" means "ADD".</p>
                    </div>
                </div>

                <!-- Step 3 -->
                <div class="relative pl-12 last-step">
                    <div class="absolute left-0 top-0 w-12 h-12 flex items-center justify-center">
                        <div class="w-8 h-8 bg-green-600 rounded-full flex items-center justify-center text-white font-bold text-sm">3</div>
                    </div>
                    <div class="glass-card p-5 rounded-lg">
                        <h4 class="text-white font-bold mb-1">Execute (Step 1+)</h4>
                        <p class="text-slate-400 text-sm">The Controller fires the control signals. It turns on the <strong>ALU</strong> (arith=1), opens the gates to the <strong>Accumulator</strong> (load_acc=1), and the math happens. The result is saved.</p>
                    </div>
                </div>

            </div>
        </section>

        <!-- Section 4: The "Magic" (Microcode) -->
        <section class="bg-slate-900/50 rounded-3xl p-8 border border-slate-800">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div>
                    <h2 class="text-2xl font-bold text-white mb-4">The "Magic" Secret: Microcode</h2>
                    <p class="text-slate-300 mb-4 text-sm leading-relaxed">
                        How does the number "1" physically cause an addition? 
                    </p>
                    <p class="text-slate-300 mb-4 text-sm leading-relaxed">
                        You created a translator. The <strong>ROM</strong> is just a lookup table. When you "programmed" the controller, you basically wrote a list of switch settings.
                    </p>
                    <div class="bg-black/40 p-4 rounded-lg font-mono text-xs text-green-400">
                        <p class="mb-2 text-slate-500">// Inside the Controller's Brain</p>
                        <p>IF Instruction == 1 (ADD) THEN:</p>
                        <p class="pl-4">Turn on ALU Add Wire</p>
                        <p class="pl-4">Turn on RAM Read Wire</p>
                        <p class="pl-4">Turn on Accumulator Write Wire</p>
                    </div>
                </div>
                <div class="relative">
                    <!-- Visual Representation of Bus -->
                    <div class="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-full blur-3xl"></div>
                    <div class="relative z-10 text-center">
                        <div class="inline-block p-6 rounded-xl bg-slate-800 border border-slate-700">
                            <p class="text-xs text-slate-400 uppercase tracking-widest mb-2">The Control Bus</p>
                            <div class="flex gap-1 justify-center">
                                <span class="w-3 h-8 bg-red-500 rounded-sm" title="Write"></span>
                                <span class="w-3 h-8 bg-red-500 rounded-sm" title="Read"></span>
                                <span class="w-3 h-8 bg-green-500 rounded-sm" title="Load Acc"></span>
                                <span class="w-3 h-8 bg-yellow-500 rounded-sm" title="ALU"></span>
                                <span class="w-3 h-8 bg-yellow-500 rounded-sm" title="ALU"></span>
                                <span class="w-3 h-8 bg-blue-500 rounded-sm" title="PC"></span>
                            </div>
                            <p class="text-xs text-slate-500 mt-2">10 Wires controlling the whole system</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>

    <footer class="max-w-5xl mx-auto mt-20 text-center border-t border-slate-800 pt-8 pb-12">
        <p class="text-slate-500 text-sm">
            You have successfully bridged the gap between electrical engineering and computer science.
        </p>
    </footer>

</body>
</html>