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

WIP

Browse source
This commit is contained in:
Maurice Grönwoldt 2020-08-08 21:58:15 +02:00
commit 4c4afe3bdf
29 changed files with 595 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

31
raw/gui/wave2d.json
View file

@ -52,6 +52,37 @@
"stepSize": 0.01,
"dataType": "float"
},
{
"group": "translate",
"name": [
"X",
"Y",
"Z"
],
"props": [
"x",
"y",
"z"
],
"type": "slider",
"max": 1,
"min": -1,
"value": 0,
"stepSize": 0.01,
"dataType": "float"
},
{
"group": "",
"name": "fudgeFactor",
"showName": "Fudge Factor",
"type": "slider",
"value": 1,
"max": 2,
"min": 0,
"tooltip": "z to w Fudge",
"stepSize": 0.1,
"dataType": "float"
},
{
"group": "",
"name": "baseColor",

36
raw/javascript/FetchHandler.js Normal file
View file

@ -0,0 +1,36 @@
class FetchHandler {
static files = {};
static async loadFiles(array, isJSON) {
let content = [];
for (let i = 0; i < array; i++) {
content.push(await FetchHandler.loadFile(array[i], isJSON));
}
return content;
}
static async loadFile(filename, isJSON) {
filename += '?v=' + version;
let files = FetchHandler.files;
if (files[filename]) {
return files[filename];
}
let data = await FetchHandler.tryFromCache(filename);
if (isJSON) {
data = JSON.parse(data);
}
files[filename] = data;
return data;
}
static async tryFromCache(filename) {
if (caches) {
let cache = await caches.open('vis3d-pwa-1');
let data = await cache.match(filename);
if (!data) {
data = await fetch(filename);
}
return await data.text();
}
}
}

12
raw/javascript/app.js
View file

@ -10,9 +10,11 @@ const shaderHandler = new ShaderHandler(null),
startup = new Startup(),
eventHandler = new EventHandler(),
playerConf = new PlayerConfigHandler(),
keyHandler = new KeyHandler();
keyHandler = new KeyHandler(),
version = 1,
camera = new Camera();
let c, gl, cInfo, ctx;
let c, gl, cInfo, ctx, sw;
worker.addEventListener('message', e => {
if (e.data.status === 'startup') {
@ -29,6 +31,9 @@ window.addEventListener('startupFin', e => {
})
async function startUP() {
if ('serviceWorker' in navigator) {
sw = await navigator.serviceWorker.register('/sw.js');
}
pConf.loadConfigByName('default');
c = $('#c'),
gl = c.getContext("webgl2"),
@ -39,10 +44,11 @@ async function startUP() {
return false;
}
shaderHandler.setGL(gl)
await shaderHandler.loadArray(["wave", "sphere", "water", "wave2d"], 'shaders/');
await shaderHandler.loadArray(["wave", "sphere", "water", "wave2d"], '/shaders/');
await NotificationHandler.instance.init();
await audioHandler.init();
await player.init();
await camera.init();
await visual.init();
await gui.init();
await imageUploader.init();

78
raw/javascript/gl/Camera.js Normal file
View file

@ -0,0 +1,78 @@
class Camera {
constructor() {
this.mouse;
this.rotation = {
x: 0,
y: 0
}
this.lastMouse;
this.mousePressed = false;
this.translate = {
x: 0,
y: 0,
z: 0
}
}
async init() {
this.mouse = {
x: 0,
y: 0
}
window.addEventListener('mousedown', this.mouseDown.bind(this));
window.addEventListener('mouseup', this.mouseUp.bind(this));
window.addEventListener('mousemove', this.mouseMove.bind(this), {passive: true});
eventHandler.addEvent('keys-ArrowUp, keys-ArrowDown, keys-ArrowLeft, keys-ArrowRight, keys-KeyQ, keys-KeyE', this.keyPressed.bind(this));
}
mouseDown() {
this.mousePressed = true;
this.lastMouse = null;
}
mouseUp() {
this.mousePressed = false;
this.lastMouse = null;
}
mouseMove(event) {
if (!this.mousePressed || gui.modal.open) {
return;
}
if (this.lastMouse) {
let mouse = this.mouse,
rotate = this.rotation;
mouse.x += (this.lastMouse.x - event.clientX) * 0.2;
mouse.y += (this.lastMouse.y - event.clientY) * 0.2;
rotate.x = VTUtils.map(mouse.x, -c.width, c.width, 180, -180, false);
rotate.y = VTUtils.map(mouse.y, -c.height, c.height, 180, -180, false);
}
this.lastMouse = {
x: event.clientX,
y: event.clientY
}
}
keyPressed(data) {
switch (data) {
case 'keys-ArrowUp':
this.translate.z += 10;
break;
case 'keys-ArrowDown':
this.translate.z -= 10;
break;
case 'keys-ArrowLeft':
this.translate.x -= 10;
break;
case 'keys-ArrowRight':
this.translate.x += 10;
break;
case 'keys-KeyQ':
this.translate.y += 10;
break;
case 'keys-KeyE':
this.translate.y -= 10;
break;
}
}
}

105
raw/javascript/gl/glUtils.js
View file

@ -210,6 +210,15 @@ class TDUtils {
return dst;
}
static projection(width, height, depth) {
return [
2 / width, 0, 0, 0,
0, -2 / height, 0, 0,
0, 0, 2 / depth, 0,
-1, 1, 0, 1,
];
}
static inverse(m, dst) {
dst = dst || new Float32Array(16);
let m00 = m[0],
@ -298,42 +307,13 @@ class TDUtils {
static aspectView(aspect) {
return [
1 * aspect, 0, 0, 0,
1 / aspect, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
]
}
static getMatrix(fov, aspect, near, far, camAngle, radius) {
let lMat = this.lastMatrix,
u = TDUtils;
if (!u.isSame('fov', fov)
|| !u.isSame('aspect', aspect)
|| !u.isSame('near', near)
|| !u.isSame('far', far)
|| !u.isSame('cam', camAngle)
|| !u.isSame('radius', radius)
) {
let matrix = TDUtils.perspective(TDUtils.degToRad(fov), aspect, near, far),
cameraMatrix = TDUtils.yRotation(TDUtils.degToRad(camAngle));
cameraMatrix = TDUtils.translate(cameraMatrix, 0, 0, radius * 1.5);
let viewMatrix = TDUtils.inverse(cameraMatrix);
matrix = TDUtils.multiply(matrix, viewMatrix)
lMat.m = matrix;
}
return lMat.m;
}
static isSame(key, value) {
let lMat = this.lastMatrix;
if (lMat[key] !== value) {
lMat[key] = value;
return false;
}
return true;
}
static updateRotate(rotation, def) {
let value = vConf.get(rotation, def) + vConf.get(rotation + '-inc', 0)
if (value > 360) {
@ -343,4 +323,69 @@ class TDUtils {
}
vConf.set(rotation, value);
}
static makeZToWMatrix(fudgeFactor) {
return [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, fudgeFactor,
0, 0, 0, 1,
];
}
}
class GLHelper {
constructor(program) {
this.matrix = new Float32Array(16);
this.program = program;
}
static uniform4fv(program, name, data) {
let uniform = gl.getUniformLocation(program, name);
gl.uniform4fv(uniform, data);
}
static uniform3fv(program, name, data) {
let uniform = gl.getUniformLocation(program, name);
gl.uniform3fv(uniform, data);
}
static uniform1f(program, name, data) {
let uniform = gl.getUniformLocation(program, name);
gl.uniform1f(uniform, data);
}
rotateX(deg) {
this.matrix = TDUtils.multiply(this.matrix, TDUtils.xRotation(deg));
}
rotateY(deg) {
this.matrix = TDUtils.multiply(this.matrix, TDUtils.yRotation(deg));
}
rotateZ(deg) {
this.matrix = TDUtils.multiply(this.matrix, TDUtils.zRotation(deg));
}
scale(scaling) {
this.matrix = TDUtils.multiply(this.matrix, TDUtils.scale(scaling[0], scaling[1], scaling[2]))
}
project(depth) {
depth = depth || (c.width > c.height) ? c.width : c.height;
this.matrix = TDUtils.projection(c.width, c.height, depth)
}
translate(t) {
this.matrix = TDUtils.translate(this.matrix, t[0] || 0, t[1] || 0, t[2] || 0);
}
addFudgeFactor(fudgeFactor) {
this.matrix = TDUtils.multiply(TDUtils.makeZToWMatrix(fudgeFactor), this.matrix);
}
applyMatrix() {
let matrix = gl.getUniformLocation(this.program, "u_matrix");
gl.uniformMatrix4fv(matrix, false, this.matrix);
}
}

7
raw/javascript/gl/handler.js
View file

@ -19,8 +19,8 @@ class ShaderHandler {
async load(name, url, type) {
let realName = name + "_" + type;
if (!this.shaders[realName]) {
let data = await fetch(url);
let shader = this.createShader(await data.text(), type);
let data = await FetchHandler.loadFile(url, false);
let shader = this.createShader(data, type);
if (shader) {
this.shaders[realName] = shader;
}
@ -70,8 +70,7 @@ class ShaderHandler {
gl.attachShader(pro, this.getShader(shaders[i], gl.FRAGMENT_SHADER));
}
gl.linkProgram(pro);
var success = gl.getProgramParameter(pro, gl.LINK_STATUS);
if (success) {
if (gl.getProgramParameter(pro, gl.LINK_STATUS)) {
this.programs[name] = pro;
return pro;
}

3
raw/javascript/gui.js
View file

@ -159,6 +159,7 @@ class Modal {
let self = this;
self.currentModal = '';
self.modal = $('#modal');
self.open = false;
self.parent = self.modal.parentNode;
self.modal.addDelegatedEventListener('click', 'header .close', this.closeModal.bind(this));
}
@ -192,6 +193,7 @@ class Modal {
closeModal() {
this.parent.addClass("hide")
this.open = false;
}
isCurrent(title) {
@ -200,5 +202,6 @@ class Modal {
showModal() {
this.parent.removeClass("hide")
this.open = true;
}
}

6
raw/javascript/keys.js
View file

@ -11,7 +11,8 @@ class KeyHandler {
media.setActionHandler('play', player.playStop.bind(player));
media.setActionHandler('pause', player.playStop.bind(player));
media.setActionHandler('previoustrack', player.prevSong.bind(player));
media.setActionHandler('nexttrack', player.prevSong.bind(player));
media.setActionHandler('nexttrack', player.nextSong.bind(player));
media.setActionHandler('stop', player.stop.bind(player));
}
}
@ -49,7 +50,8 @@ class KeyHandler {
if (eventHandler.handleEvent({
data: {
cmd: name
cmd: name,
data: name
}
})) {
event.preventDefault();

10
raw/javascript/player.js
View file

@ -28,6 +28,16 @@ class Player {
window.dispatchEvent(new CustomEvent('playSong'));
}
stop() {
if (!audioHandler.lastSong) {
return;
}
let audioFile = audioHandler.audioFile;
audioFile.pause();
audioFile.currentTime = 0;
window.dispatchEvent(new CustomEvent('playSong'));
}
playByID(number) {
this.playlist.index = number;
let next = this.playlist.getCurrent();

2
raw/javascript/playerConfigHandler.js
View file

@ -99,7 +99,7 @@ class VisualConfig {
let tem = VisualConfig.visualTemplates;
if (!tem[name]) {
//load config and save it
tem[name] = await fetch('/out/gui/' + name + ".json").then((res) => res.json());
tem[name] = await FetchHandler.loadFile('/out/gui/' + name + ".json", true);
}
return tem[name];
}

12
raw/javascript/template.js
View file

@ -6,9 +6,7 @@ class Template {
async loadTemplate(name) {
let self = this;
if (!this.tpl[name]) {
await fetch(templateDir + name + ".tpl").then((r) => r.text()).then(c => {
self.tpl[name] = c;
})
self.tpl[name] = await FetchHandler.loadFile(templateDir + name + '.tpl', false)
}
}
@ -36,13 +34,7 @@ class Template {
}
return d;
}
parseFromAPI(url, name, cb) {
fetch(url).then((r) => r.json()).then(d => {
cb(this.parseTemplate(name, d))
}).catch(console.error)
}
}
const templateEx = /\$(.*?)\$/gm;
const templateDir = "out/tpl/"
const templateDir = "/out/tpl/"

36
raw/javascript/visuals/wave2d.js
View file

@ -6,13 +6,15 @@ class Wave2D extends Visual {
updateData() {
let data = audioHandler.getFloatArray();
let add = 2 / data.length,
x = -1;
let add = c.width / data.length,
x = 0,
y = c.height / 2,
goTrough = y / 2;
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 + 1] = y + (data[i] * goTrough);
this.data[outerLoop + 2] = data[i];
outerLoop += 3;
x += add;
@ -35,17 +37,18 @@ class Wave2D extends Visual {
}
rotate(program) {
let matrix = [
1, 0, 0, 0,
0, 0.6, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
]
matrix = TDUtils.multiply(matrix, TDUtils.xRotation(vConf.get("rotation-x", 0)));
matrix = TDUtils.multiply(matrix, TDUtils.yRotation(vConf.get("rotation-y", 0)));
matrix = TDUtils.multiply(matrix, TDUtils.zRotation(vConf.get("rotation-z", 0)));
let rotate = gl.getUniformLocation(program, "u_matrix");
gl.uniformMatrix4fv(rotate, false, matrix);
let glHelper = new GLHelper(program);
glHelper.project();
glHelper.addFudgeFactor(vConf.get("fudgeFactor", 1));
glHelper.translate([
camera.translate.x,
camera.translate.y,
camera.translate.z
]);
glHelper.rotateX(camera.mouse.x);
glHelper.rotateY(camera.mouse.y);
glHelper.rotateZ(vConf.get("rotation-z", 0));
glHelper.applyMatrix();
}
setup() {
@ -59,9 +62,8 @@ class Wave2D extends Visual {
prepare(program) {
this.position = gl.getAttribLocation(program, "a_position");
this.color = gl.getUniformLocation(program, "u_color");
let lightPos = gl.getUniformLocation(program, "u_lightPos");
gl.uniform3fv(lightPos, vConf.get("light", [0, 5, -56]));
//GLHelper.uniform1f(program, "u_fudgeFactor", vConf.get("fudgeFactor", 1));
GLHelper.uniform3fv(program, "u_lightPos", vConf.get("light", [0, 5, -56]));
}
afterDraw() {