| 1 | (function(){ |
| 2 | window.HPX = window.HPX || {}; |
| 3 | window.HPX['gradient-blob'] = function(el){ |
| 4 | const U = window.HPX._u; |
| 5 | const k = U.canvas(el), ctx = k.ctx; |
| 6 | const pal = U.palette(el); |
| 7 | const blobs = Array.from({length:4}, (_,i) => ({ |
| 8 | x: U.rand(0,1), y: U.rand(0,1), |
| 9 | vx: U.rand(-0.08,0.08), vy: U.rand(-0.08,0.08), |
| 10 | r: U.rand(180,320), |
| 11 | c: pal[i%pal.length] |
| 12 | })); |
| 13 | const hex2rgb = (h) => { |
| 14 | const m = h.replace('#','').match(/.{2}/g); |
| 15 | if (!m) return [124,92,255]; |
| 16 | return m.map(x=>parseInt(x,16)); |
| 17 | }; |
| 18 | const stop = U.loop((t) => { |
| 19 | ctx.fillStyle = 'rgba(10,12,22,0.2)'; |
| 20 | ctx.fillRect(0,0,k.w,k.h); |
| 21 | ctx.globalCompositeOperation = 'lighter'; |
| 22 | for (const b of blobs){ |
| 23 | b.x += b.vx*0.01; b.y += b.vy*0.01; |
| 24 | if (b.x<0||b.x>1) b.vx*=-1; |
| 25 | if (b.y<0||b.y>1) b.vy*=-1; |
| 26 | const px = b.x*k.w, py = b.y*k.h; |
| 27 | const r = b.r + Math.sin(t*0.8 + b.x*6)*30; |
| 28 | const [R,G,B] = hex2rgb(b.c); |
| 29 | const grad = ctx.createRadialGradient(px,py,0,px,py,r); |
| 30 | grad.addColorStop(0, `rgba(${R},${G},${B},0.55)`); |
| 31 | grad.addColorStop(1, `rgba(${R},${G},${B},0)`); |
| 32 | ctx.fillStyle = grad; |
| 33 | ctx.beginPath(); ctx.arc(px,py,r,0,Math.PI*2); ctx.fill(); |
| 34 | } |
| 35 | ctx.globalCompositeOperation = 'source-over'; |
| 36 | }); |
| 37 | return { stop(){ stop(); k.destroy(); } }; |
| 38 | }; |
| 39 | })(); |
| 40 |