.. العنوان: متخيل التعديل
.. سبيكة: متخيل التعديل
.. التاريخ: 2026-01-09 15:00:00 بالتوقيت العالمي
.. العلامات: لاسلكي، الترددات اللاسلكية، التعديل، آلة حاسبة، أداة
.. الفئة:
.. الرابط :
.. الوصف: تصور تفاعلي لأنظمة التعديل التناظرية والرقمية بما في ذلك 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">صباحا - تعديل السعة</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 - مفتاح تبديل الطور</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>ق(ر) = [أ + م(ر)] · كوس(2πfₒt)</p>
<p>يغير سعة الموجة الحاملة بناءً على إشارة الرسالة.</p>
</div>
<div class="modulation-card">
<h4>تعديل التردد (FM)</h4>
<p><strong>صيغة:</strong>ق (ر) = ا · كوس (2πfₒt + β∫m(t)dt)</p>
<p>يغير تردد الموجة الحاملة بناءً على إشارة الرسالة.</p>
</div>
<div class="modulation-card">
<h4>تعديل المرحلة (PM)</h4>
<p><strong>صيغة:</strong>ق(ر) = ا · كوس (2πfₒt + كₚم(ر))</p>
<p>يغير مرحلة الموجة الحاملة بناءً على إشارة الرسالة.</p>
</div>
<div class="modulation-card">
<h4>مفتاح تحويل السعة (ASK)</h4>
<p><strong>صيغة:</strong>s(t) = A₁ · cos(2πfₒt) للبتة 1، A₀ · cos(2πfₒt) للبتة 0</p>
<p>التعديل الرقمي الذي يتحول بين مستويين من السعة.</p>
</div>
<div class="modulation-card">
<h4>مفتاح تحويل التردد (FSK)</h4>
<p><strong>صيغة:</strong>s(t) = A · cos(2πf₁t) للبتة 1، A · cos(2πf₀t) للبتة 0</p>
<p>التعديل الرقمي الذي يقوم بالتبديل بين ترددين.</p>
</div>
<div class="modulation-card">
<h4>مفتاح تبديل الطور (PSK)</h4>
<p><strong>صيغة:</strong>s(t) = A · cos(2πfₒt + φ)، حيث φ = 0° أو 180°</p>
<p>التعديل الرقمي الذي يقوم بالتبديل بين حالات الطور.</p>
</div>
<div class="modulation-card">
<h4>تعديل سعة التربيع (QAM)</h4>
<p><strong>صيغة:</strong>ق(ر) = أنا(ر)كوس(2πfₒt) - س(ر)الخطيئة(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>استخدم زر الخطوة للتقدم برمز واحد في كل مرة لإجراء تحليل مفصل</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>