versustunez/audio-vis
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

- added imageUploader

Browse source 
- fixed loading songs
- cleanup utils
- added some helper class
- cleanup preparing of WEBGL2
- added 3D wave
- added light-support
- added configs
- added gui-events for playing, shuffling and playlist
This commit is contained in:
Maurice Grönwoldt 2020-08-05 11:24:59 +02:00
commit 9d5259767c
34 changed files with 1631 additions and 418 deletions
Download patch file Download diff file Expand all files Collapse all files

54
raw/javascript/visuals/wave.js
View file

@ -1,22 +1,32 @@
// 3D Audio-Waves -> maybe also 2D?
class Wave extends Visual {
updateData() {
this.data = [];
//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++) {
this.data.push(x, data[i], data[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) {
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);
@ -25,36 +35,38 @@ class Wave extends Visual {
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);
gl.drawArrays(vConf.get("waveForm", gl.TRIANGLES), 0, this.data.length / 3);
}
rotate(program) {
let aspect = c.height / c.width,
let aspect = c.width / c.height,
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)));
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));
}
}