Modulation Visualizer
.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); }
}
D3.js 라이브러리
📡 변조 시각화 장치
아날로그 및 디지털 변조 방식을 대화형으로 시각화합니다. 텍스트를 입력하고 다양한 변조 기술이 데이터를 반송파에 인코딩하는 방법을 살펴보세요. 실시간 파형과 성좌도를 확인하고 무선 통신 이면의 수학을 이해하세요.
1.0배
변조 방식 정보
변조는 하나 이상의 특성(진폭, 주파수 또는 위상)을 변경하여 정보를 반송파에 인코딩하는 프로세스입니다. 이 도구는 다양한 변조 방식이 실시간으로 어떻게 작동하는지 시각화합니다.
진폭 변조(AM)
공식:s(t) = [A + m(t)] · cos(2πfₒt)
메시지 신호에 따라 반송파의 진폭을 변경합니다.
주파수 변조(FM)
공식:s(t) = A · cos(2πfₒt + β∫m(t)dt)
메시지 신호에 따라 반송파의 주파수를 변경합니다.
위상 변조(PM)
공식:s(t) = A·cos(2πfₒt + kₚm(t))
메시지 신호에 따라 반송파의 위상을 변경합니다.
진폭 편이 키잉(ASK)
공식:s(t) = 비트 1의 경우 A₁ · cos(2πfₒt), 비트 0의 경우 A₀ · cos(2πfₒt)
두 진폭 레벨 사이를 전환하는 디지털 변조입니다.
주파수 편이 키잉(FSK)
공식:s(t) = 비트 1의 경우 A · cos(2πf₁t), 비트 0의 경우 A · cos(2πf₀t)
두 주파수 사이를 전환하는 디지털 변조입니다.
위상 편이 키잉(PSK)
공식:s(t) = A · cos(2πfₒt + ψ), 여기서 ψ = 0° 또는 180°
위상 상태를 전환하는 디지털 변조입니다.
QAM(직교 진폭 변조)
공식:s(t) = I(t)cos(2πfₒt) - Q(t)sin(2πfₒt)
높은 데이터 속도를 위해 진폭과 위상 변조를 결합합니다. 기호당 여러 비트가 인코딩됩니다.
사용방법
- 텍스트 입력:최대 100자까지 텍스트를 입력하세요.
- 변조 선택:아날로그(AM/FM/PM), 디지털(ASK/FSK/PSK) 또는 QAM 방식 중에서 선택하세요.
- 속도 조정:슬라이더를 사용하여 애니메이션 속도를 낮추거나 높입니다(0.1x~2x).
- 시뮬레이션 실행:시각화를 시작하고 텍스트가 어떻게 인코딩되는지 보려면 클릭하세요.
- 단계 모드:자세한 분석을 위해 단계 버튼을 사용하여 한 번에 한 기호씩 진행합니다.
교육적 특징:
- 반송파, 변조 및 변조된 신호의 실시간 시각화
- I/Q 구성요소를 보여주는 QAM의 성좌도
- 텍스트 데이터의 바이너리 표현
- 각 변조 유형에 대한 수학 공식
- 타이밍을 이해하기 위한 기호별 애니메이션