cube tests

docs/index.html

@@ -36,7 +36,7 @@
           // gl_FragColor is a special variable a fragment shader
           // is responsible for setting
           if (is_fg) {
-            gl_FragColor = vec4(b_position.xyz,1) * 0.2 + vec4(0.3,0.3,0.3,1) * 0.8;
+            gl_FragColor = vec4(b_position.xyz*0.1,1) * 0.2 + vec4(0.3,0.3,0.3,1) * 0.8;
             return;
           }
           float dist = (log(distance(b_position.xy,vec2(0.0))) - size_thing + dist_thing) / log(2.0) * 0.1;
@@ -47,8 +47,9 @@
 
   <script src="/js/cube.js"></script>
   <script src="/js/mat.js"></script>
-  <script src="/js/twgl.min.js" type="module"></script>
+  <script src="/js/twgl.min.js"></script>
-  <script src="/js/index.js" type="module"></script>
+  <script src="/js/idle.js" defer></script>
+  <script src="/js/index.js" defer></script>
   <link rel="stylesheet" href="main.css">
 </head>
 

docs/js/idle.js

@@ -0,0 +1,49 @@
+var nothingness = 1, nGain = 0.00001;
+
+let clicking = false;
+var cubePos = [
+
+];
+
+setInterval(function () {
+    nothingness += nGain;
+
+    for (let a of cubePos) {
+        a[0] += a[3] * 10;
+        a[1] += a[4] * 10;
+
+        let f = (nGain + 0.01) / (nothingness + 0.01);
+
+        a[0] *= 0.95
+        a[1] *= 0.95
+
+        let a3 = a[3], a4 = a[4];
+
+        f /= Math.sqrt(a[0] * a[0] + a[1] * a[1]);
+        f *= 100;
+        if (f > 0.3) f = 0.3;
+
+        a[3] = Math.sin(f) * a4 + Math.cos(f) * a3;
+
+        a[4] = -Math.sin(f) * a3 + Math.cos(f) * a4;
+    }
+}, 1000 / 60)
+
+document.body.onclick = async function () {
+    if (clicking) return;
+    clicking = true;
+    let oldNGain = nGain;
+    nGain += 0.05;
+    while (nGain > oldNGain) {
+        nGain -= 0.005;
+        await new Promise((res) => setTimeout(res, 1000 / 60))
+    }
+    nGain = oldNGain;
+    clicking = false;
+}
+
+for (let i = 0; i < 100; i++) {
+    cubePos.push([Math.random() * 1000 - 500, Math.random() * 1000 - 500, Math.random() * 30 - 120,
+    Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1
+    ])
+}

docs/js/index.js

@@ -1,5 +1,4 @@
 'use strict';
-var nothingness = 1, nGain = 0.01; //todo: outsource into another file
 
 var canvas, gl, positionAttributeLocation, positionBuffer, matBuffer, vpBuffer, sizeBuffer, distBuffer, fgBuffer;
 
@@ -102,9 +101,9 @@ function renderThing() {
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
 
     gl.uniformMatrix4fv(vpBuffer, false, new Float32Array([
-        256, 0, 0, 0,
+        1024, 0, 0, 0,
-        0, 256, 0, 0,
+        0, 1024, 0, 0,
-        0, 0, 256 / 4, 0,
+        0, 0, 1024 / 4, 0,
         0, 0, 0, 1
     ]));
 
@@ -121,17 +120,19 @@ function renderThing() {
     var count = 6;
     gl.drawArrays(primitiveType, offset, count);
 
-    positions = MDN.createCubeData(1, 1, 1);
+    positions = MDN.createCubeData(10,10,10);
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
 
-    let vp = MDN.rotateYMatrix(nothingness);
+    for (let cubie of cubePos) {
-    vp = MDN.multiplyMatrices(MDN.translateMatrix(0, 0, -3), vp)
+        let vp = MDN.rotateYMatrix(Math.log(nothingness+1) * cubie[2] / 10);
+        vp = MDN.multiplyMatrices(MDN.translateMatrix(cubie[0], cubie[1], cubie[2]), vp)
 
         gl.uniformMatrix4fv(vpBuffer, false, new Float32Array(vp));
 
         gl.uniform1i(fgBuffer, true);
         count = positions.length / 3;
         gl.drawArrays(primitiveType, offset, count);
+    }
 
     requestAnimationFrame(renderThing);
 }
@@ -139,23 +140,3 @@ let hud = document.querySelector('.hud');
 
 main();
 requestAnimationFrame(renderThing)
-
-let clicking = false;
-
-setInterval(function () {
-
-    nothingness += nGain;
-}, 1000 / 60)
-
-document.body.onclick = async function () {
-    if (clicking) return;
-    clicking = true;
-    let oldNGain = nGain;
-    nGain += 0.05;
-    while (nGain > oldNGain) {
-        nGain -= 0.005;
-        await new Promise((res) => setTimeout(res, 1000 / 60))
-    }
-    nGain = oldNGain;
-    clicking = false;
-}