.. عنوان: Modulation Visualizer
.. اسلگ: مدولاسیون-بصری ساز
.. تاریخ: 2026-01-09 15:00:00 UTC
.. برچسب ها: بی سیم، rf، مدولاسیون، ماشین حساب، ابزار
.. دسته بندی:
.. لینک:
.. توضیحات: تجسم تعاملی طرح های مدولاسیون آنالوگ و دیجیتال شامل 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">FM - مدولاسیون فرکانس</option>
<option value="PM">PM - مدولاسیون فاز</option>
</optgroup>
<optgroup label="Digital Modulation">
<option value="ASK">ASK - کلید زدن دامنه شیفت</option>
<option value="FSK">FSK - کلید زنی تغییر فرکانس</option>
<option selected="" value="PSK">PSK - Phase Shift Keying</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 سیم در ثانیه</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>کلیدهای تغییر دامنه (ASK)</h4>
<p><strong>فرمول:</strong>s(t) = A1 · 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πf1t) برای بیت 1، A · cos(2πf0t) برای بیت 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>مدولاسیون دامنه چهارگانه (QAM)</h4>
<p><strong>فرمول:</strong>s(t) = I(t)cos(2πf2t) - 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>