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.0x
मॉड्यूलेशन योजनाओं के बारे में
मॉड्यूलेशन एक वाहक तरंग पर उसके एक या अधिक गुणों (आयाम, आवृत्ति, या चरण) को अलग करके जानकारी को एन्कोड करने की प्रक्रिया है। यह टूल दर्शाता है कि वास्तविक समय में विभिन्न मॉड्यूलेशन योजनाएं कैसे काम करती हैं।
आयाम मॉड्यूलेशन (एएम)
सूत्र:s(t) = [A + m(t)] · cos(2πfₒt)
संदेश संकेत के आधार पर वाहक तरंग का आयाम बदलता रहता है।
फ़्रिक्वेंसी मॉड्यूलेशन (एफएम)
सूत्र:s(t) = A · cos(2πfₒt + β∫m(t)dt)
संदेश संकेत के आधार पर वाहक तरंग की आवृत्ति बदलती रहती है।
चरण मॉड्यूलेशन (पीएम)
सूत्र:s(t) = A · cos(2πfₒt + kₚm(t))
संदेश संकेत के आधार पर वाहक तरंग का चरण बदलता रहता है।
आयाम शिफ्ट कुंजीयन (एएसके)
सूत्र:s(t) = A₁ · cos(2πfₒt) बिट 1 के लिए, A₀ · cos(2πfₒt) बिट 0 के लिए
डिजिटल मॉड्यूलेशन जो दो आयाम स्तरों के बीच स्विच करता है।
फ़्रीक्वेंसी शिफ्ट कुंजीयन (एफएसके)
सूत्र:s(t) = A · cos(2πf₁t) बिट 1 के लिए, A · cos(2πf₀t) बिट 0 के लिए
डिजिटल मॉड्यूलेशन जो दो आवृत्तियों के बीच स्विच करता है।
चरण शिफ्ट कुंजीयन (पीएसके)
सूत्र: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 अक्षरों तक का कोई भी टेक्स्ट टाइप करें
- मॉड्यूलेशन का चयन करें:एनालॉग (एएम/एफएम/पीएम), डिजिटल (एएसके/एफएसके/पीएसके), या क्यूएएम योजनाओं में से चुनें
- गति समायोजित करें:एनीमेशन को धीमा या तेज़ करने के लिए स्लाइडर का उपयोग करें (0.1x से 2x)
- सिमुलेशन चलाएँ:विज़ुअलाइज़ेशन शुरू करने के लिए क्लिक करें और देखें कि आपका टेक्स्ट कैसे एन्कोड किया गया है
- चरण मोड:विस्तृत विश्लेषण के लिए एक समय में एक प्रतीक को आगे बढ़ाने के लिए चरण बटन का उपयोग करें
शैक्षणिक विशेषताएं:
- वाहक, मॉड्यूलेटिंग और मॉड्यूलेटेड सिग्नल का वास्तविक समय दृश्य
- QAM के लिए तारामंडल आरेख I/Q घटकों को दर्शाता है
- आपके टेक्स्ट डेटा का बाइनरी प्रतिनिधित्व
- प्रत्येक मॉड्यूलेशन प्रकार के लिए गणितीय सूत्र
- समय को समझने के लिए प्रतीक-दर-प्रतीक एनीमेशन