audio-vis/raw/javascript/visual.js

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;
        }
    }
}