How to Code: Realistic Canvas Fireworks
Chris Courses Chris Courses
160K subscribers
22,792 views
0

 Published On Aug 21, 2020

A firework effect can be achieved by expanding particles outwards in a ring formation, adding randomness to that ring, then integrating deceleration, gravity, and friction. Fade the background to create a trail effect, and you have one badass explosion take place.

Recorded this super late last night, but still releasing for teh contentz—gonna have to deal with my tiredness on this one 😄🙃😄

Get access to over 50+ free and premium tutorials at https://chriscourses.com

📃Table of Contents
00:00 Project overview
00:42 Initial canvas setup
03:13 Add click event listener to populate particles array
06:58 Render particles on click
07:44 Add particle velocity for ring expansion effect
13:53 Add randomness to ring expansion
14:55 Create light trail effect
16:42 Add gravity and friction
19:31 Fade particles out over time and remove from canvas
23:24 Colorize particles 🎉
25:30 Speed-run / additional firework examples
27:58 Outro / Intro to chriscourses.com

🔗 Links
CodePen Example: https://codepen.io/chriscourses/pen/V...
Canvas Boilerplate: https://github.com/christopher4lis/ca...

show more

Share/Embed