.. 제목: 변조 시각화 장치
.. 슬러그: 변조 시각화 장치
.. 날짜: 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 - 위상 변이 키잉</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.0배</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">10Hz</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) = 비트 1의 경우 A₁ · cos(2πfₒt), 비트 0의 경우 A₀ · cos(2πfₒt)</p>
<p>두 진폭 레벨 사이를 전환하는 디지털 변조입니다.</p>
</div>
<div class="modulation-card">
<h4>주파수 편이 키잉(FSK)</h4>
<p><strong>공식:</strong>s(t) = 비트 1의 경우 A · cos(2πf₁t), 비트 0의 경우 A · cos(2πf₀t)</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πfₒt) - Q(t)sin(2πfₒt)</p>
<p>높은 데이터 속도를 위해 진폭과 위상 변조를 결합합니다. 기호당 여러 비트가 인코딩됩니다.</p>
</div>
</div>
<h3 style="margin-top: 30px;">사용방법</h3>
<ul>
<li><strong>텍스트 입력:</strong>최대 100자까지 텍스트를 입력하세요.</li>
<li><strong>변조 선택:</strong>아날로그(AM/FM/PM), 디지털(ASK/FSK/PSK) 또는 QAM 방식 중에서 선택하세요.</li>
<li><strong>속도 조정:</strong>슬라이더를 사용하여 애니메이션 속도를 낮추거나 높입니다(0.1x~2x).</li>
<li><strong>시뮬레이션 실행:</strong>시각화를 시작하고 텍스트가 어떻게 인코딩되는지 보려면 클릭하세요.</li>
<li><strong>단계 모드:</strong>자세한 분석을 위해 단계 버튼을 사용하여 한 번에 한 기호씩 진행합니다.</li>
</ul>
<p><strong>교육적 특징:</strong></p>
<ul>
<li>반송파, 변조 및 변조된 신호의 실시간 시각화</li>
<li>I/Q 구성요소를 보여주는 QAM의 성좌도</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>