Sand Simulation
Home
Snippets
Sand Simulation
HTML
CSS
JS
<canvas></canvas>
body{ margin:0; background:#020617; overflow:hidden; } canvas{ display:block; }
const canvas=document.querySelector("canvas"); const ctx=canvas.getContext("2d"); canvas.width=window.innerWidth; canvas.height=window.innerHeight; const particles=[]; canvas.addEventListener("click",(e)=>{ for(let i=0;i<50;i++){ particles.push({ x:e.clientX, y:e.clientY, vx:(Math.random()-0.5)*2, vy:Math.random()*2 }); } }); function animate(){ ctx.fillStyle="rgba(2,6,23,0.2)"; ctx.fillRect(0,0,canvas.width,canvas.height); particles.forEach(p=>{ p.vy+=0.1; p.x+=p.vx; p.y+=p.vy; ctx.fillStyle="#facc15"; ctx.fillRect(p.x,p.y,3,3); }); requestAnimationFrame(animate); } animate();
Ad #1
Ad #2
Scroll to Top