Universo Acústico - Gerador de Harmônicas

Vibrações Harmônicas

Número de Harmônicas: /

Espessura da linha: /

Intervalo de Amplitude: /

Fator de Desaceleração:

Fator Progressivo:

Interrelação:

Fator de Espessura:

Zoom:

Suavidade da Curva:

Usar escala de cores

Usar cores automáticas

Código de Configuração:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Harmônicas Geradas</title>
    <link rel="icon" type="image/png" href="/imagens/favicon.png">
    <div style="position: fixed; top: 40px; right: 40px; font-family: monospace; font-size: 11px; color: #999; background: #f8f8f8; padding: 10px; border-radius: 4px; z-index: 1000;">
{{CONFIG_CODE}}
    <style>
        /* Reset básico */
        body {
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }
        
        /* Container principal */
        .svg-container {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
            background-image: linear-gradient(to right, rgba(255,255,255,0.5) 1px, transparent 1px),
                             linear-gradient(to bottom, rgba(255,255,255,0.5) 1px, transparent 1px);
            background-size: 40px 40px;
            background-color: #f0f0f0;
        }
        
        /* Configurações do SVG */
        #harmonicSvg {
            transform-origin: center;
            transform: scale(2);
            transition: transform 0.1s ease-out;
            shape-rendering: geometricPrecision;
            text-rendering: optimizeLegibility;
            vector-effect: non-scaling-stroke;
            image-rendering: optimizeQuality;
        }

/* Estilo do botão */
        .mirror-button {
            position: fixed;
            top: 40px;
            left: 40px;
            padding: 20px 40px;
            font-size: 20px;
            background-color: #00afb5;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            z-index: 9999;
            pointer-events: auto;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }

/* Estado ativo do botão */
        .mirror-button.active::after {
            content: '';
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            border: 4px solid #f44336;
            border-radius: 12px;
        }
    </style>
</head>
<body>
    <button class="mirror-button" onclick="toggleMirror()">Ativar Espelho</button>
    <div class="svg-container">
        <svg id="harmonicSvg" width="1400" height="800" viewBox="0 0 800 400" preserveAspectRatio="xMidYMid meet">
            <defs>
                <pattern id="gridPattern" width="40" height="40" patternUnits="userSpaceOnUse">
                    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="1"/>
                </pattern>
            </defs>

<rect x="0" y="0" width="800" height="400" fill="url(#gridPattern)"/>
            <circle cx="400" cy="200" r="200" fill="none" stroke="#333333" stroke-width="0.5" stroke-dasharray="5,5"/>
            
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -400 820 800">
                <line x1="-0" y1="0" x2="800" y2="0" stroke="#999" stroke-width="0.3"/>
                <line x1="400" y1="-400" x2="400" y2="400" stroke="#999" stroke-width="0.3"/>
                <g id="harmonics">
                    {{HARMONICS_CODE}}
                </g>
            </svg>
        </svg>
    </div>

// Configurações de zoom
        const zoomConfig = {
            scale: 2,
            minScale: 1,
            maxScale: 50,
            scaleFactor: 0.5
        };

// Função para alternar o espelho
        function toggleMirror() {
            mirrorActive = !mirrorActive;
            updateMirrorDisplay();
            updateButtonState();
        }

// Atualiza a exibição dos espelhos
        function updateMirrorDisplay() {
            const mirrors = document.querySelectorAll('[id^="mirror"]');
            mirrors.forEach(mirror => {
                mirror.style.display = mirrorActive ? 'block' : 'none';
            });
        }

// Atualiza o estado do botão
        function updateButtonState() {
            const button = document.querySelector('.mirror-button');
            button.textContent = mirrorActive ? 'Desativar Espelho' : 'Ativar Espelho';
            button.style.backgroundColor = mirrorActive ? '#f44336' : '#00afb5';
            button.classList.toggle('active', mirrorActive);
        }

// Configuração do zoom com roda do mouse
        function setupWheelZoom() {
            const svg = document.getElementById('harmonicSvg');
            
            svg.addEventListener('wheel', (e) => {
                e.preventDefault();
                const delta = e.deltaY * -0.001;
                zoomConfig.scale = Math.min(
                    Math.max(
                        zoomConfig.scale * (1 + delta),
                        zoomConfig.minScale
                    ),
                    zoomConfig.maxScale
                );
                svg.style.transform = `scale(${zoomConfig.scale})`;
            });
        }

// Configuração do zoom para dispositivos touch
        function setupTouchZoom() {
            const svg = document.getElementById('harmonicSvg');
            let initialDistance = 0;
            let initialScale = zoomConfig.scale;

svg.addEventListener('touchstart', (e) => {
                if (e.touches.length === 2) {
                    e.preventDefault();
                    initialDistance = getTouchDistance(e.touches);
                    initialScale = zoomConfig.scale;
                }
            });

svg.addEventListener('touchmove', (e) => {
                if (e.touches.length === 2) {
                    e.preventDefault();
                    const currentDistance = getTouchDistance(e.touches);
                    const scaleFactor = currentDistance / initialDistance;
                    
                    zoomConfig.scale = Math.min(
                        Math.max(
                            initialScale * scaleFactor,
                            zoomConfig.minScale
                        ),
                        zoomConfig.maxScale
                    );
                    
                    svg.style.transform = `scale(${zoomConfig.scale})`;
                }
            });
        }

// Função auxiliar para calcular a distância entre dois toques
        function getTouchDistance(touches) {
            return Math.hypot(
                touches[0].pageX - touches[1].pageX,
                touches[0].pageY - touches[1].pageY
            );
        }

// Inicialização
        document.addEventListener('DOMContentLoaded', () => {
            setupWheelZoom();
            setupTouchZoom();
        });
    </script>
</body>
</html>