60 lines
2.1 KiB
JavaScript
60 lines
2.1 KiB
JavaScript
|
// 3D Audio-Waves -> maybe also 2D?
|
||
|
class Wave extends Visual {
|
||
|
updateData() {
|
||
|
this.data = [];
|
||
|
let data = audioHandler.getFloatArray();
|
||
|
let add = 2 / data.length,
|
||
|
x = -1;
|
||
|
for (let i = 0; i < data.length; i++) {
|
||
|
this.data.push(x, data[i], data[i]);
|
||
|
x += add;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
draw(program) {
|
||
|
c.width = window.innerWidth;
|
||
|
c.height = window.innerHeight;
|
||
|
this.prepare(program);
|
||
|
let position = this.position,
|
||
|
color = this.color,
|
||
|
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.clearColor(0, 0, 0, 1);
|
||
|
gl.enable(gl.DEPTH_TEST);
|
||
|
gl.depthFunc(gl.LEQUAL);
|
||
|
gl.clearDepth(2.0)
|
||
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||
|
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
|
||
|
gl.drawArrays(gl.LINE_STRIP || gl.POINTS, 0, this.data.length / 3);
|
||
|
}
|
||
|
|
||
|
rotate(program) {
|
||
|
let aspect = c.height / c.width,
|
||
|
matrix = [
|
||
|
1 / aspect, 0, 0, 0,
|
||
|
0, 1, 0, 0,
|
||
|
0, 0, 1, 0,
|
||
|
0, 0, 0, 1
|
||
|
]
|
||
|
matrix = TDUtils.multiply(matrix, TDUtils.xRotation(config.getItem("xRotate", 0)));
|
||
|
matrix = TDUtils.multiply(matrix, TDUtils.yRotation(config.getItem("yRotate", 0)));
|
||
|
matrix = TDUtils.multiply(matrix, TDUtils.zRotation(config.getItem("zRotate", 0)));
|
||
|
let rotate = gl.getUniformLocation(program, "u_matrix");
|
||
|
gl.uniformMatrix4fv(rotate, false, matrix);
|
||
|
}
|
||
|
|
||
|
setup() {
|
||
|
audioHandler.fftSize(16384)
|
||
|
}
|
||
|
|
||
|
prepare(program) {
|
||
|
this.position = gl.getAttribLocation(program, "a_position");
|
||
|
this.color = gl.getUniformLocation(program, "u_color");
|
||
|
}
|
||
|
}
|