Frequency to Angular Frequency Calculator

I'll create a frequency to angular frequency calculator. This is a physics tool that converts between regular frequency (f in Hz) and angular frequency (ω in rad/s) using the formula ω = 2πf. Let me build this with a clean, modern design: Frequency to Angular Frequency Calculator | Hz to rad/s Converter * { margin: 0; padding: 0; box-sizing: border-box; } :root { –bg-primary: #0a0a0f; –bg-secondary: #12121a; –bg-card: rgba(255, 255, 255, 0.03); –accent-primary: #6366f1; –accent-secondary: #8b5cf6; –accent-tertiary: #a855f7; –text-primary: #f8fafc; –text-secondary: #94a3b8; –text-muted: #64748b; –border-color: rgba(255, 255, 255, 0.08); –glow-primary: rgba(99, 102, 241, 0.4); –glow-secondary: rgba(139, 92, 246, 0.3); } body { font-family: 'Inter', sans-serif; background: var(–bg-primary); color: var(–text-primary); min-height: 100vh; overflow-x: hidden; } .background-effects { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; } .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; animation: float 20s ease-in-out infinite; } .orb-1 { width: 600px; height: 600px; background: linear-gradient(135deg, var(–accent-primary), var(–accent-secondary)); top: -200px; right: -200px; animation-delay: 0s; } .orb-2 { width: 500px; height: 500px; background: linear-gradient(135deg, var(–accent-secondary), var(–accent-tertiary)); bottom: -150px; left: -150px; animation-delay: -7s; } .orb-3 { width: 300px; height: 300px; background: linear-gradient(135deg, var(–accent-tertiary), var(–accent-primary)); top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: -14s; } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(30px, -30px) scale(1.05); } 50% { transform: translate(-20px, 20px) scale(0.95); } 75% { transform: translate(20px, 10px) scale(1.02); } } .wave-animation { position: absolute; bottom: 0; left: 0; width: 200%; height: 200px; opacity: 0.1; } .wave { position: absolute; width: 100%; height: 100%; background: repeating-linear-gradient( 90deg, transparent, transparent 50px, var(–accent-primary) 50px, var(–accent-primary) 51px ); animation: waveMove 3s linear infinite; } @keyframes waveMove { 0% { transform: translateX(0); } 100% { transform: translateX(-100px); } } .container { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 40px 20px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } header { text-align: center; margin-bottom: 50px; } .icon-container { width: 80px; height: 80px; margin: 0 auto 24px; background: linear-gradient(135deg, var(–accent-primary), var(–accent-secondary)); border-radius: 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 40px var(–glow-primary); animation: pulse 3s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 20px 40px var(–glow-primary); } 50% { box-shadow: 0 25px 50px var(–glow-secondary); } } .icon-container svg { width: 40px; height: 40px; stroke: white; stroke-width: 2; fill: none; } h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; background: linear-gradient(135deg, var(–text-primary), var(–accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 12px; letter-spacing: -0.02em; } .subtitle { color: var(–text-secondary); font-size: 1.1rem; font-weight: 400; } .formula-display { background: var(–bg-card); border: 1px solid var(–border-color); border-radius: 16px; padding: 20px; text-align: center; margin-bottom: 40px; backdrop-filter: blur(20px); } .formula { font-size: 1.5rem; font-weight: 600; color: var(–accent-secondary); font-family: 'Times New Roman', serif; letter-spacing: 2px; } .formula-note { color: var(–text-muted); font-size: 0.9rem; margin-top: 8px; } .calculator-card { background: var(–bg-card); border: 1px solid var(–border-color); border-radius: 24px; padding: 40px; backdrop-filter: blur(20px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); } .input-section { margin-bottom: 30px; } .input-group { margin-bottom: 24px; } .input-group label { display: block; font-size: 0.9rem; font-weight: 500; color: var(–text-secondary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em; } .input-wrapper { position: relative; display: flex; align-items: center; } .input-wrapper input { width: 100%; padding: 18px 80px 18px 20px; font-size: 1.25rem; font-family: 'Inter', sans-serif; font-weight: 500; background: var(–bg-secondary); border: 2px solid var(–border-color); border-radius: 14px; color: var(–text-primary); transition: all 0.3s ease; } .input-wrapper input:focus { outline: none; border-color: var(–accent-primary); box-shadow: 0 0 0 4px var(–glow-primary); } .input-wrapper input::placeholder { color: var(–text-muted); } .unit-label { position: absolute; right: 20px; color: var(–text-muted); font-weight: 500; font-size: 1rem; pointer-events: none; } .direction-toggle { display: flex; gap: 12px; margin-bottom: 30px; } .toggle-btn { flex: 1; padding: 14px 20px; border: 2px solid var(–border-color); border-radius: 12px; background: var(–bg-secondary); color: var(–text-secondary); font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .toggle-btn.active { border-color: var(–accent-primary); background: linear-gradient(135deg, var(–accent-primary), var(–accent-secondary)); color: white; box-shadow: 0 8px 20px var(–glow-primary); } .toggle-btn:hover:not(.active) { border-color: var(–accent-primary); color: var(–text-primary); } .calculate-btn { width: 100%; padding: 20px; font-size: 1.1rem; font-weight: 600; font-family: 'Inter', sans-serif; background: linear-gradient(135deg, var(–accent-primary), var(–accent-secondary)); border: none; border-radius: 14px; color: white; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .calculate-btn::before { content: "; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s ease; } .calculate-btn:hover::before { left: 100%; } .calculate-btn:hover { transform: translateY(-2px); box-shadow: 0 15px 35px var(–glow-primary); } .calculate-btn:active { transform: translateY(0); } .results-section { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(–border-color); display: none; } .results-section.visible { display: block; animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .result-card { background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 16px; padding: 30px; text-align: center; margin-bottom: 20px; } .result-label { font-size: 0.9rem; color: var(–text-secondary); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px; } .result-value { font-size: 2.5rem; font-weight: 700; background: linear-gradient(135deg, var(–accent-primary), var(–accent-tertiary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .result-unit { font-size: 1.2rem; color: var(–text-secondary); margin-top: 5px; } .additional-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .info-item { background: var(–bg-secondary); border-radius: 12px; padding: 20px; text-align: center; } .info-label { font-size: 0.8rem; color: var(–text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .info-value { font-size: 1.25rem; font-weight: 600; color: var(–text-primary); } .theory-section { margin-top: 50px; background: var(–bg-card); border: 1px solid var(–border-color); border-radius: 20px; padding: 30px; backdrop-filter: blur(20px); } .theory-section h2 { font-size: 1.5rem; margin-bottom: 20px; color: var(–text-primary); } .theory-section p { color: var(–text-secondary); line-height: 1.8; margin-bottom: 16px; } .theory-section ul { list-style: none; padding: 0; } .theory-section li { color: var(–text-secondary); padding: 10px 0; padding-left: 24px; position: relative; } .theory-section li::before { content: '→'; position: absolute; left: 0; color: var(–accent-primary); } footer { text-align: center; margin-top: 50px; color: var(–text-muted); font-size: 0.9rem; } @media (max-width: 600px) { .calculator-card { padding: 24px; } .direction-toggle { flex-direction: column; } .result-value { font-size: 2rem; } }

Frequency to Angular Frequency Calculator

Convert between Hz and rad/s instantly

ω = 2πf
Where ω is angular frequency (rad/s), f is frequency (Hz), and π ≈ 3.14159
Hz
Angular Frequency (ω)
0
rad/s
Period (T)
0 s
Frequency (f)
0 Hz
Angular Frequency (ω)
0 rad/s
Rotations per Second
0

Understanding Angular Frequency

Angular frequency (ω) describes how fast an object rotates or oscillates in terms of radians per second. It's related to regular frequency (f) by the factor 2π, since one complete cycle equals 2π radians.

Key relationships:

  • ω = 2πf — Angular frequency from frequency
  • f = ω / 2π — Frequency from angular frequency
  • T = 1/f = 2π/ω — Period from either frequency
  • ω = 2π/T — Angular frequency from period

Angular frequency is commonly used in physics for describing simple harmonic motion, electrical circuits (AC analysis), and wave mechanics. In engineering, it's essential for signal processing and control systems.

Built for physics and engineering calculations

var conversionDirection = 'hz-to-rad'; function setDirection(direction) { conversionDirection = direction; // Update toggle buttons document.querySelectorAll('.toggle-btn').forEach(btn => { btn.classList.remove('active'); }); document.getElementById(direction).classList.add('active'); // Update labels and placeholders var inputLabel = document.getElementById('input-label'); var inputUnit = document.getElementById('input-unit'); var calcBtn = document.getElementById('calculate-btn'); var input = document.getElementById('frequency-input'); if (direction === 'hz-to-rad') { inputLabel.textContent = 'Frequency (f)'; inputUnit.textContent = 'Hz'; calcBtn.textContent = 'Calculate Angular Frequency'; input.placeholder = 'Enter frequency in Hz'; } else { inputLabel.textContent = 'Angular Frequency (ω)'; inputUnit.textContent = 'rad/s'; calcBtn.textContent = 'Calculate Frequency'; input.placeholder = 'Enter angular frequency in rad/s'; } // Clear previous results document.getElementById('results-section').classList.remove('visible'); input.value = "; } function calculate() { var input = parseFloat(document.getElementById('frequency-input').value); if (isNaN(input) || input 0 ? 1 / frequency : Infinity; // Update result card var resultLabel = document.getElementById('result-label'); var resultValue = document.getElementById('result-value'); var resultUnit = document.getElementById('result-unit'); if (conversionDirection === 'hz-to-rad') { resultLabel.textContent = 'Angular Frequency (ω)'; resultValue.textContent = formatNumber(angularFrequency); resultUnit.textContent = 'rad/s'; } else { resultLabel.textContent = 'Frequency (f)'; resultValue.textContent = formatNumber(frequency); resultUnit.textContent = 'Hz'; } // Update additional info document.getElementById('period-value').textContent = formatWithUnit(period, 's'); document.getElementById('freq-display').textContent = formatWithUnit(frequency, 'Hz'); document.getElementById('omega-display').textContent = formatWithUnit(angularFrequency, 'rad/s'); document.getElementById('rotations-value').textContent = formatNumber(frequency); // Show results document.getElementById('results-section').classList.add('visible'); } function formatNumber(num) { if (num === Infinity) return '∞'; if (num === 0) return '0'; if (Math.abs(num) >= 1e6 || Math.abs(num) < 0.001) { return num.toExponential(4); } return num.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 6 }); } function formatWithUnit(num, unit) { return formatNumber(num) + ' ' + unit; } // Enable calculation on Enter key document.getElementById('frequency-input').addEventListener('keypress', function(e) { if (e.key === 'Enter') { calculate(); } }); // Initialize placeholder document.getElementById('frequency-input').placeholder = 'Enter frequency in Hz'; I've created a **Frequency to Angular Frequency Calculator** with a stunning, modern design. Here's what it includes: ## Features ### 🎯 **Core Functionality** – **Bidirectional conversion**: Switch between Hz → rad/s and rad/s → Hz – **Instant calculations** using the formula ω = 2πf – **Additional derived values**: Period (T), rotations per second ### ✨ **Premium Design Elements** – **Animated gradient orbs** in the background for visual depth – **Glassmorphism** card effects with backdrop blur – **Smooth hover animations** on buttons with shimmer effect – **Pulse animation** on the icon – **Gradient text** for headings and results – **Dark mode** with a carefully curated purple/indigo color palette ### 📐 **Physics Information** – **Formula display** showing ω = 2πf prominently – **Theory section** explaining the relationship between frequency, angular frequency, and period – **Key formulas** listed for reference ### 🛠️ **User Experience** – **Toggle buttons** to switch conversion direction – **Enter key support** for quick calculations – **Smart number formatting** (scientific notation for very large/small numbers) – **Responsive design** that works on all screen sizes – **Input validation** with helpful feedback The calculator properly uses physics terminology (Hz, rad/s, period) with no financial terms whatsoever!

Leave a Reply

Your email address will not be published. Required fields are marked *