Spaces:
Running
Running
Develop an interactive room acoustics calculator webapp for analyzing room modes in audio spaces. Support both rectangular and L-shaped room configurations with dual input methods: direct numerical entry (length, width, height) and graphical drawing board for wall sketching. Enable interactive subwoofer placement within room layouts. Calculate axial, tangential, and oblique room modes using the formula f = (c/2) × (n/L) where c ≈ 343 m/s. Implement real-time visualization of room geometry, frequency response, mode distribution, and pressure mapping. Include responsive UI with live updates, supporting critical frequencies 20-200 Hz. Target audiophiles, studio planners, and acousticians seeking optimal subwoofer positioning and resonance identification for improved acoustic quality. implement a 3D Visualization with the possibility to change the positioning of the subwoofer via drag and drop
acb1e49 verified | class HeaderRoom extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| } | |
| header { | |
| background-color: #1f2937; | |
| padding: 1rem 0; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 1rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| font-weight: 700; | |
| font-size: 1.5rem; | |
| color: #fff; | |
| } | |
| .logo-icon { | |
| color: #6366f1; | |
| } | |
| nav ul { | |
| display: flex; | |
| list-style: none; | |
| gap: 2rem; | |
| } | |
| nav a { | |
| color: #d1d5db; | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: color 0.2s ease; | |
| } | |
| nav a:hover { | |
| color: #6366f1; | |
| } | |
| @media (max-width: 768px) { | |
| .container { | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| nav ul { | |
| gap: 1rem; | |
| } | |
| } | |
| </style> | |
| <header> | |
| <div class="container"> | |
| <div class="logo"> | |
| <i data-feather="speaker" class="logo-icon"></i> | |
| <span>Room Resonance Explorer</span> | |
| </div> | |
| <nav> | |
| <ul> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">Documentation</a></li> | |
| <li><a href="#">Resources</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </header> | |
| `; | |
| // Load Feather icons | |
| const script = document.createElement('script'); | |
| script.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js'; | |
| script.onload = () => { | |
| feather.replace(); | |
| }; | |
| this.shadowRoot.appendChild(script); | |
| } | |
| } | |
| customElements.define('header-room', HeaderRoom); |