🎬 Particle VFX
Create Hollywood-style visual effects with physically-based particles. Simulate fire with temperature-driven colour (blackbody), metallic sparks with cooling curves, shockwave debris, and magic trail effects.
About this simulation
This is a real-time particle system that recreates Hollywood-style visual effects on an HTML5 canvas. Each frame spawns and integrates hundreds of independent particles whose velocity, gravity and lifetime evolve under simple physics. Hot effects use a blackbody colour model, mapping temperature to colour as glowing matter cools, while a cheap hash-based Perlin-like noise field nudges particles to mimic turbulent air. Five presets — fire, sparks, explosion, magic and debris — show how a handful of parameters produce very different looks.
🔬 What it shows
A 2D particle engine driven by Euler integration. Sparks cool exponentially as T(t)=T₀·e^(−t/τ) and are coloured by temperature; fire particles rise, lose heat and are tinted by a blackbody ramp (≈800K red to 1200K white); debris falls under gravity with rotation, and magic trails cycle hue. Turbulence comes from a sampled noise field, and additive ("lighter") blending creates the glow.
🎮 How to use
Pick an effect with the five buttons (Fire, Sparks, Explode, Magic, Debris). Move the mouse over the canvas to position the emitter; click while in Explode mode to detonate a 150-particle burst. Three sliders control Emission Rate (10–300/s), Gravity (0–30) and Turbulence (0–3). Live readouts show active particle count, FPS and the current effect.
💡 Did you know?
The orange glow of fire and sparks is genuine blackbody radiation: any hot object emits light whose colour depends only on its temperature, shifting from dull red near 800K through orange and yellow to white above 1200K. The same physics colours stars, with our Sun's surface near 5800K.
Frequently asked questions
What is a particle system?
A particle system models a fuzzy phenomenon — fire, smoke, sparks, explosions — as a large collection of tiny independent points. Each particle has its own position, velocity, lifetime and colour, and is updated every frame by simple rules. Rendering many of them together produces effects that would be hard to describe with solid geometry. This technique has been a staple of film and game VFX since the early 1980s.
How does the blackbody fire colour work?
Fire particles carry a temperature in kelvin and are coloured by a blackbody-inspired ramp. Around 800K the particle appears deep red; as the value climbs towards 1200K it brightens through orange and yellow to near-white. Each fire particle also cools over its lifetime, so it visibly fades from white-hot at the base to red at the tips, just like a real flame.
What do the three sliders do?
Emission Rate sets how many particles are spawned per second (10–300), controlling the density of the effect. Gravity (0–30) pulls sparks and debris downward, so higher values make them fall faster. Turbulence (0–3) scales the noise field that jitters particle velocities, adding chaotic, wind-blown motion to fire and magic trails.
Is the physics scientifically accurate?
It is physically inspired rather than exact. The exponential cooling T(t)=T₀·e^(−t/τ) and the temperature-to-colour mapping reflect real thermodynamics and blackbody radiation, and gravity behaves plausibly. However, values are tuned for a good visual result, not real units, and the turbulence uses a fast hash function rather than a true fluid solver, so it is an artistic approximation of real combustion.
Why is additive blending used for the glow?
The simulation draws particles with a "lighter" composite mode, meaning overlapping particle colours are added together rather than painted over one another. Where many bright particles stack up, the colours sum towards white, producing the intense hot core seen in real flames and explosions. A faint translucent fill each frame leaves short fading trails, reinforcing the sense of motion and afterglow.
Particle system VFX with fire, sparks and visual effects algorithms used in film and games.
3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install