중력 기반 입자 분수

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>색상 분수 파티클</title> <style> body { margin: 0; overflow: hidden; background-color: #0a0a1a; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } canvas { display: block; width: 100vw; height: 100vh; } .info { position: absolute; bottom: 20px; left: 20px; color: rgba(255,255,255,0.7); font-size: 14px; background: rgba(0,0,0,0.4); padding: 8px 16px; border-radius: 30px; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.2); pointer-events: none; letter-spacing: 0.5px; } </style> </head> <body> <div class="info">✨ 색상 분수 - 캔버스 하단 중앙에서 방출</div> <canvas id="fountainCanvas"></canvas> <script> (function() { const canvas = document.getElementById('fountainCanvas'); const ctx = canvas.getContext('2d'); // 파티클 배열 let particles = []; // 캔버스 크기 조정 (디스플레이 크기에 맞춤) function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } window.addEventListener('resize', resizeCanvas); resizeCanvas(); // 파티클 생성 함수 function createParticle() { // 하단 중앙에서 시작 const startX = canvas.width / 2; const startY = canvas.height - 5; // 바닥 약간 위 // 랜덤한 색상 (HSL 사용 - 채도/명도 높게) const hue = Math.random() * 360; const saturation = 80 + Math.random() * 20; // 80-100% const lightness = 55 + Math.random() * 20; // 55-75% const color = `hsl(${hue}, ${saturation}%, ${lightness}%)`; // 초기 속도: 위쪽으로 강하게, 좌우로 퍼짐 (분수 효과) const angle = (Math.random() - 0.5) * Math.PI * 0.7; // -63도 ~ 63도 (위쪽 중심) const speed = 8 + Math.random() * 7; // 8~15 px/frame const vx = Math.sin(angle) * speed; const vy = -Math.cos(angle) * speed; // 위로 (-y) // 크기 다양화 const size = 2 + Math.random() * 4; // 2~6 px // 수명 (프레임 단위) - 화면 밖으로 나가기 전에 자연스럽게 소멸하도록 const life = 120 + Math.random() * 80; // 120~200 프레임 const maxLife = life; // 중력 가속도 (약간의 변동으로 자연스러움) const gravity = 0.15 + Math.random() * 0.05; // 0.15~0.2 // 약간의 공기 저항 (감쇠) const damping = 0.985 + Math.random() * 0.01; // 0.985~0.995 particles.push({ x: startX, y: startY, vx: vx, vy: vy, size: size, color: color, life: life, maxLife: maxLife, gravity: gravity, damping: damping, // 약간의 초기 랜덤 오프셋으로 겹침 방지 offsetX: (Math.random() - 0.5) * 4, offsetY: (Math.random() - 0.5) * 4 }); } // 파티클 업데이트 function updateParticles() { for (let i = particles.length - 1; i >= 0; i--) { const p = particles[i]; // 수명 감소 p.life--; // 중력 적용 p.vy += p.gravity; // 공기 저항 (속도 감쇠) p.vx *= p.damping; p.vy *= p.damping; // 위치 업데이트 p.x += p.vx + p.offsetX * 0.1; // offset은 초기 위치에만 영향, 여기서는 미세하게 p.y += p.vy + p.offsetY * 0.1; // 화면 밖으로 나갔는지 확인 (모든 방향) const margin = 20; // 여유 const outOfBounds = p.x < -margin || p.x > canvas.width + margin || p.y < -margin || p.y > canvas.height + margin; // 수명이 다했거나 화면 밖이면 제거 if (p.life <= 0 || outOfBounds) { particles.splice(i, 1); continue; } // 알파 값 계산 (수명에 따라 페이드) const alpha = Math.min(1, p.life / 30); // 마지막 30프레임에서 페이드아웃 p.alpha = alpha; } } // 파티클 그리기 function drawParticles() { // 캔버스 클리어 (투명 배경 - CSS 배경색이 보이도록) ctx.clearRect(0, 0, canvas.width, canvas.height); // 각 파티클 그리기 for (const p of particles) { ctx.globalAlpha = p.alpha; ctx.fillStyle = p.color; ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fill(); // 약간의 글로우 효과 (겹쳐진 반투명 원) ctx.globalAlpha = p.alpha * 0.3; ctx.beginPath(); ctx.arc(p.x, p.y, p.size * 1.8, 0, Math.PI * 2); ctx.fill(); } // 글로벌 알파 리셋 ctx.globalAlpha = 1.0; } // 분수에서 파티클 생성 (프레임당 여러 개) let spawnCounter = 0; function spawnParticles() { // 프레임당 3~6개 생성 (분수 효과) const count = 3 + Math.floor(Math.random() * 4); // 3~6 for (let i = 0; i < count; i++) { createParticle(); } // 너무 많이 쌓이지 않도록 최대 개수 제한 (성능) if (particles.length > 1500) { particles.splice(0, particles.length - 1500); } } // 애니메이션 루프 function animate() { // 파티클 생성 spawnParticles(); // 업데이트 updateParticles(); // 그리기 drawParticles(); // 다음 프레임 요청 requestAnimationFrame(animate); } // 시작 animate(); // 초기 파티클 몇 개 미리 생성 (바로 효과 보이게) for (let i = 0; i < 20; i++) { createParticle(); } })(); </script> </body> </html>