WaveformVisualizer.js

import * as THREE from 'three';

const vertexShader = `

void main() {

    gl_Position = vec4(position.xy, 0.0, 1.0);

}

`;

const fragmentShader = `

precision highp float;



uniform float u_time;

uniform float u_amplitude;

uniform vec2 u_resolution;

uniform vec3 u_color;

uniform float u_breathe;



vec2 cmul(vec2 a, vec2 b) {

    return vec2(a.x * b.x - a.y * b.y, a.x * b.y + a.y * b.x);

}



vec2 cdiv(vec2 a, vec2 b) {

    float d = dot(b, b);

    return vec2(dot(a, b), a.y * b.x - a.x * b.y) / d;

}



vec2 conj(vec2 z) {

    return vec2(z.x, -z.y);

}



vec2 mobius(vec2 z, vec2 a) {

    return cdiv(z - a, vec2(1.0, 0.0) - cmul(conj(a), z));

}



float hdist(vec2 z) {

    float r = length(z);

    if (r >= 1.0) return 10.0;

    return log((1.0 + r) / (1.0 - r));

}



vec2 rot(vec2 p, float a) {

    float c = cos(a), s = sin(a);

    return vec2(c * p.x - s * p.y, s * p.x + c * p.y);

}



void main() {

    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution) / min(u_resolution.x, u_resolution.y);



    // Texture breathing: subtle scale pulsation independent of audio

    uv *= 1.0 + 0.05 * (u_breathe - 0.5);



    float breathe = 1.0 + 0.15 * u_amplitude;

    uv *= 1.1 * breathe;



    float r = length(uv);



    if (r >= 1.0) {

        gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);

        return;

    }



    float rotSpeed = 0.08 + 0.05 * u_amplitude;

    uv = rot(uv, u_time * rotSpeed);



    float n = 7.0;

    float angleStep = 6.283185 / n;



    float coshR = cos(3.14159265 / 3.0) / sin(3.14159265 / n);

    float sinhR = sqrt(coshR * coshR - 1.0);

    float tr = sinhR / (coshR + 1.0);



    vec2 z = uv;

    float iter = 0.0;



    for (int i = 0; i < 40; i++) {

        float ang = atan(z.y, z.x);

        float sector = floor(ang / angleStep + 0.5) * angleStep;



        z = rot(z, -sector);

        iter += abs(sector) > 0.01 ? 1.0 : 0.0;



        vec2 center = vec2(tr, 0.0);

        vec2 w = mobius(z, center);



        if (length(w) >= length(z) - 0.0001) break;

        z = w;

        iter += 1.0;

    }



    float d = hdist(z);



    // Color palette: deep purples, teals, magentas — psychedelic but dark

    float t = mod(iter * 0.1 + u_time * 0.02, 1.0);

    vec3 col1 = vec3(0.03, 0.01, 0.08); // deep purple-black

    vec3 col2 = vec3(0.02, 0.10, 0.15); // dark teal

    vec3 col3 = vec3(0.12, 0.02, 0.10); // dark magenta



    vec3 color = mix(col1, col2, sin(iter * 0.7 + u_time * 0.1) * 0.5 + 0.5);

    color = mix(color, col3, sin(iter * 1.1 - u_time * 0.15) * 0.5 + 0.5);



    // Breathe-modulated saturation

    float sat = 0.85 + 0.15 * u_breathe;

    color *= sat;



    // Tint toward the hand-gesture color

    float satBoost = 0.3 + 0.2 * u_amplitude;

    color = mix(color, u_color * 0.15, satBoost * 0.3);



    // Edge highlights with glow from amplitude

    float edgeThreshold = (0.04 - 0.02 * u_amplitude) * (1.0 + 0.3 * u_breathe);

    float edgeLine = 1.0 - smoothstep(0.0, edgeThreshold, abs(fract(d * 1.5) - 0.5) - 0.45);

    color += vec3(0.06, 0.08, 0.14) * edgeLine * (1.0 + u_amplitude);



    // Sector pattern

    float ang = atan(z.y, z.x);

    float sectorPattern = smoothstep(0.02, 0.04, abs(sin(ang * n * 0.5)));

    color *= 0.7 + 0.3 * sectorPattern;



    // Audio reactive brightness

    color *= 0.8 + 0.25 * u_amplitude;



    // Disk edge fade

    float diskEdge = smoothstep(0.98, 0.92, r);

    color *= diskEdge;



    color = min(color, vec3(1.0));



    gl_FragColor = vec4(color, 0.45);

}

`;

export class WaveformVisualizer {
    constructor(scene, analyser, canvasWidth, canvasHeight) {
        this.scene = scene;
        this.analyser = analyser;
        this.mesh = null;
        this.clock = new THREE.Clock();
        this.currentColor = new THREE.Color('#7B4394');
        this.targetColor = new THREE.Color('#7B4394');

        this.uniforms = {
            u_time: { value: 0.0 },
            u_amplitude: { value: 0.0 },
            u_resolution: { value: new THREE.Vector2(canvasWidth, canvasHeight) },
            u_color: { value: this.currentColor },
            u_breathe: { value: 0 }
        };

        this._createVisualizer();
    }

    _createVisualizer() {
        const geometry = new THREE.PlaneGeometry(2, 2);
        const material = new THREE.ShaderMaterial({
            uniforms: this.uniforms,
            vertexShader: vertexShader,
            fragmentShader: fragmentShader,
            transparent: true,
            depthWrite: false,
            depthTest: false
        });

        this.mesh = new THREE.Mesh(geometry, material);
        this.mesh.renderOrder = -1;
        this.mesh.frustumCulled = false;
        this.scene.add(this.mesh);
    }

    update() {
        if (!this.analyser || !this.mesh) return;

        // Interpolate color
        this.currentColor.lerp(this.targetColor, 0.05);

        // Update time
        this.uniforms.u_time.value = this.clock.getElapsedTime();

        // Compute RMS amplitude from analyser
        var waveformData = this.analyser.getValue();
        var sum = 0;
        for (var i = 0; i < waveformData.length; i++) {
            sum += waveformData[i] * waveformData[i];
        }
        var amplitude = Math.sqrt(sum / waveformData.length);
        this.uniforms.u_amplitude.value = amplitude;
        this.lastAmplitude = amplitude;

        var breathe = 0.5 + 0.5 * Math.sin(this.uniforms.u_time.value * 2.094); // ~3 second cycle
        this.uniforms.u_breathe.value = breathe;
    }

    updateColor(newColor) {
        this.targetColor.set(newColor);
    }

    updatePosition(canvasWidth, canvasHeight) {
        this.uniforms.u_resolution.value.set(canvasWidth, canvasHeight);
    }

    dispose() {
        if (this.mesh) {
            this.scene.remove(this.mesh);
            if (this.mesh.geometry) this.mesh.geometry.dispose();
            if (this.mesh.material) this.mesh.material.dispose();
        }
    }
}