Joyful Particles in Elm
summary
Library elm-particle for Elm generates SVG particle effects integrated with The Elm Architecture, demonstrated by building fireworks and confetti. Code creates bursts of ~100 sparks with random speeds (clamped 0–300 px/s), gravity ≈98 px/s², drag via a coefficient/density/area model, and lifetimes clustered around 1.5–2.0s using a normal distribution instead of uniform randomness. Views render rotating stretched ellipses, opacity fading linearly from white to color via HSLA fade, and single-color bursts by generating one hue per explosion. The result looks like real fireworks and performs in-browser.
AI-written summary · about
chapters (11)
- 0:00Introduction to particles
- 1:04Particle library basics
- 3:10Building the fireworks demo
- 5:37Adding gravity and drag
- 7:21Refining particle lifetimes
- 9:30Creating spherical fireworks
- 11:15Simulating streaking effects
- 13:25Color and fade-out animation
- 15:32Uniform color fireworks
- 16:57Randomizing explosion positions
- 18:02Final notes and Q&A
related talks
11mFrom Zero to Particles: Animated particles Workshop
09mRich Animation
33mMake it Rain: Building particle systems in SwiftUI
34mBringing the Fun to Graphics Programming
28m"A 3D Rendering Engine for Elm"
25m"Building Highly Performant Animations in Elm"
32mEnhance your Flutter painting skills
45mNatural physics simulations and canvas hackery