.. عنوان: Modulation Visualizer
.. slug: modulation-visualizer
.. تاریخ: 2026-01-09 15:00:00 UTC
.. ٹیگز: وائرلیس، آر ایف، ماڈیولیشن، کیلکولیٹر، ٹول
زمرہ:
.. لنک:
.. تفصیل: اینالاگ اور ڈیجیٹل ماڈیولیشن اسکیموں کا انٹرایکٹو ویژولائزیشن بشمول AM, FM, PM, ASK, FSK, PSK, اور QAM
.. قسم: متن
<style>
    .modulation-container {
        max-width: 1200px;
        margin: 20px auto;
        padding: 20px;
    }

    .calc-header {
        margin-bottom: 30px;
        padding: 25px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        color: white;
    }

    .calc-header h2 {
        margin-top: 0;
        color: white;
        font-size: 28px;
        margin-bottom: 10px;
    }

    .calc-header p {
        margin: 10px 0 20px 0;
        opacity: 0.95;
        font-size: 15px;
        line-height: 1.6;
    }

    .control-grid {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        gap: 15px;
        margin-bottom: 20px;
    }

    .control-group {
        display: flex;
        flex-direction: column;
    }

    .control-group label {
        font-weight: bold;
        color: white;
        margin-bottom: 8px;
        font-size: 14px;
    }

    .control-group input,
    .control-group select {
        padding: 14px;
        font-size: 16px;
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 6px;
        background: rgba(255,255,255,0.95);
        transition: all 0.3s ease;
    }

    .control-group input:focus,
    .control-group select:focus {
        outline: none;
        border-color: #4CAF50;
        background: white;
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
    }

    .speed-control {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .speed-control input[type="range"] {
        flex: 1;
        padding: 0;
        height: 8px;
        accent-color: #4CAF50;
    }

    .speed-value {
        min-width: 50px;
        text-align: center;
        font-weight: bold;
        background: rgba(255,255,255,0.95);
        padding: 8px;
        border-radius: 4px;
        color: #333;
    }

    .button-group {
        display: flex;
        gap: 10px;
        margin-top: 20px;
    }

    .control-button {
        padding: 14px 28px;
        font-size: 16px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .btn-run {
        background: #4CAF50;
        color: white;
        flex: 1;
    }

    .btn-run:hover:not(:disabled) {
        background: #45a049;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

    .btn-stop {
        background: #f44336;
        color: white;
        flex: 1;
    }

    .btn-stop:hover:not(:disabled) {
        background: #da190b;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

    .btn-step {
        background: #2196F3;
        color: white;
        padding: 14px 20px;
    }

    .btn-step:hover:not(:disabled) {
        background: #0b7dda;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

    .control-button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .visualization-section {
        margin-top: 30px;
    }

    .wave-panel {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 15px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .wave-header {
        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
        color: white;
        padding: 12px 20px;
        font-weight: bold;
        font-size: 16px;
    }

    .wave-content {
        padding: 10px;
        background: #fafafa;
        min-height: 180px;
        position: relative;
    }

    .wave-content svg {
        display: block;
        background: white;
        border-radius: 4px;
    }

    .constellation-panel {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 15px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        display: none;
    }

    .constellation-panel.active {
        display: block;
    }

    .info-panel {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
    }

    .info-item {
        padding: 12px;
        background: #f5f5f5;
        border-radius: 6px;
        border-left: 4px solid #4CAF50;
    }

    .info-label {
        font-size: 12px;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 5px;
    }

    .info-value {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        font-family: 'Courier New', monospace;
    }

    .binary-display {
        background: #1e1e1e;
        color: #00ff00;
        padding: 15px;
        border-radius: 6px;
        font-family: 'Courier New', monospace;
        font-size: 14px;
        line-height: 1.8;
        overflow-x: auto;
        white-space: nowrap;
        margin-top: 10px;
    }

    .binary-display .current-byte {
        background: rgba(76, 175, 80, 0.3);
        padding: 2px 4px;
        border-radius: 3px;
    }

    .formula-panel {
        background: #e3f2fd;
        border: 1px solid #2196F3;
        border-radius: 8px;
        padding: 15px 20px;
        margin-top: 15px;
    }

    .formula-panel h4 {
        margin-top: 0;
        color: #1565c0;
        font-size: 16px;
    }

    .formula-text {
        font-family: 'Courier New', monospace;
        font-size: 14px;
        color: #0d47a1;
        line-height: 1.8;
    }

    .description-section {
        margin-top: 30px;
        padding: 20px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        border-top: 3px solid #4CAF50;
    }

    .description-section h3 {
        color: #4CAF50;
        margin-top: 0;
    }

    .description-section p {
        line-height: 1.6;
        color: #555;
        margin-bottom: 15px;
    }

    .description-section ul {
        line-height: 1.8;
        color: #555;
    }

    .modulation-types {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 15px;
        margin-top: 20px;
    }

    .modulation-card {
        background: #f5f5f5;
        padding: 15px;
        border-radius: 8px;
        border-left: 4px solid #4CAF50;
    }

    .modulation-card h4 {
        margin-top: 0;
        color: #4CAF50;
    }

    .modulation-card p {
        font-size: 14px;
        margin: 5px 0;
    }

    /* Axis styling */
    .axis {
        font-size: 12px;
    }

    .axis path,
    .axis line {
        stroke: #666;
        stroke-width: 1;
    }

    .grid line {
        stroke: #e0e0e0;
        stroke-width: 1;
        stroke-dasharray: 2,2;
    }

    .carrier-wave {
        stroke: #2196F3;
        stroke-width: 2;
        fill: none;
    }

    .modulating-signal {
        stroke: #ff9800;
        stroke-width: 2;
        fill: none;
    }

    .modulated-signal {
        stroke: #4CAF50;
        stroke-width: 2.5;
        fill: none;
    }

    .constellation-point {
        fill: #ccc;
        stroke: #999;
        stroke-width: 1;
    }

    .current-symbol {
        fill: #4CAF50;
        stroke: #2e7d32;
        stroke-width: 2;
    }

    .symbol-path {
        stroke: #4CAF50;
        stroke-width: 1;
        stroke-dasharray: 3,3;
        fill: none;
    }

    /* Responsive design */
    @media (max-width: 768px) {
        .control-grid {
            grid-template-columns: 1fr;
        }

        .button-group {
            flex-direction: column;
        }

        .calc-header h2 {
            font-size: 24px;
        }

        .wave-content {
            min-height: 150px;
        }

        .info-grid {
            grid-template-columns: 1fr;
        }

        .modulation-types {
            grid-template-columns: 1fr;
        }
    }

    /* Loading spinner */
    .loading {
        display: none;
        text-align: center;
        padding: 20px;
        color: #666;
    }

    .loading.active {
        display: block;
    }

    .spinner {
        border: 3px solid #f3f3f3;
        border-top: 3px solid #4CAF50;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
        margin: 0 auto;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>
<div class="modulation-container">
<div class="calc-header">
<h2>📡 ماڈیولیشن ویژولائزر</h2>
<p>اینالاگ اور ڈیجیٹل ماڈیولیشن اسکیموں کا انٹرایکٹو ویژولائزیشن۔ متن درج کریں اور دیکھیں کہ کس طرح مختلف ماڈیولیشن تکنیک ڈیٹا کو کیریئر لہروں پر انکوڈ کرتی ہیں۔ ریئل ٹائم ویوفارمز، نکشتر کے خاکے دیکھیں، اور وائرلیس کمیونیکیشن کے پیچھے کی ریاضی کو سمجھیں۔</p>
<div class="control-grid">
<div class="control-group">
<label for="inputText">ان پٹ ٹیکسٹ (زیادہ سے زیادہ 100 حروف):</label>
<input id="inputText" maxlength="100" placeholder="Enter text to modulate..." type="text" value="Hello World"/>
</div>
<div class="control-group">
<label for="modulationType">ماڈیولیشن کی قسم:</label>
<select id="modulationType">
<optgroup label="Analog Modulation">
<option value="AM">AM - طول و عرض ماڈیولیشن</option>
<option value="FM">ایف ایم - فریکوئنسی ماڈیولیشن</option>
<option value="PM">PM - فیز ماڈیولیشن</option>
</optgroup>
<optgroup label="Digital Modulation">
<option value="ASK">ASK - Amplitude Shift Keying</option>
<option value="FSK">FSK - فریکوئنسی شفٹ کینگ</option>
<option selected="" value="PSK">PSK - فیز شفٹ کینگ</option>
</optgroup>
<optgroup label="Quadrature Amplitude Modulation">
<option value="QAM-4">QAM-4 (2 بٹس/علامت)</option>
<option value="QAM-16">QAM-16 (4 بٹس/علامت)</option>
<option value="QAM-64">QAM-64 (6 بٹس/علامت)</option>
<option value="QAM-256">QAM-256 (8 بٹس/علامت)</option>
</optgroup>
</select>
</div>
<div class="control-group">
<label for="speedControl">حرکت پذیری کی رفتار:</label>
<div class="speed-control">
<input id="speedControl" max="2" min="0.1" step="0.1" type="range" value="1"/>
<span class="speed-value" id="speedValue">1.0x</span>
</div>
</div>
</div>
<div class="button-group">
<button class="control-button btn-run" id="runButton" onclick="runSimulation()">▶ نقلی چلائیں۔</button>
<button class="control-button btn-stop" disabled="" id="stopButton" onclick="stopSimulation()">⏹ رکو</button>
<button class="control-button btn-step" id="stepButton" onclick="stepSimulation()">⏭ قدم</button>
</div>
</div>
<div class="visualization-section" id="visualizationSection" style="display: none;">
<div class="wave-panel">
<div class="wave-header">کیریئر ویو (خالص سائن ویو)</div>
<div class="wave-content">
<svg height="160" id="carrierWave" width="100%"></svg>
</div>
</div>
<div class="wave-panel">
<div class="wave-header">ماڈیولنگ سگنل (ڈیٹا)</div>
<div class="wave-content">
<svg height="160" id="modulatingSignal" width="100%"></svg>
</div>
</div>
<div class="wave-panel">
<div class="wave-header">ماڈیولڈ سگنل (نتیجہ)</div>
<div class="wave-content">
<svg height="160" id="modulatedSignal" width="100%"></svg>
</div>
</div>
<div class="constellation-panel" id="constellationPanel">
<div class="wave-header">برج کا خاکہ</div>
<div class="wave-content">
<svg height="400" id="constellationDiagram" width="100%"></svg>
</div>
</div>
<div class="info-panel">
<div class="info-grid">
<div class="info-item">
<div class="info-label">موجودہ علامت</div>
<div class="info-value" id="currentSymbol">0/0</div>
</div>
<div class="info-item">
<div class="info-label">کیریئر فریکوئنسی</div>
<div class="info-value" id="carrierFreq">10 ہرٹج</div>
</div>
<div class="info-item">
<div class="info-label">علامت کی شرح</div>
<div class="info-value" id="symbolRate">2 sym/s</div>
</div>
<div class="info-item">
<div class="info-label">بٹس/علامت</div>
<div class="info-value" id="bitsPerSymbol">1</div>
</div>
</div>
<div class="binary-display" id="binaryDisplay">بائنری:<span id="binaryText">-</span>
</div>
<div class="formula-panel" id="formulaPanel">
<h4>موجودہ ماڈیولیشن فارمولہ</h4>
<div class="formula-text" id="formulaText">ماڈیولیشن کی قسم منتخب کریں اور فارمولہ دیکھنے کے لیے نقلی چلائیں۔</div>
</div>
</div>
</div>
<div class="description-section">
<h3>ماڈیولیشن اسکیموں کے بارے میں</h3>
<p>ماڈیولیشن اس کی ایک یا زیادہ خصوصیات (طول و عرض، تعدد، یا مرحلہ) کو مختلف کرکے کیریئر لہر پر معلومات کو انکوڈنگ کرنے کا عمل ہے۔ یہ ٹول یہ تصور کرتا ہے کہ مختلف ماڈیولیشن اسکیمیں اصل وقت میں کیسے کام کرتی ہیں۔</p>
<div class="modulation-types">
<div class="modulation-card">
<h4>طول و عرض ماڈیولیشن (AM)</h4>
<p><strong>فارمولا:</strong>s(t) = [A + m(t)] · cos(2πfₒt)</p>
<p>پیغام سگنل کی بنیاد پر کیریئر لہر کے طول و عرض میں فرق ہوتا ہے۔</p>
</div>
<div class="modulation-card">
<h4>فریکوئینسی ماڈیولیشن (FM)</h4>
<p><strong>فارمولا:</strong>s(t) = A · cos(2πfₒt + β∫m(t)dt)</p>
<p>پیغام سگنل کی بنیاد پر کیریئر لہر کی فریکوئنسی میں فرق ہوتا ہے۔</p>
</div>
<div class="modulation-card">
<h4>فیز ماڈیولیشن (PM)</h4>
<p><strong>فارمولا:</strong>s(t) = A · cos(2πfₒt + kₚm(t))</p>
<p>پیغام سگنل کی بنیاد پر کیریئر لہر کا مرحلہ مختلف ہوتا ہے۔</p>
</div>
<div class="modulation-card">
<h4>Amplitude Shift Keying (ASK)</h4>
<p><strong>فارمولا:</strong>s(t) = A₁ · cos(2πfₒt) بٹ 1 کے لیے، A₀ · cos(2πfₒt) بٹ 0 کے لیے</p>
<p>ڈیجیٹل ماڈیولیشن جو دو طول و عرض کی سطحوں کے درمیان سوئچ کرتی ہے۔</p>
</div>
<div class="modulation-card">
<h4>فریکوئینسی شفٹ کینگ (FSK)</h4>
<p><strong>فارمولا:</strong>s(t) = A · cos(2πf₁t) بٹ 1 کے لیے، A · cos(2πf₀t) بٹ 0 کے لیے</p>
<p>ڈیجیٹل ماڈیولیشن جو دو تعدد کے درمیان بدلتی ہے۔</p>
</div>
<div class="modulation-card">
<h4>فیز شفٹ کینگ (PSK)</h4>
<p><strong>فارمولا:</strong>s(t) = A · cos(2πfₒt + φ)، جہاں φ = 0° یا 180°</p>
<p>ڈیجیٹل ماڈیولیشن جو فیز سٹیٹس کے درمیان سوئچ کرتی ہے۔</p>
</div>
<div class="modulation-card">
<h4>Quadrature Amplitude Modulation (QAM)</h4>
<p><strong>فارمولا:</strong>s(t) = I(t)cos(2πfₒt) - Q(t)sin(2πfₒt)</p>
<p>اعلی ڈیٹا کی شرحوں کے لیے طول و عرض اور فیز ماڈیولیشن کو یکجا کرتا ہے۔ ایک سے زیادہ بٹس انکوڈ فی علامت۔</p>
</div>
</div>
<h3 style="margin-top: 30px;">استعمال کرنے کا طریقہ</h3>
<ul>
<li><strong>متن درج کریں:</strong>100 حروف تک کوئی بھی متن ٹائپ کریں۔</li>
<li><strong>ماڈلن کو منتخب کریں:</strong>اینالاگ (AM/FM/PM)، ڈیجیٹل (ASK/FSK/PSK) یا QAM اسکیموں میں سے انتخاب کریں</li>
<li><strong>رفتار کو ایڈجسٹ کریں:</strong>اینیمیشن کو سست یا تیز کرنے کے لیے سلائیڈر کا استعمال کریں (0.1x سے 2x)</li>
<li><strong>نقلی چلائیں:</strong>ویژولائزیشن شروع کرنے کے لیے کلک کریں اور دیکھیں کہ آپ کے ٹیکسٹ کو کیسے انکوڈ کیا گیا ہے۔</li>
<li><strong>مرحلہ موڈ:</strong>تفصیلی تجزیہ کے لیے ایک وقت میں ایک علامت کو آگے بڑھانے کے لیے Step بٹن کا استعمال کریں۔</li>
</ul>
<p><strong>تعلیمی خصوصیات:</strong></p>
<ul>
<li>کیریئر، ماڈیولٹنگ، اور ماڈیولڈ سگنلز کا حقیقی وقت کا تصور</li>
<li>QAM کے لیے نکشتر کے خاکے I/Q اجزاء دکھا رہے ہیں۔</li>
<li>آپ کے ٹیکسٹ ڈیٹا کی بائنری نمائندگی</li>
<li>ہر ماڈیولیشن کی قسم کے لیے ریاضیاتی فارمولے۔</li>
<li>وقت کو سمجھنے کے لیے علامت بہ علامت حرکت پذیری۔</li>
</ul>
</div>
</div>
D3.js لائبریری
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
'use strict';

/**
 * Modulation Visualizer - Interactive Visualization of Modulation Schemes
 *
 * This tool visualizes analog and digital modulation techniques including:
 * - Analog: AM, FM, PM
 * - Digital: ASK, FSK, PSK
 * - Advanced: QAM-4, QAM-16, QAM-64, QAM-256
 *
 * @author Baud9600
 * @version 1.0.0
 */

// ============================================================================
// GLOBAL STATE MANAGEMENT
// ============================================================================

/**
 * Global state object tracking simulation state
 * @type {Object}
 */
const state = {
    isRunning: false,
    isPaused: false,
    currentSymbolIndex: 0,
    symbols: [],
    binaryData: [],
    modulationType: 'PSK',
    speed: 1.0,
    animationFrameId: null,
    startTime: 0,
    lastTimestamp: 0
};

// ============================================================================
// CONFIGURATION
// ============================================================================

/**
 * Configuration object for modulation parameters
 * @type {Object}
 */
const config = {
    symbolDuration: 500,        // Base duration in milliseconds at 1x speed
    samplesPerSymbol: 200,      // Number of samples to generate per symbol
    carrierFreq: 10,            // Carrier frequency in Hz
    amplitude: 1.0,             // Base amplitude
    svgWidth: 1100,             // SVG width
    svgHeight: 160,             // SVG height for waveforms
    constellationHeight: 400,   // SVG height for constellation
    margin: { top: 20, right: 40, bottom: 40, left: 60 }
};

/**
 * QAM configuration mapping
 * @type {Object}
 */
const QAM_CONFIGS = {
    'QAM-4': { bitsPerSymbol: 2, gridSize: 2 },
    'QAM-16': { bitsPerSymbol: 4, gridSize: 4 },
    'QAM-64': { bitsPerSymbol: 6, gridSize: 8 },
    'QAM-256': { bitsPerSymbol: 8, gridSize: 16 }
};

// ============================================================================
// D3.js SCALES AND GENERATORS
// ============================================================================

let xScale, yScale, constellationXScale, constellationYScale;
let lineGenerator;
let svgCarrier, svgModulating, svgModulated, svgConstellation;
let gCarrier, gModulating, gModulated, gConstellation;

// ============================================================================
// TEXT TO BINARY CONVERSION
// ============================================================================

/**
 * Converts text string to binary array
 * @param {string} text - Input text to convert
 * @returns {number[]} Flat array of 0s and 1s representing binary data
 */
function textToBinary(text) {
    if (!text || text.length === 0) {
        return [];
    }

    // Limit to 100 characters
    const limitedText = text.substring(0, 100);
    const binaryArray = [];

    for (let i = 0; i < limitedText.length; i++) {
        const charCode = limitedText.charCodeAt(i);
        // Convert to 8-bit binary
        for (let bit = 7; bit >= 0; bit--) {
            binaryArray.push((charCode >> bit) & 1);
        }
    }

    return binaryArray;
}

// ============================================================================
// MODULATION GENERATORS
// ============================================================================

/**
 * Generates Amplitude Modulation (AM) waveform
 * @param {number} t - Time value (0 to 1 for one symbol period)
 * @param {number} bit - Bit value (0 or 1)
 * @param {number} carrierFreq - Carrier frequency in Hz
 * @param {number} amplitude - Base amplitude
 * @returns {number} Modulated signal value
 */
function generateAM(t, bit, carrierFreq, amplitude) {
    const modulationDepth = 0.5;
    const modulatingSignal = bit; // 0 or 1
    return (amplitude + modulationDepth * modulatingSignal) *
           Math.sin(2 * Math.PI * carrierFreq * t);
}

/**
 * Generates Frequency Modulation (FM) waveform
 * @param {number} t - Time value (0 to 1 for one symbol period)
 * @param {number} bit - Bit value (0 or 1)
 * @param {number} carrierFreq - Carrier frequency in Hz
 * @param {number} amplitude - Base amplitude
 * @returns {number} Modulated signal value
 */
function generateFM(t, bit, carrierFreq, amplitude) {
    const frequencyDeviation = carrierFreq * 0.3; // 30% deviation
    const instantFreq = carrierFreq + frequencyDeviation * bit;
    return amplitude * Math.sin(2 * Math.PI * instantFreq * t);
}

/**
 * Generates Phase Modulation (PM) waveform
 * @param {number} t - Time value (0 to 1 for one symbol period)
 * @param {number} bit - Bit value (0 or 1)
 * @param {number} carrierFreq - Carrier frequency in Hz
 * @param {number} amplitude - Base amplitude
 * @returns {number} Modulated signal value
 */
function generatePM(t, bit, carrierFreq, amplitude) {
    const phaseDeviation = Math.PI / 2; // 90 degrees max deviation
    const phase = phaseDeviation * bit;
    return amplitude * Math.sin(2 * Math.PI * carrierFreq * t + phase);
}

/**
 * Generates Amplitude Shift Keying (ASK) waveform
 * @param {number} t - Time value (0 to 1 for one symbol period)
 * @param {number} bit - Bit value (0 or 1)
 * @param {number} carrierFreq - Carrier frequency in Hz
 * @param {number} amplitude - Base amplitude
 * @returns {number} Modulated signal value
 */
function generateASK(t, bit, carrierFreq, amplitude) {
    const amp = bit === 1 ? amplitude : amplitude * 0.3;
    return amp * Math.sin(2 * Math.PI * carrierFreq * t);
}

/**
 * Generates Frequency Shift Keying (FSK) waveform
 * @param {number} t - Time value (0 to 1 for one symbol period)
 * @param {number} bit - Bit value (0 or 1)
 * @param {number} carrierFreq - Carrier frequency in Hz
 * @param {number} amplitude - Base amplitude
 * @returns {number} Modulated signal value
 */
function generateFSK(t, bit, carrierFreq, amplitude) {
    const freq = bit === 1 ? carrierFreq * 1.5 : carrierFreq * 0.5;
    return amplitude * Math.sin(2 * Math.PI * freq * t);
}

/**
 * Generates Phase Shift Keying (PSK) waveform
 * @param {number} t - Time value (0 to 1 for one symbol period)
 * @param {number} bit - Bit value (0 or 1)
 * @param {number} carrierFreq - Carrier frequency in Hz
 * @param {number} amplitude - Base amplitude
 * @returns {number} Modulated signal value
 */
function generatePSK(t, bit, carrierFreq, amplitude) {
    const phase = bit === 1 ? Math.PI : 0;
    return amplitude * Math.sin(2 * Math.PI * carrierFreq * t + phase);
}

/**
 * Generates Quadrature Amplitude Modulation (QAM) waveform
 * @param {number} t - Time value (0 to 1 for one symbol period)
 * @param {Object} iqPoint - I/Q coordinates {i, q}
 * @param {number} carrierFreq - Carrier frequency in Hz
 * @param {number} amplitude - Base amplitude
 * @returns {number} Modulated signal value
 */
function generateQAM(t, iqPoint, carrierFreq, amplitude) {
    const I = iqPoint.i * amplitude;
    const Q = iqPoint.q * amplitude;
    return I * Math.cos(2 * Math.PI * carrierFreq * t) -
           Q * Math.sin(2 * Math.PI * carrierFreq * t);
}

// ============================================================================
// QAM CONSTELLATION MAPPING
// ============================================================================

/**
 * Maps a chunk of bits to I/Q constellation point
 * @param {number[]} bits - Array of bits for one symbol
 * @param {string} qamType - QAM type (e.g., 'QAM-16')
 * @returns {Object} I/Q coordinates {i, q}
 */
function mapToConstellation(bits, qamType) {
    const config = QAM_CONFIGS[qamType];
    const gridSize = config.gridSize;

    // Convert bits to decimal index
    let index = 0;
    for (let i = 0; i < bits.length; i++) {
        index = (index << 1) | bits[i];
    }

    // Map index to grid position
    // gridSize already represents points per side (e.g., 4 for QAM-16's 4x4 grid)
    const pointsPerSide = gridSize;
    const row = Math.floor(index / pointsPerSide);
    const col = index % pointsPerSide;

    // Normalize to range [-1, 1]
    const i = (2 * col - (pointsPerSide - 1)) / (pointsPerSide - 1);
    const q = (2 * row - (pointsPerSide - 1)) / (pointsPerSide - 1);

    // Debug logging for first few points
    if (index < 3) {
        console.log(`QAM ${qamType} - Index ${index} (bits ${bits.join('')}): row=${row}, col=${col} -> I=${i.toFixed(2)}, Q=${q.toFixed(2)}`);
    }

    return { i, q };
}

/**
 * Prepares QAM symbols from binary data
 * @param {number[]} binaryData - Flat array of bits
 * @param {string} qamType - QAM type
 * @returns {Object[]} Array of I/Q points
 */
function prepareQAMSymbols(binaryData, qamType) {
    const config = QAM_CONFIGS[qamType];
    const bitsPerSymbol = config.bitsPerSymbol;
    const symbols = [];

    // Pad binary data if needed
    const paddedData = [...binaryData];
    while (paddedData.length % bitsPerSymbol !== 0) {
        paddedData.push(0);
    }

    // Chunk into symbols
    for (let i = 0; i < paddedData.length; i += bitsPerSymbol) {
        const bits = paddedData.slice(i, i + bitsPerSymbol);
        symbols.push(mapToConstellation(bits, qamType));
    }

    return symbols;
}

/**
 * Generates all constellation points for a given QAM type
 * @param {string} qamType - QAM type
 * @returns {Object[]} Array of all possible I/Q points
 */
function getConstellationGrid(qamType) {
    const config = QAM_CONFIGS[qamType];
    const gridSize = config.gridSize;
    const bitsPerSymbol = config.bitsPerSymbol;
    const points = [];

    const totalPoints = Math.pow(2, bitsPerSymbol);

    for (let i = 0; i < totalPoints; i++) {
        const bits = [];
        for (let bit = bitsPerSymbol - 1; bit >= 0; bit--) {
            bits.push((i >> bit) & 1);
        }
        points.push(mapToConstellation(bits, qamType));
    }

    // Validation: check if all points are within expected bounds
    const iValues = points.map(p => p.i);
    const qValues = points.map(p => p.q);
    const minI = Math.min(...iValues);
    const maxI = Math.max(...iValues);
    const minQ = Math.min(...qValues);
    const maxQ = Math.max(...qValues);

    console.log(`${qamType} Constellation Grid: ${points.length} points`);
    console.log(`  I range: [${minI.toFixed(2)}, ${maxI.toFixed(2)}]`);
    console.log(`  Q range: [${minQ.toFixed(2)}, ${maxQ.toFixed(2)}]`);

    if (Math.abs(minI) > 1.1 || Math.abs(maxI) > 1.1 || Math.abs(minQ) > 1.1 || Math.abs(maxQ) > 1.1) {
        console.warn(`⚠️ Constellation points exceed expected bounds [-1, 1]!`);
    }

    return points;
}

// ============================================================================
// D3.js INITIALIZATION
// ============================================================================

/**
 * Initializes D3.js visualization components
 */
function initializeD3() {
    if (typeof d3 === 'undefined') {
        console.error('D3.js library not loaded');
        return;
    }

    console.log('Initializing D3 visualizations...');

    // Get actual container width - use parent container's width
    const container = document.querySelector('.modulation-container');
    const containerWidth = container ? container.offsetWidth : 1200;

    // Calculate waveform width with maximum of 1000px
    const waveformWidth = Math.min(containerWidth - 40, 1000);

    console.log(`Container width: ${containerWidth}px, Waveform width: ${waveformWidth}px`);

    // Set explicit dimensions for waveform SVGs
    svgCarrier = d3.select('#carrierWave')
        .attr('width', waveformWidth)
        .attr('height', config.svgHeight);

    gCarrier = svgCarrier.append('g')
        .attr('transform', `translate(${config.margin.left},${config.margin.top})`);

    // Initialize modulating signal SVG
    svgModulating = d3.select('#modulatingSignal')
        .attr('width', waveformWidth)
        .attr('height', config.svgHeight);

    gModulating = svgModulating.append('g')
        .attr('transform', `translate(${config.margin.left},${config.margin.top})`);

    // Initialize modulated signal SVG
    svgModulated = d3.select('#modulatedSignal')
        .attr('width', waveformWidth)
        .attr('height', config.svgHeight);

    gModulated = svgModulated.append('g')
        .attr('transform', `translate(${config.margin.left},${config.margin.top})`);

    // Initialize constellation diagram SVG - use square canvas
    const constellationSize = 500;
    svgConstellation = d3.select('#constellationDiagram')
        .attr('width', constellationSize)
        .attr('height', constellationSize);

    // Center the constellation group
    const constellationCenter = constellationSize / 2;
    gConstellation = svgConstellation.append('g')
        .attr('transform', `translate(${constellationCenter},${constellationCenter})`);

    console.log(`Constellation canvas: ${constellationSize}x${constellationSize}px, centered at (${constellationCenter}, ${constellationCenter})`);

    // Create scales for waveforms
    const chartWidth = waveformWidth - config.margin.left - config.margin.right;
    const chartHeight = config.svgHeight - config.margin.top - config.margin.bottom;

    console.log(`Chart dimensions: ${chartWidth}x${chartHeight}px`);

    // Validate chart dimensions
    if (chartWidth <= 0 || chartHeight <= 0) {
        console.error(`Invalid chart dimensions: width=${chartWidth}, height=${chartHeight}`);
        return;
    }

    xScale = d3.scaleLinear()
        .domain([0, config.samplesPerSymbol])
        .range([0, chartWidth]);

    yScale = d3.scaleLinear()
        .domain([-1.5, 1.5])
        .range([chartHeight, 0]);

    console.log(`Waveform scales - X: [0, ${config.samplesPerSymbol}] -> [0, ${chartWidth}], Y: [-1.5, 1.5] -> [${chartHeight}, 0]`);

    // Constellation scales - use pixel radius from center with proper margin
    const constellationRadius = (constellationSize / 2) - 60; // Leave 60px margin for axes and labels

    constellationXScale = d3.scaleLinear()
        .domain([-1.5, 1.5])
        .range([-constellationRadius, constellationRadius]);

    constellationYScale = d3.scaleLinear()
        .domain([-1.5, 1.5])
        .range([constellationRadius, -constellationRadius]); // Inverted for screen coordinates

    console.log(`Constellation scales - radius: ${constellationRadius}px, X: [-1.5, 1.5] -> [${-constellationRadius}, ${constellationRadius}], Y: [-1.5, 1.5] -> [${constellationRadius}, ${-constellationRadius}]`);

    // Create line generator
    lineGenerator = d3.line()
        .x(d => xScale(d.x))
        .y(d => yScale(d.y))
        .curve(d3.curveMonotoneX);

    // Add axes and grid
    createAxes();
    createGridLines();
    createConstellationAxes();

    console.log('D3 initialization complete');
}

/**
 * Creates axes for waveform displays
 */
function createAxes() {
    const chartHeight = config.svgHeight - config.margin.top - config.margin.bottom;

    // X-axis for carrier
    const xAxis = d3.axisBottom(xScale)
        .ticks(5)
        .tickFormat(d => `${(d / config.samplesPerSymbol).toFixed(1)}T`);

    gCarrier.append('g')
        .attr('class', 'axis x-axis')
        .attr('transform', `translate(0,${chartHeight})`)
        .call(xAxis);

    // Y-axis for carrier
    const yAxis = d3.axisLeft(yScale).ticks(5);

    gCarrier.append('g')
        .attr('class', 'axis y-axis')
        .call(yAxis);

    // Axes for modulating signal
    gModulating.append('g')
        .attr('class', 'axis x-axis')
        .attr('transform', `translate(0,${chartHeight})`)
        .call(xAxis);

    gModulating.append('g')
        .attr('class', 'axis y-axis')
        .call(yAxis);

    // Axes for modulated signal
    gModulated.append('g')
        .attr('class', 'axis x-axis')
        .attr('transform', `translate(0,${chartHeight})`)
        .call(xAxis);

    gModulated.append('g')
        .attr('class', 'axis y-axis')
        .call(yAxis);
}

/**
 * Creates grid lines for waveform displays
 */
function createGridLines() {
    // Get actual SVG width from attribute (set during initialization)
    const svgWidth = parseInt(svgCarrier.attr('width'));
    const chartWidth = svgWidth - config.margin.left - config.margin.right;
    const chartHeight = config.svgHeight - config.margin.top - config.margin.bottom;

    console.log(`Creating grid lines with chart width: ${chartWidth}px`);

    // Horizontal grid lines
    const yGridLines = d3.axisLeft(yScale)
        .ticks(5)
        .tickSize(-chartWidth)
        .tickFormat('');

    gCarrier.append('g')
        .attr('class', 'grid')
        .call(yGridLines);

    gModulating.append('g')
        .attr('class', 'grid')
        .call(yGridLines);

    gModulated.append('g')
        .attr('class', 'grid')
        .call(yGridLines);
}

/**
 * Creates axes for constellation diagram
 * Draws axes through the center (0,0) of the constellation space
 */
function createConstellationAxes() {
    console.log('Creating constellation axes centered at (0,0)');

    // Get scale ranges for proper axis positioning
    const xMin = constellationXScale(-1.5);
    const xMax = constellationXScale(1.5);
    const yMin = constellationYScale(-1.5);
    const yMax = constellationYScale(1.5);

    console.log(`Constellation axis ranges - X: [${xMin}, ${xMax}], Y: [${yMin}, ${yMax}]`);

    // Draw main axes through center (0,0)
    // X-axis (horizontal line through y=0)
    gConstellation.append('line')
        .attr('class', 'constellation-axis')
        .attr('x1', xMin)
        .attr('x2', xMax)
        .attr('y1', 0)
        .attr('y2', 0)
        .attr('stroke', '#333')
        .attr('stroke-width', 2);

    // Y-axis (vertical line through x=0)
    gConstellation.append('line')
        .attr('class', 'constellation-axis')
        .attr('x1', 0)
        .attr('x2', 0)
        .attr('y1', yMin)
        .attr('y2', yMax)
        .attr('stroke', '#333')
        .attr('stroke-width', 2);

    // Add tick marks and labels using D3 axes
    const xAxis = d3.axisBottom(constellationXScale)
        .ticks(6)
        .tickSize(6);

    const yAxis = d3.axisLeft(constellationYScale)
        .ticks(6)
        .tickSize(6);

    // Position x-axis at the bottom of the chart
    gConstellation.append('g')
        .attr('class', 'axis constellation-x-axis')
        .attr('transform', `translate(0,${yMin})`)
        .call(xAxis);

    // Position y-axis at the left of the chart
    gConstellation.append('g')
        .attr('class', 'axis constellation-y-axis')
        .attr('transform', `translate(${xMin},0)`)
        .call(yAxis);

    // Add axis labels
    gConstellation.append('text')
        .attr('class', 'axis-label')
        .attr('x', xMax + 15)
        .attr('y', 5)
        .style('text-anchor', 'start')
        .style('font-size', '14px')
        .style('font-weight', 'bold')
        .style('fill', '#333')
        .text('I →');

    gConstellation.append('text')
        .attr('class', 'axis-label')
        .attr('x', -5)
        .attr('y', yMax - 10)
        .style('text-anchor', 'end')
        .style('font-size', '14px')
        .style('font-weight', 'bold')
        .style('fill', '#333')
        .text('↑ Q');

    // Add descriptive labels
    gConstellation.append('text')
        .attr('class', 'axis-label')
        .attr('x', 0)
        .attr('y', yMin + 35)
        .style('text-anchor', 'middle')
        .style('font-size', '12px')
        .style('fill', '#666')
        .text('In-phase (I)');

    gConstellation.append('text')
        .attr('class', 'axis-label')
        .attr('transform', 'rotate(-90)')
        .attr('x', 0)
        .attr('y', xMin - 35)
        .style('text-anchor', 'middle')
        .style('font-size', '12px')
        .style('fill', '#666')
        .text('Quadrature (Q)');

    // Add grid lines
    const gridSize = Math.abs(xMax - xMin);

    const xGridLines = d3.axisBottom(constellationXScale)
        .ticks(12)
        .tickSize(gridSize)
        .tickFormat('');

    const yGridLines = d3.axisLeft(constellationYScale)
        .ticks(12)
        .tickSize(-gridSize)
        .tickFormat('');

    gConstellation.append('g')
        .attr('class', 'grid constellation-grid')
        .attr('transform', `translate(0,${yMax})`)
        .call(xGridLines);

    gConstellation.append('g')
        .attr('class', 'grid constellation-grid')
        .attr('transform', `translate(${xMin},0)`)
        .call(yGridLines);

    // Add debug boundary rectangle showing expected constellation bounds (-1 to 1)
    gConstellation.append('rect')
        .attr('class', 'debug-constellation-bounds')
        .attr('x', constellationXScale(-1))
        .attr('y', constellationYScale(1))
        .attr('width', constellationXScale(1) - constellationXScale(-1))
        .attr('height', constellationYScale(-1) - constellationYScale(1))
        .attr('fill', 'none')
        .attr('stroke', 'rgba(255, 0, 0, 0.3)')
        .attr('stroke-width', 2)
        .attr('stroke-dasharray', '5,5');

    console.log('Constellation axes created successfully');
    console.log('Debug: Red dashed rectangle shows expected bounds [-1, 1] for I and Q');
}

// ============================================================================
// WAVEFORM RENDERING
// ============================================================================

/**
 * Updates carrier wave visualization
 * @param {Object[]} dataPoints - Array of {x, y} points
 */
function updateCarrierWave(dataPoints) {
    if (!dataPoints || dataPoints.length === 0) {
        console.warn('No data points provided for carrier wave');
        return;
    }

    try {
        const pathData = lineGenerator(dataPoints);
        if (!pathData) {
            console.error('Line generator returned null for carrier wave');
            return;
        }

        const path = gCarrier.selectAll('.carrier-wave')
            .data([dataPoints]);

        path.enter()
            .append('path')
            .attr('class', 'carrier-wave')
            .merge(path)
            .transition()
            .duration(16)
            .attr('d', lineGenerator);
    } catch (error) {
        console.error('Error updating carrier wave:', error);
    }
}

/**
 * Updates modulating signal visualization
 * @param {Object[]} dataPoints - Array of {x, y} points
 */
function updateModulatingSignal(dataPoints) {
    if (!dataPoints || dataPoints.length === 0) {
        console.warn('No data points provided for modulating signal');
        return;
    }

    try {
        const pathData = lineGenerator(dataPoints);
        if (!pathData) {
            console.error('Line generator returned null for modulating signal');
            return;
        }

        const path = gModulating.selectAll('.modulating-signal')
            .data([dataPoints]);

        path.enter()
            .append('path')
            .attr('class', 'modulating-signal')
            .merge(path)
            .transition()
            .duration(16)
            .attr('d', lineGenerator);
    } catch (error) {
        console.error('Error updating modulating signal:', error);
    }
}

/**
 * Updates modulated signal visualization
 * @param {Object[]} dataPoints - Array of {x, y} points
 */
function updateModulatedSignal(dataPoints) {
    if (!dataPoints || dataPoints.length === 0) {
        console.warn('No data points provided for modulated signal');
        return;
    }

    try {
        const pathData = lineGenerator(dataPoints);
        if (!pathData) {
            console.error('Line generator returned null for modulated signal');
            return;
        }

        const path = gModulated.selectAll('.modulated-signal')
            .data([dataPoints]);

        path.enter()
            .append('path')
            .attr('class', 'modulated-signal')
            .merge(path)
            .transition()
            .duration(16)
            .attr('d', lineGenerator);
    } catch (error) {
        console.error('Error updating modulated signal:', error);
    }
}

/**
 * Updates constellation diagram
 * @param {Object} currentPoint - Current I/Q point {i, q}
 * @param {Object[]} allSymbols - Array of all symbols transmitted
 */
function updateConstellation(currentPoint, allSymbols) {
    if (!currentPoint || typeof currentPoint.i !== 'number' || typeof currentPoint.q !== 'number') {
        console.warn('Invalid constellation point:', currentPoint);
        return;
    }

    try {
        // Get all possible constellation points
        const qamType = state.modulationType;
        const gridPoints = getConstellationGrid(qamType);

        // Draw grid points
        const points = gConstellation.selectAll('.constellation-point')
            .data(gridPoints);

        points.enter()
            .append('circle')
            .attr('class', 'constellation-point')
            .attr('r', 4)
            .merge(points)
            .attr('cx', d => constellationXScale(d.i))
            .attr('cy', d => constellationYScale(d.q));

        points.exit().remove();

        // Draw current symbol
        const current = gConstellation.selectAll('.current-symbol')
            .data([currentPoint]);

        current.enter()
            .append('circle')
            .attr('class', 'current-symbol')
            .attr('r', 8)
            .merge(current)
            .transition()
            .duration(100)
            .attr('cx', d => constellationXScale(d.i))
            .attr('cy', d => constellationYScale(d.q));

        // Draw path of previous symbols
        if (allSymbols && allSymbols.length > 1) {
            const pathData = allSymbols.slice(-20); // Last 20 symbols
            const symbolPathGenerator = d3.line()
                .x(d => constellationXScale(d.i))
                .y(d => constellationYScale(d.q));

            const symbolPath = gConstellation.selectAll('.symbol-path')
                .data([pathData]);

            symbolPath.enter()
                .append('path')
                .attr('class', 'symbol-path')
                .merge(symbolPath)
                .attr('d', symbolPathGenerator);
        }
    } catch (error) {
        console.error('Error updating constellation diagram:', error);
    }
}

// ============================================================================
// WAVEFORM GENERATION
// ============================================================================

/**
 * Renders waveforms for current symbol
 * @param {number} symbolIndex - Current symbol index
 * @param {number} progress - Progress within symbol (0 to 1)
 */
function renderWaveforms(symbolIndex, progress) {
    const carrierData = [];
    const modulatingData = [];
    const modulatedData = [];

    const modulationType = state.modulationType;
    const isQAM = modulationType.startsWith('QAM');

    // Get current symbol value
    let symbolValue, iqPoint;

    if (isQAM) {
        symbolValue = state.symbols[symbolIndex];
        iqPoint = symbolValue;
    } else {
        symbolValue = state.binaryData[symbolIndex] || 0;
    }

    // Log rendering details for first symbol only to avoid console spam
    if (symbolIndex === 0) {
        console.log(`Rendering symbol ${symbolIndex}: value=${symbolValue}, type=${modulationType}, isQAM=${isQAM}`);
        if (isQAM) {
            console.log(`  I/Q point: I=${iqPoint.i.toFixed(3)}, Q=${iqPoint.q.toFixed(3)}`);
        }
    }

    // Generate waveform samples
    for (let i = 0; i < config.samplesPerSymbol; i++) {
        const t = i / config.samplesPerSymbol;
        const x = i;

        // Carrier wave (pure sine)
        const carrierY = config.amplitude * Math.sin(2 * Math.PI * config.carrierFreq * t);
        carrierData.push({ x, y: carrierY });

        // Modulating signal
        let modulatingY;
        if (isQAM) {
            // For QAM, show I component
            modulatingY = iqPoint.i;
        } else {
            modulatingY = symbolValue === 1 ? 1 : -1;
        }
        modulatingData.push({ x, y: modulatingY });

        // Modulated signal
        let modulatedY;

        switch (modulationType) {
            case 'AM':
                modulatedY = generateAM(t, symbolValue, config.carrierFreq, config.amplitude);
                break;
            case 'FM':
                modulatedY = generateFM(t, symbolValue, config.carrierFreq, config.amplitude);
                break;
            case 'PM':
                modulatedY = generatePM(t, symbolValue, config.carrierFreq, config.amplitude);
                break;
            case 'ASK':
                modulatedY = generateASK(t, symbolValue, config.carrierFreq, config.amplitude);
                break;
            case 'FSK':
                modulatedY = generateFSK(t, symbolValue, config.carrierFreq, config.amplitude);
                break;
            case 'PSK':
                modulatedY = generatePSK(t, symbolValue, config.carrierFreq, config.amplitude);
                break;
            default:
                if (isQAM) {
                    modulatedY = generateQAM(t, iqPoint, config.carrierFreq, config.amplitude);
                } else {
                    modulatedY = 0;
                }
        }

        modulatedData.push({ x, y: modulatedY });
    }

    // Log sample data points for first symbol only
    if (symbolIndex === 0) {
        console.log(`  Generated ${carrierData.length} samples per waveform`);
        console.log(`  Sample carrier data (first 3): ${JSON.stringify(carrierData.slice(0, 3))}`);
        console.log(`  Sample modulating data (first 3): ${JSON.stringify(modulatingData.slice(0, 3))}`);
        console.log(`  Sample modulated data (first 3): ${JSON.stringify(modulatedData.slice(0, 3))}`);
        console.log(`  Y-axis range: ${yScale.domain()} -> ${yScale.range()}`);
        console.log(`  X-axis range: ${xScale.domain()} -> ${xScale.range()}`);
    }

    // Debug logging for first symbol to verify data ranges
    if (symbolIndex === 0) {
        const carrierYValues = carrierData.map(d => d.y);
        const modulatingYValues = modulatingData.map(d => d.y);
        const modulatedYValues = modulatedData.map(d => d.y);

        console.log(`=== Waveform Data Ranges (Symbol 0, ${modulationType}) ===`);
        console.log(`Carrier:    [${Math.min(...carrierYValues).toFixed(3)}, ${Math.max(...carrierYValues).toFixed(3)}]`);
        console.log(`Modulating: [${Math.min(...modulatingYValues).toFixed(3)}, ${Math.max(...modulatingYValues).toFixed(3)}]`);
        console.log(`Modulated:  [${Math.min(...modulatedYValues).toFixed(3)}, ${Math.max(...modulatedYValues).toFixed(3)}]`);
        console.log(`Y-Scale domain: [${yScale.domain()[0]}, ${yScale.domain()[1]}]`);

        if (isQAM) {
            console.log(`I/Q Point: I=${iqPoint.i.toFixed(3)}, Q=${iqPoint.q.toFixed(3)}`);
        }
    }

    // Update visualizations
    updateCarrierWave(carrierData);
    updateModulatingSignal(modulatingData);
    updateModulatedSignal(modulatedData);

    // Update constellation for QAM
    if (isQAM) {
        updateConstellation(iqPoint, state.symbols.slice(0, symbolIndex + 1));
    }
}

// ============================================================================
// UI UPDATES
// ============================================================================

/**
 * Updates binary display with current symbol highlighted
 * @param {number} symbolIndex - Current symbol index
 */
function updateBinaryDisplay(symbolIndex) {
    const modulationType = state.modulationType;
    const isQAM = modulationType.startsWith('QAM');

    let binaryHTML = 'Binary: ';

    if (isQAM) {
        const config = QAM_CONFIGS[modulationType];
        const bitsPerSymbol = config.bitsPerSymbol;

        for (let i = 0; i < state.binaryData.length; i += bitsPerSymbol) {
            const chunk = state.binaryData.slice(i, i + bitsPerSymbol).join('');
            const currentChunkIndex = Math.floor(i / bitsPerSymbol);

            if (currentChunkIndex === symbolIndex) {
                binaryHTML += `<span class="current-byte">${chunk}</span> `;
            } else {
                binaryHTML += `${chunk} `;
            }
        }
    } else {
        // For binary modulation, highlight each bit
        for (let i = 0; i < state.binaryData.length; i += 8) {
            const byte = state.binaryData.slice(i, i + 8).join('');
            const byteIndex = Math.floor(i / 8);

            if (byteIndex === Math.floor(symbolIndex / 8)) {
                binaryHTML += `<span class="current-byte">${byte}</span> `;
            } else {
                binaryHTML += `${byte} `;
            }
        }
    }

    document.getElementById('binaryText').innerHTML = binaryHTML;
}

/**
 * Updates status information panel
 * @param {number} symbolIndex - Current symbol index
 * @param {number} totalSymbols - Total number of symbols
 */
function updateStatusInfo(symbolIndex, totalSymbols) {
    const modulationType = state.modulationType;
    const isQAM = modulationType.startsWith('QAM');

    document.getElementById('currentSymbol').textContent = `${symbolIndex + 1}/${totalSymbols}`;
    document.getElementById('carrierFreq').textContent = `${config.carrierFreq} Hz`;

    const symbolDuration = config.symbolDuration / state.speed;
    const symbolRate = (1000 / symbolDuration).toFixed(2);
    document.getElementById('symbolRate').textContent = `${symbolRate} sym/s`;

    if (isQAM) {
        const qamConfig = QAM_CONFIGS[modulationType];
        document.getElementById('bitsPerSymbol').textContent = qamConfig.bitsPerSymbol;
    } else {
        document.getElementById('bitsPerSymbol').textContent = '1';
    }
}

/**
 * Updates formula display based on modulation type
 * @param {string} modulationType - Type of modulation
 */
function updateFormula(modulationType) {
    const formulas = {
        'AM': 's(t) = [A + m·bit] · sin(2πfₒt)<br>where m = modulation depth (0.5)',
        'FM': 's(t) = A · sin(2π[fₒ + Δf·bit]t)<br>where Δf = frequency deviation',
        'PM': 's(t) = A · sin(2πfₒt + φ·bit)<br>where φ = phase shift',
        'ASK': 's(t) = A₁ · sin(2πfₒt) for bit 1<br>s(t) = A₀ · sin(2πfₒt) for bit 0',
        'FSK': 's(t) = A · sin(2πf₁t) for bit 1<br>s(t) = A · sin(2πf₀t) for bit 0',
        'PSK': 's(t) = A · sin(2πfₒt + π) for bit 1<br>s(t) = A · sin(2πfₒt + 0) for bit 0',
        'QAM-4': 's(t) = I(t)·cos(2πfₒt) - Q(t)·sin(2πfₒt)<br>2 bits/symbol, 4 constellation points',
        'QAM-16': 's(t) = I(t)·cos(2πfₒt) - Q(t)·sin(2πfₒt)<br>4 bits/symbol, 16 constellation points',
        'QAM-64': 's(t) = I(t)·cos(2πfₒt) - Q(t)·sin(2πfₒt)<br>6 bits/symbol, 64 constellation points',
        'QAM-256': 's(t) = I(t)·cos(2πfₒt) - Q(t)·sin(2πfₒt)<br>8 bits/symbol, 256 constellation points'
    };

    const formulaText = formulas[modulationType] || 'Select a modulation type';
    document.getElementById('formulaText').innerHTML = formulaText;

    // Show/hide constellation panel
    const isQAM = modulationType.startsWith('QAM');
    const constellationPanel = document.getElementById('constellationPanel');

    if (isQAM) {
        constellationPanel.classList.add('active');
    } else {
        constellationPanel.classList.remove('active');
    }
}

/**
 * Updates speed display value
 */
function updateSpeedDisplay() {
    const speedControl = document.getElementById('speedControl');
    const speedValue = document.getElementById('speedValue');
    state.speed = parseFloat(speedControl.value);
    speedValue.textContent = `${state.speed.toFixed(1)}x`;
}

// ============================================================================
// ANIMATION CONTROL
// ============================================================================

/**
 * Main animation loop using requestAnimationFrame
 * @param {number} timestamp - Current timestamp from requestAnimationFrame
 */
function animate(timestamp) {
    if (!state.isRunning || state.isPaused) {
        return;
    }

    if (state.startTime === 0) {
        state.startTime = timestamp;
        state.lastTimestamp = timestamp;
    }

    const elapsed = timestamp - state.startTime;
    const symbolDuration = config.symbolDuration / state.speed;

    // Calculate current symbol index
    const currentSymbolIndex = Math.floor(elapsed / symbolDuration);

    if (currentSymbolIndex >= state.symbols.length) {
        // Animation complete
        stopSimulation();
        return;
    }

    // Update if symbol changed
    if (currentSymbolIndex !== state.currentSymbolIndex) {
        state.currentSymbolIndex = currentSymbolIndex;
    }

    // Calculate progress within current symbol
    const progress = (elapsed % symbolDuration) / symbolDuration;

    // Render current state
    renderWaveforms(state.currentSymbolIndex, progress);
    updateBinaryDisplay(state.currentSymbolIndex);
    updateStatusInfo(state.currentSymbolIndex, state.symbols.length);

    // Continue animation
    state.animationFrameId = requestAnimationFrame(animate);
}

/**
 * Runs the modulation simulation
 */
function runSimulation() {
    const inputText = document.getElementById('inputText').value.trim();

    if (!inputText) {
        alert('Please enter some text to modulate');
        return;
    }

    // Stop any running simulation
    if (state.isRunning) {
        stopSimulation();
    }

    // Get modulation type
    state.modulationType = document.getElementById('modulationType').value;

    // Convert text to binary
    state.binaryData = textToBinary(inputText);

    if (state.binaryData.length === 0) {
        alert('Failed to convert text to binary');
        return;
    }

    // Prepare symbols based on modulation type
    const isQAM = state.modulationType.startsWith('QAM');

    if (isQAM) {
        state.symbols = prepareQAMSymbols(state.binaryData, state.modulationType);
    } else {
        state.symbols = state.binaryData;
    }

    // Reset state
    state.currentSymbolIndex = 0;
    state.startTime = 0;
    state.isRunning = true;
    state.isPaused = false;

    // Update UI
    document.getElementById('visualizationSection').style.display = 'block';
    document.getElementById('runButton').disabled = true;
    document.getElementById('stopButton').disabled = false;
    document.getElementById('stepButton').disabled = false;

    updateFormula(state.modulationType);

    // Start animation
    state.animationFrameId = requestAnimationFrame(animate);

    console.log(`Simulation started: ${state.symbols.length} symbols, modulation: ${state.modulationType}`);
}

/**
 * Stops the simulation
 */
function stopSimulation() {
    if (state.animationFrameId) {
        cancelAnimationFrame(state.animationFrameId);
        state.animationFrameId = null;
    }

    state.isRunning = false;
    state.isPaused = false;
    state.currentSymbolIndex = 0;
    state.startTime = 0;

    // Update UI
    document.getElementById('runButton').disabled = false;
    document.getElementById('stopButton').disabled = true;
    document.getElementById('stepButton').disabled = false;

    console.log('Simulation stopped');
}

/**
 * Steps through simulation one symbol at a time
 */
function stepSimulation() {
    const inputText = document.getElementById('inputText').value.trim();

    // Initialize if not already running
    if (!state.isRunning && !state.symbols.length) {
        if (!inputText) {
            alert('Please enter some text to modulate');
            return;
        }

        state.modulationType = document.getElementById('modulationType').value;
        state.binaryData = textToBinary(inputText);

        const isQAM = state.modulationType.startsWith('QAM');

        if (isQAM) {
            state.symbols = prepareQAMSymbols(state.binaryData, state.modulationType);
        } else {
            state.symbols = state.binaryData;
        }

        state.currentSymbolIndex = 0;
        state.isPaused = true;

        document.getElementById('visualizationSection').style.display = 'block';
        updateFormula(state.modulationType);
    }

    // Advance to next symbol
    if (state.currentSymbolIndex < state.symbols.length) {
        renderWaveforms(state.currentSymbolIndex, 1.0);
        updateBinaryDisplay(state.currentSymbolIndex);
        updateStatusInfo(state.currentSymbolIndex, state.symbols.length);

        state.currentSymbolIndex++;
    }

    // Reset if reached end
    if (state.currentSymbolIndex >= state.symbols.length) {
        state.currentSymbolIndex = 0;
    }
}

// ============================================================================
// EVENT LISTENERS
// ============================================================================

document.addEventListener('DOMContentLoaded', () => {
    console.log('DOM Content Loaded - Initializing Modulation Visualizer...');

    // Wait a brief moment for CSS to apply and elements to have final dimensions
    setTimeout(() => {
        try {
            // Initialize D3 visualizations
            initializeD3();

            // Speed control listener
            document.getElementById('speedControl').addEventListener('input', updateSpeedDisplay);

            // Modulation type change listener
            document.getElementById('modulationType').addEventListener('change', (e) => {
                updateFormula(e.target.value);
            });

            // Initialize formula display
            updateFormula(document.getElementById('modulationType').value);

            console.log('Modulation Visualizer initialized successfully');
        } catch (error) {
            console.error('Error initializing Modulation Visualizer:', error);
            console.error('Stack trace:', error.stack);
        }
    }, 100); // 100ms delay to ensure DOM is fully rendered
});

// ============================================================================
// END OF SCRIPT
// ============================================================================
</script>