Hugging Face's logo

Spaces:
terminallylazy
/
anycoder-3e798e34
Running

App Files Community
anycoder-3e798e34 / index.html
terminallylazy's picture
terminallylazy
Upload folder using huggingface_hub
7904f92 verified
raw
history blame contribute delete
23.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,viewport-fit=cover" />
 <title>Space-X Debris Explosion Shader</title>
 <style>
 :root {
 color-scheme: dark;
 }
 html,
 body {
 margin: 0;
 height: 100%;
 background: #000;
 overflow: hidden;
 font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
 }
 #wrap {
 position: relative;
 width: 100vw;
 height: 100vh;
 background: radial-gradient(1200px 800px at 50% 60%, #04060a 0%, #020307 55%, #010205 75%, #000 100%);
 }
 canvas {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 display: block;
 }
 #overlay {
 position: absolute;
 top: 12px;
 left: 12px;
 right: 12px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 12px;
 z-index: 10;
 pointer-events: none;
 }
 #title {
 font-size: clamp(12px, 2vw, 16px);
 letter-spacing: .08em;
 text-transform: uppercase;
 opacity: .8;
 color: #a9b7d1;
 pointer-events: auto;
 }
 #title a {
 color: #9ad4ff;
 text-decoration: none;
 border-bottom: 1px dashed rgba(154, 212, 255, .35);
 }
 #controls {
 pointer-events: auto;
 display: flex;
 gap: 8px;
 }
 button {
 background: rgba(255, 255, 255, .06);
 color: #d9e3ff;
 border: 1px solid rgba(255, 255, 255, .12);
 border-radius: 10px;
 padding: 8px 12px;
 font-size: 12px;
 cursor: pointer;
 backdrop-filter: blur(6px);
 transition: all .2s ease;
 }
 button:hover {
 background: rgba(255, 255, 255, .1);
 transform: translateY(-1px);
 }
 #hint {
 position: absolute;
 bottom: 12px;
 right: 12px;
 color: #b9c6e6;
 opacity: .65;
 font-size: 12px;
 padding: 6px 10px;
 border: 1px solid rgba(255, 255, 255, .08);
 border-radius: 8px;
 background: rgba(0, 0, 0, .25);
 backdrop-filter: blur(6px);
 pointer-events: none;
 }
 </style>
</head>
<body>
 <div id="wrap">
 <canvas id="gl"></canvas>
 <div id="overlay">
 <div id="title">
 Debris After a Space-X Rocket Explosion
 &nbsp;|&nbsp; Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
 rel="noopener noreferrer">anycoder</a>
 </div>
 <div id="controls">
 <button id="btn-explode" title="Spawn a new explosion (E)">Explode</button>
 <button id="btn-toggle" title="Pause/Resume (Space)">Pause</button>
 <button id="btn-reset" title="Reset particles (R)">Reset</button>
 </div>
 </div>
 <div id="hint">Click or press E to explode • Space to pause • R to reset</div>
 </div>
<script>
 (function(){
 const canvas = document.getElementById('gl');
 const gl = canvas.getContext('webgl', { antialias: false, alpha: false, preserveDrawingBuffer: false });
 if (!gl) {
 alert('WebGL not supported on this device/browser.');
 return;
 }
 // Globals
 const DPR = Math.min(2, window.devicePixelRatio || 1);
 let W = 0, H = 0;
 let time = 0, lastT = 0, paused = false;
 // Explosion and physics
 const G = 0.10; // "gravity" in world units per second^2 (scaled)
 const DRAG = 0.995; // velocity damping per frame
 const MAX_PARTICLES = 14000;
 const MIN_PARTICLES = 4000;
 let PARTICLE_COUNT = MAX_PARTICLES;
 // Explosion origin in world coordinates (will be recentered on resize)
 let origin = { x: 0, y: 0 };
 // Particles data
 let pLife, pPos, pVel, pSize, pSeed;
 // Stars
 let STAR_COUNT = 600;
 let starPos, starPhase, starSize;
 // Shockwave
 let shockActive = false;
 let shockStart = 0;
 let shockDuration = 6.0;
 let shockMaxRadius = 0.0;
 let shockThickness = 0.06;
 // Trail FBO
 let trailFbo = null;
 let trailTex = null;
 // Utility
 const rand = (a=0,b=1)=>a+Math.random()*(b-a);
 const clamp = (x, a, b)=>Math.max(a, Math.min(b, x));
 const mix = (a,b,t)=>a*(1-t)+b*t;
 // Shaders
 const particleVS = `
 attribute vec2 a_pos;
 attribute vec2 a_vel;
 attribute float a_size;
 attribute float a_seed;
 uniform vec2 u_origin;
 uniform vec2 u_scale;
 uniform float u_aspect;
 uniform float u_time;
 varying float v_speed;
 varying float v_seed;
 varying float v_size;
 void main() {
 vec2 dir = normalize(a_vel + vec2(1e-6));
 float speed = length(a_vel);
 v_speed = speed;
 v_seed = a_seed;
 v_size = a_size;
 vec2 world = a_pos;
 vec2 clip = (world - u_origin) * u_scale;
 gl_Position = vec4(clip, 0.0, 1.0);
 gl_PointSize = a_size;
 }
 `;
 const particleFS = `
 precision mediump float;
 uniform float u_time;
 varying float v_speed;
 varying float v_seed;
 varying float v_size;
 // 2D rotation
 mat2 rot(float a){ float c=cos(a), s=sin(a); return mat2(c,-s,s,c); }
 float hash21(vec2 p){
 p = fract(p*vec2(123.34, 345.45));
 p += dot(p, p+34.345);
 return fract(p.x*p.y);
 }
 void main() {
 // Point sprite coord
 vec2 uv = gl_PointCoord*2.0 - 1.0;
 // Flicker rotation for anisotropy
 float ang = v_seed*6.2831 + u_time*2.0;
 uv = rot(ang) * uv;
 // Elliptical falloff: elongated along x
 float e = 0.42;
 float d = dot(vec2(uv.x/e, uv.y), vec2(uv.x/e, uv.y));
 float alpha = smoothstep(1.0, 0.0, d);
 // Spark core
 float core = smoothstep(0.20, 0.0, d);
 alpha = max(alpha, core*0.75);
 // Color by speed: white->yellow->orange->red
 float t = clamp(v_speed*0.6, 0.0, 1.0);
 vec3 col = mix(vec3(1.0, 0.95, 0.90), vec3(1.0, 0.75, 0.25), smoothstep(0.0, 0.5, t));
 col = mix(col, vec3(1.0, 0.45, 0.10), smoothstep(0.5, 1.0, t));
 col = mix(col, vec3(0.9, 0.1, 0.05), smoothstep(0.9, 1.6, t));
 // Slight color jitter
 float n = hash21(vec2(v_seed*19.31, v_seed*91.7));
 col *= mix(0.9, 1.1, n);
 // Flicker
 float flick = 0.85 + 0.25*sin(u_time*40.0 + v_seed*123.4);
 alpha *= flick;
 gl_FragColor = vec4(col, alpha);
 // Premultiplied-like glow via additive blend
 }
 `;
 const compositeVS = `
 attribute vec2 a_pos;
 varying vec2 v_uv;
 void main(){
 v_uv = a_pos*0.5 + 0.5;
 gl_Position = vec4(a_pos, 0.0, 1.0);
 }
 `;
 const compositeFS = `
 precision mediump float;
 varying vec2 v_uv;
 uniform sampler2D u_prevTrail;
 uniform sampler2D u_curr;
 uniform float u_decay;
 uniform vec2 u_resolution;
 uniform float u_time;
 uniform float u_shockStart;
 uniform float u_shockDuration;
 uniform int u_starCount;
 uniform vec2 u_starPos[1200];
 uniform float u_starPhase[1200];
 uniform float u_starSize[1200];
 // Starfield function
 float hash(float x){ return fract(sin(x)*43758.5453123); }
 vec3 starfield(vec2 uv, float aspect){
 // Tile to reduce cost
 vec2 grid = uv*vec2(aspect, 1.0)*400.0;
 vec2 id = floor(grid);
 vec2 gv = fract(grid) - 0.5;
 float n = hash(id.x + id.y*57.0);
 vec3 col = vec3(0.0);
 // Sparse stars
 if (n > 0.997) {
 float tw = 0.6 + 0.4*sin(u_time*2.0 + n*123.0);
 float size = mix(0.5, 1.5, hash(n*13.7));
 float d = length(gv);
 float s = smoothstep(size, 0.0, d);
 col += vec3(1.0, 1.0, 1.0) * s * tw;
 }
 return col;
 }
 // Shockwave ring
 float ring(vec2 uv, vec2 center, float radius, float thickness){
 float d = length(uv - center);
 float inner = smoothstep(radius - thickness, radius, d);
 float outer = 1.0 - smoothstep(radius, radius + thickness, d);
 float ringv = inner * outer;
 // fade ends
 return ringv;
 }
 // Background nebula (cheap multi-noise)
 float noise(vec2 p){
 vec2 i = floor(p);
 vec2 f = fract(p);
 float a = hash(i.x + i.y*57.0);
 float b = hash(i.x+1.0 + i.y*57.0);
 float c = hash(i.x + (i.y+1.0)*57.0);
 float d = hash(i.x+1.0 + (i.y+1.0)*57.0);
 vec2 u = f*f*(3.0-2.0*f);
 return mix(mix(a,b,u.x), mix(c,d,u.x), u.y);
 }
 vec3 nebula(vec2 uv, float t){
 uv *= 2.5;
 float n = 0.0;
 n += noise(uv + vec2(t*0.03, t*0.01));
 n += 0.5*noise(uv*2.0 - vec2(t*0.02, -t*0.015));
 n += 0.25*noise(uv*4.0 + vec2(t*0.01, t*0.02));
 n = pow(n, 1.2);
 vec3 c = mix(vec3(0.05, 0.07, 0.10), vec3(0.10, 0.05, 0.15), n);
 c += vec3(0.03, 0.02, 0.06)*n*n;
 return c;
 }
 void main(){
 // UV to NDC space (0..1)
 vec2 uv = v_uv;
 vec2 ndc = uv*2.0 - 1.0;
 // Background base
 vec3 col = nebula(ndc, u_time);
 // Stars (procedural sparse)
 float aspect = u_resolution.x / u_resolution.y;
 vec3 stars = starfield(uv, aspect);
 col += stars * 0.7;
 // Shockwave ring
 if (u_time < u_shockDuration) {
 float radius = (u_time - u_shockStart) * 0.9; // world units to NDC
 // convert center
 vec2 c = vec2(0.0); // origin in NDC
 float ringv = ring(ndc, c, radius, 0.06);
 vec3 ringCol = mix(vec3(0.5,0.8,1.0), vec3(1.0,0.9,0.6), smoothstep(0.0, 1.0, radius));
 col += ringCol * ringv * 1.2;
 }
 // Trails: fade previous, add current
 vec3 prev = texture2D(u_prevTrail, uv).rgb;
 vec3 curr = texture2D(u_curr, uv).rgb;
 vec3 combined = prev * u_decay + curr;
 // Vignette
 float vign = smoothstep(1.3, 0.2, length(ndc));
 col *= vign;
 // Mix trails over background
 col += combined;
 // Tone map and gamma
 col = col / (1.0 + col); // simple Reinhard
 col = pow(col, vec3(1.0/2.2));
 gl_FragColor = vec4(col, 1.0);
 }
 `;
 // GL helpers
 function createShader(type, src){
 const sh = gl.createShader(type);
 gl.shaderSource(sh, src);
 gl.compileShader(sh);
 if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
 console.error(gl.getShaderInfoLog(sh));
 throw new Error('Shader compile error');
 }
 return sh;
 }
 function createProgram(vsSrc, fsSrc){
 const vs = createShader(gl.VERTEX_SHADER, vsSrc);
 const fs = createShader(gl.FRAGMENT_SHADER, fsSrc);
 const pr = gl.createProgram();
 gl.attachShader(pr, vs);
 gl.attachShader(pr, fs);
 gl.linkProgram(pr);
 if (!gl.getProgramParameter(pr, gl.LINK_STATUS)) {
 console.error(gl.getProgramInfoLog(pr));
 throw new Error('Program link error');
 }
 return pr;
 }
 // Programs
 const particleProg = createProgram(particleVS, particleFS);
 const particleLoc = {
 a_pos: gl.getAttribLocation(particleProg, 'a_pos'),
 a_vel: gl.getAttribLocation(particleProg, 'a_vel'),
 a_size: gl.getAttribLocation(particleProg, 'a_size'),
 a_seed: gl.getAttribLocation(particleProg, 'a_seed'),
 u_origin: gl.getUniformLocation(particleProg, 'u_origin'),
 u_scale: gl.getUniformLocation(particleProg, 'u_scale'),
 u_aspect: gl.getUniformLocation(particleProg, 'u_aspect'),
 u_time: gl.getUniformLocation(particleProg, 'u_time'),
 };
 const compositeProg = createProgram(compositeVS, compositeFS);
 const compositeLoc = {
 a_pos: gl.getAttribLocation(compositeProg, 'a_pos'),
 u_prevTrail: gl.getUniformLocation(compositeProg, 'u_prevTrail'),
 u_curr: gl.getUniformLocation(compositeProg, 'u_curr'),
 u_decay: gl.getUniformLocation(compositeProg, 'u_decay'),
 u_resolution: gl.getUniformLocation(compositeProg, 'u_resolution'),
 u_time: gl.getUniformLocation(compositeProg, 'u_time'),
 u_shockStart: gl.getUniformLocation(compositeProg, 'u_shockStart'),
 u_shockDuration: gl.getUniformLocation(compositeProg, 'u_shockDuration'),
 u_starCount: gl.getUniformLocation(compositeProg, 'u_starCount'),
 u_starPos: gl.getUniformLocation(compositeProg, 'u_starPos'),
 u_starPhase: gl.getUniformLocation(compositeProg, 'u_starPhase'),
 u_starSize: gl.getUniformLocation(compositeProg, 'u_starSize'),
 };
 // Buffers
 const fsQuad = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, fsQuad);
 // Full-screen triangle
 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
 -1, -1,
 3, -1,
 -1, 3
 ]), gl.STATIC_DRAW);
 // Particle buffers
 const bufPos = gl.createBuffer();
 const bufVel = gl.createBuffer();
 const bufSize = gl.createBuffer();
 const bufSeed = gl.createBuffer();
 // Trail target
 function createTrailTarget(w, h){
 const tex = gl.createTexture();
 gl.bindTexture(gl.TEXTURE_2D, tex);
 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
 const fbo = gl.createFramebuffer();
 gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
 gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
 const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
 if (status !== gl.FRAMEBUFFER_COMPLETE) {
 console.error('FBO incomplete', status.toString(16));
 }
 gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 return { fbo, tex };
 }
 function resize(){
 const cssW = canvas.clientWidth || window.innerWidth;
 const cssH = canvas.clientHeight || window.innerHeight;
 const w = Math.floor(cssW * DPR);
 const h = Math.floor(cssH * DPR);
 if (w === W && h === H) return;
 W = w; H = h;
 canvas.width = W;
 canvas.height = H;
 gl.viewport(0, 0, W, H);
 // Recreate trail target
 if (trailTex) {
 gl.deleteTexture(trailTex);
 gl.deleteFramebuffer(trailFbo);
 }
 const t = createTrailTarget(W, H);
 trailFbo = t.fbo;
 trailTex = t.tex;
 // Center explosion
 origin.x = 0;
 origin.y = 0;
 // Recompute scale (world -> NDC)
 worldScale.x = 1.0 / (WORLD_RADIUS);
 worldScale.y = 1.0 / (WORLD_RADIUS);
 }
 // World settings
 const WORLD_RADIUS = 2.2; // world half-extent in NDC
 const worldScale = { x: 1/WORLD_RADIUS, y: 1/WORLD_RADIUS };
 // Particles init
 function allocParticles(count){
 PARTICLE_COUNT = clamp(count|0, MIN_PARTICLES, MAX_PARTICLES);
 pLife = new Float32Array(PARTICLE_COUNT);
 pPos = new Float32Array(PARTICLE_COUNT * 2);
 pVel = new Float32Array(PARTICLE_COUNT * 2);
 pSize = new Float32Array(PARTICLE_COUNT);
 pSeed = new Float32Array(PARTICLE_COUNT);
 }
 function randomInCircle(radius){
 const t = Math.random()*Math.PI*2;
 const r = Math.sqrt(Math.random())*radius;
 return { x: Math.cos(t)*r, y: Math.sin(t)*r };
 }
 function hslToRgb(h, s, l) {
 let r, g, b;
 if (s === 0) {
 r = g = b = l; // achromatic
 } else {
 const hue2rgb = function hue2rgb(p, q, t){
 if (t < 0) t += 1;
 if (t > 1) t -= 1;
 if (t < 1/6) return p + (q - p) * 6 * t;
 if (t < 1/2) return q;
 if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
 return p;
 };
 const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
 const p = 2 * l - q;
 r = hue2rgb(p, q, h + 1/3);
 g = hue2rgb(p, q, h);
 b = hue2rgb(p, q, h - 1/3);
 }
 return [r, g, b];
 }
 function resetParticles(count){
 allocParticles(count);
 for (let i = 0; i < PARTICLE_COUNT; i++) {
 pSeed[i] = Math.random();
 const r = randomInCircle(0.15 + Math.random()*0.25);
 pPos[i*2+0] = origin.x + r.x;
 pPos[i*2+1] = origin.y + r.y;
 // Velocity: radial burst
 const angle = Math.atan2(r.y, r.x);
 const speed = 0.7 + Math.random()*2.6; // world units per second
 pVel[i*2+0] = Math.cos(angle) * speed;
 pVel[i*2+1] = Math.sin(angle) * speed;
 // Size in pixels (scaled with DPR)
 pSize[i] = (1.0 + Math.random()*3.5) * DPR * 1.2;
 // Life in seconds
 pLife[i] = 1.5 + Math.random()*5.0;
 }
 // Upload static buffers
 gl.bindBuffer(gl.ARRAY_BUFFER, bufSeed);
 gl.bufferData(gl.ARRAY_BUFFER, pSeed, gl.STATIC_DRAW);
 gl.bindBuffer(gl.ARRAY_BUFFER, bufSize);
 gl.bufferData(gl.ARRAY_BUFFER, pSize, gl.DYNAMIC_DRAW);
 // Initial positions
 gl.bindBuffer(gl.ARRAY_BUFFER, bufPos);
 gl.bufferData(gl.ARRAY_BUFFER, pPos, gl.DYNAMIC_DRAW);
 gl.bindBuffer(gl.ARRAY_BUFFER, bufVel);
 gl.bufferData(gl.ARRAY_BUFFER, pVel, gl.DYNAMIC_DRAW);
 }
 function respawn(i){
 pSeed[i] = Math.random();
 const r = randomInCircle(0.05 + Math.random()*0.18);
 pPos[i*2+0] = origin.x + r.x;
 pPos[i*2+1] = origin.y + r.y;
 const angle = Math.atan2(r.y, r.x);
 const speed = 0.9 + Math.random()*2.8;
 pVel[i*2+0] = Math.cos(angle) * speed;
 pVel[i*2+1] = Math.sin(angle) * speed;
 pSize[i] = (1.0 + Math.random()*3.5) * DPR * 1.2;
 pLife[i] = 1.8 + Math.random()*6.0;
 }
 function initStars(count){
 STAR_COUNT = Math.min(1200, count|0);
 starPos = new Float32Array(STAR_COUNT*2);
 starPhase = new Float32Array(STAR_COUNT);
 starSize = new Float32Array(STAR_COUNT);
 for (let i = 0; i < STAR_COUNT; i++){
 // Distribute roughly uniformly in NDC
 starPos[i*2+0] = rand(-1, 1);
 starPos[i*2+1] = rand(-1, 1);
 starPhase[i] = rand(0, Math.PI*2);
 starSize[i] = rand(0.5, 1.5);
 }
 }
 function explode(){
 // Shockwave start
 shockActive = true;
 shockStart = time;
 // Reset velocities with a powerful burst and add some turbulence
 for (let i = 0; i < PARTICLE_COUNT; i++){
 const angle = Math.random()*Math.PI*2;
 const speed = 1.2 + Math.random()*3.2; // stronger impulse
 pVel[i*2+0] = Math.cos(angle) * speed;
 pVel[i*2+1] = Math.sin(angle) * speed;
 // Add slight size jitter for flair
 pSize[i] = (1.2 + Math.random()*4.2) * DPR * 1.2;
 pLife[i] = 2.0 + Math.random()*6.0;
 }
 }
 // Init
 resetParticles(MAX_PARTICLES);
 initStars(STAR_COUNT);
 // GL State
 gl.disable(gl.DEPTH_TEST);
 gl.enable(gl.BLEND);
 gl.blendFunc(gl.ONE, gl.ONE); // additive
 gl.clearColor(0,0,0,1);
 // Controls
 const btnExplode = document.getElementById('btn-explode');
 const btnToggle = document.getElementById('btn-toggle');
 const btnReset = document.getElementById('btn-reset');
 btnExplode.addEventListener('click', explode);
 btnToggle.addEventListener('click', ()=>{
 paused = !paused;
 btnToggle.textContent = paused ? 'Resume' : 'Pause';
 });
 btnReset.addEventListener('click', ()=>resetParticles(PARTICLE_COUNT));
 window.addEventListener('keydown', (e)=>{
 if (e.code === 'Space') { paused = !paused; btnToggle.textContent = paused ? 'Resume' : 'Pause'; }
 if (e.key.toLowerCase() === 'e') explode();
 if (e.key.toLowerCase() === 'r') resetParticles(PARTICLE_COUNT);
 });
 window.addEventListener('resize', resize);
 window.addEventListener('pointerdown', explode);
 resize();
 // Animation
 function update(dt){
 // Update particles on CPU
 const decay = Math.pow(DRAG, dt*60);
 for (let i = 0; i < PARTICLE_COUNT; i++){
 // Life
 pLife[i] -= dt;
 if (pLife[i] <= 0) {
 respawn(i);
 continue;
 }
 // Velocity
 pVel[i*2+0] *= decay;
 pVel[i*2+1] = pVel[i*2+1]*decay - G*dt;
 // Position
 pPos[i*2+0] += pVel[i*2+0] * dt;
 pPos[i*2+1] += pVel[i*2+1] * dt;
 // If out of bounds (with margin), respawn
 const x = pPos[i*2+0], y = pPos[i*2+1];
 if (Math.abs(x) > WORLD_RADIUS*1.8 || Math.abs(y) > WORLD_RADIUS*1.8) {
 respawn(i);
 }
 }
 }
 function drawParticlesToFBO(){
 // Render current particles into trailTex FBO
 gl.bindFramebuffer(gl.FRAMEBUFFER, trailFbo);
 gl.viewport(0, 0, W, H);
 gl.clearColor(0,0,0,0);
 gl.clear(gl.COLOR_BUFFER_BIT);
 gl.useProgram(particleProg);
 // Attributes
 gl.bindBuffer(gl.ARRAY_BUFFER, bufPos);
 gl.enableVertexAttribArray(particleLoc.a_pos);
 gl.vertexAttribPointer(particleLoc.a_pos, 2, gl.FLOAT, false, 0, 0);
 gl.bindBuffer(gl.ARRAY_BUFFER, bufVel);
 gl.enableVertexAttribArray(particleLoc.a_vel);
 gl.vertexAttribPointer(particleLoc.a_vel, 2, gl.FLOAT, false, 0, 0);
 gl.bindBuffer(gl.ARRAY_BUFFER, bufSize);
 gl.enableVertexAttribArray(particleLoc.a_size);
 gl.vertexAttribPointer(particleLoc.a_size, 1, gl.FLOAT, false, 0, 0);
 gl.bindBuffer(gl.ARRAY_BUFFER, bufSeed);
 gl.enableVertexAttribArray(particleLoc.a_seed);
 gl.vertexAttribPointer(particleLoc.a_seed, 1, gl.FLOAT, false, 0, 0);
 // Uniforms
 gl.uniform2f(particleLoc.u_origin, origin.x, origin.y);
 gl.uniform2f(particleLoc.u_scale, worldScale.x, worldScale.y);
 gl.uniform1f(particleLoc.u_aspect, W / H);
 gl.uniform1f(particleLoc.u_time, time);
 // Update dynamic buffers
 gl.bindBuffer(gl.ARRAY_BUFFER, bufPos);
 gl.bufferSubData(gl.ARRAY_BUFFER, 0, pPos);
 gl.bindBuffer(gl.ARRAY_BUFFER, bufVel);
 gl.bufferSubData(gl.ARRAY_BUFFER, 0, pVel);
 gl.drawArrays(gl.POINTS, 0, PARTICLE_COUNT);
 // Cleanup
 gl.bindBuffer(gl.ARRAY_BUFFER, null);
 gl.useProgram(null);
 gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 }
 function compositeToScreen(){
 gl.useProgram(compositeProg);
 gl.bindBuffer(gl.ARRAY_BUFFER, fsQuad);
 gl.enableVertexAttribArray(compositeLoc.a_pos);
 gl.vertexAttribPointer(compositeLoc.a_pos, 2, gl.FLOAT, false, 0, 0);
 gl.activeTexture(gl.TEXTURE0);
 gl.bindTexture(gl.TEXTURE_2D, trailTex);
 gl.uniform1i(compositeLoc.u_prevTrail, 0);
 gl.activeTexture(gl.TEXTURE1);
 gl.bindTexture(gl.TEXTURE_2D, trailTex); // same target this frame
 gl.uniform1i(compositeLoc.u_curr, 1);
 gl.uniform1f(compositeLoc.u_decay, 0.965); // trail persistence
 gl.uniform2f(compositeLoc.u_resolution, W, H);
 gl.uniform1f(compositeLoc.u_time, time);
 gl.uniform1f(compositeLoc.u_shockStart, shockStart);
 gl.uniform1f(compositeLoc.u_shockDuration, shockDuration);
 gl.uniform1i(compositeLoc.u_starCount, STAR_COUNT);
 gl.uniform2fv(compositeLoc.u_starPos, starPos);
 gl.uniform1fv(compositeLoc.u_starPhase, starPhase);
 gl.uniform1fv(compositeLoc.u_starSize, starSize);
 gl.drawArrays(gl.TRIANGLES, 0, 3);
 gl.bindBuffer(gl.ARRAY_BUFFER, null);
 gl.useProgram(null);
 }
 function frame(t){
 const now = t * 0.001;
 const dt = Math.min(0.033, now - lastT || 0.016);
 lastT = now;
 if (!paused) {
 time += dt;
 update(dt);
 }
 // Draw particles to trail buffer
 drawParticlesToFBO();
 // Composite to screen
 gl.viewport(0, 0, W, H);
 gl.clearColor(0,0,0,1);
 gl.clear(gl.COLOR_BUFFER_BIT);
 compositeToScreen();
 requestAnimationFrame(frame);
 }
 requestAnimationFrame(frame);
 // Auto explode after a moment for dramatic entrance
 setTimeout(()=>explode(), 900);
})();
 </script>
</body>
</html>