Spaces:

ID221183
/

nebulosa-c-smica-interativa

Running

App Files Files Community

ID221183 commited on Oct 21

Commit

b5c0f10

verified ·

1 Parent(s): 47bc3bf

Olá! Claro, aqui está uma descrição da aplicação que criámos.

Browse files

Esta é uma **simulação de uma nebulosa de partículas 3D interativa**, construída com a biblioteca `three.js`. O objetivo é criar uma experiência visualmente imersiva e personalizável de exploração espacial.

As suas principais características são:

* **Visualização 3D:** A aplicação renderiza uma nebulosa composta por dezenas de milhares de partículas. Estas partículas estão distribuídas em várias camadas e têm cores diferentes, o que cria uma forte sensação de profundidade e volume. Um efeito de "brilho" (bloom) é aplicado para dar um aspeto mais etéreo e luminoso à cena.

* **Interatividade Múltipla:** A nebulosa reage a várias ações do utilizador em tempo real:
* **Navegação da Câmara:** Pode usar o rato para rodar, aproximar/afastar o zoom e mover a câmara, explorando a nebulosa de qualquer ângulo. As partículas reagem à proximidade da câmara, sendo suavemente afastadas.
* **Reatividade ao Áudio:** Ao clicar em "Ativar Áudio", a aplicação utiliza o microfone para analisar a sua voz ou o som ambiente. As partículas pulsam e mudam de cor em sintonia com a intensidade e as frequências graves do som.
* **Interação por Clique:** Clicar em qualquer ponto do espaço cria uma onda de choque visual que se propaga pela nebulosa, perturbando as partículas.

* **Painel de Configurações Avançado:** Ao clicar no ícone de engrenagem, abre-se um painel de controlo com várias opções, organizadas por abas:
* **Visual:** Permite ajustar a força da interação, o tamanho geral das partículas e a intensidade do efeito de brilho.
* **Áudio:** Contém um slider para ajustar a sensibilidade da nebulosa ao som.
* **Câmara:** Oferece um botão para repor a câmara na sua posição inicial.

Em suma, é uma peça de arte digital interativa que combina gráficos 3D, som e interação do utilizador para criar uma experiência cósmica relaxante e visualmente cativante.

Files changed (2) hide show

README.md +9 -5
index.html +806 -18

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Nebulosa C Smica Interativa
-emoji: 🏃
-colorFrom: purple
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Nebulosa Cósmica Interativa ✨
+colorFrom: yellow
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,807 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="pt">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nebulosa Cósmica Interativa ✨</title>
+<style>
+        :root {
+            --glow-sens: 30;
+            --card-bg: linear-gradient(8deg, #140426 75%, color-mix(in hsl, #140426, white 2.5%) 75.5%);
+            --blend: soft-light;
+            --glow-blend: plus-lighter;
+            --glow-color: 268deg 100% 76%;
+            --glow-boost: 0%;
+            --fg: white;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        html, body {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            background-color: #020108; /* Cor de fundo para evitar piscar em branco */
+            font-family: 'Inter', sans-serif;
+            color: var(--fg);
+        }
+        #container {
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at 50% 50%,
+                #1a0632 0%,
+                #140426 25%,
+                #0c021a 50%,
+                #06020e 75%,
+                #020108 100%
+            );
+        }
+        canvas {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+        .glow-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            background: radial-gradient(circle at 50% 50%,
+                rgba(120, 50, 255, 0.05) 0%,
+                rgba(80, 40, 200, 0.03) 40%,
+                transparent 70%);
+            mix-blend-mode: screen;
+        }
+        #audio-controls {
+            position: fixed;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 10;
+            text-align: center;
+        }
+        #startButton {
+            background-color: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            color: white;
+            padding: 12px 24px;
+            font-size: 16px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background-color 0.3s, transform 0.2s;
+            backdrop-filter: blur(5px);
+            font-weight: 500;
+            letter-spacing: 0.5px;
+        }
+        #startButton:hover {
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+        #startButton:active {
+            transform: scale(0.95);
+        }
+        .title-container {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            z-index: 10;
+            text-align: left;
+        }
+        .main-title {
+            font-size: 2.5rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #c299ff 0%, #a855f7 50%, #7e22ce 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            margin-bottom: 5px;
+            text-shadow: 0 0 30px rgba(124, 58, 237, 0.5);
+        }
+        .subtitle {
+            font-size: 1rem;
+            color: rgba(255, 255, 255, 0.8);
+            font-weight: 300;
+            letter-spacing: 1px;
+        }
+#settings-container {
+            position: fixed;
+            bottom: 20px;
+            left: 20px;
+            z-index: 20;
+        }
+        #settingsButton {
+            background-color: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            color: white;
+            width: 48px;
+            height: 48px;
+            padding: 10px;
+            border-radius: 50%;
+            cursor: pointer;
+            transition: background-color 0.3s, transform 0.2s;
+            backdrop-filter: blur(5px);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        #settingsButton:hover {
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+        #settingsButton:active {
+            transform: scale(0.95);
+        }
+        #settingsButton svg {
+            width: 24px;
+            height: 24px;
+            fill: currentColor;
+        }
+        /* Estilos do Popup */
+        .popup-overlay {
+            position: fixed;
+            inset: 0;
+            background-color: rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(10px);
+            z-index: 100;
+            display: grid;
+            place-items: center;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+        }
+        .popup-overlay.visible {
+            opacity: 1;
+            pointer-events: auto;
+        }
+        .card {
+            --pads: 20px;
+            --color-sens: calc(var(--glow-sens) + 20);
+            --pointer-°: 45deg;
+            position: relative;
+            width: clamp(320px, 90vw, 500px);
+            max-height: 90vh;
+            border-radius: 1.768em;
+            isolation: isolate;
+            transform: translate3d(0, 0, 0.01px);
+            display: grid;
+            border: 1px solid rgb(255 255 255 / 25%);
+            background: var(--card-bg);
+            background-repeat: no-repeat;
+            box-shadow: rgba(0, 0, 0, 0.1) 0px 32px 64px, rgba(0, 0, 0, 0.1) 0px 16px 32px, rgba(0, 0, 0, 0.1) 0px 8px 16px, rgba(0, 0, 0, 0.1) 0px 4px 8px, rgba(0, 0, 0, 0.1) 0px 2px 4px, rgba(0, 0, 0, 0.1) 0px 1px 2px;
+        }
+        .card::before, .card::after, .card > .glow {
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            transition: opacity 0.25s ease-out;
+            z-index: -1;
+        }
+        .card:not(:hover):not(.animating) .glow,
+        .card:not(:hover):not(.animating)::before,
+        .card:not(:hover):not(.animating)::after {
+            opacity: 0;
+            transition: opacity 0.75s ease-in-out;
+        }
+        .card::before {
+            border: 1px solid transparent;
+            background: linear-gradient(var(--card-bg) 0 100%) padding-box, linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box, radial-gradient(at 80% 55%, hsla(268,100%,76%,1) 0px, transparent 50%) border-box, radial-gradient(at 69% 34%, hsla(349,100%,74%,1) 0px, transparent 50%) border-box, radial-gradient(at 8% 6%, hsla(136,100%,78%,1) 0px, transparent 50%) border-box, radial-gradient(at 41% 38%, hsla(192,100%,64%,1) 0px, transparent 50%) border-box, radial-gradient(at 86% 85%, hsla(186,100%,74%,1) 0px, transparent 50%) border-box, radial-gradient(at 82% 18%, hsla(52,100%,65%,1) 0px, transparent 50%) border-box, radial-gradient(at 51% 4%, hsla(12,100%,72%,1) 0px, transparent 50%) border-box, linear-gradient(#c299ff 0 100%) border-box;
+            opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));
+            mask-image: conic-gradient(from var(--pointer-°) at center, black 25%, transparent 40%, transparent 60%, black 75%);
+        }
+        .card > .glow {
+            --outset: 20px;
+            inset: calc(var(--outset) * -1);
+            pointer-events: none;
+            z-index: 1;
+            mask-image: conic-gradient(from var(--pointer-°) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
+            opacity: calc((var(--pointer-d) - var(--glow-sens)) / (100 - var(--glow-sens)));
+            mix-blend-mode: var(--glow-blend);
+        }
+        .card > .glow::before {
+            content: "";
+            position: absolute;
+            inset: var(--outset);
+            border-radius: inherit;
+            box-shadow: inset 0 0 0 1px hsl(var(--glow-color) / 100%), inset 0 0 1px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 60%)), inset 0 0 3px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 50%)), inset 0 0 6px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 40%)), inset 0 0 15px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 30%)), inset 0 0 25px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 20%)), inset 0 0 50px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 10%)), 0 0 1px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 60%)), 0 0 3px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 50%)), 0 0 6px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 40%)), 0 0 15px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 30%)), 0 0 25px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 20%)), 0 0 50px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 10%));
+        }
+        .card .inner {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            position: relative;
+            overflow: hidden;
+            z-index: 2;
+            padding: 24px;
+        }
+        .card header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            flex-shrink: 0;
+        }
+        .card h2 {
+            color: inherit;
+            font-weight: 500;
+            font-size: 1.25em;
+        }
+        .card .close-button {
+            background: none;
+            border: none;
+            color: white;
+            font-size: 24px;
+            cursor: pointer;
+            opacity: 0.7;
+            transition: opacity 0.2s;
+        }
+        .card .close-button:hover {
+            opacity: 1;
+        }
+        .tabs {
+            display: flex;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+            margin-bottom: 20px;
+        }
+        .tabs button {
+            background: none;
+            border: none;
+            color: rgba(255, 255, 255, 0.6);
+            padding: 10px 15px;
+            cursor: pointer;
+            font-size: 14px;
+            border-bottom: 2px solid transparent;
+            transition: color 0.2s, border-color 0.2s;
+        }
+        .tabs button:hover {
+            color: white;
+        }
+        .tabs button.active {
+            color: white;
+            border-bottom-color: #c299ff;
+        }
+        .panels > .panel {
+            display: none;
+        }
+        .panels > .panel.active {
+            display: block;
+        }
+        .panel {
+            padding-block: 10px;
+            width: 100%;
+        }
+        .panel label {
+            display: block;
+            margin-bottom: 5px;
+            font-size: 14px;
+        }
+        .panel div {
+            margin-bottom: 15px;
+        }
+        .panel input[type="range"] {
+            width: 100%;
+            cursor: pointer;
+        }
+        .panel button {
+             background-color: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            color: white;
+            padding: 8px 16px;
+            font-size: 14px;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        .panel button:hover {
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+    </style>
+</head>
+<body>
+    <!-- O contêiner para a renderização do Three.js -->
+    <div id="container"></div>
+    <!-- Uma sobreposição para um efeito de brilho sutil -->
+    <div class="glow-overlay"></div>
+    <!-- Título e Subtítulo -->
+    <div class="title-container">
+        <h1 class="main-title">Nebulosa Cósmica</h1>
+        <p class="subtitle">Uma Experiência Visual Interativa</p>
+    </div>
+    <!-- Controles de áudio -->
+    <div id="audio-controls">
+        <button id="startButton">🎤 Ativar Áudio</button>
+    </div>
+<!-- Botão de Configurações -->
+    <div id="settings-container">
+        <button id="settingsButton" aria-label="Configurações">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px">
+                <path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/>
+            </svg>
+        </button>
+    </div>
+    <!-- Popup/Modal de Configurações -->
+    <div id="settings-popup" class="popup-overlay">
+        <div class="card">
+            <span class="glow"></span>
+            <div class="inner">
+                <header>
+                    <h2>Configurações</h2>
+                    <button class="close-button" id="close-popup-button">&times;</button>
+                </header>
+                <div class="tabs">
+                    <button data-tab="visuals-panel" class="active">🎨 Visual</button>
+                    <button data-tab="audio-panel">🎵 Áudio</button>
+                    <button data-tab="camera-panel">📷 Câmara</button>
+                </div>
+<div class="panels">
+                    <div id="visuals-panel" class="panel active">
+                        <div>
+                            <label for="interactionStrength">🌟 Força da Interação</label>
+                            <input type="range" id="interactionStrength" min="0" max="0.5" step="0.01" value="0.1">
+                        </div>
+                        <div>
+                            <label for="particleSize">⚡ Tamanho das Partículas</input>
+                            <input type="range" id="particleSize" min="0.1" max="1.0" step="0.05" value="0.3">
+                        </div>
+                         <div>
+                            <label for="bloomStrength">✨ Intensidade do Brilho</label>
+                            <input type="range" id="bloomStrength" min="0" max="3" step="0.1" value="1.2">
+                        </div>
+                    </div>
+                    <div id="audio-panel" class="panel">
+                        <div>
+                            <label for="audioSensitivity">🎚️ Sensibilidade do Áudio</label>
+                            <input type="range" id="audioSensitivity" min="0.1" max="2.0" step="0.1" value="1.0">
+                        </div>
+                        <div>
+                            <label for="bassBoost">🔊 Reforço de Graves</label>
+                            <input type="range" id="bassBoost" min="0.5" max="3.0" step="0.1" value="1.0">
+                        </div>
+                    </div>
+                    <div id="camera-panel" class="panel">
+                         <div>
+                            <label for="resetCameraButton">🎯 Controlo da Câmara</label>
+                            <button id="resetCameraButton">🔄 Repor Posição</button>
+                        </div>
+                        <div>
+                            <label for="cameraSensitivity">🎮 Sensibilidade da Câmara</label>
+                            <input type="range" id="cameraSensitivity" min="0.1" max="2.0" step="0.1" value="1.0">
+                        </div>
+                    </div>
+</div>
+            </div>
+        </div>
+    </div>
+    <!-- Import Map para gerenciar as dependências do Three.js -->
+    <script type="importmap">
+    {
+        "imports": {
+            "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
+            "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
+        }
+    }
+    </script>
+    <!-- O script principal da aplicação -->
+    <script type="module">
+        //================================================================================
+        // SECÇÃO 1: IMPORTAÇÕES E VARIÁVEIS GLOBAIS
+        //================================================================================
+        // Importa os módulos necessários do Three.js
+        import * as THREE from 'three';
+        import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+        import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+        import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
+        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+        // --- Variáveis da Cena Principal ---
+        let scene, camera, renderer, composer, controls, bloomPass;
+        let particleLayers = []; // Array para armazenar as camadas de partículas
+        let time = 0; // Contador de tempo para animações
+        let ripples = []; // Array para armazenar os efeitos de ondulação do clique
+        const interactionRadius = 40; // Raio de interação da câmara com as partículas
+        // --- Variáveis de Configuração (Controladas pelo Painel) ---
+        let interactionStrength = 0.1;
+        let baseParticleSize = 0.3;
+        let audioSensitivity = 1.0;
+        let bassBoost = 1.0;
+        let cameraSensitivity = 1.0;
+// --- Variáveis de Áudio ---
+        let audioContext, analyser, dataArray;
+        let audioInitialized = false; // Flag para verificar se o áudio foi iniciado
+        // --- Configuração das Camadas de Partículas ---
+        // Define as propriedades de cada camada da nebulosa
+        const layersConfig = [
+            { count: 20000, baseSize: 0.3, colorRange: { hue: [0.75, 0.9], sat: [0.7, 1], light: [0.5, 0.7] }, rotationSpeed: 0.001 },
+            { count: 25000, baseSize: 0.2, colorRange: { hue: [0.45, 0.6], sat: [0.6, 0.8], light: [0.4, 0.6] }, rotationSpeed: 0.0005 }
+        ];
+//================================================================================
+        // SECÇÃO 2: FUNÇÕES DE CRIAÇÃO E INICIALIZAÇÃO
+        //================================================================================
+        /**
+         * Cria um sistema de partículas (uma camada da nebulosa).
+         * @param {object} config - Objeto de configuração para a camada de partículas.
+         * @returns {THREE.Points} - O objeto THREE.Points que representa o sistema de partículas.
+         */
+        function createParticleSystem(config) {
+            const geometry = new THREE.BufferGeometry();
+            const positions = new Float32Array(config.count * 3);
+            const colors = new Float32Array(config.count * 3);
+            const basePositions = new Float32Array(config.count * 3);
+            const baseColors = new Float32Array(config.count * 3);
+            for (let i = 0; i < config.count; i++) {
+                const i3 = i * 3;
+                // Posiciona as partículas numa distribuição esférica
+                const radius = 25 + Math.random() * 30;
+                const theta = Math.random() * Math.PI * 2;
+                const phi = Math.acos(2 * Math.random() - 1);
+                const x = radius * Math.sin(phi) * Math.cos(theta);
+                const y = radius * Math.sin(phi) * Math.sin(theta);
+                const z = radius * Math.cos(phi);
+                positions[i3] = x; positions[i3 + 1] = y; positions[i3 + 2] = z;
+                basePositions[i3] = x; basePositions[i3 + 1] = y; basePositions[i3 + 2] = z;
+                // Define a cor com base na distância ao centro
+                const dist = Math.sqrt(x * x + y * y + z * z) / 55;
+                const hue = THREE.MathUtils.lerp(config.colorRange.hue[0], config.colorRange.hue[1], dist);
+                const sat = THREE.MathUtils.lerp(config.colorRange.sat[0], config.colorRange.sat[1], dist);
+                const light = THREE.MathUtils.lerp(config.colorRange.light[0], config.colorRange.light[1], dist);
+                const color = new THREE.Color().setHSL(hue, sat, light);
+                colors[i3] = color.r; colors[i3 + 1] = color.g; colors[i3 + 2] = color.b;
+                baseColors[i3] = color.r; baseColors[i3 + 1] = color.g; baseColors[i3 + 2] = color.b;
+            }
+            geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+            geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+            // Define o material das partículas
+            const material = new THREE.PointsMaterial({
+                size: config.baseSize,
+                vertexColors: true,
+                transparent: true,
+                opacity: 0.8,
+                blending: THREE.AdditiveBlending,
+                depthWrite: false,
+                sizeAttenuation: true
+            });
+            const points = new THREE.Points(geometry, material);
+            // Armazena dados adicionais para a animação
+            points.userData = {
+                velocities: new Float32Array(config.count * 3).fill(0),
+                basePositions,
+                baseColors,
+                colorVelocities: new Float32Array(config.count * 3).fill(0),
+                rotationSpeed: config.rotationSpeed,
+                baseSize: config.baseSize
+            };
+            return points;
+        }
+        /**
+         * Cria um efeito de ondulação (ripple) na posição especificada, usado no clique.
+         * @param {number} x - A coordenada x da ondulação.
+         * @param {number} y - A coordenada y da ondulação.
+         */
+        function createRipple(x, y) {
+            ripples.push({ x, y, radius: 0, strength: 2.5, maxRadius: interactionRadius * 4, speed: 4, color: new THREE.Color(0xffffff) });
+        }
+        /**
+         * Inicializa o Web Audio API para capturar o áudio do microfone.
+         */
+        function initAudio() {
+            const startButton = document.getElementById('startButton');
+            navigator.mediaDevices.getUserMedia({ audio: true })
+                .then(function(stream) {
+                    audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                    analyser = audioContext.createAnalyser();
+                    const source = audioContext.createMediaStreamSource(stream);
+                    source.connect(analyser);
+                    analyser.fftSize = 256;
+                    dataArray = new Uint8Array(analyser.frequencyBinCount);
+                    audioInitialized = true;
+                    startButton.textContent = '🎤 Áudio Ativo';
+startButton.style.backgroundColor = 'rgba(40, 200, 120, 0.3)';
+                    startButton.disabled = true;
+                }).catch(err => {
+                    console.error('Erro ao acessar o microfone', err);
+                    startButton.textContent = '❌ Erro de Áudio';
+});
+        }
+        /**
+         * Função principal de inicialização da cena, controlos e eventos.
+         */
+        function init() {
+            // Configuração básica da cena Three.js
+            const container = document.getElementById('container');
+            scene = new THREE.Scene();
+            scene.fog = new THREE.FogExp2(0x020108, 0.008);
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.z = 100;
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setPixelRatio(window.devicePixelRatio);
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.setClearColor(0x020108);
+            container.appendChild(renderer.domElement);
+            // Configuração dos controlos de órbita
+            controls = new OrbitControls(camera, renderer.domElement);
+            controls.enableDamping = true;
+            controls.dampingFactor = 0.05;
+            controls.screenSpacePanning = false;
+            controls.minDistance = 20;
+            controls.maxDistance = 150;
+// Configuração do pós-processamento (efeito de brilho)
+            const renderScene = new RenderPass(scene, camera);
+            bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
+            bloomPass.threshold = 0;
+            bloomPass.strength = 1.2;
+            bloomPass.radius = 0.5;
+            composer = new EffectComposer(renderer);
+            composer.addPass(renderScene);
+            composer.addPass(bloomPass);
+            // Cria e adiciona as camadas de partículas à cena
+            layersConfig.forEach(config => {
+                const particles = createParticleSystem(config);
+                particleLayers.push(particles);
+                scene.add(particles);
+            });
+            // --- Configuração dos Event Listeners ---
+            document.getElementById('startButton').addEventListener('click', initAudio);
+            document.addEventListener('click', onClick);
+            window.addEventListener('resize', onWindowResize);
+            // Lógica do Popup e das Abas
+            setupSettingsPanel();
+        }
+        /**
+         * Configura toda a lógica do painel de configurações, incluindo popup, abas e sliders.
+         */
+        function setupSettingsPanel(){
+            const settingsButton = document.getElementById('settingsButton');
+            const settingsPopup = document.getElementById('settings-popup');
+            const closePopupButton = document.getElementById('close-popup-button');
+            const card = settingsPopup.querySelector('.card');
+            const tabs = settingsPopup.querySelectorAll('.tabs button');
+            const panels = settingsPopup.querySelectorAll('.panels .panel');
+            // Abrir e fechar o popup
+            settingsButton.addEventListener('click', () => settingsPopup.classList.add('visible'));
+            closePopupButton.addEventListener('click', () => settingsPopup.classList.remove('visible'));
+            settingsPopup.addEventListener('click', (e) => {
+                if (e.target === settingsPopup) settingsPopup.classList.remove('visible');
+            });
+            // Lógica de navegação das abas
+            tabs.forEach(tab => {
+                tab.addEventListener('click', () => {
+                    tabs.forEach(item => item.classList.remove('active'));
+                    panels.forEach(panel => panel.classList.remove('active'));
+                    tab.classList.add('active');
+                    document.getElementById(tab.dataset.tab).classList.add('active');
+                });
+            });
+            // Lógica do brilho do cartão (efeito visual)
+            card.addEventListener("pointermove", (e) => {
+                const rect = card.getBoundingClientRect();
+                const x = e.clientX - rect.left, y = e.clientY - rect.top;
+                const width = card.offsetWidth, height = card.offsetHeight;
+                const px = (x / width) * 100, py = (y / height) * 100;
+                const dx = x - width / 2, dy = y - height / 2;
+                const angle = Math.atan2(dy, dx) * (180 / Math.PI) + 90;
+                let k_x = dx !== 0 ? (width / 2) / Math.abs(dx) : Infinity;
+                let k_y = dy !== 0 ? (height / 2) / Math.abs(dy) : Infinity;
+                const edge = Math.min(Math.max(1 / Math.min(k_x, k_y), 0), 1) * 100;
+                card.style.setProperty('--pointer-°', `${angle.toFixed(3)}deg`);
+                card.style.setProperty('--pointer-d', `${edge.toFixed(3)}`);
+            });
+            // Listeners dos Sliders e Botões de controlo
+            document.getElementById('interactionStrength').addEventListener('input', e => interactionStrength = parseFloat(e.target.value));
+            document.getElementById('particleSize').addEventListener('input', e => {
+                baseParticleSize = parseFloat(e.target.value);
+                particleLayers.forEach(layer => layer.material.size = layer.userData.baseSize * baseParticleSize);
+            });
+            document.getElementById('bloomStrength').addEventListener('input', e => bloomPass.strength = parseFloat(e.target.value));
+            document.getElementById('audioSensitivity').addEventListener('input', e => audioSensitivity = parseFloat(e.target.value));
+            document.getElementById('bassBoost').addEventListener('input', e => bassBoost = parseFloat(e.target.value));
+            document.getElementById('cameraSensitivity').addEventListener('input', e => {
+                cameraSensitivity = parseFloat(e.target.value);
+                controls.rotateSpeed = 1.0 * cameraSensitivity;
+                controls.panSpeed = 1.0 * cameraSensitivity;
+            });
+            document.getElementById('resetCameraButton').addEventListener('click', () => {
+                controls.reset();
+                camera.position.z = 100;
+            });
+}
+        //================================================================================
+        // SECÇÃO 3: LÓGICA DE ANIMAÇÃO E ATUALIZAÇÃO
+        //================================================================================
+        /**
+         * Atualiza a posição e cor de cada partícula em cada frame.
+         */
+        function updateParticles() {
+            let overallVolume = 0, bassLevel = 0;
+            // Analisa o áudio se estiver inicializado
+            if (audioInitialized) {
+                analyser.getByteFrequencyData(dataArray);
+                let total = 0;
+                for (let i = 0; i < dataArray.length; i++) total += dataArray[i];
+                overallVolume = total / dataArray.length;
+                let bassTotal = 0;
+                const bassEnd = dataArray.length * 0.2; // Frequências graves
+                for (let i = 0; i < bassEnd; i++) bassTotal += dataArray[i];
+                bassLevel = (bassTotal / bassEnd) / 255;
+            }
+            // Atualiza as ondulações ativas
+            ripples = ripples.filter(r => (r.radius += r.speed) < r.maxRadius && (r.strength *= 0.96));
+            // Itera sobre cada camada de partículas
+            particleLayers.forEach(layer => {
+                const { position, color } = layer.geometry.attributes;
+                const { velocities, basePositions, baseColors, colorVelocities, baseSize } = layer.userData;
+            // Atualiza o tamanho das partículas com base no grave do áudio
+            layer.material.size = (baseSize * baseParticleSize) + (bassLevel * 0.5 * audioSensitivity * bassBoost);
+// Itera sobre cada partícula na camada
+                for (let i = 0; i < position.count; i++) {
+                    const i3 = i * 3;
+                    const currentPos = new THREE.Vector3(position.array[i3], position.array[i3 + 1], position.array[i3 + 2]);
+                    let totalForce = new THREE.Vector3();
+                    let colorShift = new THREE.Vector3();
+                    // 1. Força de interação com a câmara
+                    const cameraDist = camera.position.distanceTo(currentPos);
+                    if (cameraDist < interactionRadius) {
+                        const forceStrength = (1 - cameraDist / interactionRadius) * interactionStrength;
+                        const forceDirection = currentPos.clone().sub(camera.position).normalize();
+                        totalForce.add(forceDirection.multiplyScalar(forceStrength));
+                        const colorIntensity = (1 - cameraDist / interactionRadius) * 0.8;
+                        colorShift.set(colorIntensity, colorIntensity, colorIntensity);
+                    }
+                    // 2. Força de interação com o áudio
+                    if (audioInitialized && overallVolume > 1) {
+                            const audioForceStrength = (overallVolume / 255.0) * 0.4 * audioSensitivity;
+                            totalForce.add(currentPos.clone().normalize().multiplyScalar(audioForceStrength));
+                            if (bassLevel > 0.1) colorShift.x += bassLevel * 0.5 * audioSensitivity * bassBoost;
+                        }
+// 3. Força de interação com as ondulações do clique
+                    ripples.forEach(ripple => {
+                        const rippleDist = Math.hypot(ripple.x - currentPos.x, ripple.y - currentPos.y);
+                        const rippleWidth = 15;
+                        if (Math.abs(rippleDist - ripple.radius) < rippleWidth) {
+                            const falloff = 1 - Math.abs(rippleDist - ripple.radius) / rippleWidth;
+                            const rippleForce = ripple.strength * falloff * 0.1;
+                            const forceDirection = currentPos.clone().sub(new THREE.Vector3(ripple.x, ripple.y, currentPos.z)).normalize();
+                            totalForce.add(forceDirection.multiplyScalar(rippleForce));
+                            colorShift.add(new THREE.Vector3(ripple.color.r, ripple.color.g, ripple.color.b).multiplyScalar(falloff * ripple.strength));
+                        }
+                    });
+                    // 4. Força de retorno à posição original e amortecimento (damping)
+                    velocities[i3] += totalForce.x + (basePositions[i3] - currentPos.x) * 0.02;
+                    velocities[i3 + 1] += totalForce.y + (basePositions[i3 + 1] - currentPos.y) * 0.02;
+                    velocities[i3 + 2] += totalForce.z + (basePositions[i3 + 2] - currentPos.z) * 0.02;
+                    velocities[i3] *= 0.94; velocities[i3 + 1] *= 0.94; velocities[i3 + 2] *= 0.94;
+                    // Atualiza a posição
+                    position.array[i3] += velocities[i3];
+                    position.array[i3 + 1] += velocities[i3 + 1];
+                    position.array[i3 + 2] += velocities[i3 + 2];
+                    // Atualiza a cor (lógica semelhante à da posição)
+                    colorVelocities[i3] += colorShift.x + (baseColors[i3] - color.array[i3]) * 0.05;
+                    colorVelocities[i3 + 1] += colorShift.y + (baseColors[i3 + 1] - color.array[i3 + 1]) * 0.05;
+                    colorVelocities[i3 + 2] += colorShift.z + (baseColors[i3 + 2] - color.array[i3 + 2]) * 0.05;
+                    colorVelocities[i3] *= 0.9; colorVelocities[i3 + 1] *= 0.9; colorVelocities[i3 + 2] *= 0.9;
+                    color.array[i3] += colorVelocities[i3];
+                    color.array[i3 + 1] += colorVelocities[i3 + 1];
+                    color.array[i3 + 2] += colorVelocities[i3 + 2];
+                }
+                // Informa o Three.js que os atributos foram atualizados
+                position.needsUpdate = true;
+                color.needsUpdate = true;
+            });
+        }
+        /**
+         * O loop principal de animação, chamado a cada frame.
+         */
+        function animate() {
+            requestAnimationFrame(animate);
+            time += 0.01;
+            controls.update(); // Atualiza os controlos de órbita
+            updateParticles(); // Atualiza as partículas
+            // Animação de rotação base das camadas
+            particleLayers.forEach(layer => {
+                layer.rotation.y += layer.userData.rotationSpeed;
+                layer.rotation.x = Math.sin(time * 0.1) * 0.05;
+            });
+            // Renderiza a cena através do composer para aplicar o pós-processamento
+            composer.render();
+        }
+        //================================================================================
+        // SECÇÃO 4: FUNÇÕES DE EVENTOS DE UTILIZADOR
+        //================================================================================
+        /**
+         * Adiciona um efeito de ondulação ao clicar no ecrã.
+         * @param {MouseEvent} event - O objeto do evento de clique.
+         */
+        function onClick(event) {
+            // Ignora cliques em botões ou no painel de configurações
+            if (event.target.closest('button') || event.target.closest('.card')) return;
+            // Converte as coordenadas do clique do ecrã para coordenadas 3D do mundo
+            const clickMouse = new THREE.Vector2((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1);
+            const vector = new THREE.Vector3(clickMouse.x, clickMouse.y, 0.5);
+            vector.unproject(camera);
+            const dir = vector.sub(camera.position).normalize();
+            const distance = -camera.position.z / dir.z;
+            const pos = camera.position.clone().add(dir.multiplyScalar(distance));
+            createRipple(pos.x, pos.y);
+        }
+        /**
+         * Lida com o redimensionamento da janela do navegador.
+         */
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            composer.setSize(window.innerWidth, window.innerHeight);
+        }
+        //================================================================================
+        // SECÇÃO 5: INICIALIZAÇÃO DA APLICAÇÃO
+        //================================================================================
+        init();
+        animate();
+    </script>
+<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
+</body>
 </html>