How to Code: Realistic Canvas Fireworks

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 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: codepen.io/chr...
Canvas Boilerplate: github.com/chr...

[@nileshmangnakar4792]

We are loving this series.. Please continue posting more awesome stuff

[@ChrisCourses]

On the way sir 🙏

[@qui-gon7586]

Wow, scrolling through KZbin and seeing one of my favourite programming youtubers is back! Your canvas videos are awesome and I'm excited for your next projects (maybe more games?)

[@ChrisCourses]

Five vids done-guess that means see you next year!!! I KID-welcome back, I'm glad you're excited for some more vids. I'm typically pretty inconsistent with posting, but going to keep riding this video wave for as long as I can 🙌 Will record the most basic version of a game tonight (enemies attack from outside of screen, you fend them off by shooting them). Should be good to keep incrementing the game skillset through that.

[@qui-gon7586]

@@ChrisCourses 😂😅

[@marcustulliuscicero9512]

Dayum boi, you're killing it lately! Keep it up!

[@shahbazali789]

Amazing video

[@christopher7540]

great stuff man. I learned a looot. thank you so much

[@komalmadaan4728]

Thank you for this tutorial 👍

[@Seven-rk6gn]

awesome sir, keep up the great tutorials

[@JasonKing1970]

Nice work man, thanks

[@gopinathkrm58]

Great video🔥🔥🔥🔥🔥

[@masakifukunishi492]

thank you!

[@phantuananh2163]

Great content as always ;)

[@kalebbridgemohan7203]

Great video! I always struggle with ring expansion. Definitely going to work on that ;)

[@ChrisCourses]

walk down the hallway and I got u zaddy 😩

[@mayaahmed]

Thanks. Simply superb.

[@gektorix]

Why are there so few hits? This is valuable knowledge. This world can no longer be saved.

[@Bernhard_Riemann]

Great video! I'm still waiting for a canvas game development tutorial, to improve my skills! :)

[@ChrisCourses]

Think once I do a tutorial on a pendulum motion controlled by mouse movement, should be able to knock out the first game tutorial 🎉

[@nahombinyam3759]

one in a million video 😍😍 ❤

[@ChrisCourses]

Thank you Nahom, one in a million comment!

[@sexystranger6730]

Thank you so much

[@maksimhristov3904]

Great and really useful video but I didn't understand why when you change the alpha from 1 to 0.05 (15.54) does the trail effect appears. Can somebody explain me. Thanks in advance!

[@ChrisCourses]

Basically, each iteration of the animation loop, you draw a semi-transparent background over the previous frame of the animation. If your background has 0.05 opacity, well, eventually, after 20 frames, your background opacity will be 1, meaning it completely covers the spot of the original drawing. Since you keep drawing over the original particles with this semi-transparent background, it creates a fade effect over time. Hopefully that makes a little more sense, can be hard to describe without a vid example.

[@akiraleva5496]

Can you teach how to code 3D particles colliding ?

[@7hawasian]

If yo see this, can you teach how to spawn a firework shooting out of your click in a random direction?

[@Snoo29293]

I don't really get why you made the angleIncrement variable, using i by it self would make the exact same effect,

[@devindersingh7155]

Everytime I watch something like this I feel dumb . Why I can’t do this myself.

[@technomaster8041]

Where you studied from.

[@ridhamsharma618]

My PC is dead x_x

[@zenith_tetris]

im gonna ignore the cursing but do not do it again or I unsubscribe chris

[@suwedo8677]

he's allowed to curse lmao