114 lines
3 KiB
JavaScript
114 lines
3 KiB
JavaScript
class Visual {
|
|
constructor() {
|
|
this.data = []; //for drawing
|
|
this.dataArray = [];
|
|
this.name = "Default";
|
|
}
|
|
|
|
updateData() {
|
|
}
|
|
|
|
updateFFT(fftSize) {
|
|
}
|
|
|
|
draw() {
|
|
}
|
|
|
|
setup() {
|
|
}
|
|
}
|
|
|
|
class VisualDrawer {
|
|
constructor() {
|
|
this.visuals = {
|
|
//"sphere": new Sphere(),
|
|
"wave": new Wave(),
|
|
"wave2d": new Wave2D(),
|
|
//"water": new Water()
|
|
}
|
|
this.lastMainColor = {
|
|
base: '#-1',
|
|
color: [0, 0, 0]
|
|
};
|
|
this.lastSecondColor = {
|
|
base: '#-1',
|
|
color: [0, 0, 0]
|
|
}
|
|
}
|
|
|
|
init() {
|
|
this.switch(pConf.get("visual", "wave2d"));
|
|
this.updateLoop();
|
|
}
|
|
|
|
switch(visual) {
|
|
if (this.visuals[visual] != null) {
|
|
this.c = visual;
|
|
vConf.loadConfigByName(this.c);
|
|
this.visuals[this.c].setup();
|
|
pConf.set("visual", this.c);
|
|
pConf.save();
|
|
}
|
|
}
|
|
|
|
updateLoop() {
|
|
let self = this;
|
|
let vis = self.visuals[self.c];
|
|
let pro = shaderHandler.use(self.c);
|
|
this.updateSeekbar();
|
|
this.prepare(pro);
|
|
vis.updateData();
|
|
vis.draw(pro);
|
|
requestAnimationFrame(self.updateLoop.bind(self))
|
|
}
|
|
|
|
updateSeekbar() {
|
|
cInfo.width = window.innerWidth;
|
|
cInfo.height = window.innerHeight;
|
|
let audioFile = audioHandler.audioFile;
|
|
ctx.clearRect(0, 0, cInfo.width, cInfo.height);
|
|
if (!audioFile.paused && pConf.get("showSeekbar", true)) {
|
|
//show seekbar
|
|
let dur = audioFile.duration,
|
|
cur = audioFile.currentTime,
|
|
percent = cur / dur * cInfo.width;
|
|
ctx.fillStyle = pConf.get("seekColor", '#fff');
|
|
ctx.fillRect(0, c.height - 10, percent, c.height);
|
|
}
|
|
}
|
|
|
|
prepare(pro) {
|
|
c.width = window.innerWidth;
|
|
c.height = window.innerHeight;
|
|
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
|
|
gl.clearColor(0, 0, 0, parseFloat(pConf.get("alphaValue", 0)));
|
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
|
gl.enable(gl.DEPTH_TEST);
|
|
gl.depthFunc(gl.LEQUAL);
|
|
gl.enable(gl.CULL_FACE);
|
|
|
|
// u_baseColor || u_maxColor
|
|
this.setColor(pro);
|
|
}
|
|
|
|
setColor(program) {
|
|
let baseColor = gl.getUniformLocation(program, "u_baseColor"),
|
|
maxColor = gl.getUniformLocation(program, "u_maxColor"),
|
|
self = this,
|
|
mainColor = self.lastMainColor,
|
|
secondColor = self.lastSecondColor;
|
|
this.updateColor('lastMainColor', 'baseColor');
|
|
this.updateColor('lastSecondColor', 'gradientToColor');
|
|
gl.uniform3fv(baseColor, mainColor.color);
|
|
gl.uniform3fv(maxColor, secondColor.color);
|
|
}
|
|
|
|
updateColor(index, col) {
|
|
let color = this[index],
|
|
value = vConf.get(col, '#ffffff')
|
|
if(value !== color.base) {
|
|
color.color = hexToRgb(value);
|
|
color.base = value;
|
|
}
|
|
}
|
|
} |