WIP

raw/gui/sphere.json

@@ -0,0 +1,134 @@
+[
+  {
+    "group": "rotation",
+    "name": [
+      "X",
+      "Y",
+      "Z"
+    ],
+    "props": [
+      0,
+      1,
+      2
+    ],
+    "type": "slider",
+    "max": 360,
+    "min": 0
+  },
+  {
+    "group": "rotation",
+    "name": [
+      "X-Inc",
+      "Y-Inc",
+      "Z-Inc"
+    ],
+    "props": [
+      0,
+      1,
+      2
+    ],
+    "type": "slider",
+    "max": 1,
+    "min": 0,
+    "stepSize": 0.01
+  },
+  {
+    "group": "rotation",
+    "name": "by-Beat",
+    "type": "checkbox",
+    "value": true,
+    "tooltip": "Rotate the Sphere based by Beat <br> Low-Freq = Y, Mid-Freq = Z, High-Freq = X"
+  },
+  {
+    "group": "color",
+    "name": [
+      "R",
+      "G",
+      "B"
+    ],
+    "props": [
+      "r",
+      "g",
+      "b"
+    ],
+    "type": "slider",
+    "max": 255,
+    "min": 0
+  },
+  {
+    "group": "light",
+    "name": [
+      "X",
+      "Y",
+      "Z"
+    ],
+    "props": [
+      0,
+      1,
+      2
+    ],
+    "type": "slider",
+    "max": 1,
+    "min": -1,
+    "value": 0,
+    "stepSize": 0.1
+  },
+  {
+    "group": "light",
+    "name": "Light",
+    "type": "slider",
+    "max": 1,
+    "min": 0,
+    "stepSize": 0.05
+  },
+  {
+    "group": "color",
+    "name": "by-Beat",
+    "type": "checkbox",
+    "value": true,
+    "tooltip": "Draw The Color Strength based on the Low-Freq"
+  },
+  {
+    "group": "draw",
+    "name": "DrawMode",
+    "type": "slider",
+    "max": 6,
+    "min": 0
+  },
+  {
+    "group": "draw",
+    "name": "Form",
+    "type": "slider",
+    "max": 4,
+    "min": 0
+  },
+  {
+    "group": "draw",
+    "name": "Radius",
+    "type": "slider",
+    "max": 1500,
+    "min": 20
+  },
+  {
+    "group": "draw",
+    "name": "Total",
+    "type": "slider",
+    "max": 200,
+    "min": 20
+  },
+  {
+    "group": "draw",
+    "name": "PointSize",
+    "type": "slider",
+    "max": 10,
+    "min": 1,
+    "stepSize": 0.2
+  },
+  {
+    "group": "draw",
+    "name": "Dirty",
+    "type": "checkbox",
+    "value": false,
+    "tooltip": "Full Draw or with less Points"
+  }
+]

raw/javascript/app.js

@@ -0,0 +1,24 @@
+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)
+});

raw/javascript/audio.js

@@ -0,0 +1,5 @@
+class AudioHandler {
+    async init() {
+        this.audioFile = new Audio();
+    }
+}

raw/javascript/gui.js

@@ -0,0 +1,5 @@
+class GUI {
+    init() {
+
+    }
+}

raw/javascript/handler.js

@@ -0,0 +1,95 @@
+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)
+    }
+}

raw/javascript/player.js

@@ -0,0 +1,5 @@
+class Player {
+    async init() {
+
+    }
+}

raw/javascript/utils.js

@@ -0,0 +1,275 @@
+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]);
+    }
+}

raw/javascript/visual.js

@@ -0,0 +1,15 @@
+class Visual {
+    constructor() {
+        this.data = []; //for drawing
+        this.dataArray = [];
+    }
+    draw() {
+    }
+
+    setup() {
+    }
+}
+
+class VisualDrawer {
+
+}

raw/javascript/visuals/sphere.js

@@ -0,0 +1,7 @@
+class Sphere extends Visual {
+    draw() {
+    }
+
+    setup() {
+    }
+}

raw/scss/_controls.scss

@@ -0,0 +1,24 @@
+.controls {
+  right: 0;
+  display: flex;
+}
+
+.controls button, .menu-icon {
+  background-color: rgba(33, 33, 33, .6);
+  border: none;
+  font-size: 1.4em;
+  border-top: 4px solid #089bec;
+  padding: 1.5rem;
+  cursor: pointer;
+  color: #fff;
+  transition: .5s;
+
+  &.active {
+    border-color: #ff066a;
+  }
+
+  &:hover {
+    background-color: rgba(21, 21, 21, .7);
+    border-color: #aaef22;
+  }
+}

raw/scss/_gui.scss

@@ -0,0 +1,108 @@
+#c {
+  width: 100%;
+  height: 100%;
+}
+
+group {
+  display: block;
+  padding-bottom: 10px;
+  user-select: none;
+}
+
+group-label {
+  display: block;
+  border-bottom: 1px solid #fff;
+  font-size: 21px;
+  font-weight: 500;
+  user-select: none;
+}
+
+group-input {
+  display: flex;
+  align-items: center;
+  margin-top: 5px;
+  user-select: none;
+
+  label {
+    padding-right: 10px;
+    user-select: none;
+    width: 150px;
+  }
+
+  input {
+    flex-grow: 1;
+    user-select: none;
+    max-width: 150px;
+  }
+
+  button {
+    border: 1px solid #dcdcdc;
+    background-color: transparent;
+    color: #fff;
+    margin-left: 5px;
+  }
+}
+
+.closed {
+  transform: translateX(-350px);
+  transition: all .5s;
+}
+
+.top-menu-left {
+  display: flex;
+  div {
+    position: relative;
+  }
+}
+
+.loading-screen {
+  z-index: 100;
+  background-color: #000;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  span {
+    font-family: monospace;
+    font-size: 4vw;
+    z-index: 2;
+  }
+
+  loader {
+    position: absolute;
+    top: calc(6vw + 10px);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    display: block;
+    width: 30vw;
+    height: 6px;
+    transform: scaleX(0);
+    transform-origin: left;
+    background-color: #006ea8;
+    animation: loadingBar 2s infinite;
+
+    &.delay {
+      background-color: rgba(0, 110, 168, 0.24);
+      filter: blur(1px);
+      animation-delay: .05s;
+    }
+  }
+}
+
+@keyframes loadingBar {
+  0%, 100% {
+    transform: scaleX(0) scaleY(0);
+  }
+  50% {
+    transform: scaleX(1) scaleY(1);
+    transform-origin: left;
+  }
+  51%, 100% {
+    transform-origin: right;
+  }
+}

raw/scss/_input.scss

@@ -0,0 +1,79 @@
+input[type=range] {
+  width: 100%;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus::-webkit-slider-runnable-track {
+    background: #545454;
+  }
+
+  &:focus::-ms-fill-lower {
+    background: #424242;
+  }
+
+  &:focus::-ms-fill-upper {
+    background: #545454;
+  }
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 25.6px;
+  cursor: pointer;
+  box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+  background: #424242;
+  border-radius: 0;
+  border: 0 solid #010101;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  height: 25px;
+  width: 15px;
+  border-radius: 0;
+  cursor: pointer;
+  margin-top: 0.3px;
+}
+
+switch {
+  input {
+    position: absolute;
+    appearance: none;
+    opacity: 0;
+
+    &:checked + label:after {
+      transform: translateX(20px);
+    }
+  }
+
+  label {
+    display: block;
+    border-radius: 10px;
+    width: 40px;
+    height: 20px;
+    background-color: #dcdcdc;
+    position: relative;
+    cursor: pointer;
+    padding: 0;
+
+    &:after {
+      content: '';
+      background-color: #ff3232;
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      height: 16px;
+      width: 16px;
+      border-radius: 10px;
+      transition: .5s;
+    }
+  }
+}
+
+input[type="file"] {
+  position: fixed;
+  left: -100000vw;
+  height: 1px;
+  width: 1px;
+}

raw/scss/style.scss

@@ -0,0 +1,43 @@
+* {
+  box-sizing: border-box;
+}
+
+*:focus {
+  outline: none;
+}
+
+html, body {
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  font-size: 16px;
+  font-family: sans-serif;
+  background-color: #000000;
+}
+
+div {
+  position: fixed;
+  color: #fff;
+  padding: 1em;
+}
+
+.hide {
+  display: none !important;
+}
+
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+  font-size: 1em;
+  shape-rendering: geometricPrecision;
+  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
+  stroke-width: 5px;
+  text-align: center;
+  display: block;
+}
+
+
+@import "gui";
+@import "input";
+@import "controls";