HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
283x351
26.5 KB
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

Open in browser
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Funções Harmônicas - Visualização</title>
    <script src="https://cdn.plot.ly/plotly-2.27.1.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 30px;
        }
        .graph-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .graph-card {
            background: white;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .graph-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #444;
            text-align: center;
        }
        .graph-description {
            font-size: 14px;
            color: #666;
            margin-top: 10px;
            text-align: center;
        }
        .graph {
            width: 100%;
            height: 350px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>📊 Visualização de Funções Harmônicas</h1>
        <div class="subtitle">
            Funções que satisfazem a equação de Laplace: ∇²f = 0
        </div>
        
        <div class="graph-container">
            <!-- Gráfico 1: Função Harmônica 2D - Potencial de Carga Pontual -->
            <div class="graph-card">
                <div class="graph-title">⚡ 1. Potencial de Carga Pontual (1/r)</div>
                <div id="graph1" class="graph"></div>
                <div class="graph-description">
                    f(x,y) = 1/√(x² + y² + 0.1)<br>
                    Potencial eletrostático de uma carga pontual (harmônica em 3D)
                </div>
            </div>

            <!-- Gráfico 2: Função Harmônica 2D - Solução Fundamental -->
            <div class="graph-card">
                <div class="graph-title">🌊 2. Logaritmo (solução fundamental 2D)</div>
                <div id="graph2" class="graph"></div>
                <div class="graph-description">
                    f(x,y) = ln(√(x² + y²) + 0.1)<br>
                    Solução fundamental da equação de Laplace em 2D
                </div>
            </div>

            <!-- Gráfico 3: Função Harmônica 2D - Harmônico Cilíndrico -->
            <div class="graph-card">
                <div class="graph-title">🌀 3. Harmônico Cilíndrico (r²cos(2θ))</div>
                <div id="graph3" class="graph"></div>
                <div class="graph-description">
                    f(x,y) = (x² - y²)/(x² + y² + 0.1)<br>
                    Modo angular de onda em guia cilíndrico
                </div>
            </div>
        </div>
    </div>

    <script>
        // Função para criar o gráfico 1: Potencial de carga pontual (1/r)
        function createGraph1() {
            const size = 50;
            const x = [];
            const y = [];
            const z = [];

            // Criar malha de pontos
            for (let i = 0; i < size; i++) {
                const xi = -3 + (i * 6 / size);
                x[i] = xi;
                y[i] = xi;
                z[i] = [];
                for (let j = 0; j < size; j++) {
                    const yj = -3 + (j * 6 / size);
                    // f(x,y) = 1/√(x² + y² + ε) (ε pequeno para evitar singularidade)
                    const r = Math.sqrt(xi*xi + yj*yj + 0.1);
                    z[i][j] = 1 / r;
                }
            }

            const data = [{
                z: z,
                x: x,
                y: y,
                type: 'surface',
                colorscale: 'Viridis',
                showscale: true,
                contours: {
                    z: {
                        show: true,
                        usecolormap: true,
                        highlightcolor: "limegreen",
                        project: { z: true }
                    }
                }
            }];

            const layout = {
                scene: {
                    xaxis: { title: 'x' },
                    yaxis: { title: 'y' },
                    zaxis: { title: 'f(x,y)' },
                    camera: {
                        eye: { x: 1.5, y: 1.5, z: 1.2 }
                    }
                },
                margin: { l: 0, r: 0, b: 0, t: 0 },
                paper_bgcolor: 'white',
                plot_bgcolor: 'white'
            };

            Plotly.newPlot('graph1', data, layout, {displayModeBar: false, responsive: true});
        }

        // Função para criar o gráfico 2: Logaritmo (solução fundamental 2D)
        function createGraph2() {
            const size = 50;
            const x = [];
            const y = [];
            const z = [];

            for (let i = 0; i < size; i++) {
                const xi = -3 + (i * 6 / size);
                x[i] = xi;
                y[i] = xi;
                z[i] = [];
                for (let j = 0; j < size; j++) {
                    const yj = -3 + (j * 6 / size);
                    // f(x,y) = ln(√(x² + y²) + ε)
                    const r = Math.sqrt(xi*xi + yj*yj + 0.1);
                    z[i][j] = Math.log(r);
                }
            }

            const data = [{
                z: z,
                x: x,
                y: y,
                type: 'surface',
                colorscale: 'Plasma',
                showscale: true,
                contours: {
                    z: {
                        show: true,
                        usecolormap: true,
                        project: { z: true }
                    }
                }
            }];

            const layout = {
                scene: {
                    xaxis: { title: 'x' },
                    yaxis: { title: 'y' },
                    zaxis: { title: 'f(x,y)' },
                    camera: {
                        eye: { x: 1.5, y: 1.5, z: 1.2 }
                    }
                },
                margin: { l: 0, r: 0, b: 0, t: 0 },
                paper_bgcolor: 'white',
                plot_bgcolor: 'white'
            };

            Plotly.newPlot('graph2', data, layout, {displayModeBar: false, responsive: true});
        }

        // Função para criar o gráfico 3: Harmônico Cilíndrico (r²cos(2θ))
        function createGraph3() {
            const size = 50;
            const x = [];
            const y = [];
            const z = [];

            for (let i = 0; i < size; i++) {
                const xi = -3 + (i * 6 / size);
                x[i] = xi;
                y[i] = xi;
                z[i] = [];
                for (let j = 0; j < size; j++) {
                    const yj = -3 + (j * 6 / size);
                    // f(x,y) = (x² - y²)/(x² + y² + ε)  (harmônico cilíndrico)
                    const r2 = xi*xi + yj*yj + 0.1;
                    z[i][j] = (xi*xi - yj*yj) / r2;
                }
            }

            const data = [{
                z: z,
                x: x,
                y: y,
                type: 'surface',
                colorscale: 'RdBu',
                showscale: true,
                contours: {
                    z: {
                        show: true,
                        usecolormap: true,
                        project: { z: true }
                    }
                }
            }];

            const layout = {
                scene: {
                    xaxis: { title: 'x' },
                    yaxis: { title: 'y' },
                    zaxis: { title: 'f(x,y)' },
                    camera: {
                        eye: { x: 1.5, y: 1.5, z: 1.2 }
                    }
                },
                margin: { l: 0, r: 0, b: 0, t: 0 },
                paper_bgcolor: 'white',
                plot_bgcolor: 'white'
            };

            Plotly.newPlot('graph3', data, layout, {displayModeBar: false, responsive: true});
        }

        // Carregar todos os gráficos quando a página estiver pronta
        window.onload = function() {
            createGraph1();
            createGraph2();
            createGraph3();

            // Ajustar tamanho quando a janela for redimensionada
            window.addEventListener('resize', function() {
                Plotly.relayout('graph1', {});
                Plotly.relayout('graph2', {});
                Plotly.relayout('graph3', {});
            });
        };
    </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
1074KB
Transfer Size
3524KB
Content Size
2,707.0ms
Dom Content Loaded
12,108.0ms
First Paint
2,708.0ms
Load Time
Domain Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests
Timings (ms)
Total Time
Content Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests