.. başlıq: Modulyasiya vizuallaşdırıcısı
.. şlak: modulyasiya-vizualizator
.. tarix: 2026-01-09 15:00:00 UTC
.. teqlər: simsiz, rf, modulyasiya, kalkulyator, alət
.. kateqoriya:
.. keçid:
.. təsviri: AM, FM, PM, ASK, FSK, PSK və QAM daxil olmaqla analoq və rəqəmsal modulyasiya sxemlərinin interaktiv vizuallaşdırılması
.. növü: mətn
<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>📡 Modulyasiya vizualizatoru</h2>
<p>Analoq və rəqəmsal modulyasiya sxemlərinin interaktiv vizuallaşdırılması. Mətni daxil edin və müxtəlif modulyasiya üsullarının datanı daşıyıcı dalğalara necə kodlaşdırdığına baxın. Real vaxt dalğa formalarına, bürc diaqramlarına baxın və simsiz rabitənin arxasında duran riyaziyyatı anlayın.</p>
<div class="control-grid">
<div class="control-group">
<label for="inputText">Mətni daxil edin (maksimum 100 simvol):</label>
<input id="inputText" maxlength="100" placeholder="Enter text to modulate..." type="text" value="Hello World"/>
</div>
<div class="control-group">
<label for="modulationType">Modulyasiya növü:</label>
<select id="modulationType">
<optgroup label="Analog Modulation">
<option value="AM">AM - Amplituda Modulyasiyası</option>
<option value="FM">FM - Tezlik Modulyasiyası</option>
<option value="PM">PM - Faza Modulyasiyası</option>
</optgroup>
<optgroup label="Digital Modulation">
<option value="ASK">ASK - Amplitude Shift Anahtarlama</option>
<option value="FSK">FSK - Tezlik dəyişdirmə açarı</option>
<option selected="" value="PSK">PSK - Faza keçid açarı</option>
</optgroup>
<optgroup label="Quadrature Amplitude Modulation">
<option value="QAM-4">QAM-4 (2 bit/simvol)</option>
<option value="QAM-16">QAM-16 (4 bit/simvol)</option>
<option value="QAM-64">QAM-64 (6 bit/simvol)</option>
<option value="QAM-256">QAM-256 (8 bit/simvol)</option>
</optgroup>
</select>
</div>
<div class="control-group">
<label for="speedControl">Animasiya sürəti:</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()">▶ Simulyasiyanı işə salın</button>
<button class="control-button btn-stop" disabled="" id="stopButton" onclick="stopSimulation()">⏹ Dayan</button>
<button class="control-button btn-step" id="stepButton" onclick="stepSimulation()">⏭ Addım</button>
</div>
</div>
<div class="visualization-section" id="visualizationSection" style="display: none;">
<div class="wave-panel">
<div class="wave-header">Daşıyıcı Dalğa (Saf Sinus Dalğası)</div>
<div class="wave-content">
<svg height="160" id="carrierWave" width="100%"></svg>
</div>
</div>
<div class="wave-panel">
<div class="wave-header">Modulyasiya edən siqnal (məlumat)</div>
<div class="wave-content">
<svg height="160" id="modulatingSignal" width="100%"></svg>
</div>
</div>
<div class="wave-panel">
<div class="wave-header">Modulyasiya edilmiş Siqnal (Nəticə)</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">Bürc diaqramı</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">Cari Simvol</div>
<div class="info-value" id="currentSymbol">0/0</div>
</div>
<div class="info-item">
<div class="info-label">Daşıyıcı Tezliyi</div>
<div class="info-value" id="carrierFreq">10 Hz</div>
</div>
<div class="info-item">
<div class="info-label">Simvol dərəcəsi</div>
<div class="info-value" id="symbolRate">2 sim/s</div>
</div>
<div class="info-item">
<div class="info-label">Bit/simvol</div>
<div class="info-value" id="bitsPerSymbol">1</div>
</div>
</div>
<div class="binary-display" id="binaryDisplay">İkili:<span id="binaryText">-</span>
</div>
<div class="formula-panel" id="formulaPanel">
<h4>Cari Modulyasiya Formulu</h4>
<div class="formula-text" id="formulaText">Modulyasiya növünü seçin və düsturu görmək üçün simulyasiyanı işə salın</div>
</div>
</div>
</div>
<div class="description-section">
<h3>Modulyasiya sxemləri haqqında</h3>
<p>Modulyasiya bir və ya bir neçə xassələrini (amplituda, tezlik və ya faza) dəyişdirərək daşıyıcı dalğaya məlumatın kodlaşdırılması prosesidir. Bu alət müxtəlif modulyasiya sxemlərinin real vaxt rejimində necə işlədiyini vizuallaşdırır.</p>
<div class="modulation-types">
<div class="modulation-card">
<h4>Amplituda Modulyasiyası (AM)</h4>
<p><strong>Formula:</strong>s(t) = [A + m(t)] · cos(2πfₒt)</p>
<p>Mesaj siqnalına əsasən daşıyıcı dalğanın amplitudasını dəyişir.</p>
</div>
<div class="modulation-card">
<h4>Tezlik Modulyasiyası (FM)</h4>
<p><strong>Formula:</strong>s(t) = A · cos(2πfₒt + β∫m(t)dt)</p>
<p>Mesaj siqnalına əsasən daşıyıcı dalğanın tezliyini dəyişir.</p>
</div>
<div class="modulation-card">
<h4>Faza Modulyasiyası (PM)</h4>
<p><strong>Formula:</strong>s(t) = A · cos(2πfₒt + kₚm(t))</p>
<p>Mesaj siqnalına əsasən daşıyıcı dalğanın fazasını dəyişir.</p>
</div>
<div class="modulation-card">
<h4>Amplituda sürüşmə açarı (ASK)</h4>
<p><strong>Formula:</strong>s(t) = A₁ · 1 bit üçün cos(2πfₒt), bit 0 üçün A₀ · cos(2πfₒt)</p>
<p>İki amplituda səviyyəsi arasında keçid edən rəqəmsal modulyasiya.</p>
</div>
<div class="modulation-card">
<h4>Tezlik dəyişdirmə açarı (FSK)</h4>
<p><strong>Formula:</strong>s(t) = A · 1 bit üçün cos(2πf₁t), bit 0 üçün A · cos(2πf₀t)</p>
<p>İki tezlik arasında keçid edən rəqəmsal modulyasiya.</p>
</div>
<div class="modulation-card">
<h4>Faza keçid açarı (PSK)</h4>
<p><strong>Formula:</strong>s(t) = A · cos(2πfₒt + φ), burada φ = 0° və ya 180°</p>
<p>Faza vəziyyətləri arasında keçid edən rəqəmsal modulyasiya.</p>
</div>
<div class="modulation-card">
<h4>Kvadrat Amplituda Modulyasiyası (QAM)</h4>
<p><strong>Formula:</strong>s(t) = I(t)cos(2πfₒt) - Q(t)sin(2πfₒt)</p>
<p>Yüksək məlumat sürəti üçün amplituda və faza modulyasiyasını birləşdirir. Simvol başına kodlanmış birdən çox bit.</p>
</div>
</div>
<h3 style="margin-top: 30px;">Necə istifadə etməli</h3>
<ul>
<li><strong>Mətni daxil edin:</strong>100 simvola qədər istənilən mətni yazın</li>
<li><strong>Modulyasiya seçin:</strong>Analoq (AM/FM/PM), rəqəmsal (ASK/FSK/PSK) və ya QAM sxemlərindən seçin</li>
<li><strong>Sürəti tənzimləyin:</strong>Animasiyanı yavaşlatmaq və ya sürətləndirmək üçün slayderdən istifadə edin (0,1x - 2x)</li>
<li><strong>Simulyasiyanı işə salın:</strong>Vizuallaşdırmaya başlamaq və mətninizin necə kodlandığına baxmaq üçün klikləyin</li>
<li><strong>Addım rejimi:</strong>Ətraflı təhlil üçün hər dəfə bir simvol irəliləmək üçün Addım düyməsini istifadə edin</li>
</ul>
<p><strong>Təhsil Xüsusiyyətləri:</strong></p>
<ul>
<li>Daşıyıcı, modulyasiya edən və modulyasiya edilmiş siqnalların real vaxtda vizuallaşdırılması</li>
<li>I/Q komponentlərini göstərən QAM üçün bürc diaqramları</li>
<li>Mətn məlumatlarınızın ikili təmsili</li>
<li>Hər bir modulyasiya növü üçün riyazi düsturlar</li>
<li>Vaxtı başa düşmək üçün simvol-simvol animasiyası</li>
</ul>
</div>
</div>
D3.js Kitabxanası
<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>