audio-vis/raw/javascript/visuals/wave.js

// 3D Audio-Waves -> maybe also 2D?
class Wave extends Visual {
    updateData() {
        //only for debug! remove pls
        if (window.stopUpdate) {
            return;
        }
        let data = audioHandler.getFloatArray();
        let add = 2 / data.length,
            x = -1;
        let outerLoop = 0;
        for (let i = 0; i < data.length; i++) {
            //first
            this.data[outerLoop] = x;
            this.data[outerLoop + 1] = data[i];
            this.data[outerLoop + 2] = 0;
            //second
            this.data[outerLoop + 3] = x;
            //third
            this.data[outerLoop + 6] = x;
            this.data[outerLoop + 8] = data[i + 1] || 0;
            outerLoop += 9;
            x += add;
        }
    }

    draw(program) {
        this.prepare(program);
        let position = this.position,
            positionBuffer = gl.createBuffer();
        this.rotate(program);
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.data), gl.DYNAMIC_DRAW);
        let vao = gl.createVertexArray();
        gl.bindVertexArray(vao);
        gl.enableVertexAttribArray(position);
        gl.vertexAttribPointer(position, 3, gl.FLOAT, true, 0, 0);
        gl.drawArrays(vConf.get("waveForm", gl.TRIANGLES), 0, this.data.length / 3);
    }

    rotate(program) {
        let aspect = c.width / c.height,
            matrix = [
                1 / aspect, 0, 0, 0,
                0, 0.6, 0, 0,
                0, 0, 1, 0,
                0, 0, 0, 1
            ]
        matrix = TDUtils.multiply(matrix, TDUtils.xRotation(vConf.get("xRotate", 0)));
        matrix = TDUtils.multiply(matrix, TDUtils.yRotation(vConf.get("yRotate", 0)));
        matrix = TDUtils.multiply(matrix, TDUtils.zRotation(vConf.get("zRotate", 0)));
        let rotate = gl.getUniformLocation(program, "u_matrix");
        gl.uniformMatrix4fv(rotate, false, matrix);
    }

    setup() {
        audioHandler.fftSize(16384)
        this.data = new Float32Array(16384 * 9);
        vConf.get("zRotate", TDUtils.degToRad(-30));
        vConf.get("yRotate", TDUtils.degToRad(50));
        vConf.get("xRotate", TDUtils.degToRad(10));
    }

    prepare(program) {
        this.position = gl.getAttribLocation(program, "a_position");
        this.color = gl.getUniformLocation(program, "u_color");
        let lightPos = gl.getUniformLocation(program, "u_lightPos"),
            matrix = gl.getUniformLocation(program, "u_matrix");
        gl.uniform3fv(lightPos, vConf.get("light", [0, 5, -56]));
        //gl.uniformMatrix4fv(matrix, false, TDUtils.getMatrix(90, c.width / c.height, 1, 2000, 200, 200));
    }
}