particle test

docs/index.html

@@ -13,7 +13,7 @@
         uniform mat4 mvp_thing;
       
         // all shaders have a main function
-        void main() {
+        void main() { 
       
           // gl_Position is a special variable a vertex shader
           // is responsible for setting

docs/js/idle.js

@@ -1,35 +1,61 @@
-var nothingness = 1, nGain = 0.00001;
+var nothingness = 1, nGain = 0.003;
+var getBonus = 0;
+
+var mx = 0, my = 0;
 
 let clicking = false;
 var cubePos = [
 
 ];
 
+window.addEventListener('mousemove', (e) => {
+    mx = e.pageX;
+    my = e.pageY;
+});
+
+window.addEventListener('click', (e) => {
+    let p1 = MDN.perspectiveMatrix(Math.PI * 100 / 180, ratio, 0.01, 1000);
+    for (let cubieI in cubePos) {
+        let cubie = cubePos[cubieI];
+        let p2 = MDN.multiplyPoint(p1, [cubie[0], cubie[1], cubie[2], 1]);
+
+        p2[0] /= width;
+        p2[1] /= height;
+
+        p2[0] += (mx - width / 2) / width * 2;
+        p2[1] -= (my - height / 2) / height * 2;
+
+        let b = 0.001 / (Math.sqrt(p2[0] ** 2 + p2[1] ** 2) + .003);
+
+        getBonus += b;
+    }
+});
+
 setInterval(function () {
-    nothingness += nGain;
+    nothingness += nGain + getBonus;
+    getBonus += 0.001 * cubePos.length;
+    getBonus *= 0.9;
 
     for (let a of cubePos) {
-        a[0] += a[3] * 10;
+        a[0] = a[0] * 0.95 + a[3] * 10;
-        a[1] += a[4] * 10;
+        a[1] = a[1] * 0.95 + 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;
+        f *= 50000;
         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;
-    }
+    }1
 }, 1000 / 60)
 
-document.body.onclick = async function () {
+
+window.addEventListener('click', async (e) => {
     if (clicking) return;
     clicking = true;
     let oldNGain = nGain;
@@ -40,10 +66,10 @@ document.body.onclick = async function () {
     }
     nGain = oldNGain;
     clicking = false;
-}
+})
 
-for (let i = 0; i < 100; i++) {
+setInterval(function() {
-    cubePos.push([Math.random() * 1000 - 500, Math.random() * 1000 - 500, Math.random() * 30 - 120,
+    cubePos.push([Math.random() * 1000 - 500, Math.random() * 1000 - 500, Math.random() * 30 - 200,
-    Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1
+        Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1
-    ])
+        ])
-}
+},100)

docs/js/index.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var ratio = 1, width = 1, height = 1;
 var canvas, gl, positionAttributeLocation, positionBuffer, matBuffer, vpBuffer, sizeBuffer, distBuffer, fgBuffer;
 
 function createShader(gl, type, source) {
@@ -67,12 +68,15 @@ function main() {
 function renderThing() {
     twgl.resizeCanvasToDisplaySize(gl.canvas);
 
+    width = gl.canvas.width;
+    height = gl.canvas.height;
+
     gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
 
     gl.clearColor(0, 0, 0, 0);
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
-    var ratio = gl.canvas.width / gl.canvas.height;
+    ratio = gl.canvas.width / gl.canvas.height;
     var ratioA = Math.max(ratio, 1);
     var ratioB = ratioA / ratio;
 
@@ -109,7 +113,7 @@ function renderThing() {
 
     gl.uniformMatrix4fv(matBuffer, false, new Float32Array(MDN.perspectiveMatrix(Math.PI * 100 / 180, ratio, 0.01, 1000)));
 
-    hud.textContent = `${Math.floor(nothingness * 100) / 100} nothings; ${Math.floor(nGain * 60 * 100) / 100} nil/sec`
+    hud.textContent = `${Math.floor(nothingness * 100) / 100} nothings; ${Math.floor((nGain + getBonus) * 60 * 100) / 100} nil/sec`
 
     gl.uniform1f(sizeBuffer, -Math.log(nothingness));
     gl.uniform1f(distBuffer, 0.1 + 3 * nGain / (nGain + nothingness));
@@ -120,11 +124,13 @@ function renderThing() {
     var count = 6;
     gl.drawArrays(primitiveType, offset, count);
 
-    positions = MDN.createCubeData(10,10,10);
+    let sizes = 1000 / (cubePos.length+30);
+
+    positions = MDN.createCubeData(sizes, sizes, sizes);
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
 
     for (let cubie of cubePos) {
-        let vp = MDN.rotateYMatrix(Math.log(nothingness+1) * cubie[2] / 10);
+        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));

docs/main.css

@@ -6,6 +6,7 @@ canvas {
 body, html {
     margin: 0;
     padding: 0;
+    overflow: hidden;
 }
 .hud {
     position: fixed;