Neural Colored Simulation

AI Overview: Neural Colored Simulation

This project, "Neural Synapse Simulation," creates an interactive 3D visualization of a neuron firing, presented with a retro-futuristic, glowing aesthetic. Its primary purpose is to visually represent the propagation of a neural signal and an action potential within a stylized neuron structure. Users can click anywhere on the screen to trigger the firing sequence, observing dynamic changes in the neuron's appearance and an accompanying telemetry display.

The visual experience is built using Three.js, a JavaScript 3D library, combined with custom GLSL shaders for advanced rendering effects. The core neuron structure, including a central soma and numerous dendrite-like branches, is procedurally generated using TubeGeometry and CatmullRomCurve3 to create organic, wandering paths. An UnrealBloomPass is applied in post-processing to give the entire scene a vibrant, ethereal glow, enhancing the sci-fi feel.

const vertexShader = `
    attribute float aIsInput;
    // ... other attributes and varyings
    void main() {
        vIsInput = aIsInput; // Pass a custom attribute to the fragment shader
        // ... calculate position
    }
`;

const fragmentShader = `
    uniform float uTime;
    uniform float uPulseProgress; // Controls the incoming signal animation
    uniform float uActivation;    // Controls the firing animation
    // ... other uniforms and varyings

    void main() {
        // ... base color calculation
        vec3 pulseColor = vec3(0.0);
        if (vIsInput > 0.5 && uPulseProgress > -5.0) {
            // Logic for the incoming signal glow
        }
        vec3 actColor = vec3(0.0);
        if (uActivation > 0.0) {
            // Logic for the action potential (firing) wave
        }
        gl_FragColor = vec4(baseColor + pulseColor + actColor, 1.0);
    }
`;

These custom shaders are crucial for the project's visual effects. The vertexShader prepares data like aIsInput (to identify the signal input branch), while the fragmentShader uses uPulseProgress and uActivation uniforms to dynamically color and animate the neuron's glow, simulating the signal propagation and action potential.

The user interface, styled with CSS, features a "glassmorphism" panel displaying real-time "telemetry" data such as "Membrane V" and "Propagation" status. This panel, along with a custom animated cursor and subtle scanline/vignette overlays, reinforces the futuristic, holographic aesthetic. The JavaScript code continuously updates these UI elements based on the simulation's state, providing visual feedback on the neuron's activity.

.glass-inner {
    position: relative;
    z-index: 1;
    background: rgba(2, 5, 18, 0.75);
    backdrop-filter: blur(16px) saturate(160%); /* Creates the frosted glass effect */
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-radius: 3px;
    padding: 14px 16px;
    border: 1px solid rgba(0, 180, 255, 0.08);
}

This CSS snippet demonstrates the "glassmorphism" effect applied to the UI panel, using backdrop-filter to blur content behind it, giving it a translucent, frosted appearance.

The simulation progresses through distinct states: idle, signal propagation, and firing. A click event transitions the simulation from idle to propagation, where the uPulseProgress uniform decreases, visually moving a "signal" along the input branch. Once the signal reaches the soma, the state changes to firing, and the uActivation uniform increases, creating a colorful, outward-spreading "action potential" wave across the entire neuron.

window.addEventListener('click', () => {
    if (state !== 0) return; // Only allow re-triggering when idle
    state = 1; // Transition to propagation state
    pulseProg = INPUT_LENGTH;
    actProg   = 0.0;
    material.uniforms.uActivation.value = 0.0;
    elPanel.style.opacity = '0'; // Hide UI temporarily
    document.body.classList.add('active'); // Trigger cursor animation
    setTimeout(() => document.body.classList.remove('active'), 300);
    mvTarget = 40.0; // Update membrane voltage target
});

This JavaScript snippet shows how a click event initiates the simulation. It sets the state to 1 (propagating), resets animation progress variables, updates shader uniforms, and triggers temporary UI changes and cursor animations. The animate loop then continuously updates the scene and UI based on this state and the progress of pulseProg and actProg.