WIP
This commit is contained in:
VersusTune
parent
42778a9d46
commit
d1ae2059f7
39 changed files with 1735 additions and 428 deletions
431
out/js/scripts.js
Normal file
431
out/js/scripts.js
Normal file
|
|
@ -0,0 +1,431 @@
|
|||
class VTUtils {
|
||||
static random(min, max) {
|
||||
let rand = Math.random();
|
||||
if (typeof min === 'undefined') {
|
||||
return rand;
|
||||
} else if (typeof max === 'undefined') {
|
||||
if (min instanceof Array) {
|
||||
return min[Math.floor(rand * min.length)];
|
||||
} else {
|
||||
return rand * min;
|
||||
}
|
||||
} else {
|
||||
if (min > max) {
|
||||
let tmp = min;
|
||||
min = max;
|
||||
max = tmp;
|
||||
}
|
||||
return rand * (max - min) + min;
|
||||
}
|
||||
};
|
||||
|
||||
static randomInt(min, max) {
|
||||
return Math.floor(VTUtils.random(min, max));
|
||||
}
|
||||
|
||||
static normalize(val, max, min) {
|
||||
return (val - min) / (max - min);
|
||||
};
|
||||
|
||||
static distance(x, y, x2, y2) {
|
||||
let a = x - x2;
|
||||
let b = y - y2;
|
||||
|
||||
return Math.sqrt(a * a + b * b);
|
||||
}
|
||||
|
||||
static map(n, start1, stop1, start2, stop2, withinBounds) {
|
||||
let newVal = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
|
||||
if (!withinBounds) {
|
||||
return newVal;
|
||||
}
|
||||
if (start2 < stop2) {
|
||||
return this.constrain(newVal, start2, stop2);
|
||||
} else {
|
||||
return this.constrain(newVal, stop2, start2);
|
||||
}
|
||||
};
|
||||
|
||||
static constrain(n, low, high) {
|
||||
return Math.max(Math.min(n, high), low);
|
||||
}
|
||||
|
||||
static hsvToRgb(h, s, v) {
|
||||
var r, g, b;
|
||||
|
||||
var i = Math.floor(h * 6);
|
||||
var f = h * 6 - i;
|
||||
var p = v * (1 - s);
|
||||
var q = v * (1 - f * s);
|
||||
var t = v * (1 - (1 - f) * s);
|
||||
|
||||
switch (i % 6) {
|
||||
case 0:
|
||||
r = v, g = t, b = p;
|
||||
break;
|
||||
case 1:
|
||||
r = q, g = v, b = p;
|
||||
break;
|
||||
case 2:
|
||||
r = p, g = v, b = t;
|
||||
break;
|
||||
case 3:
|
||||
r = p, g = q, b = v;
|
||||
break;
|
||||
case 4:
|
||||
r = t, g = p, b = v;
|
||||
break;
|
||||
case 5:
|
||||
r = v, g = p, b = q;
|
||||
break;
|
||||
}
|
||||
|
||||
return {r: r, g: g, b: b};
|
||||
}
|
||||
|
||||
static peakRGB(peak) {
|
||||
return {
|
||||
r: peak,
|
||||
g: 1 - peak,
|
||||
b: 0
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class VTVector {
|
||||
constructor(x, y, z) {
|
||||
this.x = x || 0;
|
||||
this.y = y || 0;
|
||||
this.z = z || 0;
|
||||
}
|
||||
|
||||
//helper
|
||||
static createRandom(x, y, z) {
|
||||
x = x || 1;
|
||||
y = y || 1;
|
||||
z = z || 0;
|
||||
return new VTVector(VTUtils.random(-x, x), VTUtils.random(-y, y), VTUtils.random(-z, z));
|
||||
}
|
||||
|
||||
mult(times) {
|
||||
this.x *= times;
|
||||
this.y *= times;
|
||||
this.z *= times;
|
||||
}
|
||||
|
||||
set(vector) {
|
||||
this.x = vector.x;
|
||||
this.y = vector.y;
|
||||
this.z = vector.z;
|
||||
}
|
||||
|
||||
add(vector) {
|
||||
this.x = this.x + vector.x;
|
||||
this.y = this.y + vector.y;
|
||||
this.z = this.z + vector.z;
|
||||
}
|
||||
|
||||
addXYZ(x, y, z) {
|
||||
this.x += x;
|
||||
this.y += y;
|
||||
this.z += z;
|
||||
}
|
||||
|
||||
setXYZ(x, y, z) {
|
||||
this.x = x || 0;
|
||||
this.y = y || 0;
|
||||
this.z = z || 0;
|
||||
}
|
||||
|
||||
clone() {
|
||||
return new VTVector(this.x, this.y, this.z);
|
||||
}
|
||||
}
|
||||
|
||||
class TDUtils {
|
||||
static multiply(a, b) {
|
||||
let b00 = b[0 * 4 + 0];
|
||||
let b01 = b[0 * 4 + 1];
|
||||
let b02 = b[0 * 4 + 2];
|
||||
let b03 = b[0 * 4 + 3];
|
||||
let b10 = b[1 * 4 + 0];
|
||||
let b11 = b[1 * 4 + 1];
|
||||
let b12 = b[1 * 4 + 2];
|
||||
let b13 = b[1 * 4 + 3];
|
||||
let b20 = b[2 * 4 + 0];
|
||||
let b21 = b[2 * 4 + 1];
|
||||
let b22 = b[2 * 4 + 2];
|
||||
let b23 = b[2 * 4 + 3];
|
||||
let b30 = b[3 * 4 + 0];
|
||||
let b31 = b[3 * 4 + 1];
|
||||
let b32 = b[3 * 4 + 2];
|
||||
let b33 = b[3 * 4 + 3];
|
||||
let a00 = a[0 * 4 + 0];
|
||||
let a01 = a[0 * 4 + 1];
|
||||
let a02 = a[0 * 4 + 2];
|
||||
let a03 = a[0 * 4 + 3];
|
||||
let a10 = a[1 * 4 + 0];
|
||||
let a11 = a[1 * 4 + 1];
|
||||
let a12 = a[1 * 4 + 2];
|
||||
let a13 = a[1 * 4 + 3];
|
||||
let a20 = a[2 * 4 + 0];
|
||||
let a21 = a[2 * 4 + 1];
|
||||
let a22 = a[2 * 4 + 2];
|
||||
let a23 = a[2 * 4 + 3];
|
||||
let a30 = a[3 * 4 + 0];
|
||||
let a31 = a[3 * 4 + 1];
|
||||
let a32 = a[3 * 4 + 2];
|
||||
let a33 = a[3 * 4 + 3];
|
||||
let dst = [];
|
||||
dst[0] = b00 * a00 + b01 * a10 + b02 * a20 + b03 * a30;
|
||||
dst[1] = b00 * a01 + b01 * a11 + b02 * a21 + b03 * a31;
|
||||
dst[2] = b00 * a02 + b01 * a12 + b02 * a22 + b03 * a32;
|
||||
dst[3] = b00 * a03 + b01 * a13 + b02 * a23 + b03 * a33;
|
||||
dst[4] = b10 * a00 + b11 * a10 + b12 * a20 + b13 * a30;
|
||||
dst[5] = b10 * a01 + b11 * a11 + b12 * a21 + b13 * a31;
|
||||
dst[6] = b10 * a02 + b11 * a12 + b12 * a22 + b13 * a32;
|
||||
dst[7] = b10 * a03 + b11 * a13 + b12 * a23 + b13 * a33;
|
||||
dst[8] = b20 * a00 + b21 * a10 + b22 * a20 + b23 * a30;
|
||||
dst[9] = b20 * a01 + b21 * a11 + b22 * a21 + b23 * a31;
|
||||
dst[10] = b20 * a02 + b21 * a12 + b22 * a22 + b23 * a32;
|
||||
dst[11] = b20 * a03 + b21 * a13 + b22 * a23 + b23 * a33;
|
||||
dst[12] = b30 * a00 + b31 * a10 + b32 * a20 + b33 * a30;
|
||||
dst[13] = b30 * a01 + b31 * a11 + b32 * a21 + b33 * a31;
|
||||
dst[14] = b30 * a02 + b31 * a12 + b32 * a22 + b33 * a32;
|
||||
dst[15] = b30 * a03 + b31 * a13 + b32 * a23 + b33 * a33;
|
||||
return dst;
|
||||
}
|
||||
|
||||
static xRotation(angleInRadians) {
|
||||
let c = Math.cos(angleInRadians);
|
||||
let s = Math.sin(angleInRadians);
|
||||
|
||||
return [
|
||||
1, 0, 0, 0,
|
||||
0, c, s, 0,
|
||||
0, -s, c, 0,
|
||||
0, 0, 0, 1,
|
||||
];
|
||||
}
|
||||
|
||||
static yRotation(angleInRadians) {
|
||||
let c = Math.cos(angleInRadians);
|
||||
let s = Math.sin(angleInRadians);
|
||||
|
||||
return [
|
||||
c, 0, -s, 0,
|
||||
0, 1, 0, 0,
|
||||
s, 0, c, 0,
|
||||
0, 0, 0, 1,
|
||||
];
|
||||
}
|
||||
|
||||
static zRotation(angleInRadians) {
|
||||
let c = Math.cos(angleInRadians);
|
||||
let s = Math.sin(angleInRadians);
|
||||
|
||||
return [
|
||||
c, s, 0, 0,
|
||||
-s, c, 0, 0,
|
||||
0, 0, 1, 0,
|
||||
0, 0, 0, 1,
|
||||
];
|
||||
}
|
||||
|
||||
static degToRad(d) {
|
||||
return d * Math.PI / 180;
|
||||
}
|
||||
}
|
||||
|
||||
function $(sel, s) {
|
||||
return $$(sel, s)[0];
|
||||
}
|
||||
|
||||
function $$(sel, s) {
|
||||
s = s || document;
|
||||
return s.querySelectorAll(sel);
|
||||
}
|
||||
|
||||
Node.prototype.addDelegatedEventListener = function (type, aim, cb) {
|
||||
this.addEventListener(type, (event) => {
|
||||
let target = event.target;
|
||||
if (target.matches(aim)) {
|
||||
cb(event, target);
|
||||
} else {
|
||||
let parent = target.closest(aim);
|
||||
if (parent) {
|
||||
cb(event, parent);
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
function create(name, content) {
|
||||
let d = document.createElement(name);
|
||||
if (content) {
|
||||
d.innerHTML = content;
|
||||
}
|
||||
return d;
|
||||
}
|
||||
|
||||
function append(to, array) {
|
||||
for (let item in array) {
|
||||
to.appendChild(array[item]);
|
||||
}
|
||||
}
|
||||
class ShaderHandler {
|
||||
constructor(gl) {
|
||||
this.gl = gl;
|
||||
this.shaderNames = [];
|
||||
this.shaders = {};
|
||||
this.programs = {};
|
||||
}
|
||||
|
||||
setGL(gl) {
|
||||
this.gl = gl;
|
||||
}
|
||||
|
||||
async loadShader(name, path) {
|
||||
this.shaderNames.push(name);
|
||||
await this.load(name, path + name + ".vert", this.gl.VERTEX_SHADER);
|
||||
await this.load(name, path + name + ".frag", this.gl.FRAGMENT_SHADER);
|
||||
}
|
||||
|
||||
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);
|
||||
if (shader) {
|
||||
this.shaders[realName] = shader;
|
||||
}
|
||||
}
|
||||
return !!this.shaders[realName];
|
||||
}
|
||||
|
||||
getShader(name, type) {
|
||||
let realName = name + "_" + type;
|
||||
return this.shaders[realName];
|
||||
}
|
||||
|
||||
getAllShaders() {
|
||||
return this.shaderNames;
|
||||
}
|
||||
|
||||
async createProgramForEach(arr) {
|
||||
arr = arr || this.shaderNames;
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
let shader = arr[i];
|
||||
let v = await shaderHandler.createProgram(shader, [shader])
|
||||
if (!v) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
createShader(source, type) {
|
||||
let gl = this.gl;
|
||||
let shader = gl.createShader(type);
|
||||
gl.shaderSource(shader, source);
|
||||
gl.compileShader(shader);
|
||||
if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
||||
return shader;
|
||||
}
|
||||
console.error(gl.getShaderInfoLog(shader));
|
||||
gl.deleteShader(shader);
|
||||
return null;
|
||||
}
|
||||
|
||||
createProgram(name, shaders) {
|
||||
let gl = this.gl;
|
||||
let pro = gl.createProgram();
|
||||
for (let i = 0; i < shaders.length; i++) {
|
||||
gl.attachShader(pro, this.getShader(shaders[i], gl.VERTEX_SHADER));
|
||||
gl.attachShader(pro, this.getShader(shaders[i], gl.FRAGMENT_SHADER));
|
||||
}
|
||||
gl.linkProgram(pro);
|
||||
var success = gl.getProgramParameter(pro, gl.LINK_STATUS);
|
||||
if (success) {
|
||||
this.programs[name] = pro;
|
||||
return pro;
|
||||
}
|
||||
|
||||
console.log(gl.getProgramInfoLog(pro));
|
||||
gl.deleteProgram(pro);
|
||||
return null;
|
||||
}
|
||||
|
||||
getProgram(name) {
|
||||
return this.programs[name];
|
||||
}
|
||||
|
||||
async loadArray(list, path) {
|
||||
let self = this;
|
||||
for (const e of list) {
|
||||
await self.loadShader(e, path)
|
||||
}
|
||||
await self.createProgramForEach(list)
|
||||
}
|
||||
}
|
||||
class AudioHandler {
|
||||
async init() {
|
||||
this.audioFile = new Audio();
|
||||
}
|
||||
}
|
||||
class Player {
|
||||
async init() {
|
||||
|
||||
}
|
||||
}
|
||||
class GUI {
|
||||
init() {
|
||||
|
||||
}
|
||||
}
|
||||
class Visual {
|
||||
constructor() {
|
||||
this.data = []; //for drawing
|
||||
this.dataArray = [];
|
||||
}
|
||||
draw() {
|
||||
}
|
||||
|
||||
setup() {
|
||||
}
|
||||
}
|
||||
|
||||
class VisualDrawer {
|
||||
|
||||
}
|
||||
class Sphere extends Visual {
|
||||
draw() {
|
||||
}
|
||||
|
||||
setup() {
|
||||
}
|
||||
}
|
||||
const shaderHandler = new ShaderHandler(null),
|
||||
audioHandler = new AudioHandler(),
|
||||
gui = new GUI(),
|
||||
player = new Player();
|
||||
|
||||
async function startUP() {
|
||||
let c = document.body.querySelector('#c'),
|
||||
gl = c.getContext("webgl2");
|
||||
if (!gl) {
|
||||
alert("SORRY THE BROWSER DOESN'T SUPPORT WEBGL2");
|
||||
return false;
|
||||
}
|
||||
shaderHandler.setGL(gl)
|
||||
await shaderHandler.loadArray(["wave", "sphere"], 'shaders/');
|
||||
await audioHandler.init();
|
||||
await player.init();
|
||||
gui.init();
|
||||
}
|
||||
|
||||
startUP().then(r => {
|
||||
setTimeout(e => {
|
||||
$('.loading-screen').remove();
|
||||
}, 100)
|
||||
});
|
||||
1
out/js/scripts.min.js
vendored
Normal file
1
out/js/scripts.min.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
class VTUtils{static random(t,e){let a=Math.random();if(void 0===t)return a;if(void 0===e)return t instanceof Array?t[Math.floor(a*t.length)]:a*t;if(t>e){let a=t;t=e,e=a}return a*(e-t)+t}static randomInt(t,e){return Math.floor(VTUtils.random(t,e))}static normalize(t,e,a){return(t-a)/(e-a)}static distance(t,e,a,r){let s=t-a,i=e-r;return Math.sqrt(s*s+i*i)}static map(t,e,a,r,s,i){let n=(t-e)/(a-e)*(s-r)+r;return i?r<s?this.constrain(n,r,s):this.constrain(n,s,r):n}static constrain(t,e,a){return Math.max(Math.min(t,a),e)}static hsvToRgb(t,e,a){var r,s,i,n=Math.floor(6*t),h=6*t-n,o=a*(1-e),l=a*(1-h*e),c=a*(1-(1-h)*e);switch(n%6){case 0:r=a,s=c,i=o;break;case 1:r=l,s=a,i=o;break;case 2:r=o,s=a,i=c;break;case 3:r=o,s=l,i=a;break;case 4:r=c,s=o,i=a;break;case 5:r=a,s=o,i=l}return{r:r,g:s,b:i}}static peakRGB(t){return{r:t,g:1-t,b:0}}}class VTVector{constructor(t,e,a){this.x=t||0,this.y=e||0,this.z=a||0}static createRandom(t,e,a){return t=t||1,e=e||1,a=a||0,new VTVector(VTUtils.random(-t,t),VTUtils.random(-e,e),VTUtils.random(-a,a))}mult(t){this.x*=t,this.y*=t,this.z*=t}set(t){this.x=t.x,this.y=t.y,this.z=t.z}add(t){this.x=this.x+t.x,this.y=this.y+t.y,this.z=this.z+t.z}addXYZ(t,e,a){this.x+=t,this.y+=e,this.z+=a}setXYZ(t,e,a){this.x=t||0,this.y=e||0,this.z=a||0}clone(){return new VTVector(this.x,this.y,this.z)}}class TDUtils{static multiply(t,e){let a=e[0],r=e[1],s=e[2],i=e[3],n=e[4],h=e[5],o=e[6],l=e[7],c=e[8],d=e[9],u=e[10],g=e[11],m=e[12],S=e[13],y=e[14],f=e[15],T=t[0],w=t[1],p=t[2],E=t[3],P=t[4],R=t[5],M=t[6],A=t[7],H=t[8],V=t[9],x=t[10],U=t[11],z=t[12],b=t[13],L=t[14],v=t[15],N=[];return N[0]=a*T+r*P+s*H+i*z,N[1]=a*w+r*R+s*V+i*b,N[2]=a*p+r*M+s*x+i*L,N[3]=a*E+r*A+s*U+i*v,N[4]=n*T+h*P+o*H+l*z,N[5]=n*w+h*R+o*V+l*b,N[6]=n*p+h*M+o*x+l*L,N[7]=n*E+h*A+o*U+l*v,N[8]=c*T+d*P+u*H+g*z,N[9]=c*w+d*R+u*V+g*b,N[10]=c*p+d*M+u*x+g*L,N[11]=c*E+d*A+u*U+g*v,N[12]=m*T+S*P+y*H+f*z,N[13]=m*w+S*R+y*V+f*b,N[14]=m*p+S*M+y*x+f*L,N[15]=m*E+S*A+y*U+f*v,N}static xRotation(t){let e=Math.cos(t),a=Math.sin(t);return[1,0,0,0,0,e,a,0,0,-a,e,0,0,0,0,1]}static yRotation(t){let e=Math.cos(t),a=Math.sin(t);return[e,0,-a,0,0,1,0,0,a,0,e,0,0,0,0,1]}static zRotation(t){let e=Math.cos(t),a=Math.sin(t);return[e,a,0,0,-a,e,0,0,0,0,1,0,0,0,0,1]}static degToRad(t){return t*Math.PI/180}}function $(t,e){return $$(t,e)[0]}function $$(t,e){return(e=e||document).querySelectorAll(t)}function create(t,e){let a=document.createElement(t);return e&&(a.innerHTML=e),a}function append(t,e){for(let a in e)t.appendChild(e[a])}Node.prototype.addDelegatedEventListener=function(t,e,a){this.addEventListener(t,t=>{let r=t.target;if(r.matches(e))a(t,r);else{let s=r.closest(e);s&&a(t,s)}})};class ShaderHandler{constructor(t){this.gl=t,this.shaderNames=[],this.shaders={},this.programs={}}setGL(t){this.gl=t}async loadShader(t,e){this.shaderNames.push(t),await this.load(t,e+t+".vert",this.gl.VERTEX_SHADER),await this.load(t,e+t+".frag",this.gl.FRAGMENT_SHADER)}async load(t,e,a){let r=t+"_"+a;if(!this.shaders[r]){let t=await fetch(e),s=this.createShader(await t.text(),a);s&&(this.shaders[r]=s)}return!!this.shaders[r]}getShader(t,e){let a=t+"_"+e;return this.shaders[a]}getAllShaders(){return this.shaderNames}async createProgramForEach(t){t=t||this.shaderNames;for(let e=0;e<t.length;e++){let a=t[e];if(!await shaderHandler.createProgram(a,[a]))return!1}return!0}createShader(t,e){let a=this.gl,r=a.createShader(e);return a.shaderSource(r,t),a.compileShader(r),a.getShaderParameter(r,a.COMPILE_STATUS)?r:(console.error(a.getShaderInfoLog(r)),a.deleteShader(r),null)}createProgram(t,e){let a=this.gl,r=a.createProgram();for(let t=0;t<e.length;t++)a.attachShader(r,this.getShader(e[t],a.VERTEX_SHADER)),a.attachShader(r,this.getShader(e[t],a.FRAGMENT_SHADER));return a.linkProgram(r),a.getProgramParameter(r,a.LINK_STATUS)?(this.programs[t]=r,r):(console.log(a.getProgramInfoLog(r)),a.deleteProgram(r),null)}getProgram(t){return this.programs[t]}async loadArray(t,e){let a=this;for(const r of t)await a.loadShader(r,e);await a.createProgramForEach(t)}}class AudioHandler{async init(){this.audioFile=new Audio}}class Player{async init(){}}class GUI{init(){}}class Visual{constructor(){this.data=[],this.dataArray=[]}draw(){}setup(){}}class VisualDrawer{}class Sphere extends Visual{draw(){}setup(){}}const shaderHandler=new ShaderHandler(null),audioHandler=new AudioHandler,gui=new GUI,player=new Player;async function startUP(){let t=document.body.querySelector("#c").getContext("webgl2");if(!t)return alert("SORRY THE BROWSER DOESN'T SUPPORT WEBGL2"),!1;shaderHandler.setGL(t),await shaderHandler.loadArray(["wave","sphere"],"shaders/"),await audioHandler.init(),await player.init(),gui.init()}startUP().then(t=>{setTimeout(t=>{$(".loading-screen").remove()},100)});
|
||||
Loading…
Add table
Add a link
Reference in a new issue