Coding Challenge #27: Fireworks!

In this 4th of July themed coding challenge, I build an HTML5 canvas fireworks simulation from scratch using the p5.js JavaScript library. I also show how to use Processing to create 3D Fireworks. Code: https://thecodingtrain.com/challenges...

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/s...

🎥 Previous video:    • Coding Challenge #26: 3D Supershapes  
🎥 Next video:    • Coding Challenge #28: Metaballs  
🎥 All videos:    • Coding Challenges  

References:
🎇 PixelPyros: http://seb.ly/work/pixelpyros/
🎥 PeasyCam Website: http://mrfeinberg.com/peasycam/

Videos:
🔴 Livestream Archive:    • Coding Train Live Stream 48 - Computer Vis...  

Related Coding Challenges:
🚂 #78 Simple Particle System:    • Coding Challenge #78: Simple Particle System  

Timestamps:
00:00 Welcome to Another Coding Challenge!
00:35 Code! Create a Particle constructor
03:45 Launch the Particle from a Random position
04:12 Add some Gravity
05:29 Create a Firework constructor
07:19 🎶 This Dot! Never Forget the This Dot! 🎶
08:08 Randomize the Velocity
08:32 Figure out When the Particle goes Down
11:23 Make the Fireworks burst
18:56 Make the Fireworks fade out
20:47 Get rid of Particles when they're Done
22:46 Get rid of Fireworks when they're Done
24:30 Add a Trail and Color to Fireworks
27:51 Back to Processing, making it 3D!
29:83 Rotate the Scene with PeasyCam
32:13 Start Fireworks at a Random Z Location

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/pas...
🚩 Suggest Topics: https://github.com/CodingTrain/Sugges...
💡 GitHub: https://github.com/CodingTrain
💬 Discord:   / discord  
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter:   / thecodingtrain  
📸 Instagram:   / the.coding.train  

🎥 Coding Challenges:    • Coding Challenges  
🎥 Intro to Programming:    • Start learning here!  

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-o...

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecod...

#fireworks #natureofcode #oop #3d #forces #gravity #particlesystems #javascript #p5js #processing