From 659274b0870f09a46f3521a01c9450560fd70df8 Mon Sep 17 00:00:00 2001 From: biglyderv Date: Wed, 5 Mar 2025 01:00:00 -0500 Subject: [PATCH] particle test --- docs/index.html | 2 +- docs/js/idle.js | 58 +++++++++++++++++++++++++++++++++++------------- docs/js/index.js | 14 ++++++++---- docs/main.css | 1 + 4 files changed, 54 insertions(+), 21 deletions(-) diff --git a/docs/index.html b/docs/index.html index 75dc0ec..9900427 100644 --- a/docs/index.html +++ b/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 diff --git a/docs/js/idle.js b/docs/js/idle.js index 0f7218b..bff4755 100644 --- a/docs/js/idle.js +++ b/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[1] += a[4] * 10; + a[0] = a[0] * 0.95 + a[3] * 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++) { - 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 - ]) -} \ No newline at end of file +setInterval(function() { + 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 + ]) +},100) \ No newline at end of file diff --git a/docs/js/index.js b/docs/js/index.js index 0fb095f..386871a 100644 --- a/docs/js/index.js +++ b/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)); diff --git a/docs/main.css b/docs/main.css index a63d536..d805080 100644 --- a/docs/main.css +++ b/docs/main.css @@ -6,6 +6,7 @@ canvas { body, html { margin: 0; padding: 0; + overflow: hidden; } .hud { position: fixed;