Show description
4-Bit Add/Sub Circuit Diagram
4-Bit Add/Sub Circuit Diagram
4-BIT ADD/SUB CIRCUIT DIAGRAM
Visual Representation with Automatic 2's Complement
A3:
A2:
A1:
A0:
B3:
B2:
B1:
B0:
SA:
SB:
OPERATION: 0 + 0 = 0
CIRCUIT STAGES
STAGE 1: CONDITIONAL INVERSION
A3
A2
A1
A0
B3
B2
B1
B0
SA
SB
⊕
⊕
⊕
⊕
⊕
⊕
⊕
⊕
∨
Cin
STAGE 2: FIRST ADDITION
4-BIT ADDER
(First Stage)
A'[3:0]
B'[3:0]
Cin
Sum1[3:0]
Cout1
0000
∧
SA∧SB
STAGE 3: CONDITIONAL INCREMENT
INCREMENTER
(+1)
In[3:0]
Out[3:0]
0000
MUX
2:1
0
1
SEL
FINAL OUTPUT
S3
S2
S1
S0
Cout
RESULT
0000
Dec: 0
Active Signal (1)
Inactive Signal (0)
Processing Block
Output
TEST CASES - CLICK TO LOAD
3 + 5 = 8
5 - 3 = 2
-3 + 5 = 2
-3 - 5 = -8
7 + 1 = 8
7 - 7 = 0
-4 + 4 = 0
-7 - 6 = -13
4-Bit Add/Sub Circuit Diagram
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4-Bit Add/Sub Circuit Diagram</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Courier New', monospace;
background: #1a1a1a;
color: #00ff00;
padding: 20px;
overflow-x: auto;
}
.container {
min-width: 1400px;
margin: 0 auto;
}
h1 {
text-align: center;
margin-bottom: 10px;
color: #00ff00;
text-shadow: 0 0 10px #00ff00;
}
.subtitle {
text-align: center;
margin-bottom: 20px;
color: #00aa00;
font-size: 14px;
}
.controls {
background: #2a2a2a;
border: 2px solid #00ff00;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 15px;
}
.input-group {
display: flex;
gap: 10px;
align-items: center;
}
.input-group label {
color: #00ff00;
min-width: 30px;
}
.input-group input[type="checkbox"] {
width: 30px;
height: 30px;
cursor: pointer;
accent-color: #00ff00;
}
.operation-display {
width: 100%;
text-align: center;
padding: 10px;
background: #0a0a0a;
border-radius: 5px;
color: #ffff00;
font-weight: bold;
margin-top: 10px;
}
.circuit-container {
background: #2a2a2a;
border: 2px solid #00ff00;
border-radius: 10px;
padding: 30px;
margin-bottom: 20px;
overflow-x: auto;
}
svg {
width: 100%;
height: auto;
background: #1a1a1a;
border-radius: 5px;
}
.wire {
fill: none;
stroke: #00aa00;
stroke-width: 2;
transition: stroke 0.3s;
}
.wire.active {
stroke: #00ff00;
stroke-width: 3;
filter: drop-shadow(0 0 5px #00ff00);
}
.gate {
fill: #2a2a2a;
stroke: #00ff00;
stroke-width: 2;
}
.gate.active {
fill: #003300;
stroke: #00ff00;
filter: drop-shadow(0 0 10px #00ff00);
}
.gate-text {
fill: #00ff00;
font-size: 14px;
font-weight: bold;
text-anchor: middle;
}
.label-text {
fill: #00ffff;
font-size: 12px;
font-weight: bold;
}
.input-node {
fill: #00ff00;
stroke: #00ff00;
stroke-width: 2;
}
.input-node.inactive {
fill: #003300;
}
.output-node {
fill: #ff00ff;
stroke: #ff00ff;
stroke-width: 2;
}
.block {
fill: #1a1a1a;
stroke: #00ffff;
stroke-width: 3;
}
.block.active {
stroke: #00ff00;
filter: drop-shadow(0 0 15px #00ffff);
}
.block-text {
fill: #00ffff;
font-size: 16px;
font-weight: bold;
text-anchor: middle;
}
.value-display {
fill: #ffff00;
font-size: 14px;
font-weight: bold;
}
.test-cases {
background: #2a2a2a;
border: 2px solid #ffff00;
border-radius: 10px;
padding: 20px;
margin-top: 20px;
}
.test-cases h3 {
color: #ffff00;
margin-bottom: 15px;
text-align: center;
}
.test-buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
.test-btn {
background: #1a1a1a;
color: #ffff00;
border: 2px solid #ffff00;
padding: 12px;
border-radius: 6px;
cursor: pointer;
font-family: 'Courier New', monospace;
font-size: 14px;
transition: all 0.3s;
}
.test-btn:hover {
background: #ffff00;
color: #1a1a1a;
transform: scale(1.05);
}
.legend {
background: #2a2a2a;
border: 2px solid #00ff00;
border-radius: 10px;
padding: 15px;
margin-top: 20px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 15px;
}
.legend-item {
display: flex;
align-items: center;
gap: 10px;
}
.legend-color {
width: 30px;
height: 20px;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="container">
<h1>4-BIT ADD/SUB CIRCUIT DIAGRAM</h1>
<div class="subtitle">Visual Representation with Automatic 2's Complement</div>
<div class="controls">
<div class="input-group">
<label>A3:</label>
<input type="checkbox" id="a3" onchange="updateCircuit()">
</div>
<div class="input-group">
<label>A2:</label>
<input type="checkbox" id="a2" onchange="updateCircuit()">
</div>
<div class="input-group">
<label>A1:</label>
<input type="checkbox" id="a1" onchange="updateCircuit()">
</div>
<div class="input-group">
<label>A0:</label>
<input type="checkbox" id="a0" onchange="updateCircuit()">
</div>
<div style="width: 2px; background: #00aa00;"></div>
<div class="input-group">
<label>B3:</label>
<input type="checkbox" id="b3" onchange="updateCircuit()">
</div>
<div class="input-group">
<label>B2:</label>
<input type="checkbox" id="b2" onchange="updateCircuit()">
</div>
<div class="input-group">
<label>B1:</label>
<input type="checkbox" id="b1" onchange="updateCircuit()">
</div>
<div class="input-group">
<label>B0:</label>
<input type="checkbox" id="b0" onchange="updateCircuit()">
</div>
<div style="width: 2px; background: #00aa00;"></div>
<div class="input-group">
<label>SA:</label>
<input type="checkbox" id="sa" onchange="updateCircuit()">
</div>
<div class="input-group">
<label>SB:</label>
<input type="checkbox" id="sb" onchange="updateCircuit()">
</div>
<div class="operation-display" id="operation">OPERATION: 0 + 0 = 0</div>
</div>
<div class="circuit-container">
<svg id="circuit-svg" viewBox="0 0 1400 900" preserveAspectRatio="xMidYMid meet">
<!-- Title -->
<text x="700" y="30" class="block-text" style="font-size: 20px;">CIRCUIT STAGES</text>
<!-- ========== STAGE 1: XOR GATES ========== -->
<text x="100" y="80" class="label-text" style="font-size: 14px; fill: #00ffff;">STAGE 1: CONDITIONAL INVERSION</text>
<!-- Input A nodes -->
<circle id="input-a3" cx="80" cy="120" r="6" class="input-node"/>
<text x="50" y="125" class="label-text">A3</text>
<circle id="input-a2" cx="80" cy="180" r="6" class="input-node"/>
<text x="50" y="185" class="label-text">A2</text>
<circle id="input-a1" cx="80" cy="240" r="6" class="input-node"/>
<text x="50" y="245" class="label-text">A1</text>
<circle id="input-a0" cx="80" cy="300" r="6" class="input-node"/>
<text x="50" y="305" class="label-text">A0</text>
<!-- Input B nodes -->
<circle id="input-b3" cx="80" cy="400" r="6" class="input-node"/>
<text x="50" y="405" class="label-text">B3</text>
<circle id="input-b2" cx="80" cy="460" r="6" class="input-node"/>
<text x="50" y="465" class="label-text">B2</text>
<circle id="input-b1" cx="80" cy="520" r="6" class="input-node"/>
<text x="50" y="525" class="label-text">B1</text>
<circle id="input-b0" cx="80" cy="580" r="6" class="input-node"/>
<text x="50" y="585" class="label-text">B0</text>
<!-- SA and SB control inputs -->
<circle id="input-sa" cx="150" cy="650" r="6" class="input-node"/>
<text x="120" y="655" class="label-text">SA</text>
<circle id="input-sb" cx="150" cy="680" r="6" class="input-node"/>
<text x="120" y="685" class="label-text">SB</text>
<!-- XOR gates for A -->
<path id="xor-a3" d="M 180 105 L 230 105 L 250 120 L 230 135 L 180 135 Q 190 120 180 105 M 175 105 Q 185 120 175 135" class="gate"/>
<text x="215" y="125" class="gate-text">⊕</text>
<line id="wire-a3-xor" x1="80" y1="120" x2="180" y2="120" class="wire"/>
<line id="wire-sa-xor-a3" x1="150" y1="650" x2="150" y2="130" class="wire"/>
<line x1="150" y1="130" x2="180" y2="130" class="wire"/>
<path id="xor-a2" d="M 180 165 L 230 165 L 250 180 L 230 195 L 180 195 Q 190 180 180 165 M 175 165 Q 185 180 175 195" class="gate"/>
<text x="215" y="185" class="gate-text">⊕</text>
<line id="wire-a2-xor" x1="80" y1="180" x2="180" y2="180" class="wire"/>
<line x1="150" y1="180" x2="180" y2="190" class="wire"/>
<path id="xor-a1" d="M 180 225 L 230 225 L 250 240 L 230 255 L 180 255 Q 190 240 180 225 M 175 225 Q 185 240 175 255" class="gate"/>
<text x="215" y="245" class="gate-text">⊕</text>
<line id="wire-a1-xor" x1="80" y1="240" x2="180" y2="240" class="wire"/>
<line x1="150" y1="240" x2="180" y2="250" class="wire"/>
<path id="xor-a0" d="M 180 285 L 230 285 L 250 300 L 230 315 L 180 315 Q 190 300 180 285 M 175 285 Q 185 300 175 315" class="gate"/>
<text x="215" y="305" class="gate-text">⊕</text>
<line id="wire-a0-xor" x1="80" y1="300" x2="180" y2="300" class="wire"/>
<line x1="150" y1="300" x2="180" y2="310" class="wire"/>
<!-- XOR gates for B -->
<path id="xor-b3" d="M 180 385 L 230 385 L 250 400 L 230 415 L 180 415 Q 190 400 180 385 M 175 385 Q 185 400 175 415" class="gate"/>
<text x="215" y="405" class="gate-text">⊕</text>
<line id="wire-b3-xor" x1="80" y1="400" x2="180" y2="400" class="wire"/>
<line id="wire-sb-xor-b3" x1="150" y1="680" x2="150" y2="410" class="wire"/>
<line x1="150" y1="410" x2="180" y2="410" class="wire"/>
<path id="xor-b2" d="M 180 445 L 230 445 L 250 460 L 230 475 L 180 475 Q 190 460 180 445 M 175 445 Q 185 460 175 475" class="gate"/>
<text x="215" y="465" class="gate-text">⊕</text>
<line id="wire-b2-xor" x1="80" y1="460" x2="180" y2="460" class="wire"/>
<line x1="150" y1="460" x2="180" y2="470" class="wire"/>
<path id="xor-b1" d="M 180 505 L 230 505 L 250 520 L 230 535 L 180 535 Q 190 520 180 505 M 175 505 Q 185 520 175 535" class="gate"/>
<text x="215" y="525" class="gate-text">⊕</text>
<line id="wire-b1-xor" x1="80" y1="520" x2="180" y2="520" class="wire"/>
<line x1="150" y1="520" x2="180" y2="530" class="wire"/>
<path id="xor-b0" d="M 180 565 L 230 565 L 250 580 L 230 595 L 180 595 Q 190 580 180 565 M 175 565 Q 185 580 175 595" class="gate"/>
<text x="215" y="585" class="gate-text">⊕</text>
<line id="wire-b0-xor" x1="80" y1="580" x2="180" y2="580" class="wire"/>
<line x1="150" y1="580" x2="180" y2="590" class="wire"/>
<!-- OR gate for carry in -->
<path id="or-gate" d="M 180 660 Q 200 660 210 665 Q 225 670 230 685 Q 225 700 210 705 Q 200 710 180 710 Q 190 685 180 660" class="gate"/>
<text x="205" y="690" class="gate-text">∨</text>
<line x1="150" y1="665" x2="180" y2="665" class="wire"/>
<line x1="150" y1="695" x2="180" y2="695" class="wire"/>
<text x="250" y="690" class="label-text">Cin</text>
<!-- ========== STAGE 2: FIRST ADDER ========== -->
<text x="450" y="80" class="label-text" style="font-size: 14px; fill: #00ffff;">STAGE 2: FIRST ADDITION</text>
<rect id="adder1" x="400" y="200" width="200" height="280" class="block"/>
<text x="500" y="230" class="block-text">4-BIT ADDER</text>
<text x="500" y="250" class="block-text" style="font-size: 12px;">(First Stage)</text>
<!-- Inputs to first adder -->
<text x="380" y="270" class="label-text">A'[3:0]</text>
<text x="380" y="350" class="label-text">B'[3:0]</text>
<text x="380" y="430" class="label-text">Cin</text>
<!-- Wires from XOR to Adder -->
<line id="wire-xora3-add" x1="250" y1="120" x2="400" y2="260" class="wire"/>
<line id="wire-xora2-add" x1="250" y1="180" x2="400" y2="280" class="wire"/>
<line id="wire-xora1-add" x1="250" y1="240" x2="400" y2="300" class="wire"/>
<line id="wire-xora0-add" x1="250" y1="300" x2="400" y2="320" class="wire"/>
<line id="wire-xorb3-add" x1="250" y1="400" x2="400" y2="340" class="wire"/>
<line id="wire-xorb2-add" x1="250" y1="460" x2="400" y2="360" class="wire"/>
<line id="wire-xorb1-add" x1="250" y1="520" x2="400" y2="380" class="wire"/>
<line id="wire-xorb0-add" x1="250" y1="580" x2="400" y2="400" class="wire"/>
<line id="wire-cin-add" x1="230" y1="685" x2="350" y2="685" class="wire"/>
<line x1="350" y1="685" x2="350" y2="420" class="wire"/>
<line x1="350" y1="420" x2="400" y2="420" class="wire"/>
<!-- Outputs from first adder -->
<text x="620" y="320" class="label-text">Sum1[3:0]</text>
<text x="620" y="380" class="label-text">Cout1</text>
<line id="wire-sum1" x1="600" y1="310" x2="700" y2="310" class="wire"/>
<line id="wire-cout1" x1="600" y1="370" x2="700" y2="370" class="wire"/>
<!-- Value displays for stage 2 -->
<text x="500" y="500" class="value-display" id="sum1-value">0000</text>
<!-- AND gate for increment control -->
<path id="and-gate" d="M 400 530 L 420 530 Q 440 530 440 540 Q 440 550 420 550 L 400 550 Z" class="gate"/>
<text x="420" y="545" class="gate-text" style="font-size: 12px;">∧</text>
<text x="350" y="545" class="label-text" style="font-size: 11px;">SA∧SB</text>
<line x1="150" y1="650" x2="380" y2="650" class="wire"/>
<line x1="380" y1="650" x2="380" y2="535" class="wire"/>
<line x1="380" y1="535" x2="400" y2="535" class="wire"/>
<line x1="150" y1="680" x2="360" y2="680" class="wire"/>
<line x1="360" y1="680" x2="360" y2="545" class="wire"/>
<line x1="360" y1="545" x2="400" y2="545" class="wire"/>
<!-- ========== STAGE 3: INCREMENTER & MUX ========== -->
<text x="800" y="80" class="label-text" style="font-size: 14px; fill: #00ffff;">STAGE 3: CONDITIONAL INCREMENT</text>
<rect id="incrementer" x="750" y="200" width="200" height="150" class="block"/>
<text x="850" y="235" class="block-text">INCREMENTER</text>
<text x="850" y="255" class="block-text" style="font-size: 12px;">(+1)</text>
<text x="730" y="270" class="label-text">In[3:0]</text>
<line id="wire-sum1-inc" x1="700" y1="310" x2="720" y2="310" class="wire"/>
<line x1="720" y1="310" x2="720" y2="260" class="wire"/>
<line x1="720" y1="260" x2="750" y2="260" class="wire"/>
<text x="970" y="270" class="label-text">Out[3:0]</text>
<line id="wire-inc-out" x1="950" y1="260" x2="1050" y2="260" class="wire"/>
<text x="850" y="380" class="value-display" id="inc-value">0000</text>
<!-- MUX -->
<path id="mux" d="M 1050 200 L 1150 200 L 1140 350 L 1060 350 Z" class="block"/>
<text x="1100" y="240" class="block-text">MUX</text>
<text x="1100" y="260" class="block-text" style="font-size: 11px;">2:1</text>
<!-- Inputs to MUX -->
<text x="1020" y="245" class="label-text" style="font-size: 11px;">0</text>
<text x="1020" y="325" class="label-text" style="font-size: 11px;">1</text>
<line id="wire-sum1-mux" x1="700" y1="310" x2="720" y2="310" class="wire"/>
<line x1="720" y1="310" x2="720" y2="240" class="wire"/>
<line x1="720" y1="240" x2="1050" y2="240" class="wire"/>
<line id="wire-inc-mux" x1="1050" y1="260" x2="1040" y2="260" class="wire"/>
<line x1="1040" y1="260" x2="1040" y2="320" class="wire"/>
<line x1="1040" y1="320" x2="1050" y2="320" class="wire"/>
<!-- MUX select line -->
<text x="1080" y="370" class="label-text" style="font-size: 11px;">SEL</text>
<line id="wire-and-mux" x1="440" y1="540" x2="1080" y2="540" class="wire"/>
<line x1="1080" y1="540" x2="1080" y2="350" class="wire"/>
<!-- ========== OUTPUT ========== -->
<text x="1200" y="80" class="label-text" style="font-size: 14px; fill: #ff00ff;">FINAL OUTPUT</text>
<line id="wire-mux-out" x1="1150" y1="275" x2="1220" y2="275" class="wire"/>
<circle id="output-s3" cx="1230" cy="240" r="8" class="output-node"/>
<text x="1250" y="245" class="label-text">S3</text>
<circle id="output-s2" cx="1230" cy="275" r="8" class="output-node"/>
<text x="1250" y="280" class="label-text">S2</text>
<circle id="output-s1" cx="1230" cy="310" r="8" class="output-node"/>
<text x="1250" y="315" class="label-text">S1</text>
<circle id="output-s0" cx="1230" cy="345" r="8" class="output-node"/>
<text x="1250" y="350" class="label-text">S0</text>
<circle id="output-cout" cx="1230" cy="400" r="8" class="output-node"/>
<text x="1250" y="405" class="label-text">Cout</text>
<line id="wire-cout-out" x1="700" y1="370" x2="1230" y2="370" class="wire"/>
<line x1="1230" y1="370" x2="1230" y2="400" class="wire"/>
<!-- Output value display -->
<rect x="1180" y="450" width="150" height="80" fill="#0a0a0a" stroke="#ff00ff" stroke-width="2" rx="5"/>
<text x="1255" y="475" class="label-text" style="text-anchor: middle;">RESULT</text>
<text x="1255" y="500" class="value-display" id="result-binary" style="text-anchor: middle;">0000</text>
<text x="1255" y="520" class="value-display" id="result-decimal" style="text-anchor: middle; font-size: 12px;">Dec: 0</text>
</svg>
</div>
<div class="legend">
<div class="legend-item">
<div class="legend-color" style="background: #00ff00;"></div>
<span>Active Signal (1)</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #003300;"></div>
<span>Inactive Signal (0)</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #00ffff;"></div>
<span>Processing Block</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #ff00ff;"></div>
<span>Output</span>
</div>
</div>
<div class="test-cases">
<h3>TEST CASES - CLICK TO LOAD</h3>
<div class="test-buttons">
<button class="test-btn" onclick="loadTest(3, 5, 0, 0)">3 + 5 = 8</button>
<button class="test-btn" onclick="loadTest(5, 3, 0, 1)">5 - 3 = 2</button>
<button class="test-btn" onclick="loadTest(3, 5, 1, 0)">-3 + 5 = 2</button>
<button class="test-btn" onclick="loadTest(3, 5, 1, 1)">-3 - 5 = -8</button>
<button class="test-btn" onclick="loadTest(7, 1, 0, 0)">7 + 1 = 8</button>
<button class="test-btn" onclick="loadTest(7, 7, 0, 1)">7 - 7 = 0</button>
<button class="test-btn" onclick="loadTest(4, 4, 1, 0)">-4 + 4 = 0</button>
<button class="test-btn" onclick="loadTest(7, 6, 1, 1)">-7 - 6 = -13</button>
</div>
</div>
</div>
<script>
function getBit(id) {
return document.getElementById(id).checked ? 1 : 0;
}
function setBit(id, value) {
document.getElementById(id).checked = value === 1;
}
function intToBits(value) {
value = value & 0xF;
return [
(value >> 3) & 1,
(value >> 2) & 1,
(value >> 1) & 1,
value & 1
];
}
function bitsToString(bits) {
return bits.map(b => b.toString()).join('');
}
function unsignedValue(bits) {
return bits[0] * 8 + bits[1] * 4 + bits[2] * 2 + bits[3];
}
function signedValue(bits) {
let unsigned = unsignedValue(bits);
if (bits[0] === 1) {
return unsigned - 16;
}
return unsigned;
}
function updateCircuit() {
// Get inputs
let A = [getBit('a3'), getBit('a2'), getBit('a1'), getBit('a0')];
let B = [getBit('b3'), getBit('b2'), getBit('b1'), getBit('b0')];
let SA = getBit('sa');
let SB = getBit('sb');
// Update input nodes
updateNode('input-a3', A[0]);
updateNode('input-a2', A[1]);
updateNode('input-a1', A[2]);
updateNode('input-a0', A[3]);
updateNode('input-b3', B[0]);
updateNode('input-b2', B[1]);
updateNode('input-b1', B[2]);
updateNode('input-b0', B[3]);
updateNode('input-sa', SA);
updateNode('input-sb', SB);
// Calculate operation
let aVal = unsignedValue(A);
let bVal = unsignedValue(B);
let operation, expected;
if (SA === 0 && SB === 0) {
operation = `${aVal} + ${bVal}`;
expected = aVal + bVal;
} else if (SA === 0 && SB === 1) {
operation = `${aVal} - ${bVal}`;
expected = aVal - bVal;
} else if (SA === 1 && SB === 0) {
operation = `-${aVal} + ${bVal}`;
expected = -aVal + bVal;
} else {
operation = `-${aVal} - ${bVal}`;
expected = -aVal - bVal;
}
document.getElementById('operation').textContent = `OPERATION: ${operation} = ${expected}`;
// Stage 1: XOR
let A_XOR = A.map(b => b ^ SA);
let B_XOR = B.map(b => b ^ SB);
let carry_in = SA | SB;
updateGate('xor-a3', A[0] || SA);
updateGate('xor-a2', A[1] || SA);
updateGate('xor-a1', A[2] || SA);
updateGate('xor-a0', A[3] || SA);
updateGate('xor-b3', B[0] || SB);
updateGate('xor-b2', B[1] || SB);
updateGate('xor-b1', B[2] || SB);
updateGate('xor-b0', B[3] || SB);
updateGate('or-gate', carry_in);
// Stage 2: First adder
let sum1 = unsignedValue(A_XOR) + unsignedValue(B_XOR) + carry_in;
let cout1 = (sum1 >> 4) & 1;
let sum1_bits = intToBits(sum1);
updateBlock('adder1');
document.getElementById('sum1-value').textContent = bitsToString(sum1_bits);
// Stage 3: Increment control
let needIncrement = SA & SB;
updateGate('and-gate', needIncrement);
let incremented = sum1 + needIncrement;
let final_bits = intToBits(incremented);
updateBlock('incrementer');
document.getElementById('inc-value').textContent = bitsToString(intToBits(sum1 + 1));
updateBlock('mux');
// Outputs
document.getElementById('result-binary').textContent = bitsToString(final_bits);
document.getElementById('result-decimal').textContent = `Dec: ${signedValue(final_bits)}`;
updateNode('output-s3', final_bits[0]);
updateNode('output-s2', final_bits[1]);
updateNode('output-s1', final_bits[2]);
updateNode('output-s0', final_bits[3]);
updateNode('output-cout', cout1);
// Update wire states
updateWire('wire-a3-xor', A[0]);
updateWire('wire-a2-xor', A[1]);
updateWire('wire-a1-xor', A[2]);
updateWire('wire-a0-xor', A[3]);
updateWire('wire-b3-xor', B[0]);
updateWire('wire-b2-xor', B[1]);
updateWire('wire-b1-xor', B[2]);
updateWire('wire-b0-xor', B[3]);
updateWire('wire-sa-xor-a3', SA);
updateWire('wire-sb-xor-b3', SB);
updateWire('wire-xora3-add', A_XOR[0]);
updateWire('wire-xora2-add', A_XOR[1]);
updateWire('wire-xora1-add', A_XOR[2]);
updateWire('wire-xora0-add', A_XOR[3]);
updateWire('wire-xorb3-add', B_XOR[0]);
updateWire('wire-xorb2-add', B_XOR[1]);
updateWire('wire-xorb1-add', B_XOR[2]);
updateWire('wire-xorb0-add', B_XOR[3]);
updateWire('wire-cin-add', carry_in);
updateWire('wire-sum1', sum1 > 0);
updateWire('wire-cout1', cout1);
updateWire('wire-sum1-inc', sum1 > 0);
updateWire('wire-inc-out', incremented > 0);
updateWire('wire-sum1-mux', sum1 > 0);
updateWire('wire-inc-mux', incremented > 0);
updateWire('wire-and-mux', needIncrement);
updateWire('wire-mux-out', unsignedValue(final_bits) > 0);
updateWire('wire-cout-out', cout1);
}
function updateNode(id, active) {
let node = document.getElementById(id);
if (node) {
if (active) {
node.classList.remove('inactive');
} else {
node.classList.add('inactive');
}
}
}
function updateGate(id, active) {
let gate = document.getElementById(id);
if (gate) {
if (active) {
gate.classList.add('active');
} else {
gate.classList.remove('active');
}
}
}
function updateBlock(id) {
let block = document.getElementById(id);
if (block) {
block.classList.add('active');
setTimeout(() => block.classList.remove('active'), 500);
}
}
function updateWire(id, active) {
let wire = document.getElementById(id);
if (wire) {
if (active) {
wire.classList.add('active');
} else {
wire.classList.remove('active');
}
}
}
function loadTest(a, b, sa, sb) {
let aBits = intToBits(a);
let bBits = intToBits(b);
setBit('a3', aBits[0]);
setBit('a2', aBits[1]);
setBit('a1', aBits[2]);
setBit('a0', aBits[3]);
setBit('b3', bBits[0]);
setBit('b2', bBits[1]);
setBit('b1', bBits[2]);
setBit('b0', bBits[3]);
setBit('sa', sa);
setBit('sb', sb);
updateCircuit();
}
// Initial render
updateCircuit();
</script>
</body>
</html>