Neural Network

AI Overview: 3D Quantum Neural Network

This project is an interactive 3D visualization of a "Quantum Neural Network" built using Three.js. It creates a highly stylized, cinematic representation of interconnected nodes that users can explore in a three-dimensional space. The main features include the ability to morph the network into different geometric formations (Sphere, Helix, or Fractal), adjust the density of the connections, and change color themes. Users can also interact with the network by clicking to send "energy pulses" that ripple through the structure.

The project works by combining a custom mathematical logic for node placement with advanced WebGL shaders for visual effects. The structure is built on a Node class that tracks positions and connections, while the rendering engine uses a "Bloom" post-processing pass to create a neon, glowing aesthetic. The background is enhanced by a custom starfield that twinkles using a vertex shader, providing a sense of deep space.

Key Code Insights

1. Data Structure for Nodes
The project uses a Node class to define each point in the network. This class stores the 3D position, the "level" of the node within the hierarchy, and an array of connections to other nodes.

class Node {
    constructor(position, level = 0, type = 0) {
        this.position = position;
        this.connections = [];
        this.level = level;
        this.type = type;
    }
}

2. Dynamic Formations
The network isn't static; it uses mathematical algorithms to generate different shapes. For example, the "Crystalline Sphere" formation uses the Golden Ratio to distribute nodes evenly across a spherical surface.

const phi = Math.acos(1 - 2 * (i + 0.5) / numPoints);
const theta = 2 * Math.PI * i / goldenRatio;
const pos = new THREE.Vector3(
    radius * Math.sin(phi) * Math.cos(theta),
    radius * Math.sin(phi) * Math.sin(theta),
    radius * Math.cos(phi)
);

3. GPU-Accelerated Animations
To keep the performance high even with thousands of points, the "pulse" effect and "breathing" animations are handled by GLSL shaders. This snippet from the vertex shader calculates how an energy wave expands from a click point over time.

float getPulseIntensity(vec3 worldPos, vec3 pulsePos, float pulseTime) {
    if (pulseTime < 0.0) return 0.0;
    float timeSinceClick = uTime - pulseTime;
    float pulseRadius = timeSinceClick * uPulseSpeed;
    float distToClick = distance(worldPos, pulsePos);
    float waveProximity = abs(distToClick - pulseRadius);
    return smoothstep(3.0, 0.0, waveProximity);
}

4. Visual Glow (Post-Processing)
The "Quantum" look is achieved using an EffectComposer. It adds an UnrealBloomPass, which makes the bright colors of the nodes and lines bleed into the surrounding darkness, creating a neon glow.

const bloomPass = new UnrealBloomPass(
    new THREE.Vector2(window.innerWidth, window.innerHeight),
    1.8, // Strength of the glow
    0.6, // Radius
    0.7  // Threshold
);
composer.addPass(bloomPass);

By combining these elements, the project transforms raw mathematical data into an immersive, interactive art piece that simulates a complex digital brain.